import { cn } from "@/lib/utils";

/**
 * Palette role shape emitted by the theme-generation workshop.
 * Each role carries both a dark and light variant resolved as OKLCH + hex
 * alongside a WCAG AA pass/fail flag computed against the generated
 * background.
 */
export interface PaletteRole {
  name: string;
  dark: { oklch: string; hex: string; wcagAA: boolean };
  light: { oklch: string; hex: string; wcagAA: boolean };
}

interface ThemePaletteGridProps {
  palette: PaletteRole[];
  variant?: "dark" | "light";
  className?: string;
}

const ROLE_LABELS: Record<string, string> = {
  background: "Background",
  surface: "Surface",
  overlay: "Overlay",
  text: "Text",
  "accent-1": "Accent 1",
  "accent-2": "Accent 2",
  "accent-3": "Accent 3",
};

function Swatch({
  role,
  variant,
}: {
  role: PaletteRole;
  variant: "dark" | "light";
}) {
  const entry = variant === "dark" ? role.dark : role.light;
  const label = ROLE_LABELS[role.name] ?? role.name;

  return (
    <div
      className="flex flex-col gap-2 rounded-sm border border-border bg-card p-2"
      style={{ minWidth: 96 }}
    >
      <div
        className="rounded-sm border border-border"
        style={{
          height: 44,
          backgroundColor: entry.hex,
        }}
        title={`${label}: ${entry.hex}`}
        aria-label={`${label} swatch ${entry.hex}`}
      />
      <div className="flex flex-col gap-0.5">
        <span className="text-[11px] font-semibold uppercase tracking-[0.1em] text-foreground">
          {label}
        </span>
        <span className="font-mono text-[11px] text-muted-foreground">
          {entry.hex}
        </span>
        <span
          className={cn(
            "text-[10px] font-semibold uppercase tracking-[0.08em]",
            entry.wcagAA ? "text-primary" : "text-destructive",
          )}
        >
          {entry.wcagAA ? "AA" : "Fails AA"}
        </span>
      </div>
    </div>
  );
}

function PaletteRow({
  palette,
  variant,
}: {
  palette: PaletteRole[];
  variant: "dark" | "light";
}) {
  return (
    <div className="flex flex-col gap-2">
      <span className="text-[12px] font-semibold uppercase tracking-[0.1em] text-muted-foreground">
        {variant === "dark" ? "Dark mode" : "Light mode"}
      </span>
      <div className="flex flex-row flex-wrap gap-2">
        {palette.map((role) => (
          <Swatch key={role.name} role={role} variant={variant} />
        ))}
      </div>
    </div>
  );
}

export function ThemePaletteGrid({
  palette,
  variant,
  className,
}: ThemePaletteGridProps) {
  if (palette.length === 0) {
    return (
      <div
        className={cn(
          "flex flex-col items-center justify-center gap-2 rounded-sm border border-dashed border-border p-8 text-center",
          className,
        )}
      >
        <h3 className="text-base font-bold text-foreground">No palette yet</h3>
        <p className="max-w-xs text-sm text-muted-foreground">
          Pick a seed color to generate a full OKLCH palette with dark and
          light variants.
        </p>
      </div>
    );
  }

  // When variant is passed explicitly, render only that row. Otherwise show
  // both dark and light, so reviewers can compare the generated bundle.
  if (variant) {
    return (
      <div className={cn("flex flex-col gap-4", className)}>
        <PaletteRow palette={palette} variant={variant} />
      </div>
    );
  }

  return (
    <div className={cn("flex flex-col gap-4", className)}>
      <PaletteRow palette={palette} variant="dark" />
      <PaletteRow palette={palette} variant="light" />
    </div>
  );
}