// Shared backend UI kit. These primitives are theme-aware (they lean on the
// --be-* / .be-* tokens in globals.css) so admin + organizer pages compose them
// instead of re-hand-rolling neutral-*/indigo-* class strings. Server-safe —
// only theme-toggle.tsx is a client component.

import Link from "next/link";
import type { LucideIcon } from "lucide-react";

function cx(...parts: Array<string | false | null | undefined>) {
  return parts.filter(Boolean).join(" ");
}

/* --- Page header -------------------------------------------------------- */
export function PageHeader({
  icon: Icon,
  title,
  description,
  actions,
}: {
  icon?: LucideIcon;
  title: string;
  description?: string;
  actions?: React.ReactNode;
}) {
  return (
    <div className="flex flex-wrap items-start justify-between gap-4">
      <div className="flex items-start gap-3">
        {Icon && (
          <span className="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-brand-green-wash text-brand-green-h">
            <Icon className="h-5 w-5" />
          </span>
        )}
        <div>
          <h1 className="text-2xl font-semibold tracking-tight text-be-text">{title}</h1>
          {description && <p className="mt-0.5 text-sm text-be-muted">{description}</p>}
        </div>
      </div>
      {actions && <div className="flex items-center gap-2">{actions}</div>}
    </div>
  );
}

/* --- Card --------------------------------------------------------------- */
export function Card({
  className,
  children,
}: {
  className?: string;
  children: React.ReactNode;
}) {
  return <div className={cx("be-card p-5", className)}>{children}</div>;
}

/* --- Stat card ---------------------------------------------------------- */
export function StatCard({
  icon: Icon,
  label,
  value,
  hint,
  accent = "green",
}: {
  icon?: LucideIcon;
  label: string;
  value: string;
  hint?: string;
  accent?: "green" | "gold" | "orange";
}) {
  const ring =
    accent === "gold"
      ? "bg-[color:var(--brand-gold)]/15 text-brand-gold-h"
      : accent === "orange"
      ? "bg-[color:var(--brand-orange)]/15 text-brand-orange"
      : "bg-brand-green-wash text-brand-green-h";
  return (
    <div className="be-card p-4">
      <div className="flex items-center justify-between gap-2">
        <p className="text-xs font-medium text-be-muted">{label}</p>
        {Icon && (
          <span className={cx("grid h-8 w-8 place-items-center rounded-lg", ring)}>
            <Icon className="h-4 w-4" />
          </span>
        )}
      </div>
      <p className="mt-2 text-2xl font-semibold tabular-nums tracking-tight text-be-text">
        {value}
      </p>
      {hint && <p className="mt-0.5 text-xs text-be-muted">{hint}</p>}
    </div>
  );
}

/* --- Nav / tool card (links from a dashboard to a section) -------------- */
export function ToolCard({
  href,
  icon: Icon,
  title,
  body,
}: {
  href: string;
  icon: LucideIcon;
  title: string;
  body: string;
}) {
  return (
    <Link href={href} className="be-card be-card-hover group flex items-start gap-3 p-4">
      <span className="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-brand-green-wash text-brand-green-h">
        <Icon className="h-5 w-5" />
      </span>
      <div className="min-w-0">
        <h2 className="font-medium text-be-text">{title}</h2>
        <p className="mt-0.5 text-sm text-be-muted">{body}</p>
      </div>
    </Link>
  );
}

/* --- Status pill -------------------------------------------------------- */
export type Tone = "ok" | "warn" | "danger" | "info" | "muted";

export function StatusPill({
  tone,
  icon: Icon,
  children,
}: {
  tone: Tone;
  icon?: LucideIcon;
  children: React.ReactNode;
}) {
  return (
    <span className={cx("pill", `pill-${tone}`)}>
      {Icon && <Icon className="h-3 w-3" />}
      {children}
    </span>
  );
}

/* --- Button ------------------------------------------------------------- */
type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
const BUTTON_VARIANTS: Record<ButtonVariant, string> = {
  primary:
    "bg-brand-green text-white hover:bg-brand-green-deep focus-visible:ring-brand-green",
  secondary:
    "border border-be-border bg-be-surface text-be-text hover:bg-be-surface-2 focus-visible:ring-brand-green",
  ghost: "text-be-muted hover:text-be-text hover:bg-be-surface-2 focus-visible:ring-brand-green",
  danger:
    "bg-[color:var(--pill-danger-fg)] text-white hover:opacity-90 focus-visible:ring-[color:var(--pill-danger-fg)]",
};

export function buttonClass(variant: ButtonVariant = "primary", className?: string) {
  return cx(
    "inline-flex items-center justify-center gap-1.5 rounded-lg px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-be-bg disabled:opacity-50 disabled:pointer-events-none",
    BUTTON_VARIANTS[variant],
    className
  );
}

export function LinkButton({
  href,
  variant = "primary",
  icon: Icon,
  className,
  children,
}: {
  href: string;
  variant?: ButtonVariant;
  icon?: LucideIcon;
  className?: string;
  children: React.ReactNode;
}) {
  return (
    <Link href={href} className={buttonClass(variant, className)}>
      {Icon && <Icon className="h-4 w-4" />}
      {children}
    </Link>
  );
}

/* --- Table shell -------------------------------------------------------- */
export function TableShell({ children }: { children: React.ReactNode }) {
  return (
    <div className="overflow-x-auto rounded-2xl border border-be-border bg-be-surface">
      <table className="be-table">{children}</table>
    </div>
  );
}

/* --- Empty state -------------------------------------------------------- */
export function EmptyState({
  icon: Icon,
  title,
  body,
  action,
}: {
  icon?: LucideIcon;
  title: string;
  body?: string;
  action?: React.ReactNode;
}) {
  return (
    <div className="be-card flex flex-col items-center justify-center gap-3 px-6 py-14 text-center">
      {Icon && (
        <span className="grid h-12 w-12 place-items-center rounded-2xl bg-be-surface-2 text-be-muted">
          <Icon className="h-6 w-6" />
        </span>
      )}
      <div>
        <p className="font-medium text-be-text">{title}</p>
        {body && <p className="mt-1 text-sm text-be-muted">{body}</p>}
      </div>
      {action}
    </div>
  );
}