import {
  APPEARANCE_FIELD_ROW,
  APPEARANCE_GRID,
  AppearanceControls,
  AppearancePresets,
  AppearanceSection,
} from "@/components/ui/appearance-design";
import { AppearancePreview } from "@/components/ui/appearance-preview";
import { GlobalColorPicker } from "@/components/ui/global-color-picker";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import {
  Currency,
  CustomizationSettings,
  defaultCurrencySwitcherSettings,
  flagSizeOptions,
  flagStyleOptions,
  layoutOptions,
  ShortcodeSettings,
  switcherPresets,
} from "../../config";
import { CurrencySwitcherPreview } from "../currency-switcher-preview";

interface CustomizationsTabProps {
  settings: CustomizationSettings;
  shortcodeSettings: ShortcodeSettings;
  currencies: Currency[];
  updateSettings: <K extends keyof CustomizationSettings>(
    key: K,
    value: CustomizationSettings[K],
  ) => void;
  updateShortcodeSettings: <K extends keyof ShortcodeSettings>(
    key: K,
    value: ShortcodeSettings[K],
  ) => void;
  isPro: boolean;
}
export function CustomizationsTab({
  settings,
  shortcodeSettings,
  currencies,
  updateSettings,
  updateShortcodeSettings,
  isPro,
}: CustomizationsTabProps) {
  const designValues = {
    ...shortcodeSettings,
    selectedPreset: settings.selectedPreset,
  };
  const designDefaults = {
    ...defaultCurrencySwitcherSettings.shortcode,
    selectedPreset: "default",
  };
  const designPresets = switcherPresets
    .filter((preset) => preset.id !== "custom")
    .map((preset) => ({
      id: preset.id,
      name: preset.name,
      description: preset.description,
      isPro: preset.isPro,
      values: { selectedPreset: preset.id },
    }));
  const applyDesign = (values: Partial<typeof designValues>) => {
    if (values.selectedPreset)
      updateSettings("selectedPreset", values.selectedPreset);
    Object.keys(shortcodeSettings).forEach((key) => {
      const field = key as keyof ShortcodeSettings;
      if (values[field] !== undefined)
        updateShortcodeSettings(
          field,
          values[field] as ShortcodeSettings[typeof field],
        );
    });
  };
  const resetDesign = () => applyDesign(designDefaults);

  return (
    <div className={APPEARANCE_GRID}>
      {/* Left Column - Settings */}
      <div className="min-w-0 space-y-6">
        {/* Preset Styles */}
        <AppearancePresets
          feature="Currency switcher"
          current={designValues}
          presets={designPresets}
          baseValues={designDefaults}
          onApply={applyDesign}
          isPro={isPro}
        />

        {/* Customize Design — single card with all accordion sections */}
        <AppearanceControls onReset={resetDesign}>
          <AppearanceSection id="colors" title="Colors">
            <div className="space-y-4 min-w-0">
              <GlobalColorPicker
                compact
                explainSource
                label="Background"
                value={shortcodeSettings.backgroundColor}
                onChange={(v) => updateShortcodeSettings("backgroundColor", v)}
                globalTokenId="background"
                featureDefault="#ffffff"
              />

              <GlobalColorPicker
                compact
                explainSource
                label="Text Color"
                value={shortcodeSettings.textColor}
                onChange={(v) => updateShortcodeSettings("textColor", v)}
                globalTokenId="text"
                featureDefault="#1f2937"
              />

              <GlobalColorPicker
                compact
                explainSource
                label="Border Color"
                value={shortcodeSettings.borderColor}
                onChange={(v) => updateShortcodeSettings("borderColor", v)}
                globalTokenId="border"
                featureDefault="#e5e7eb"
              />

              <GlobalColorPicker
                compact
                explainSource
                label="Hover Background"
                value={shortcodeSettings.hoverBackgroundColor}
                onChange={(v) =>
                  updateShortcodeSettings("hoverBackgroundColor", v)
                }
                featureDefault="#f3f4f6"
              />

              <GlobalColorPicker
                compact
                explainSource
                label="Hover Text Color"
                value={shortcodeSettings.hoverTextColor}
                onChange={(v) => updateShortcodeSettings("hoverTextColor", v)}
                featureDefault="#111827"
              />
            </div>

            <div className="space-y-4 min-w-0">
              <div className={APPEARANCE_FIELD_ROW}>
                <Label className="text-sm">Border Radius</Label>
                <Input
                  aria-label="Border Radius"
                  value={shortcodeSettings.borderRadius}
                  onChange={(e) =>
                    updateShortcodeSettings("borderRadius", e.target.value)
                  }
                  placeholder="6px"
                />
              </div>

              <div className={APPEARANCE_FIELD_ROW}>
                <Label className="text-sm">Font Size</Label>
                <Input
                  aria-label="Font Size"
                  value={shortcodeSettings.fontSize}
                  onChange={(e) =>
                    updateShortcodeSettings("fontSize", e.target.value)
                  }
                  placeholder="14px"
                />
              </div>
            </div>
          </AppearanceSection>
          {isPro && (
            <AppearanceSection id="displayOptions" title="Display Options" pro>
              <div className="flex items-center justify-between rounded-lg border p-3">
                <div className="space-y-0.5">
                  <Label className="text-sm">Show Flags</Label>
                  <p className="text-xs text-muted-foreground">
                    Display country flags next to currencies
                  </p>
                </div>
                <Switch
                  aria-label="Show Flags"
                  checked={shortcodeSettings.showFlags}
                  onCheckedChange={(checked) =>
                    updateShortcodeSettings("showFlags", checked)
                  }
                />
              </div>

              <div className="flex items-center justify-between rounded-lg border p-3">
                <div className="space-y-0.5">
                  <Label className="text-sm">Show Currency Name</Label>
                  <p className="text-xs text-muted-foreground">
                    Display the full currency name
                  </p>
                </div>
                <Switch
                  aria-label="Show Currency Name"
                  checked={shortcodeSettings.showCurrencyName}
                  onCheckedChange={(checked) =>
                    updateShortcodeSettings("showCurrencyName", checked)
                  }
                />
              </div>

              <div className="flex items-center justify-between rounded-lg border p-3">
                <div className="space-y-0.5">
                  <Label className="text-sm">Show Currency Code</Label>
                  <p className="text-xs text-muted-foreground">
                    Display the currency code (e.g., "USD")
                  </p>
                </div>
                <Switch
                  aria-label="Show Currency Code"
                  checked={shortcodeSettings.showCurrencyCode}
                  onCheckedChange={(checked) =>
                    updateShortcodeSettings("showCurrencyCode", checked)
                  }
                />
              </div>

              <div className="flex items-center justify-between rounded-lg border p-3">
                <div className="space-y-0.5">
                  <Label className="text-sm">Show Currency Symbol</Label>
                  <p className="text-xs text-muted-foreground">
                    Display the currency symbol (e.g., "$")
                  </p>
                </div>
                <Switch
                  aria-label="Show Currency Symbol"
                  checked={shortcodeSettings.showCurrencySymbol}
                  onCheckedChange={(checked) =>
                    updateShortcodeSettings("showCurrencySymbol", checked)
                  }
                />
              </div>
            </AppearanceSection>
          )}
          {isPro && (
            <AppearanceSection id="layout" title="Layout" pro>
              <div className={APPEARANCE_FIELD_ROW}>
                <Label>Switcher Layout</Label>
                <Select
                  value={shortcodeSettings.layout}
                  onValueChange={(value) => {
                    updateSettings("selectedPreset", "custom");
                    updateShortcodeSettings(
                      "layout",
                      value as ShortcodeSettings["layout"],
                    );
                  }}
                >
                  <SelectTrigger aria-label="Switcher Layout">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {layoutOptions.map((option) => (
                      <SelectItem key={option.value} value={option.value}>
                        {option.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              <div className={APPEARANCE_FIELD_ROW}>
                <Label>Alignment</Label>
                <Select
                  value={shortcodeSettings.alignment}
                  onValueChange={(value) =>
                    updateShortcodeSettings(
                      "alignment",
                      value as ShortcodeSettings["alignment"],
                    )
                  }
                >
                  <SelectTrigger aria-label="Alignment">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="left">Left</SelectItem>
                    <SelectItem value="center">Center</SelectItem>
                    <SelectItem value="right">Right</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className={APPEARANCE_FIELD_ROW}>
                <Label>Dropdown Width</Label>
                <Input
                  aria-label="Dropdown Width"
                  value={shortcodeSettings.dropdownWidth}
                  onChange={(e) =>
                    updateShortcodeSettings("dropdownWidth", e.target.value)
                  }
                  placeholder="200px"
                />
              </div>
            </AppearanceSection>
          )}
          {isPro && (
            <AppearanceSection id="flagSettings" title="Flag Settings" pro>
              <div className="space-y-4 min-w-0">
                <div className={APPEARANCE_FIELD_ROW}>
                  <Label className="text-sm">Flag Style</Label>
                  <Select
                    value={shortcodeSettings.flagStyle}
                    onValueChange={(value) =>
                      updateShortcodeSettings(
                        "flagStyle",
                        value as ShortcodeSettings["flagStyle"],
                      )
                    }
                  >
                    <SelectTrigger aria-label="Flag Style">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      {flagStyleOptions.map((option) => (
                        <SelectItem key={option.value} value={option.value}>
                          {option.label}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

                <div className={APPEARANCE_FIELD_ROW}>
                  <Label className="text-sm">Flag Size</Label>
                  <Select
                    value={shortcodeSettings.flagSize}
                    onValueChange={(value) =>
                      updateShortcodeSettings(
                        "flagSize",
                        value as ShortcodeSettings["flagSize"],
                      )
                    }
                  >
                    <SelectTrigger aria-label="Flag Size">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      {flagSizeOptions.map((option) => (
                        <SelectItem key={option.value} value={option.value}>
                          {option.label}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </AppearanceSection>
          )}
        </AppearanceControls>
      </div>

      {/* Right Column - Sticky Preview */}
      <AppearancePreview feature="Currency switcher">
        {() => (
          <CurrencySwitcherPreview
            preset={settings.selectedPreset}
            currencies={currencies}
            shortcodeSettings={shortcodeSettings}
            customizationSettings={settings}
          />
        )}
      </AppearancePreview>
    </div>
  );
}