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-bold tracking-[0.16em] text-brand uppercase">{eyebrow}</p>
        ) : null}
        <h1
          className={cn(
            "font-display text-[32px] leading-[1.15] tracking-[-0.02em] text-foreground",
            eyebrow ? "mt-1.5" : undefined,
          )}
        >
          {title}
        </h1>
        {subtitle ? (
          <p className="mt-2 max-w-2xl text-[14.5px] 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-brand-soft text-brand">
        <Icon size={26} 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",
  onClick,
  className,
}: {
  label: string;
  value: string | number;
  hint?: string;
  icon?: LucideIcon;
  tone?: "neutral" | "green" | "amber" | "danger";
  onClick?: () => void;
  className?: string;
}) {
  const toneClass = {
    neutral: "bg-muted text-muted-foreground",
    green: "bg-brand-soft text-brand",
    amber: "bg-attention-soft text-attention",
    danger: "bg-destructive-soft text-destructive",
  }[tone];

  const barClass = {
    neutral: "bg-border",
    green: "bg-brand",
    amber: "bg-attention",
    danger: "bg-destructive",
  }[tone];

  const interactive = Boolean(onClick);
  const Comp = interactive ? "button" : "div";

  return (
    <Comp
      type={interactive ? "button" : undefined}
      onClick={onClick}
      className={cn(
        "surface-card relative w-full overflow-hidden px-4 py-3.5 text-left",
        interactive &&
          "cursor-pointer hover:-translate-y-0.5 hover:border-primary/25 hover:shadow-[var(--shadow-card-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand",
        className,
      )}
    >
      <span className={cn("absolute inset-y-0 left-0 w-[3px]", barClass)} aria-hidden="true" />
      <div className="flex items-start justify-between gap-2 pl-1">
        <p className="text-[12px] font-medium text-muted-foreground">{label}</p>
        {Icon ? (
          <span className={cn("flex size-7 items-center justify-center rounded-md", toneClass)}>
            <Icon size={15} aria-hidden="true" />
          </span>
        ) : null}
      </div>
      <p className="num mt-2 pl-1 font-display text-[28px] leading-none text-foreground">{value}</p>
      {hint ? <p className="mt-2 pl-1 text-[12px] text-muted-foreground">{hint}</p> : null}
    </Comp>
  );
}