import * as React from "react";
import { cn } from "@/lib/utils";

/**
 * Card — the one surface every page is built from. Hairline highlight on the
 * top edge, soft elevation, 16px radius; `interactive` lifts on hover (desktop
 * only), `tone` paints a thin accent bar, `elevated` for hero blocks.
 */
const TONE_BAR: Record<string, string> = {
  brand: "before:bg-primary",
  positive: "before:bg-positive-500",
  warning: "before:bg-warning-500",
  negative: "before:bg-negative-500",
  info: "before:bg-info-500",
  accent: "before:bg-accent-500",
  gold: "before:bg-gold-500",
};

const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & { interactive?: boolean; padded?: boolean; elevated?: boolean; tone?: keyof typeof TONE_BAR | "none" }>(({ className, interactive, padded, elevated, tone = "none", ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "relative min-w-0 rounded-xl border border-border bg-surface shadow-xs hairline-top",
      elevated && "shadow-md",
      interactive && "card-lift cursor-pointer",
      tone !== "none" && "before:absolute before:inset-x-5 before:top-0 before:h-0.5 before:rounded-b-full before:content-['']",
      tone !== "none" && TONE_BAR[tone],
      padded && "p-5",
      className
    )}
    {...props}
  />
));
Card.displayName = "Card";

function CardHeader({ className, title, description, action, eyebrow, children, ...props }: Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & { title?: React.ReactNode; description?: React.ReactNode; action?: React.ReactNode; eyebrow?: React.ReactNode }) {
  return (
    <div className={cn("flex flex-wrap items-start justify-between gap-x-3 gap-y-2 px-5 pt-5 pb-3", className)} {...props}>
      <div className="min-w-0">
        {eyebrow ? <p className="eyebrow mb-1">{eyebrow}</p> : null}
        {title ? <h3 className="text-[15px] font-semibold leading-tight tracking-tight text-fg">{title}</h3> : null}
        {description ? <p className="mt-0.5 text-xs text-fg-muted">{description}</p> : null}
        {children}
      </div>
      {action ? <div className="flex max-w-full items-center gap-2 overflow-x-auto scrollbar-none">{action}</div> : null}
    </div>
  );
}

function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
  return <div className={cn("px-5 pb-5", className)} {...props} />;
}

function CardFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
  return <div className={cn("flex items-center gap-2 rounded-b-xl border-t border-border bg-surface-2/40 px-5 py-3 text-xs text-fg-muted", className)} {...props} />;
}

export { Card, CardHeader, CardContent, CardFooter };