import Link from "next/link";

export function AdminPageHeader({
  eyebrow,
  title,
  description,
  action,
}: {
  eyebrow: string;
  title: string;
  description: string;
  action?: React.ReactNode;
}) {
  return (
    <header className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
      <div>
        <div className="inline-flex items-center space-x-2 px-3 py-1 bg-white rounded-full border border-slate-200/90 shadow-xs mb-2">
          <span className="w-2 h-2 rounded-full bg-[#1D4ED8] animate-pulse"></span>
          <span className="text-[10px] font-extrabold uppercase tracking-wider text-[#1D4ED8]">
            {eyebrow}
          </span>
        </div>
        <h1 className="text-2xl sm:text-3xl font-extrabold tracking-tight text-[#0D1B2A]">
          {title}
        </h1>
        <p className="mt-1.5 max-w-2xl text-xs sm:text-sm text-slate-500 leading-relaxed">
          {description}
        </p>
      </div>
      {action && <div className="shrink-0">{action}</div>}
    </header>
  );
}

export function FilterBar({
  children,
  resetHref,
}: {
  children: React.ReactNode;
  resetHref: string;
}) {
  return (
    <form className="mt-6 flex flex-wrap items-center gap-2.5 rounded-2xl border border-slate-200/80 bg-white p-3.5 shadow-xs">
      {children}
      <button
        type="submit"
        className="h-10 rounded-xl bg-[#1D4ED8] px-4 text-xs font-semibold text-white shadow-xs transition hover:bg-[#1e40af] hover:-translate-y-0.5 active:translate-y-0"
      >
        Apply filters
      </button>
      <Link
        href={resetHref}
        className="flex h-10 items-center rounded-xl border border-slate-200 bg-white px-3.5 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 hover:text-slate-900"
      >
        Reset
      </Link>
    </form>
  );
}

export function SearchField({
  defaultValue,
  placeholder,
}: {
  defaultValue?: string;
  placeholder: string;
}) {
  return (
    <label className="relative min-w-[13rem] flex-1 sm:max-w-[18rem]">
      <span className="sr-only">Search</span>
      <span className="material-symbols-outlined pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[18px] text-slate-400">
        search
      </span>
      <input
        type="search"
        name="search"
        defaultValue={defaultValue}
        placeholder={placeholder}
        className="h-10 w-full rounded-xl border border-slate-200/90 bg-slate-50/60 pl-10 pr-3 text-xs font-medium text-slate-900 placeholder:text-slate-400 outline-none transition focus:border-blue-600 focus:bg-white focus:ring-2 focus:ring-blue-600/20"
      />
    </label>
  );
}

export function SelectFilter({
  name,
  label,
  value,
  options,
}: {
  name: string;
  label: string;
  value?: string;
  options: Array<{ value: string; label: string }>;
}) {
  return (
    <label className="min-w-[8.5rem]">
      <span className="sr-only">{label}</span>
      <select
        name={name}
        defaultValue={value || "all"}
        className="h-10 w-full rounded-xl border border-slate-200/90 bg-slate-50/60 px-3 text-xs font-semibold text-slate-700 outline-none transition focus:border-blue-600 focus:bg-white focus:ring-2 focus:ring-blue-600/20"
      >
        {options.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
    </label>
  );
}

export function TablePanel({
  children,
  count,
  label,
}: {
  children: React.ReactNode;
  count: number;
  label: string;
}) {
  return (
    <section className="mt-5 flex min-h-[24rem] flex-1 flex-col overflow-hidden rounded-3xl border border-slate-200/80 bg-white shadow-xs">
      <div className="flex shrink-0 items-center justify-between border-b border-slate-100 px-6 py-4">
        <p className="text-xs font-bold text-slate-600">
          <span className="text-[#0D1B2A] font-extrabold">{count}</span> {label}
        </p>
        <div className="flex items-center gap-1.5 text-[10px] font-extrabold uppercase tracking-wider text-slate-400">
          <span className="h-1.5 w-1.5 rounded-full bg-emerald-500 animate-pulse" />
          Live Database
        </div>
      </div>
      <div className="min-h-0 flex-1 overflow-x-auto">{children}</div>
    </section>
  );
}

export function EmptyTableState({
  icon,
  title,
  description,
}: {
  icon: string;
  title: string;
  description: string;
}) {
  return (
    <div className="grid min-h-[20rem] place-items-center px-6 py-12 text-center">
      <div>
        <span className="mx-auto grid h-14 w-14 place-items-center rounded-2xl bg-slate-100 text-slate-500">
          <span className="material-symbols-outlined text-[28px]">{icon}</span>
        </span>
        <h2 className="mt-4 text-base font-extrabold text-[#0D1B2A] tracking-tight">{title}</h2>
        <p className="mx-auto mt-1.5 max-w-sm text-xs leading-relaxed text-slate-500">{description}</p>
      </div>
    </div>
  );
}

const statusStyles: Record<string, string> = {
  active: "bg-emerald-50 text-emerald-700 border-emerald-200/80",
  approved: "bg-emerald-50 text-emerald-700 border-emerald-200/80",
  confirmed: "bg-emerald-50 text-emerald-700 border-emerald-200/80",
  paid: "bg-emerald-50 text-emerald-700 border-emerald-200/80",
  scheduled: "bg-blue-50 text-blue-700 border-blue-200/80",
  upcoming: "bg-blue-50 text-blue-700 border-blue-200/80",
  full: "bg-amber-50 text-amber-700 border-amber-200/80",
  pending: "bg-amber-50 text-amber-700 border-amber-200/80",
  draft: "bg-slate-100 text-slate-600 border-slate-200/80",
  inactive: "bg-slate-100 text-slate-600 border-slate-200/80",
  cancelled: "bg-rose-50 text-rose-700 border-rose-200/80",
  rejected: "bg-rose-50 text-rose-700 border-rose-200/80",
  failed: "bg-rose-50 text-rose-700 border-rose-200/80",
  expired: "bg-rose-50 text-rose-700 border-rose-200/80",
  refunded: "bg-slate-100 text-slate-600 border-slate-200/80",
  "partially-refunded": "bg-slate-100 text-slate-600 border-slate-200/80",
  "refund-required": "bg-amber-50 text-amber-700 border-amber-200/80",
  waitlisted: "bg-purple-50 text-purple-700 border-purple-200/80",
  "not-required": "bg-slate-100 text-slate-600 border-slate-200/80",
  "not-submitted": "bg-slate-100 text-slate-600 border-slate-200/80",
};

export function StatusBadge({ value }: { value: string }) {
  const normalized = value.replaceAll("_", "-");
  return (
    <span
      className={`inline-flex items-center gap-1 rounded-full border px-3 py-1 text-[10px] font-semibold uppercase tracking-wider ${
        statusStyles[normalized] || "bg-slate-100 text-slate-600 border-slate-200/80"
      }`}
    >
      {normalized.replaceAll("-", " ")}
    </span>
  );
}

export function MetricCard({
  label,
  value,
  note,
  icon,
  tone,
}: {
  label: string;
  value: number;
  note: string;
  icon: string;
  tone: "orange" | "blue" | "green" | "sand";
}) {
  const tones = {
    orange: "bg-orange-50 text-[#F97316]",
    blue: "bg-blue-50 text-[#1D4ED8]",
    green: "bg-emerald-50 text-emerald-600",
    sand: "bg-slate-100 text-slate-700",
  };

  return (
    <article className="flex min-w-0 items-center gap-4 rounded-2xl border border-slate-200/80 bg-white p-4 shadow-xs transition hover:shadow-md hover:border-slate-300">
      <span className={`grid h-12 w-12 shrink-0 place-items-center rounded-2xl ${tones[tone]}`}>
        <span className="material-symbols-outlined text-[24px]">{icon}</span>
      </span>
      <div className="min-w-0 flex-1">
        <p className="truncate text-[10px] font-extrabold uppercase tracking-wider text-slate-400">{label}</p>
        <div className="mt-0.5 flex items-baseline gap-2">
          <strong className="text-2xl font-extrabold tracking-tight text-[#0D1B2A]">
            {value.toLocaleString("en-AU")}
          </strong>
          <span className="truncate text-[10px] font-medium text-slate-400">{note}</span>
        </div>
      </div>
    </article>
  );
}

export function CompactActionLink({
  href,
  children,
}: {
  href: string;
  children: React.ReactNode;
}) {
  return (
    <Link
      href={href}
      className="inline-flex h-10 items-center gap-2 rounded-xl bg-[#1D4ED8] px-4 text-xs font-semibold text-white shadow-xs transition hover:-translate-y-0.5 hover:bg-[#1e40af]"
    >
      {children}
      <span className="material-symbols-outlined text-[17px]">arrow_forward</span>
    </Link>
  );
}