import { ReactNode } from "react";
import { faNum } from "@/lib/jalali";

export const inputCls =
  "w-full rounded-xl border border-emerald-900/15 bg-white/90 px-3.5 py-2.5 text-sm text-emerald-950 placeholder:text-emerald-900/35 outline-none transition focus:border-emerald-600 focus:ring-2 focus:ring-emerald-500/25";
export const selectCls = inputCls + " appearance-none";

export function Card({ children, className = "" }: { children: ReactNode; className?: string }) {
  return (
    <div className={`rounded-2xl border border-emerald-900/10 bg-white/80 shadow-[0_2px_20px_-8px_rgba(6,78,59,0.15)] backdrop-blur ${className}`}>
      {children}
    </div>
  );
}

export function PageTitle({ title, subtitle, icon }: { title: string; subtitle?: string; icon?: ReactNode }) {
  return (
    <div className="mb-6 flex items-center gap-3">
      {icon && <div className="grid size-12 place-items-center rounded-2xl bg-gradient-to-br from-emerald-700 to-emerald-900 text-amber-300 shadow-lg shadow-emerald-900/20">{icon}</div>}
      <div>
        <h1 className="text-2xl font-black text-emerald-950">{title}</h1>
        {subtitle && <p className="mt-0.5 text-sm text-emerald-800/70">{subtitle}</p>}
      </div>
    </div>
  );
}

export function SectionTitle({ children, action }: { children: ReactNode; action?: ReactNode }) {
  return (
    <div className="mb-3 mt-8 flex items-center justify-between gap-3">
      <h2 className="flex items-center gap-2 text-lg font-extrabold text-emerald-950">
        <span className="inline-block h-5 w-1.5 rounded-full bg-gradient-to-b from-amber-400 to-amber-600" />
        {children}
      </h2>
      {action}
    </div>
  );
}

export function Badge({ children, tone = "green" }: { children: ReactNode; tone?: "green" | "amber" | "red" | "gray" | "blue" }) {
  const tones = {
    green: "bg-emerald-100 text-emerald-800 border-emerald-200",
    amber: "bg-amber-100 text-amber-800 border-amber-200",
    red: "bg-red-100 text-red-700 border-red-200",
    gray: "bg-slate-100 text-slate-600 border-slate-200",
    blue: "bg-sky-100 text-sky-800 border-sky-200",
  };
  return <span className={`inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-xs font-bold ${tones[tone]}`}>{children}</span>;
}

export function Th({ children, className = "" }: { children?: ReactNode; className?: string }) {
  return <th className={`whitespace-nowrap px-3 py-2.5 text-right text-xs font-extrabold text-emerald-900/70 ${className}`}>{children}</th>;
}
export function Td({ children, className = "" }: { children?: ReactNode; className?: string }) {
  return <td className={`px-3 py-2.5 text-sm text-emerald-950/90 ${className}`}>{children}</td>;
}

export function Table({ children }: { children: ReactNode }) {
  return (
    <div className="overflow-x-auto rounded-xl border border-emerald-900/10">
      <table className="w-full min-w-[560px] border-collapse [&_tbody_tr:nth-child(odd)]:bg-emerald-50/40 [&_thead]:bg-emerald-900/5">
        {children}
      </table>
    </div>
  );
}

export function Empty({ text }: { text: string }) {
  return <div className="rounded-xl border border-dashed border-emerald-900/20 bg-emerald-50/40 px-4 py-8 text-center text-sm text-emerald-900/50">{text}</div>;
}

export function StatCard({ label, value, icon, tone = "green" }: { label: string; value: number | string; icon: ReactNode; tone?: "green" | "amber" | "blue" | "rose" }) {
  const tones = {
    green: "from-emerald-600 to-emerald-800",
    amber: "from-amber-500 to-amber-700",
    blue: "from-sky-500 to-sky-700",
    rose: "from-rose-500 to-rose-700",
  };
  return (
    <Card className="flex items-center gap-4 p-5">
      <div className={`grid size-12 shrink-0 place-items-center rounded-xl bg-gradient-to-br text-white shadow-md ${tones[tone]}`}>{icon}</div>
      <div>
        <div className="text-2xl font-black text-emerald-950">{faNum(value)}</div>
        <div className="text-xs font-bold text-emerald-800/60">{label}</div>
      </div>
    </Card>
  );
}

export function Field({ label, children, hint }: { label: string; children: ReactNode; hint?: string }) {
  return (
    <label className="block">
      <span className="mb-1.5 block text-xs font-extrabold text-emerald-900/80">{label}</span>
      {children}
      {hint && <span className="mt-1 block text-[11px] text-emerald-800/50">{hint}</span>}
    </label>
  );
}

export function DiffBadge({ d }: { d: number }) {
  return d <= 1 ? <Badge tone="green">آسان</Badge> : d === 2 ? <Badge tone="amber">متوسط</Badge> : <Badge tone="red">سخت</Badge>;
}

export function TypeBadge({ t }: { t: string }) {
  const map: Record<string, [string, "blue" | "amber" | "green" | "gray"]> = {
    mcq: ["تستی", "blue"], tf: ["صحیح/غلط", "amber"], short: ["کوتاه‌پاسخ", "green"], desc: ["تشریحی", "gray"],
  };
  const [label, tone] = map[t] ?? [t, "gray"];
  return <Badge tone={tone}>{label}</Badge>;
}