import * as React from "react";
import { cn } from "@/lib/utils";
import { Button as ShadButton } from "@/components/ui/button";
import { Card as ShadCard } from "@/components/ui/card";
import { Badge as ShadBadge } from "@/components/ui/badge";
import { Input as ShadInput } from "@/components/ui/input";

/**
 * Lapisan kompatibilitas di atas shadcn/ui.
 *
 * File ini dulu berisi markup Tailwind manual untuk Card/Button/Badge/dst.
 * Sekarang setiap komponen adalah pembungkus tipis di atas komponen shadcn/ui
 * asli (lihat `components/ui/*`), tapi nama & prop-nya sengaja dipertahankan
 * sama seperti sebelumnya (mis. `variant="danger"`, `tone="green"`) supaya
 * seluruh halaman yang sudah memakai `import { ... } from "../components/ui"`
 * tetap jalan tanpa perlu diubah satu per satu.
 */

export function Card({
    className = "",
    ...p
}: React.HTMLAttributes<HTMLDivElement>) {
    return (
        <ShadCard
            className={cn(
                "gap-0 rounded-2xl border-slate-200/80 py-0 shadow-[0_8px_30px_rgba(15,23,42,.04)]",
                className,
            )}
            {...p}
        />
    );
}

const buttonVariantMap = {
    default: "default",
    outline: "outline",
    ghost: "ghost",
    danger: "destructive",
} as const;

const buttonSizeMap = {
    sm: "sm",
    md: "default",
    lg: "lg",
    icon: "icon",
} as const;

export function Button({
    variant = "default",
    size = "md",
    className = "",
    ...p
}: React.ButtonHTMLAttributes<HTMLButtonElement> & {
    variant?: "default" | "outline" | "ghost" | "danger";
    size?: "sm" | "md" | "lg" | "icon";
}) {
    return (
        <ShadButton
            variant={buttonVariantMap[variant]}
            size={buttonSizeMap[size]}
            className={cn(
                "rounded-xl font-semibold",
                variant === "default" &&
                    "bg-[#18b89a] text-white hover:bg-[#119e85]",
                className,
            )}
            {...p}
        />
    );
}

const toneClass: Record<string, string> = {
    green: "border-transparent bg-emerald-50 text-emerald-700",
    blue: "border-transparent bg-blue-50 text-blue-700",
    red: "border-transparent bg-rose-50 text-rose-700",
    orange: "border-transparent bg-orange-50 text-orange-700",
    purple: "border-transparent bg-violet-50 text-violet-700",
    slate: "border-transparent bg-slate-100 text-slate-600",
};

export function Badge({
    children,
    tone = "slate",
    className = "",
}: {
    children: React.ReactNode;
    tone?: string;
    className?: string;
}) {
    return (
        <ShadBadge
            variant="outline"
            className={cn(
                "rounded-full px-2.5 py-1 text-[11px] font-bold",
                toneClass[tone] || toneClass.slate,
                className,
            )}
        >
            {children}
        </ShadBadge>
    );
}

export function Input({
    className = "",
    ...p
}: React.InputHTMLAttributes<HTMLInputElement>) {
    return (
        <ShadInput
            className={cn(
                "h-10 rounded-xl focus-visible:border-[#18b89a] focus-visible:ring-[#18b89a]/10",
                className,
            )}
            {...p}
        />
    );
}

/**
 * Select bergaya shadcn/ui untuk kasus native <select> + <option> (dipakai
 * di banyak halaman dengan children `<option>` langsung). Untuk dropdown
 * yang butuh styling penuh Radix, pakai `Select` dari
 * `components/ui/select` langsung (lihat contoh di `pages/EntityPage.tsx`).
 */
export function Select({
    className = "",
    ...p
}: React.SelectHTMLAttributes<HTMLSelectElement>) {
    return (
        <select
            className={cn(
                "border-input flex h-10 w-full min-w-0 rounded-xl border bg-transparent px-3 text-sm shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-[#18b89a] focus-visible:ring-[3px] focus-visible:ring-[#18b89a]/10 disabled:pointer-events-none disabled:opacity-50",
                className,
            )}
            {...p}
        />
    );
}

export function PageHeader({
    title,
    description,
    action,
}: {
    title: string;
    description?: string;
    action?: React.ReactNode;
}) {
    return (
        <div className="mb-6 flex flex-wrap items-end justify-between gap-4">
            <div>
                <h1 className="text-2xl font-black tracking-tight text-slate-900">
                    {title}
                </h1>
                {description && (
                    <p className="mt-1 text-sm text-slate-500">{description}</p>
                )}
            </div>
            {action}
        </div>
    );
}

export function Empty({
    title = "Belum ada data",
    description = "Data akan tampil di sini.",
}: {
    title?: string;
    description?: string;
}) {
    return (
        <div className="py-16 text-center">
            <div className="text-sm font-bold text-slate-700">{title}</div>
            <div className="mt-1 text-xs text-slate-400">{description}</div>
        </div>
    );
}