boocode/apps/web/src/components/ThemePicker.tsx

import { useState } from 'react';
import { Check } from 'lucide-react';
import { toast } from 'sonner';
import { Card } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { THEMES, setTheme, useTheme, type ThemeId, type ThemeMode } from '@/lib/theme';
import { cn } from '@/lib/utils';

// v1.9: lifted out of pages/Settings.tsx so the SettingsPane Theme tab and
// the standalone /settings route render the same picker. Theme is global —
// not per-project, not per-session — so no contextual props are needed.

const MODES: { value: ThemeMode; label: string; hint: string }[] = [
  { value: 'dark', label: 'Dark', hint: 'Use the dark variant.' },
  { value: 'light', label: 'Light', hint: 'Use the light variant.' },
  { value: 'system', label: 'System', hint: 'Follow OS preference.' },
];

export function ThemePicker() {
  const { id: currentId, mode: currentMode } = useTheme();
  // Track the most recent in-flight pick so the picker can show a subtle
  // "applying…" state on the targeted card while the PATCH is in flight.
  const [pending, setPending] = useState<
    { kind: 'theme'; id: ThemeId } | { kind: 'mode'; mode: ThemeMode } | null
  >(null);

  async function pickTheme(id: ThemeId) {
    if (id === currentId || pending) return;
    setPending({ kind: 'theme', id });
    try {
      await setTheme(id, currentMode);
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'failed to apply theme');
    } finally {
      setPending(null);
    }
  }

  async function pickMode(mode: ThemeMode) {
    if (mode === currentMode || pending) return;
    setPending({ kind: 'mode', mode });
    try {
      await setTheme(currentId, mode);
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'failed to apply mode');
    } finally {
      setPending(null);
    }
  }

  return (
    <div className="space-y-8">
      <section className="space-y-3">
        <h2 className="text-sm font-medium">Mode</h2>
        <RadioGroup
          value={currentMode}
          onValueChange={(v) => void pickMode(v as ThemeMode)}
          className="flex flex-wrap gap-4"
        >
          {MODES.map((m) => (
            <div key={m.value} className="flex items-center gap-2">
              <RadioGroupItem id={`mode-${m.value}`} value={m.value} />
              <Label htmlFor={`mode-${m.value}`} className="cursor-pointer">
                <span className="font-medium">{m.label}</span>
                <span className="ml-2 text-xs text-muted-foreground">{m.hint}</span>
              </Label>
            </div>
          ))}
        </RadioGroup>
      </section>

      <section className="space-y-3">
        <h2 className="text-sm font-medium">Theme</h2>
        <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
          {THEMES.map((t) => {
            const isActive = t.id === currentId;
            const isPending = pending?.kind === 'theme' && pending.id === t.id;
            const isLightOnly = !t.supportsDark;
            return (
              <Card
                key={t.id}
                onClick={() => void pickTheme(t.id)}
                className={cn(
                  'p-3 cursor-pointer transition-colors',
                  'hover:bg-accent/10',
                  isActive && 'ring-2 ring-ring',
                  isPending && 'opacity-60',
                )}
              >
                <div className="flex items-center justify-between gap-2">
                  <div className="min-w-0">
                    <div className="font-mono text-sm truncate">{t.name}</div>
                    <div className="text-xs text-muted-foreground">{t.family}</div>
                  </div>
                  {isActive && (
                    <span className="inline-flex items-center gap-1 text-xs text-primary shrink-0">
                      <Check className="size-3" /> Selected
                    </span>
                  )}
                </div>
                <div className="flex mt-2 rounded overflow-hidden border border-border/40">
                  {t.anchors.map((hex, i) => (
                    <div
                      key={i}
                      className="flex-1 h-6"
                      style={{ backgroundColor: hex }}
                      aria-hidden="true"
                    />
                  ))}
                </div>
                {isLightOnly && (
                  <div className="mt-2 text-xs text-muted-foreground italic">Light only</div>
                )}
              </Card>
            );
          })}
        </div>
      </section>
    </div>
  );
}