import { cn } from './cva'
import { RadioGroup, Radio } from './RadioGroup'

/** Color bag for the live preview card (already resolved to the active mode). */
export interface PalettePreview {
  bg: string
  surface: string
  fg: string
  fgMuted: string
  accent: string
  accentFg: string
  border: string
}

/** One selectable palette option, with colors already resolved to the active mode. */
export interface PaletteOption {
  id: string
  label: string
  /** Ordered swatch colors shown as dots — canonical order: [bg, surface, accent, fg]. */
  swatches: string[]
  preview: PalettePreview
}

export interface PalettePickerProps {
  /** Selected palette id. Caller passes a valid id (fails closed caller-side). */
  value?: string
  onChange(id: string): void
  options: PaletteOption[]
  'aria-label'?: string
  'aria-labelledby'?: string
  className?: string
}

export function PalettePicker({
  value,
  onChange,
  options,
  className,
  ...aria
}: PalettePickerProps) {
  if (options.length === 0) return null

  const selected = options.find((o) => o.id === value) ?? options[0]!

  return (
    <div className={cn('@container', className)}>
      <div className="flex flex-col gap-4 @md:flex-row @md:items-start">
      <RadioGroup
        value={value}
        onValueChange={onChange}
        className="flex flex-col gap-2"
        {...aria}
      >
        {options.map((option) => (
          <label
            key={option.id}
            className="flex cursor-pointer items-center gap-3 text-sm text-fg"
          >
            <Radio value={option.id} aria-label={option.label} />
            <span className="flex flex-row flex-wrap gap-1" aria-hidden>
              {option.swatches.map((color, i) => (
                <span
                  key={i}
                  className="h-4 w-4 shrink-0 rounded-full border border-border bg-[var(--swatch)]"
                  style={{ ['--swatch' as string]: color }}
                />
              ))}
            </span>
            <span>{option.label}</span>
          </label>
        ))}
      </RadioGroup>

      <div
        data-testid="palette-preview"
        aria-hidden
        className="flex w-full flex-col gap-2 rounded-md border bg-[var(--pp-bg)] p-4 text-[var(--pp-fg)] @md:flex-1 @md:min-w-0"
        style={{
          ['--pp-bg' as string]: selected.preview.bg,
          ['--pp-surface' as string]: selected.preview.surface,
          ['--pp-fg' as string]: selected.preview.fg,
          ['--pp-fg-muted' as string]: selected.preview.fgMuted,
          ['--pp-accent' as string]: selected.preview.accent,
          ['--pp-accent-fg' as string]: selected.preview.accentFg,
          ['--pp-border' as string]: selected.preview.border,
          borderColor: 'var(--pp-border)',
        }}
      >
        <span className="text-sm font-medium text-[var(--pp-fg)]">{selected.label}</span>
        <span className="text-xs text-[var(--pp-fg-muted)]">The quick brown fox jumps over the lazy dog.</span>
        <span className="flex flex-col items-start gap-2 rounded-sm bg-[var(--pp-surface)] p-2 text-xs text-[var(--pp-fg)]">
          Surface block
          <span className="inline-flex w-fit rounded-sm bg-[var(--pp-accent)] px-3 py-1 text-xs text-[var(--pp-accent-fg)]">
            Primary action
          </span>
        </span>
      </div>
      </div>
    </div>
  )
}