import type { ReactNode } from "react";

export function PageHead({ title, children, sub }: { title: string; children?: ReactNode; sub?: string }) {
  return (
    <div className="flex flex-wrap items-end justify-between gap-4 mb-8">
      <div><h1 className="font-display text-[38px] leading-none">{title}</h1>{sub && <p className="text-stone mt-2 text-[14px] max-w-[70ch]">{sub}</p>}</div>
      <div className="flex gap-3 items-center flex-wrap">{children}</div>
    </div>
  );
}
export function Card({ title, children, className = "", action }: { title?: string; children: ReactNode; className?: string; action?: ReactNode }) {
  return (
    <section className={`bg-paper border border-sand p-5 ${className}`}>
      {(title || action) && <div className="flex justify-between items-center mb-4"><h2 className="font-display text-[22px]">{title}</h2>{action}</div>}
      {children}
    </section>
  );
}
export function Stat({ label, value, sub, delta, hint }: { label: string; value: string; sub?: string; delta?: number | null; hint?: string }) {
  return (
    <div className="bg-paper border border-sand p-4" title={hint}>
      <p className="text-[13px] text-stone">{label}</p>
      <p className="font-display text-[30px] leading-tight mt-1">{value}</p>
      {delta != null && <p className={`text-[12px] ${delta >= 0 ? "text-[#2F6B3F]" : "text-rose"}`}>{delta >= 0 ? "▲" : "▼"} {Math.abs(delta).toFixed(0)}% vs previous period</p>}
      {sub && <p className="text-[12px] text-stone mt-0.5">{sub}</p>}
    </div>
  );
}
export function Badge({ children, tone = "neutral" }: { children: ReactNode; tone?: "neutral" | "good" | "warn" | "bad" | "info" }) {
  const c = { neutral: "bg-linen text-ink", good: "bg-[#E4EFE6] text-[#245233]", warn: "bg-[#F6EBD2] text-[#7A5A12]", bad: "bg-[#F4DDD8] text-rose", info: "bg-[#E1E9F2] text-[#2B4A6B]" }[tone];
  return <span className={`inline-block px-2 py-0.5 text-[12px] ${c}`}>{children}</span>;
}
export function Table({ head, children, empty }: { head: string[]; children: ReactNode; empty?: string }) {
  return (
    <div className="overflow-x-auto">
      <table className="w-full text-[14px]">
        <thead><tr className="text-left text-stone border-b border-sand">{head.map((h, i) => <th key={`${h}-${i}`} className="py-2 pr-4 font-normal whitespace-nowrap">{h}</th>)}</tr></thead>
        <tbody className="[&_td]:py-2.5 [&_td]:pr-4 [&_tr]:border-b [&_tr]:border-sand/60 align-top">{children}</tbody>
      </table>
      {empty && <p className="text-stone py-6 text-center text-[14px]">{empty}</p>}
    </div>
  );
}
export const input = "w-full h-10 px-3 bg-paper border border-sand focus:border-ink focus:outline-none text-[14px]";
export const area = "w-full px-3 py-2 bg-paper border border-sand focus:border-ink focus:outline-none text-[14px] min-h-[90px]";
export const btn = "inline-flex items-center justify-center h-10 px-4 text-[13px] border border-ink bg-ink text-paper hover:bg-paper hover:text-ink transition-colors disabled:opacity-40";
export const btnGhost = "inline-flex items-center justify-center h-10 px-4 text-[13px] border border-ink hover:bg-ink hover:text-paper transition-colors";
export function L({ label, children, hint, className = "" }: { label: string; children: ReactNode; hint?: string; className?: string }) {
  return <label className={`block ${className}`}><span className="block text-[13px] text-stone mb-1">{label}</span>{children}{hint && <span className="block text-[12px] text-stone mt-1">{hint}</span>}</label>;
}