import type { LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

export function PageHeader({
  eyebrow,
  title,
  subtitle,
  actions,
  className,
}: {
  eyebrow?: string;
  title: string;
  subtitle?: string;
  actions?: React.ReactNode;
  className?: string;
}) {
  return (
    <div className={cn("flex flex-wrap items-end justify-between gap-4 pb-6", className)}>
      <div className="min-w-0">
        {eyebrow ? (
          <p className="text-[11px] font-semibold tracking-[0.14em] text-muted-foreground uppercase">
            {eyebrow}
          </p>
        ) : null}
        <h1 className="mt-1.5 font-display text-[30px] leading-tight text-foreground">{title}</h1>
        {subtitle ? <p className="mt-1.5 max-w-2xl text-[14px] leading-6 text-muted-foreground">{subtitle}</p> : null}
      </div>
      {actions ? <div className="flex flex-wrap items-center gap-2">{actions}</div> : null}
    </div>
  );
}

export function SectionCard({
  title,
  description,
  action,
  children,
  className,
  bodyClassName,
}: {
  title?: string;
  description?: string;
  action?: React.ReactNode;
  children: React.ReactNode;
  className?: string;
  bodyClassName?: string;
}) {
  return (
    <section className={cn("surface-card overflow-hidden", className)}>
      {title ? (
        <header className="flex items-start justify-between gap-3 border-b border-border px-5 py-4">
          <div>
            <h2 className="font-display text-[16px] text-foreground">{title}</h2>
            {description ? <p className="mt-0.5 text-[12.5px] text-muted-foreground">{description}</p> : null}
          </div>
          {action}
        </header>
      ) : null}
      <div className={bodyClassName}>{children}</div>
    </section>
  );
}

export function EmptyState({
  icon: Icon,
  title,
  description,
  action,
}: {
  icon: LucideIcon;
  title: string;
  description: string;
  action?: React.ReactNode;
}) {
  return (
    <div className="flex flex-col items-center justify-center px-6 py-16 text-center">
      <div className="flex size-14 items-center justify-center rounded-full bg-muted">
        <Icon size={26} className="text-muted-foreground" aria-hidden="true" />
      </div>
      <h3 className="mt-4 font-display text-[17px] text-foreground">{title}</h3>
      <p className="mt-1.5 max-w-sm text-[13px] leading-6 text-muted-foreground">{description}</p>
      {action ? <div className="mt-5">{action}</div> : null}
    </div>
  );
}

export function KpiCard({
  label,
  value,
  hint,
  icon: Icon,
  tone = "neutral",
}: {
  label: string;
  value: string | number;
  hint: string;
  icon: LucideIcon;
  tone?: "neutral" | "green" | "amber" | "danger";
}) {
  const toneClass = {
    neutral: "bg-muted text-muted-foreground",
    green: "bg-primary-soft text-primary",
    amber: "bg-attention-soft text-attention",
    danger: "bg-destructive-soft text-destructive",
  }[tone];

  return (
    <div className="surface-card px-4 py-3.5">
      <div className="flex items-start justify-between gap-2">
        <p className="text-[12px] font-medium text-muted-foreground">{label}</p>
        <span className={cn("flex size-7 items-center justify-center rounded-md", toneClass)}>
          <Icon size={15} aria-hidden="true" />
        </span>
      </div>
      <p className="num mt-2 font-display text-[28px] leading-none text-foreground">{value}</p>
      <p className="mt-2 text-[12px] text-muted-foreground">{hint}</p>
    </div>
  );
}