"use client";

import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { type FontKey, fontOptions } from "@/lib/fonts/registry";
import type { ContentLayout, NavbarStyle, SidebarCollapsible, SidebarVariant } from "@/lib/preferences/layout";
import type { PreferenceValueMap } from "@/lib/preferences/preferences-config";
import { THEME_PRESET_OPTIONS, type ThemeMode, type ThemePreset } from "@/lib/preferences/theme";
import { usePreferencesStore } from "@/stores/preferences/preferences-provider";

export function SettingsPanelAppearance({
  draft,
  isLoading,
  errorMessage,
  onChange,
}: {
  draft: PreferenceValueMap;
  isLoading: boolean;
  errorMessage: string | null;
  onChange: (patch: Partial<PreferenceValueMap>) => void;
}) {
  const resolvedThemeMode = usePreferencesStore((s) => s.resolvedThemeMode);

  return (
    <div className="max-w-lg space-y-5">
      {isLoading ? <p className="text-muted-foreground text-sm">Loading appearance settings…</p> : null}
      {errorMessage ? <p className="text-destructive text-sm">{errorMessage}</p> : null}

      <div className="space-y-4 **:data-[slot=toggle-group]:w-full **:data-[slot=toggle-group-item]:flex-1 **:data-[slot=toggle-group-item]:text-xs">
        <div className="space-y-2">
          <Label className="font-medium text-sm">Theme Preset</Label>
          <Select
            value={draft.theme_preset}
            disabled={isLoading}
            onValueChange={(value) => onChange({ theme_preset: value as ThemePreset })}
          >
            <SelectTrigger className="w-full">
              <SelectValue placeholder="Preset" />
            </SelectTrigger>
            <SelectContent>
              <SelectGroup>
                {THEME_PRESET_OPTIONS.map((preset) => (
                  <SelectItem key={preset.value} value={preset.value}>
                    <span
                      className="size-2.5 rounded-full"
                      style={{
                        backgroundColor:
                          (resolvedThemeMode ?? "light") === "dark" ? preset.primary.dark : preset.primary.light,
                      }}
                    />
                    {preset.label}
                  </SelectItem>
                ))}
              </SelectGroup>
            </SelectContent>
          </Select>
        </div>

        <div className="space-y-2">
          <Label className="font-medium text-sm">Fonts</Label>
          <Select
            value={draft.font}
            disabled={isLoading}
            onValueChange={(value) => onChange({ font: value as FontKey })}
          >
            <SelectTrigger className="w-full">
              <SelectValue placeholder="Select font" />
            </SelectTrigger>
            <SelectContent>
              <SelectGroup>
                {fontOptions.map((font) => (
                  <SelectItem key={font.key} value={font.key}>
                    {font.label}
                  </SelectItem>
                ))}
              </SelectGroup>
            </SelectContent>
          </Select>
        </div>

        <div className="space-y-2">
          <Label className="font-medium text-sm">Theme Mode</Label>
          <ToggleGroup
            size="sm"
            variant="outline"
            type="single"
            value={draft.theme_mode}
            disabled={isLoading}
            onValueChange={(value: ThemeMode | "") => {
              if (!value) return;
              onChange({ theme_mode: value });
            }}
          >
            <ToggleGroupItem value="light" aria-label="Toggle light">
              Light
            </ToggleGroupItem>
            <ToggleGroupItem value="dark" aria-label="Toggle dark">
              Dark
            </ToggleGroupItem>
            <ToggleGroupItem value="system" aria-label="Toggle system">
              System
            </ToggleGroupItem>
          </ToggleGroup>
        </div>

        <div className="space-y-2">
          <Label className="font-medium text-sm">Page Layout</Label>
          <ToggleGroup
            size="sm"
            variant="outline"
            type="single"
            value={draft.content_layout}
            disabled={isLoading}
            onValueChange={(value: ContentLayout | "") => {
              if (!value) return;
              onChange({ content_layout: value });
            }}
          >
            <ToggleGroupItem value="centered" aria-label="Toggle centered">
              Centered
            </ToggleGroupItem>
            <ToggleGroupItem value="full-width" aria-label="Toggle full-width">
              Full Width
            </ToggleGroupItem>
          </ToggleGroup>
        </div>

        <div className="space-y-2">
          <Label className="font-medium text-sm">Navbar Behavior</Label>
          <ToggleGroup
            size="sm"
            variant="outline"
            type="single"
            value={draft.navbar_style}
            disabled={isLoading}
            onValueChange={(value: NavbarStyle | "") => {
              if (!value) return;
              onChange({ navbar_style: value });
            }}
          >
            <ToggleGroupItem value="sticky" aria-label="Toggle sticky">
              Sticky
            </ToggleGroupItem>
            <ToggleGroupItem value="scroll" aria-label="Toggle scroll">
              Scroll
            </ToggleGroupItem>
          </ToggleGroup>
        </div>

        <div className="space-y-2">
          <Label className="font-medium text-sm">Sidebar Style</Label>
          <ToggleGroup
            size="sm"
            variant="outline"
            type="single"
            value={draft.sidebar_variant}
            disabled={isLoading}
            onValueChange={(value: SidebarVariant | "") => {
              if (!value) return;
              onChange({ sidebar_variant: value });
            }}
          >
            <ToggleGroupItem value="inset" aria-label="Toggle inset">
              Inset
            </ToggleGroupItem>
            <ToggleGroupItem value="sidebar" aria-label="Toggle sidebar">
              Sidebar
            </ToggleGroupItem>
            <ToggleGroupItem value="floating" aria-label="Toggle floating">
              Floating
            </ToggleGroupItem>
          </ToggleGroup>
        </div>

        <div className="space-y-2">
          <Label className="font-medium text-sm">Sidebar Collapse Mode</Label>
          <ToggleGroup
            size="sm"
            variant="outline"
            type="single"
            value={draft.sidebar_collapsible}
            disabled={isLoading}
            onValueChange={(value: SidebarCollapsible | "") => {
              if (!value) return;
              onChange({ sidebar_collapsible: value });
            }}
          >
            <ToggleGroupItem value="icon" aria-label="Toggle icon">
              Icon
            </ToggleGroupItem>
            <ToggleGroupItem value="offcanvas" aria-label="Toggle offcanvas">
              OffCanvas
            </ToggleGroupItem>
          </ToggleGroup>
        </div>
      </div>
    </div>
  );
}