import type { ReactNode } from "react";

export function PageTitle({ title, sub, action }: { title: string; sub?: string; action?: ReactNode }) {
  return (
    <div className="mb-7 flex flex-wrap items-end justify-between gap-4">
      <div>
        <h1 className="font-[family-name:var(--font-display)] text-[1.7rem] font-semibold text-thi">
          {title}
        </h1>
        {sub ? <p className="mt-1 text-[0.9rem] text-tmid">{sub}</p> : null}
      </div>
      {action}
    </div>
  );
}

export function StatCard({
  label,
  value,
  hint,
  tone = "default",
}: {
  label: string;
  value: ReactNode;
  hint?: string;
  tone?: "default" | "ok" | "warn";
}) {
  return (
    <div className="rounded-xl border border-white/10 bg-ink-2 p-5">
      <p className="font-[family-name:var(--font-mono)] text-[0.68rem] uppercase tracking-[0.14em] text-tlo">
        {label}
      </p>
      <p
        className={`mt-2 font-[family-name:var(--font-mono)] text-[1.7rem] font-medium leading-tight tnum ${
          tone === "ok" ? "text-azure-bright" : tone === "warn" ? "text-warn" : "text-thi"
        }`}
      >
        {value}
      </p>
      {hint ? <p className="mt-1.5 text-[0.78rem] text-tlo">{hint}</p> : null}
    </div>
  );
}

const badgeTones: Record<string, string> = {
  active: "border-azure/40 bg-azure/10 text-azure-bright",
  provisioning: "border-ice/40 bg-ice/10 text-ice",
  suspended: "border-[#D96B4A]/40 bg-[#D96B4A]/10 text-[#E89B84]",
  open: "border-warn/40 bg-warn/10 text-warn",
  answered: "border-azure/40 bg-azure/10 text-azure-bright",
  closed: "border-white/15 bg-white/5 text-tlo",
  paid: "border-azure/40 bg-azure/10 text-azure-bright",
  due: "border-warn/40 bg-warn/10 text-warn",
  overdue: "border-[#D96B4A]/40 bg-[#D96B4A]/10 text-[#E89B84]",
  new: "border-warn/40 bg-warn/10 text-warn",
  handled: "border-white/15 bg-white/5 text-tlo",
  low: "border-white/15 bg-white/5 text-tlo",
  normal: "border-white/15 bg-white/5 text-tmid",
  high: "border-warn/40 bg-warn/10 text-warn",
  critical: "border-[#D96B4A]/40 bg-[#D96B4A]/10 text-[#E89B84]",
};

export function Badge({ value }: { value: string }) {
  return (
    <span
      className={`inline-block rounded-full border px-2.5 py-0.5 font-[family-name:var(--font-mono)] text-[0.68rem] uppercase tracking-[0.08em] ${
        badgeTones[value] ?? "border-white/15 text-tmid"
      }`}
    >
      {value}
    </span>
  );
}

export function Card({ children, className = "" }: { children: ReactNode; className?: string }) {
  return (
    <div className={`overflow-hidden rounded-xl border border-white/10 bg-ink-2 ${className}`}>
      {children}
    </div>
  );
}

export function TableShell({ head, children }: { head: string[]; children: ReactNode }) {
  return (
    <div className="thin-scroll overflow-x-auto">
      <table className="w-full min-w-[640px] text-left text-[0.9rem]">
        <thead>
          <tr className="border-b border-white/10">
            {head.map((h) => (
              <th
                key={h}
                className="px-5 py-3.5 font-[family-name:var(--font-mono)] text-[0.68rem] font-medium uppercase tracking-[0.14em] text-tlo"
              >
                {h}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>{children}</tbody>
      </table>
    </div>
  );
}

export function Empty({ text }: { text: string }) {
  return (
    <div className="grid place-items-center px-6 py-16 text-center">
      <i
        className="mb-4 block h-3.5 w-3.5 rotate-180 bg-ice/60 [clip-path:polygon(50%_0,100%_100%,0_100%)]"
        aria-hidden
      />
      <p className="text-[0.92rem] text-tlo">{text}</p>
    </div>
  );
}

export const fmtDate = (iso: string) =>
  new Date(iso).toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" });

export const fmtSar = (n: number) =>
  `SAR ${n.toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 2 })}`;