import React, { memo, useCallback } from "react";
import { applyCustomCssToDocument } from "../../../lib/customCss";
import { DebouncedTextarea } from "../DebouncedTextarea";
import { Check, Monitor, Moon, Palette, Sun } from "lucide-react";
import { useI18n } from "../../../application/i18n/I18nProvider";
import { DARK_UI_THEMES, LIGHT_UI_THEMES } from "../../../infrastructure/config/uiThemes";
import { useAvailableUIFonts } from "../../../application/state/uiFontStore";
import { SUPPORTED_UI_LOCALES } from "../../../infrastructure/config/i18n";
import { cn } from "../../../lib/utils";
import { SectionHeader, SettingsTabContent, SettingRow, Toggle, Select } from "../settings-ui";
import { FontSelect } from "../FontSelect";
import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/tooltip";

function SettingsAppearanceTab(props: {
  theme: "dark" | "light" | "system";
  setTheme: (theme: "dark" | "light" | "system") => void;
  lightUiThemeId: string;
  setLightUiThemeId: (themeId: string) => void;
  darkUiThemeId: string;
  setDarkUiThemeId: (themeId: string) => void;
  accentMode: "theme" | "custom";
  setAccentMode: (mode: "theme" | "custom") => void;
  customAccent: string;
  setCustomAccent: (color: string) => void;
  uiFontFamilyId: string;
  setUiFontFamilyId: (fontId: string) => void;
  uiLanguage: string;
  setUiLanguage: (language: string) => void;
  customCSS: string;
  setCustomCSS: (css: string) => void;
  showRecentHosts: boolean;
  setShowRecentHosts: (enabled: boolean) => void;
  showOnlyUngroupedHostsInRoot: boolean;
  setShowOnlyUngroupedHostsInRoot: (enabled: boolean) => void;
  showSftpTab: boolean;
  setShowSftpTab: (enabled: boolean) => void;
  showHostTreeSidebar: boolean;
  setShowHostTreeSidebar: (enabled: boolean) => void;
  windowOpacity: number;
  setWindowOpacity: (opacity: number) => void;
}) {
  const { t } = useI18n();
  const availableUIFonts = useAvailableUIFonts();
  const {
    theme,
    setTheme,
    lightUiThemeId,
    setLightUiThemeId,
    darkUiThemeId,
    setDarkUiThemeId,
    accentMode,
    setAccentMode,
    customAccent,
    setCustomAccent,
    uiFontFamilyId,
    setUiFontFamilyId,
    uiLanguage,
    setUiLanguage,
    customCSS,
    setCustomCSS,
    showRecentHosts,
    setShowRecentHosts,
    showOnlyUngroupedHostsInRoot,
    setShowOnlyUngroupedHostsInRoot,
    showSftpTab,
    setShowSftpTab,
    showHostTreeSidebar,
    setShowHostTreeSidebar,
    windowOpacity,
    setWindowOpacity,
  } = props;

  const WINDOW_OPACITY_PRESETS = [
    { label: '100%', value: 1 },
    { label: '85%', value: 0.85 },
    { label: '70%', value: 0.7 },
  ] as const;

  const getHslStyle = useCallback((hsl: string) => ({ backgroundColor: `hsl(${hsl})` }), []);

  const hexToHsl = useCallback((hex: string) => {
    const r = parseInt(hex.slice(1, 3), 16) / 255;
    const g = parseInt(hex.slice(3, 5), 16) / 255;
    const b = parseInt(hex.slice(5, 7), 16) / 255;
    const max = Math.max(r, g, b);
    const min = Math.min(r, g, b);
    let h = 0;
    let s = 0;
    const l = (max + min) / 2;
    if (max !== min) {
      const d = max - min;
      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
      switch (max) {
        case r:
          h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
          break;
        case g:
          h = ((b - r) / d + 2) / 6;
          break;
        case b:
          h = ((r - g) / d + 4) / 6;
          break;
      }
    }
    return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
  }, []);

  const ACCENT_COLORS = [
    { name: "Sky", value: "199 89% 48%" },
    { name: "Blue", value: "221.2 83.2% 53.3%" },
    { name: "Indigo", value: "234 89% 62%" },
    { name: "Violet", value: "262.1 83.3% 57.8%" },
    { name: "Purple", value: "271 81% 56%" },
    { name: "Fuchsia", value: "292 84% 61%" },
    { name: "Pink", value: "330 81% 60%" },
    { name: "Rose", value: "346.8 77.2% 49.8%" },
    { name: "Red", value: "0 84.2% 60.2%" },
    { name: "Orange", value: "24.6 95% 53.1%" },
    { name: "Amber", value: "38 92% 50%" },
    { name: "Yellow", value: "48 96% 53%" },
    { name: "Lime", value: "84 81% 44%" },
    { name: "Green", value: "142.1 76.2% 36.3%" },
    { name: "Emerald", value: "160 84% 39%" },
    { name: "Teal", value: "173 80% 40%" },
    { name: "Cyan", value: "189 94% 43%" },
    { name: "Slate", value: "215 16% 47%" },
  ];

  const THEME_OPTIONS: { value: "light" | "system" | "dark"; icon: React.ReactNode; label: string }[] = [
    { value: "light", icon: <Sun size={14} />, label: t("settings.appearance.theme.light") },
    { value: "system", icon: <Monitor size={14} />, label: t("settings.appearance.theme.system") },
    { value: "dark", icon: <Moon size={14} />, label: t("settings.appearance.theme.dark") },
  ];

  const renderThemeSwatches = (
    options: { id: string; name: string; tokens: { background: string } }[],
    value: string,
    onChange: (next: string) => void,
  ) => (
    <div className="flex flex-wrap gap-2 justify-end">
      {options.map((preset) => (
        <Tooltip key={preset.id}>
          <TooltipTrigger asChild>
            <button
              onClick={() => onChange(preset.id)}
              className={cn(
                "w-6 h-6 rounded-full flex items-center justify-center transition-all shadow-sm border border-border/70",
                value === preset.id
                  ? "ring-2 ring-offset-2 ring-foreground scale-110"
                  : "hover:scale-105",
              )}
              style={getHslStyle(preset.tokens.background)}
            >
              {value === preset.id && <Check className="text-white drop-shadow-md" size={10} />}
            </button>
          </TooltipTrigger>
          <TooltipContent>{preset.name}</TooltipContent>
        </Tooltip>
      ))}
    </div>
  );

  return (
    <SettingsTabContent value="appearance">
      <SectionHeader title={t("settings.appearance.language")} />
      <div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
        <SettingRow
          label={t("settings.appearance.language")}
          description={t("settings.appearance.language.desc")}
        >
          <Select
            value={uiLanguage}
            options={SUPPORTED_UI_LOCALES.map((l) => ({ value: l.id, label: l.label }))}
            onChange={(v) => setUiLanguage(v)}
            className="w-40"
          />
        </SettingRow>
        <SettingRow
          label={t("settings.appearance.uiFont")}
          description={t("settings.appearance.uiFont.desc")}
        >
          <FontSelect
            value={uiFontFamilyId}
            fonts={availableUIFonts}
            onChange={(v) => setUiFontFamilyId(v)}
            className="w-48"
          />
        </SettingRow>
      </div>

      <SectionHeader title={t("settings.appearance.windowOpacity")} />
      <div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
        <SettingRow
          label={t("settings.appearance.windowOpacity")}
          description={t("settings.appearance.windowOpacity.desc")}
        >
          <div className="flex flex-col items-end gap-2">
            <div className="flex items-center gap-2">
              <input
                type="range"
                min={50}
                max={100}
                step={5}
                value={Math.round(windowOpacity * 100)}
                onChange={(e) => setWindowOpacity(Number(e.target.value) / 100)}
                className="w-28 accent-primary"
              />
              <span className="text-sm text-muted-foreground w-10 text-right tabular-nums">
                {Math.round(windowOpacity * 100)}%
              </span>
            </div>
            <div className="flex items-center gap-1.5">
              {WINDOW_OPACITY_PRESETS.map((preset) => (
                <button
                  key={preset.label}
                  type="button"
                  onClick={() => setWindowOpacity(preset.value)}
                  className={cn(
                    "px-2.5 py-1 rounded-md text-xs font-medium transition-colors border",
                    windowOpacity === preset.value
                      ? "bg-primary text-primary-foreground border-primary"
                      : "bg-muted/50 text-muted-foreground border-border hover:text-foreground",
                  )}
                >
                  {preset.label}
                </button>
              ))}
            </div>
          </div>
        </SettingRow>
      </div>

      <SectionHeader title={t("settings.appearance.uiTheme")} />
      <div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
        <SettingRow
          label={t("settings.appearance.theme")}
          description={t("settings.appearance.theme.desc")}
        >
          <div className="flex items-center rounded-lg border border-border bg-muted/50 p-0.5">
            {THEME_OPTIONS.map((opt) => (
              <button
                key={opt.value}
                onClick={() => setTheme(opt.value)}
                className={cn(
                  "flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium transition-colors",
                  theme === opt.value
                    ? "bg-background text-foreground shadow-sm"
                    : "text-muted-foreground hover:text-foreground"
                )}
              >
                {opt.icon}
                {opt.label}
              </button>
            ))}
          </div>
        </SettingRow>
      </div>

      <SectionHeader title={t("settings.appearance.accentColor")} />
      <div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
        <SettingRow
          label={t("settings.appearance.accentColor.mode")}
          description={t("settings.appearance.accentColor.mode.desc")}
        >
          <div className="flex items-center gap-2">
            <Toggle
              checked={accentMode === "custom"}
              onChange={(checked) => setAccentMode(checked ? "custom" : "theme")}
            />
          </div>
        </SettingRow>
        {accentMode === "custom" && (
          <div className="py-3 space-y-2">
            <div className="text-sm font-medium">{t("settings.appearance.accentColor.custom")}</div>
            <div className="flex flex-wrap gap-2">
              {ACCENT_COLORS.map((c) => (
                <Tooltip key={c.name}>
                  <TooltipTrigger asChild>
                    <button
                      onClick={() => setCustomAccent(c.value)}
                      className={cn(
                        "w-6 h-6 rounded-full flex items-center justify-center transition-all shadow-sm",
                        customAccent === c.value
                          ? "ring-2 ring-offset-2 ring-foreground scale-110"
                          : "hover:scale-105",
                      )}
                      style={getHslStyle(c.value)}
                    >
                      {customAccent === c.value && <Check className="text-white drop-shadow-md" size={10} />}
                    </button>
                  </TooltipTrigger>
                  <TooltipContent>{c.name}</TooltipContent>
                </Tooltip>
              ))}
              <Tooltip>
                <TooltipTrigger asChild>
                  <label
                    className={cn(
                      "w-6 h-6 rounded-full flex items-center justify-center transition-all shadow-sm cursor-pointer",
                      "bg-gradient-to-br from-pink-500 via-purple-500 to-blue-500",
                      !ACCENT_COLORS.some((c) => c.value === customAccent)
                        ? "ring-2 ring-offset-2 ring-foreground scale-110"
                        : "hover:scale-105",
                    )}
                  >
                    <input
                      type="color"
                      className="sr-only"
                      onChange={(e) => setCustomAccent(hexToHsl(e.target.value))}
                    />
                    {!ACCENT_COLORS.some((c) => c.value === customAccent) ? (
                      <Check className="text-white drop-shadow-md" size={10} />
                    ) : (
                      <Palette size={12} className="text-white drop-shadow-md" />
                    )}
                  </label>
                </TooltipTrigger>
                <TooltipContent>{t("settings.appearance.customColor")}</TooltipContent>
              </Tooltip>
            </div>
          </div>
        )}
      </div>

      <SectionHeader title={t("settings.appearance.themeColor")} />
      <div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
        <SettingRow
          label={t("settings.appearance.themeColor.light")}
          description={t("settings.appearance.themeColor.desc")}
        >
          {renderThemeSwatches(LIGHT_UI_THEMES, lightUiThemeId, setLightUiThemeId)}
        </SettingRow>
        <SettingRow label={t("settings.appearance.themeColor.dark")}>
          {renderThemeSwatches(DARK_UI_THEMES, darkUiThemeId, setDarkUiThemeId)}
        </SettingRow>
      </div>

      <SectionHeader title={t("settings.vault.title")} />
      <div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
        <SettingRow
          label={t('settings.vault.showRecentHosts')}
          description={t('settings.vault.showRecentHostsDesc')}
        >
          <Toggle checked={showRecentHosts} onChange={setShowRecentHosts} />
        </SettingRow>
        <SettingRow
          label={t('settings.vault.showOnlyUngroupedHostsInRoot')}
          description={t('settings.vault.showOnlyUngroupedHostsInRootDesc')}
        >
          <Toggle
            checked={showOnlyUngroupedHostsInRoot}
            onChange={setShowOnlyUngroupedHostsInRoot}
          />
        </SettingRow>
        <SettingRow
          label={t('settings.vault.showSftpTab')}
          description={t('settings.vault.showSftpTabDesc')}
        >
          <Toggle checked={showSftpTab} onChange={setShowSftpTab} />
        </SettingRow>
        <SettingRow
          label={t('settings.vault.showHostTreeSidebar')}
          description={t('settings.vault.showHostTreeSidebarDesc')}
        >
          <Toggle checked={showHostTreeSidebar} onChange={setShowHostTreeSidebar} />
        </SettingRow>
      </div>

      <SectionHeader title={t("settings.appearance.customCss")} />
      <div className="space-y-2">
        <p className="text-xs text-muted-foreground">
          {t("settings.appearance.customCss.desc")}
        </p>
        <DebouncedTextarea
          value={customCSS}
          onCommit={setCustomCSS}
          onDraftChange={applyCustomCssToDocument}
          placeholder={t("settings.appearance.customCss.placeholder")}
          className="w-full h-32 px-3 py-2 text-xs font-mono bg-muted/50 border border-border rounded-lg resize-y focus:outline-none focus:ring-2 focus:ring-primary/50"
          spellCheck={false}
        />
      </div>
    </SettingsTabContent>
  );
}

export default memo(SettingsAppearanceTab);
