import { Icon } from "@icones/react"
import { usePreference } from "@workspace/preferences"

import {
  Container,
  SiteFooter,
  SiteHeader,
} from "../components/layout"
import { LocaleFlag } from "../components/locale-flag"
import { SearchTrigger } from "../components/search-trigger"
import { Swatch } from "../components/swatch"
import { getLocalizedHref } from "../content/registry"
import type { DocLocale } from "../content/types"
import {
  accentColors,
  backgroundShades,
  getPaletteColor,
  themeModes,
  useAppearance,
  type AccentColor,
  type BackgroundShade,
  type ForegroundShade,
  type ThemeMode,
} from "../lib/appearance"
import { useLocale, useTranslate, type Translation } from "../lib/locale"
import { navigateToLocale } from "../lib/locale-navigation"
import { detectLocale } from "../lib/preferences"
import { usePathname } from "../lib/router"

const foregroundOptions: ReadonlyArray<{
  label: Translation
  value: ForegroundShade
}> = [
  { value: "slate", label: { zh: "冷色", us: "Cool" } },
  { value: "neutral", label: { zh: "中性", us: "Neutral" } },
  { value: "stone", label: { zh: "暖色", us: "Warm" } },
]

const messages = {
  accent: { zh: "强调色", us: "Accent color" },
  appearance: { zh: "外观", us: "Appearance" },
  autoDetect: { zh: "自动检测", us: "Automatic detection" },
  autoDetectDescription: {
    zh: "跟随浏览器或操作系统语言设置。",
    us: "Follow the browser or operating system language.",
  },
  background: { zh: "背景色调", us: "Background shade" },
  enable: { zh: "启用", us: "Enable" },
  foreground: { zh: "前景色调", us: "Foreground shade" },
  language: { zh: "语言", us: "Language" },
  settings: { zh: "设置", us: "Settings" },
  theme: { zh: "主题", us: "Theme" },
  themeModes: {
    light: { zh: "浅色", us: "Light" },
    dark: { zh: "深色", us: "Dark" },
    system: { zh: "跟随系统", us: "System" },
  },
} as const

export default function SettingsPage() {
  const locale = useLocale()
  const pathname = usePathname()
  const t = useTranslate()
  const appearance = useAppearance()
  const [localeMode, setLocaleMode] = usePreference("locale-mode")
  const [, setPreferredLocale] = usePreference("locale")
  const autoDetectLocale = localeMode === "auto"

  function selectLocale(nextLocale: DocLocale) {
    setPreferredLocale(nextLocale)
    setLocaleMode("manual")
    navigateToLocale(nextLocale)
  }

  function setAutomaticLocale(enabled: boolean) {
    if (enabled) {
      setLocaleMode("auto")
      navigateToLocale(detectLocale())
    } else {
      setPreferredLocale(locale)
      setLocaleMode("manual")
    }
  }

  return (
    <>
      <SiteHeader
        subleading={
          <h1 className="text-xl font-semibold">{t(messages.settings)}</h1>
        }
        className="h-16 border-b bg-white/70 backdrop-blur-sm dark:border-slate-800 dark:bg-slate-950/80"
        actions={<SearchTrigger />}
      />

      <main>
        <Container className="pt-8 sm:pt-12">
          <section aria-labelledby="appearance-heading">
            <h2 id="appearance-heading" className="mb-4 text-xl font-semibold">
              {t(messages.appearance)}
            </h2>
            <div className="space-y-8 rounded-xl border bg-white/50 p-5 sm:p-8 dark:border-slate-800 dark:bg-slate-900/30">
              <fieldset>
                <legend className="mb-3">{t(messages.theme)}</legend>
                <div
                  role="radiogroup"
                  aria-label={t(messages.theme)}
                  className="w-full space-y-1 rounded-xl border p-1 sm:w-fit sm:min-w-56 dark:border-slate-700"
                  onKeyDown={(event) => {
                    if (
                      event.key !== "ArrowDown" &&
                      event.key !== "ArrowUp" &&
                      event.key !== "ArrowRight" &&
                      event.key !== "ArrowLeft" &&
                      event.key !== "Home" &&
                      event.key !== "End"
                    ) {
                      return
                    }

                    event.preventDefault()
                    const options = Array.from(
                      event.currentTarget.querySelectorAll<HTMLButtonElement>(
                        '[role="radio"]'
                      )
                    )
                    const currentIndex = options.indexOf(
                      document.activeElement as HTMLButtonElement
                    )
                    const moveForward =
                      event.key === "ArrowDown" || event.key === "ArrowRight"
                    let nextIndex = currentIndex

                    if (event.key === "Home") nextIndex = 0
                    else if (event.key === "End") nextIndex = options.length - 1
                    else if (moveForward) {
                      nextIndex = (currentIndex + 1) % options.length
                    } else {
                      nextIndex =
                        (currentIndex - 1 + options.length) % options.length
                    }

                    options[nextIndex]?.focus()
                    options[nextIndex]?.click()
                  }}
                >
                  {themeModes.map((mode) => {
                    const selected = appearance.themeMode === mode

                    return (
                      <button
                        key={mode}
                        type="button"
                        role="radio"
                        aria-checked={selected}
                        tabIndex={selected ? 0 : -1}
                        className="flex h-11 w-full cursor-pointer items-center gap-3 rounded-lg px-3 text-left transition-colors hover:bg-slate-100 focus-visible:outline-2 focus-visible:outline-indigo-500 aria-checked:bg-indigo-100 aria-checked:text-indigo-700 dark:hover:bg-slate-800 dark:aria-checked:bg-indigo-950 dark:aria-checked:text-indigo-300"
                        onClick={() =>
                          appearance.updateAppearance({ themeMode: mode })
                        }
                      >
                        <ThemeIcon mode={mode} />
                        <span>{t(messages.themeModes[mode])}</span>
                        {selected && (
                          <Icon
                            name="tabler:check"
                            className="ml-auto size-4"
                          />
                        )}
                      </button>
                    )
                  })}
                </div>
              </fieldset>

              <ColorField
                label={t(messages.accent)}
                value={appearance.accentColor}
                options={accentColors}
                getColors={(accentColor) => ({
                  light: getPaletteColor(accentColor, 600),
                  dark: getPaletteColor(accentColor, 400),
                })}
                onChange={(accentColor) =>
                  appearance.updateAppearance({ accentColor })
                }
              />

              <ColorField
                label={t(messages.background)}
                value={appearance.backgroundShade}
                options={backgroundShades}
                getColors={(backgroundShade) => ({
                  light: getPaletteColor(backgroundShade, 50),
                  dark: getPaletteColor(backgroundShade, 950),
                })}
                onChange={(backgroundShade) =>
                  appearance.updateAppearance({ backgroundShade })
                }
              />

              <fieldset>
                <legend className="mb-3">{t(messages.foreground)}</legend>
                <div className="flex flex-wrap items-center gap-4">
                  {foregroundOptions.map((option) => (
                    <Swatch
                      key={option.value}
                      light={getPaletteColor(option.value, 950)}
                      dark={getPaletteColor(option.value, 50)}
                      aria-label={t(option.label)}
                      title={t(option.label)}
                      selected={appearance.foregroundShade === option.value}
                      onClick={() =>
                        appearance.updateAppearance({
                          foregroundShade: option.value,
                        })
                      }
                    />
                  ))}
                </div>
              </fieldset>
            </div>
          </section>

          <section
            className="mt-10 sm:mt-12"
            aria-labelledby="language-heading"
          >
            <h2 id="language-heading" className="mb-4 text-xl font-semibold">
              {t(messages.language)}
            </h2>
            <div className="space-y-8 rounded-xl border bg-white/50 p-5 sm:p-8 dark:border-slate-800 dark:bg-slate-900/30">
              <fieldset>
                <legend className="mb-3">{t(messages.language)}</legend>
                <div className="w-full space-y-1 rounded-xl border p-1 sm:w-fit sm:min-w-48 dark:border-slate-700">
                  <LocaleLink
                    disabled={autoDetectLocale}
                    href={getLocalizedHref(pathname, "zh-Hans")}
                    label="简体中文"
                    locale="zh-Hans"
                    selected={locale === "zh-Hans"}
                    onClick={() => selectLocale("zh-Hans")}
                  />
                  <LocaleLink
                    disabled={autoDetectLocale}
                    href={getLocalizedHref(pathname, "en-US")}
                    label="English"
                    locale="en-US"
                    selected={locale === "en-US"}
                    onClick={() => selectLocale("en-US")}
                  />
                </div>
              </fieldset>

              <div className="flex flex-col gap-2">
                <div>{t(messages.autoDetect)}</div>
                <label className="inline-flex w-fit cursor-pointer items-center gap-3">
                  <input
                    type="checkbox"
                    className="size-4 accent-indigo-600"
                    checked={autoDetectLocale}
                    onChange={(event) =>
                      setAutomaticLocale(event.currentTarget.checked)
                    }
                  />
                  <span>{t(messages.enable)}</span>
                </label>
                <p className="text-sm text-(--docs-muted-light) dark:text-(--docs-muted-dark)">
                  {t(messages.autoDetectDescription)}
                </p>
              </div>
            </div>
          </section>
        </Container>
      </main>
      <SiteFooter />
    </>
  )
}

function ColorField<T extends AccentColor | BackgroundShade>({
  getColors,
  label,
  onChange,
  options,
  value,
}: {
  getColors: (value: T) => { dark: string; light: string }
  label: string
  onChange: (value: T) => void
  options: readonly T[]
  value: T
}) {
  return (
    <fieldset>
      <legend className="mb-3">{label}</legend>
      <div className="flex flex-wrap items-center gap-4">
        {options.map((option) => {
          const colors = getColors(option)
          const optionLabel = capitalize(option)

          return (
            <Swatch
              key={option}
              light={colors.light}
              dark={colors.dark}
              aria-label={optionLabel}
              title={optionLabel}
              selected={option === value}
              onClick={() => onChange(option)}
            />
          )
        })}
      </div>
    </fieldset>
  )
}

function ThemeIcon({ mode }: { mode: ThemeMode }) {
  if (mode === "light") {
    return <Icon name="tabler:sun-high" className="size-5" />
  }
  if (mode === "dark") {
    return <Icon name="tabler:moon" className="size-5" />
  }
  return <Icon name="tabler:device-desktop" className="size-5" />
}

function LocaleLink({
  disabled,
  href,
  label,
  locale,
  onClick,
  selected,
}: {
  disabled: boolean
  href: string
  label: string
  locale: DocLocale
  onClick: () => void
  selected: boolean
}) {
  return (
    <a
      href={href}
      hrefLang={locale}
      lang={locale}
      aria-disabled={disabled}
      aria-current={selected ? "page" : undefined}
      tabIndex={disabled ? -1 : undefined}
      className="flex h-11 items-center gap-2 rounded-lg px-3 transition-colors hover:bg-slate-100 focus-visible:outline-2 focus-visible:outline-indigo-500 aria-disabled:cursor-not-allowed aria-disabled:opacity-45 aria-disabled:hover:bg-transparent aria-[current=page]:bg-indigo-100 aria-[current=page]:text-indigo-700 dark:hover:bg-slate-800 dark:aria-disabled:hover:bg-transparent dark:aria-[current=page]:bg-indigo-950 dark:aria-[current=page]:text-indigo-300"
      onClick={(event) => {
        if (disabled) {
          event.preventDefault()
          return
        }
        onClick()
      }}
    >
      <LocaleFlag locale={locale} className="size-5" />
      <span>{label}</span>
      {selected && <Icon name="tabler:check" className="ml-auto size-4" />}
    </a>
  )
}

function capitalize(value: string) {
  return value.charAt(0).toUpperCase() + value.slice(1)
}