import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Sun, Moon, Monitor, Check, Palette } from "lucide-react";
import { useTheme, ACCENT_SWATCHES, type AccentScheme, type ThemeMode } from "@/contexts/ThemeContext";
import { cn } from "@/lib/utils";

export default function AppearanceCard() {
  const { mode, accent, setMode, setAccent } = useTheme();

  const modes: { value: ThemeMode; label: string; icon: any }[] = [
    { value: "light", label: "Light", icon: Sun },
    { value: "dark", label: "Dark", icon: Moon },
    { value: "system", label: "System", icon: Monitor },
  ];

  return (
    <Card>
      <CardContent className="space-y-6 pt-6">
        <div>
          <h2 className="text-lg font-semibold text-foreground flex items-center gap-2">
            <Palette className="h-5 w-5" /> Appearance
          </h2>
          <p className="text-sm text-muted-foreground">Personalize how the portal looks for you.</p>
        </div>

        <div className="space-y-3">
          <Label>Theme</Label>
          <div className="grid grid-cols-3 gap-3">
            {modes.map((m) => {
              const Icon = m.icon;
              const active = mode === m.value;
              return (
                <Button
                  key={m.value}
                  type="button"
                  variant={active ? "default" : "outline"}
                  className={cn("h-auto flex-col gap-2 py-4", active && "ring-2 ring-primary/30")}
                  onClick={() => setMode(m.value)}
                >
                  <Icon className="h-5 w-5" />
                  <span className="text-xs">{m.label}</span>
                </Button>
              );
            })}
          </div>
        </div>

        <div className="space-y-3">
          <Label>Accent color</Label>
          <div className="grid grid-cols-3 sm:grid-cols-6 gap-3">
            {(Object.keys(ACCENT_SWATCHES) as AccentScheme[]).map((key) => {
              const s = ACCENT_SWATCHES[key];
              const active = accent === key;
              return (
                <button
                  key={key}
                  type="button"
                  onClick={() => setAccent(key)}
                  className={cn(
                    "group flex flex-col items-center gap-1.5 rounded-xl p-2 border transition-all",
                    active ? "border-primary bg-primary/5" : "border-border hover:bg-accent/40"
                  )}
                >
                  <span
                    className="relative h-9 w-9 rounded-full shadow-md ring-1 ring-black/5"
                    style={{ background: s.swatch }}
                  >
                    {active && (
                      <Check className="absolute inset-0 m-auto h-5 w-5 text-white drop-shadow" strokeWidth={3} />
                    )}
                  </span>
                  <span className="text-[11px] text-muted-foreground">{s.label}</span>
                </button>
              );
            })}
          </div>
        </div>

        <p className="text-xs text-muted-foreground">
          Your choices are saved on this device.
        </p>
      </CardContent>
    </Card>
  );
}
