import { useState, useEffect, useCallback } from "react";
import { useUserConfig, useUpdateAppearance } from "./hooks";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { Label } from "@/components/ui/label";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { themePresets, applyTheme, getThemeById, getSavedThemeId, saveThemeId } from "@/lib/theme";
import { Check } from "lucide-react";

const codeThemes = [
  { value: "github-light", label: "GitHub Light" },
  { value: "github-dark", label: "GitHub Dark" },
  { value: "vs", label: "VS Code" },
  { value: "monokai", label: "Monokai" },
  { value: "solarized-light", label: "Solarized Light" },
  { value: "solarized-dark", label: "Solarized Dark" },
  { value: "one-dark", label: "One Dark" },
];

const densities = [
  { value: "compact", label: "Compact" },
  { value: "default", label: "Default" },
  { value: "comfortable", label: "Comfortable" },
];

function ThemeSwatch({ preset }: { preset: (typeof themePresets)[0] }) {
  const c = preset.colors;
  return (
    <div
      className="relative h-20 w-full overflow-hidden rounded-xl border"
      style={{
        background: c.background,
        borderColor: c.border,
      }}
    >
      <div className="absolute inset-0 flex flex-col p-2.5 gap-1.5">
        <div className="flex items-center gap-1.5">
          <div
            className="h-3.5 w-3.5 rounded-md"
            style={{ background: c.primary }}
          />
          <div
            className="h-1.5 w-12 rounded-full"
            style={{ background: c.mutedForeground, opacity: 0.5 }}
          />
        </div>
        <div className="flex gap-1">
          <div
            className="h-5 flex-1 rounded-md"
            style={{ background: c.card, border: `1px solid ${c.border}` }}
          />
          <div
            className="h-5 flex-1 rounded-md"
            style={{ background: c.muted }}
          />
        </div>
      </div>
    </div>
  );
}

export default function SettingsAppearancePage() {
  const { data: config, isLoading } = useUserConfig();
  const update = useUpdateAppearance();
  const appearance = config?.appearance;

  const [activeTheme, setActiveTheme] = useState(getSavedThemeId());

  useEffect(() => {
    setActiveTheme(getSavedThemeId());
  }, []);

  const handleThemeChange = useCallback((id: string) => {
    setActiveTheme(id);
    const preset = getThemeById(id);
    if (preset) {
      applyTheme(preset);
      saveThemeId(id);
    }
  }, []);

  return (
    <div className="px-8 py-10">
      <h1 className="text-xl font-heading font-bold text-foreground">Appearance</h1>
      <p className="mt-1 text-sm text-muted-foreground">Customize how the interface looks and feels</p>

      {isLoading ? (
        <div className="mt-8 space-y-4">
          {Array.from({ length: 4 }).map((_, i) => (
            <div className="h-12 animate-pulse rounded-lg bg-muted" key={i} />
          ))}
        </div>
      ) : (
        <div className="mt-8 space-y-6">
          {/* Color Theme */}
          <Card>
            <CardHeader>
              <CardTitle>Color Theme</CardTitle>
              <CardDescription>Choose a preset color palette for the entire interface</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
                {themePresets.map((preset) => {
                  const isActive = activeTheme === preset.id;
                  return (
                    <button
                      key={preset.id}
                      onClick={() => handleThemeChange(preset.id)}
                      className="group relative flex flex-col gap-2 rounded-2xl border p-3 text-left transition-all hover:border-ring/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
                      style={{
                        borderColor: isActive ? preset.colors.ring : preset.colors.border,
                        background: isActive ? preset.colors.muted : preset.colors.card,
                      }}
                    >
                      {isActive && (
                        <div
                          className="absolute top-2.5 right-2.5 grid size-5 place-items-center rounded-full"
                          style={{ background: preset.colors.primary }}
                        >
                          <Check className="size-3" style={{ color: preset.colors.primaryForeground }} />
                        </div>
                      )}
                      <ThemeSwatch preset={preset} />
                      <div className="flex flex-col gap-0.5">
                        <span
                          className="text-[13px] font-semibold"
                          style={{ color: preset.colors.foreground }}
                        >
                          {preset.name}
                        </span>
                        <span
                          className="text-[11px] leading-tight"
                          style={{ color: preset.colors.mutedForeground }}
                        >
                          {preset.description}
                        </span>
                      </div>
                    </button>
                  );
                })}
              </div>
            </CardContent>
          </Card>

          {/* Code Theme */}
          <Card>
            <CardHeader>
              <CardTitle>Code Theme</CardTitle>
              <CardDescription>Syntax highlighting style for code blocks</CardDescription>
            </CardHeader>
            <CardContent>
              <Select
                value={appearance?.code_theme ?? "github-dark"}
                onValueChange={(v) => update.mutate({ code_theme: v })}
              >
                <SelectTrigger className="w-48">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {codeThemes.map((t) => (
                    <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </CardContent>
          </Card>

          {/* Layout Density */}
          <Card>
            <CardHeader>
              <CardTitle>Layout Density</CardTitle>
              <CardDescription>Control spacing and sizing across the interface</CardDescription>
            </CardHeader>
            <CardContent>
              <Select
                value={appearance?.layout_density ?? "default"}
                onValueChange={(v) => update.mutate({ layout_density: v })}
              >
                <SelectTrigger className="w-48">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {densities.map((d) => (
                    <SelectItem key={d.value} value={d.value}>{d.label}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </CardContent>
          </Card>

          {/* Editor */}
          <Card>
            <CardHeader>
              <CardTitle>Editor</CardTitle>
              <CardDescription>Code display preferences</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <Label>Show line numbers</Label>
                  <Switch
                    checked={appearance?.show_line_numbers ?? true}
                    onCheckedChange={(v) => update.mutate({ show_line_numbers: v })}
                  />
                </div>
                <div className="flex items-center justify-between">
                  <Label>Collapsed sidebar</Label>
                  <Switch
                    checked={appearance?.sidebar_collapsed ?? false}
                    onCheckedChange={(v) => update.mutate({ sidebar_collapsed: v })}
                  />
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  );
}
