import { useEffect, useMemo, useState } from 'react'
import { Helmet } from 'react-helmet-async'
import { useLocation, useNavigate } from 'react-router-dom'

import FieldError from '@/components/common/FieldError'
import FormField from '@/components/common/FormField'
import Label from '@/components/common/Label'
import PageTitle from '@/components/common/PageTitle'
import MainArea from '@/components/layout/MainArea'
import TagLink from '@/components/TagLink'
import { useDialogue } from '@/components/dialogues/DialogueProvider'
import { Button } from '@/components/ui/button'
import { toast } from '@/components/ui/use-toast'
import BehaviourSettingsSection from '@/components/users/BehaviourSettingsSection'
import InheritDialogue from '@/components/users/InheritDialogue'
import KeyboardSettingsSection from '@/components/users/KeyboardSettingsSection'
import UserCodeDialogue from '@/components/users/UserCodeDialogue'
import { CATEGORY_NAMES, CATEGORIES } from '@/consts'
import { SITE_TITLE } from '@/config'
import { apiPut } from '@/lib/api'
import {
    applyThemeSelection,
    DEFAULT_USER_SETTINGS,
    deriveUserThemeModeFromSlotSelection,
    fetchUserSettings,
    fetchUserThemeSlots,
    getClientActiveThemeSlot,
    getDefaultUserThemeSlot,
    hasStoredClientThemeSelection,
    isUserThemeSlotSelection,
    normaliseThemeSlotSelectionAgainstSlots,
    normaliseUserThemeSlots,
    setCachedUserThemeSlots,
    setClientActiveThemeSlot,
    resolveThemeFromSlotSelection,
    updateUserSettings,
    upsertUserThemeSlot,
    USER_THEME_SLOT_SELECTIONS,
} from '@/lib/settings'
import { useKeyboardShortcutSettings } from '@/lib/useKeyboardShortcuts'
import { cn, inputClass } from '@/lib/utils'
import { useValidationErrors } from '@/lib/useValidationErrors'

import type { CSSProperties, Dispatch, FC, KeyboardEvent, SetStateAction } from 'react'

import type { Category, Tag, User } from '@/types'
import type {
    BuiltinThemeId,
    ClientTheme,
    ThemeSlotSelection,
    ThemeTokens,
    ThemeTagColours,
    UserSettings,
    UserThemeSlotMap,
    UserThemeSlotNo,
    UserThemeSlotSelection,
} from '@/lib/settings'

type Props = {
    user:     User | null
    setUser:  Dispatch<SetStateAction<User | null>> }

type UserFormField = 'name'
type SettingsFormField = 'theme'
type SettingsTab = 'account' | 'theme' | 'keyboard' | 'behavior'
type ThemeTokenKey = Exclude<keyof ThemeTokens, 'tagColours'>

type TabSpec = {
    id:     SettingsTab
    label:  string }

type AccountSectionProps = {
    user:             User
    name:             string
    onNameChange:     (value: string) => void
    onInheritOpen:    () => void
    onUserCodeOpen:   () => void
    onUserSubmit:     () => void
    userBaseErrors:   string[]
    userFieldErrors:  Partial<Record<UserFormField, string[]>> }

type ThemeSelectionItem = {
    id:         ThemeSlotSelection
    label:      string
    editable:   boolean
    baseTheme?: BuiltinThemeId
    slotNo?:    UserThemeSlotNo }

type ThemeTokenFieldSpec = {
    key:    ThemeTokenKey
    label:  string }

type ThemeTokenGroupSpec = {
    title:   string
    fields:  ThemeTokenFieldSpec[] }

type ThemeSectionProps = {
    draftActiveThemeSlot:    ThemeSlotSelection
    draftThemeSlots:         UserThemeSlotMap
    editingThemeSlot:        UserThemeSlotSelection | null
    selectedTheme:           ClientTheme
    selectedThemeLabel:      string
    hasUnsavedChanges:       boolean
    settingsBaseErrors:      string[]
    settingsFieldErrors:     Partial<Record<SettingsFormField, string[]>>
    onSelectThemeSlot:       (selection: ThemeSlotSelection) => void
    onEditThemeSlot:         (selection: UserThemeSlotSelection) => void
    onEnsureEditableTheme:   () => void
    onThemeTokenChange:      (key: ThemeTokenKey, value: string) => void
    onTagColourChange:       (category: Category, colour: string) => void
    onResetThemeSlot:        (selection: UserThemeSlotSelection) => void
    onThemeSubmit:           () => void
    onThemeDiscard:          () => void }

const tabs: TabSpec[] = [
    { id: 'account', label: 'アカウント' },
    { id: 'theme', label: 'テーマ' },
    { id: 'keyboard', label: 'キーボード' },
    { id: 'behavior', label: '動作' } ]

const sectionClassName =
    'space-y-4 rounded-xl border border-border bg-background/80 p-4'

const themeSelections: ThemeSelectionItem[] = [
    { id: 'system', label: 'システム設定', editable: false },
    { id: 'builtin:light', label: '標準ライト', editable: false },
    { id: 'builtin:dark', label: '標準ダーク', editable: false },
    { id: 'user:light:1', label: 'ライト 1', editable: true, baseTheme: 'light', slotNo: 1 },
    { id: 'user:light:2', label: 'ライト 2', editable: true, baseTheme: 'light', slotNo: 2 },
    { id: 'user:light:3', label: 'ライト 3', editable: true, baseTheme: 'light', slotNo: 3 },
    { id: 'user:dark:1', label: 'ダーク 1', editable: true, baseTheme: 'dark', slotNo: 1 },
    { id: 'user:dark:2', label: 'ダーク 2', editable: true, baseTheme: 'dark', slotNo: 2 },
    { id: 'user:dark:3', label: 'ダーク 3', editable: true, baseTheme: 'dark', slotNo: 3 },
]

const themeTokenGroups: ThemeTokenGroupSpec[] = [
    { title: '基本色',
      fields: [
	  { key: 'background', label: '背景' },
	  { key: 'foreground', label: '文字' },
	  { key: 'primary', label: '主ボタン' },
	  { key: 'primaryForeground', label: '主ボタン文字' },
	  { key: 'accent', label: 'アクセント' },
	  { key: 'accentForeground', label: 'アクセント文字' },
      ] },
    { title: 'パネル・カード',
      fields: [
	  { key: 'card', label: 'カード背景' },
	  { key: 'cardForeground', label: 'カード文字' },
	  { key: 'popover', label: 'ポップアップ背景' },
	  { key: 'popoverForeground', label: 'ポップアップ文字' },
	  { key: 'muted', label: '薄い背景' },
	  { key: 'mutedForeground', label: '薄い文字' },
      ] },
    { title: '入力欄・境界線',
      fields: [
	  { key: 'border', label: '境界線' },
	  { key: 'input', label: '入力欄' },
	  { key: 'ring', label: 'フォーカスリング' },
      ] },
    { title: 'リンク',
      fields: [
	  { key: 'link', label: 'リンク' },
      ] },
    { title: '上部ナビ',
      fields: [
	  { key: 'topNavBackground', label: '背景' },
	  { key: 'topNavForeground', label: '文字' },
	  { key: 'topNavBorder', label: '境界線' },
	  { key: 'topNavLink', label: 'リンク' },
	  { key: 'topNavLinkHover', label: 'リンク hover' },
	  { key: 'topNavActiveBackground', label: '選択中背景' },
	  { key: 'topNavActiveForeground', label: '選択中文字' },
	  { key: 'topNavSubmenuBackground', label: 'サブメニュー背景' },
	  { key: 'topNavSubmenuForeground', label: 'サブメニュー文字' },
      ] },
]

const previewTag = (
    id:         number,
    name:       string,
    category:   Category,
    postCount:  number,
    hasWiki:    boolean,
    options?:   { hasDeerjikists?: boolean },
): Tag => ({
    id,
    name,
    category,
    deprecatedAt: null,
    aliases: [],
    parents: [],
    postCount,
    createdAt: '',
    updatedAt: '',
    hasWiki,
    materialId: null,
    hasDeerjikists: options?.hasDeerjikists ?? false,
    children: [] })

const previewTags: Record<Category, Tag> = {
    deerjikist: previewTag (1, 'にじらー', 'deerjikist', 12, true, { hasDeerjikists: true }),
    meme: previewTag (2, 'ミーム', 'meme', 34, true),
    character: previewTag (3, 'キャラクター', 'character', 56, false),
    general: previewTag (4, '一般', 'general', 78, true),
    material: previewTag (5, '素材', 'material', 90, false),
    meta: previewTag (6, 'メタ', 'meta', 21, true),
    nico: previewTag (7, 'nico:sm9', 'nico', 43, false) }

const parseTab = (search: string): SettingsTab => {
  const tab = new URLSearchParams (search).get ('tab')
  return (tabs.some (candidate => candidate.id === tab)
	  ? (tab as SettingsTab)
	  : 'account')
}

const tabButtonId = (tab: SettingsTab): string => `settings-tab-${ tab }`
const tabPanelId = (tab: SettingsTab): string => `settings-panel-${ tab }`

const themePreviewStyle = (tagColours: ThemeTagColours): CSSProperties =>
    Object.fromEntries (
	CATEGORIES.flatMap (category => [
	    [`--tag-colour-${ category }`, tagColours[category]],
	    [`--tag-colour-${ category }-hover`, tagColours[category]]])) as CSSProperties

const themeLabelBySelection = (selection: ThemeSlotSelection): string =>
    themeSelections.find (item => item.id === selection)?.label ?? 'システム設定'

const ensureCompleteThemeSlots = (
    themeSlots: UserThemeSlotMap,
): UserThemeSlotMap =>
    USER_THEME_SLOT_SELECTIONS.reduce<UserThemeSlotMap> (
	(complete, selection) => {
	  const [_, baseTheme, slotNo] = selection.split (':')
	  complete[selection] =
	      themeSlots[selection]
	      ?? getDefaultUserThemeSlot (
		  baseTheme as BuiltinThemeId,
		  Number (slotNo) as UserThemeSlotNo,
	      )
	  return complete
	},
	{ ...themeSlots },
    )

const serialiseThemeDraft = (
    activeThemeSlot: ThemeSlotSelection,
    themeSlots:      UserThemeSlotMap,
): string =>
    JSON.stringify ({
	activeThemeSlot,
	themeSlots: USER_THEME_SLOT_SELECTIONS.map (selection => ({
	    selection,
	    tokens: themeSlots[selection]?.tokens,
	})),
    })

const themeToSelection = (
    theme: UserSettings['theme'],
): ThemeSlotSelection =>
    theme === 'system'
    ? 'system'
    : `builtin:${ theme }`

const themeRowBaseLabel = (
    selection: ThemeSlotSelection,
): string =>
    selection === 'system'
    ? '端末設定に従います'
    : themeLabelBySelection (selection)


const formatHslComponent = (value: number): string =>
    Number.isInteger (value) ? String (value) : value.toFixed (1).replace (/\.0$/, '')


const hslTokenToHex = (token: string): string => {
  const match =
      token.match (
	  /^(-?\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%$/,
      )
  if (match == null)
    return '#000000'

  const hue = Number (match[1]) / 360
  const saturation = Number (match[2]) / 100
  const lightness = Number (match[3]) / 100

  if (saturation === 0)
    {
      const channel = Math.round (lightness * 255)
      const hex = channel.toString (16).padStart (2, '0')
      return `#${ hex }${ hex }${ hex }`
    }

  const hueToRgb = (
      p: number,
      q: number,
      t: number,
  ): number => {
    let adjusted = t

    if (adjusted < 0)
      adjusted += 1
    if (adjusted > 1)
      adjusted -= 1
    if (adjusted < 1 / 6)
      return p + (q - p) * 6 * adjusted
    if (adjusted < 1 / 2)
      return q
    if (adjusted < 2 / 3)
      return p + (q - p) * (2 / 3 - adjusted) * 6
    return p
  }

  const q =
      lightness < .5
      ? lightness * (1 + saturation)
      : lightness + saturation - lightness * saturation
  const p = 2 * lightness - q
  const red = Math.round (hueToRgb (p, q, hue + 1 / 3) * 255)
  const green = Math.round (hueToRgb (p, q, hue) * 255)
  const blue = Math.round (hueToRgb (p, q, hue - 1 / 3) * 255)

  return `#${ [red, green, blue]
      .map (channel => channel.toString (16).padStart (2, '0'))
      .join ('') }`
}


const hexToHslToken = (hex: string): string => {
  const red = parseInt (hex.slice (1, 3), 16) / 255
  const green = parseInt (hex.slice (3, 5), 16) / 255
  const blue = parseInt (hex.slice (5, 7), 16) / 255
  const max = Math.max (red, green, blue)
  const min = Math.min (red, green, blue)
  const lightness = (max + min) / 2

  if (max === min)
    return `0 0% ${ formatHslComponent (lightness * 100) }%`

  const delta = max - min
  const saturation =
      lightness > .5
      ? delta / (2 - max - min)
      : delta / (max + min)

  let hue = 0
  switch (max)
  {
  case red:
    hue = (green - blue) / delta + (green < blue ? 6 : 0)
    break
  case green:
    hue = (blue - red) / delta + 2
    break
  case blue:
    hue = (red - green) / delta + 4
    break
  }

  return [
      formatHslComponent (hue * 60),
      `${ formatHslComponent (saturation * 100) }%`,
      `${ formatHslComponent (lightness * 100) }%`,
  ].join (' ')
}


const AccountSection: FC<AccountSectionProps> = (
    { name,
      onInheritOpen,
      onNameChange,
      onUserCodeOpen,
      onUserSubmit,
      user,
      userBaseErrors,
      userFieldErrors },
) => (
    <section className={sectionClassName}>
      <h2 className="text-xl font-bold">アカウント</h2>
      <FieldError messages={userBaseErrors}/>

      <FormField label="表示名" messages={userFieldErrors.name}>
	{({ describedBy, invalid }) => (
	    <>
	      <input
		  type="text"
		  aria-describedby={describedBy}
		  aria-invalid={invalid}
		  className={inputClass (invalid)}
		  value={name}
		  placeholder="名もなきニジラー"
		  onChange={ev => onNameChange (ev.target.value)}/>
	      {!(user.name) && (
		  <p className="mt-1 text-sm text-red-500">
		    名前が未設定のアカウントは 30 日間アクセスしないと削除されます!!!!
		  </p>)}
	    </>)}
      </FormField>

      <div className="flex flex-wrap gap-2">
	<Button type="button" onClick={onUserSubmit}>
	  表示名を更新
	</Button>
      </div>

      <div className="space-y-2">
	<Label>引継ぎ</Label>
	<div className="flex flex-wrap gap-2">
	  <Button
	      type="button"
	      onClick={onUserCodeOpen}
	      className="bg-gray-600 text-white"
	      disabled={!(user)}>
	    引継ぎコードを表示
	  </Button>
	  <Button
	      type="button"
	      onClick={onInheritOpen}
	      className="bg-red-600 text-white"
	      disabled={!(user)}>
	    ほかのブラウザから引継ぐ
	  </Button>
	</div>
      </div>
    </section>)

const ThemeSection: FC<ThemeSectionProps> = (
    { draftActiveThemeSlot,
      draftThemeSlots,
      editingThemeSlot,
      selectedTheme,
      selectedThemeLabel,
      hasUnsavedChanges,
      settingsBaseErrors,
      settingsFieldErrors,
      onSelectThemeSlot,
      onEditThemeSlot,
      onEnsureEditableTheme,
      onThemeTokenChange,
      onTagColourChange,
      onResetThemeSlot,
      onThemeSubmit,
      onThemeDiscard },
) => (
    <section className={sectionClassName}>
      <div className="flex flex-wrap items-start justify-between gap-3">
	<div className="space-y-1">
	  <h2 className="text-xl font-bold">テーマ</h2>
	  <p className="text-sm text-muted-foreground">
	    現在の表示: {selectedThemeLabel}
	  </p>
	  {editingThemeSlot && (
	      <p className="text-sm text-muted-foreground">
		編輯対象: {themeLabelBySelection (editingThemeSlot)}
	      </p>)}
	  {hasUnsavedChanges && (
	      <p className="text-sm text-amber-700 dark:text-amber-300">
		未保存の変更があります
	      </p>)}
	</div>

	<div className="flex flex-wrap gap-2">
	  <Button
	      type="button"
	      variant="outline"
	      disabled={!(hasUnsavedChanges)}
	      onClick={onThemeDiscard}>
	    変更を破棄
	  </Button>
	  <Button
	      type="button"
	      disabled={!(hasUnsavedChanges)}
	      onClick={onThemeSubmit}>
	    保存
	  </Button>
	</div>
      </div>

      <FieldError messages={settingsBaseErrors}/>
      <FieldError messages={settingsFieldErrors.theme ?? []}/>

      <div className="space-y-3">
	{themeSelections.map (selection => {
	    const themeSlot =
		selection.editable
		? draftThemeSlots[selection.id as UserThemeSlotSelection]
		: null
	    const isSelected = draftActiveThemeSlot === selection.id
	    const isEditing = editingThemeSlot === selection.id

	    return (
		<div
		    key={selection.id}
		    className={cn (
			'space-y-3 rounded-xl border border-border/70 bg-background/70 p-4',
			isSelected && 'ring-1 ring-primary/30',
		    )}>
		  <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
		    <div className="space-y-1">
		      <p className="text-sm font-semibold">{selection.label}</p>
		      <p className="text-sm text-muted-foreground">
			{themeRowBaseLabel (selection.id)}
		      </p>
		    </div>

		    <div className="flex flex-wrap gap-2">
		      <Button
			  type="button"
			  variant={isSelected ? 'default' : 'outline'}
			  onClick={() => onSelectThemeSlot (selection.id)}>
			選択
		      </Button>
		      {selection.editable && (
			  <>
			    <Button
				type="button"
				variant={isEditing ? 'default' : 'outline'}
				onClick={() =>
				    onEditThemeSlot (selection.id as UserThemeSlotSelection)}>
			      編集
			    </Button>
			    <Button
				type="button"
				variant="outline"
				disabled={!(hasUnsavedChanges) || !(isEditing || isSelected)}
				onClick={onThemeSubmit}>
			      保存
			    </Button>
			    <Button
				type="button"
				variant="ghost"
				onClick={() =>
				    onResetThemeSlot (selection.id as UserThemeSlotSelection)}>
			      既定に戻す
			    </Button>
			  </>)}
		    </div>
		  </div>

		  {themeSlot && (
		      <div style={themePreviewStyle (themeSlot.tokens.tagColours)}>
			<TagLink
			    tag={previewTags.general}
			    linkFlg={false}
			    truncateOnMobile
			    withWiki={false}/>
		      </div>)}
		</div>)
	})}
      </div>

      <div className="space-y-4">
	{themeTokenGroups.map (group => (
	    <div
		key={group.title}
		className="space-y-3 rounded-xl border border-border/70 bg-background/70 p-4">
	      <h3 className="text-sm font-semibold">{group.title}</h3>
	      <div className="space-y-3">
		{group.fields.map (field => (
		    <div
			key={field.key}
			className="flex flex-col gap-3 rounded-lg border border-border/70 px-3 py-3
				   sm:flex-row sm:items-center sm:justify-between">
		      <div className="space-y-1">
			<p className="text-sm font-medium">{field.label}</p>
		      </div>
		      <div className="flex flex-wrap items-center gap-3">
			<input
			    type="color"
			    value={hslTokenToHex (selectedTheme.tokens[field.key])}
			    onPointerDown={onEnsureEditableTheme}
			    onFocus={onEnsureEditableTheme}
			    onChange={ev =>
				onThemeTokenChange (field.key, hexToHslToken (ev.target.value))}
			    className="h-10 w-16 cursor-pointer rounded border border-border
				       bg-transparent p-1"/>
		      </div>
		    </div>))}
	      </div>
	    </div>))}

	<div className="space-y-3 rounded-xl border border-border/70 bg-background/70 p-4">
	  <div className="flex flex-wrap items-center justify-between gap-2">
	    <div>
	      <h3 className="font-medium">タグ</h3>
	    </div>
	  </div>

	  <div className="space-y-3">
	    {CATEGORIES.map (category => (
		<div
		    key={category}
		    className="flex flex-col gap-3 rounded-lg border border-border/70 px-3 py-3
			       sm:flex-row sm:items-center sm:justify-between">
		  <div className="space-y-2">
		    <p className="text-sm font-medium">{CATEGORY_NAMES[category]}</p>
		    <div style={themePreviewStyle (selectedTheme.tokens.tagColours)}>
		      <TagLink
			  tag={previewTags[category]}
			  linkFlg={false}
			  truncateOnMobile
			  withWiki={false}/>
		    </div>
		  </div>

		  <div className="flex flex-wrap items-center gap-3">
		    <input
			type="color"
			value={selectedTheme.tokens.tagColours[category]}
			onPointerDown={onEnsureEditableTheme}
			onFocus={onEnsureEditableTheme}
			onChange={ev => onTagColourChange (category, ev.target.value)}
			className="h-10 w-16 cursor-pointer rounded border border-border
				   bg-transparent p-1"/>
		  </div>
		</div>))}
	  </div>
	</div>
      </div>
    </section>)


const SettingPage: FC<Props> = ({ user, setUser }) => {
  const location = useLocation ()
  const navigate = useNavigate ()
  const dialogue = useDialogue ()

  const [inheritVsbl, setInheritVsbl] = useState (false)
  const [loading, setLoading] = useState (true)
  const [name, setName] = useState ('')
  const [settingsError, setSettingsError] = useState<string | null> (null)
  const [, setDraftSettings] = useState<UserSettings> (DEFAULT_USER_SETTINGS)
  const [savedActiveThemeSlot, setSavedActiveThemeSlot] =
      useState<ThemeSlotSelection> (getClientActiveThemeSlot ())
  const [draftActiveThemeSlot, setDraftActiveThemeSlot] =
      useState<ThemeSlotSelection> (getClientActiveThemeSlot ())
  const [savedThemeSlots, setSavedThemeSlots] =
      useState<UserThemeSlotMap> (() => ensureCompleteThemeSlots ({ }))
  const [draftThemeSlots, setDraftThemeSlots] =
      useState<UserThemeSlotMap> (() => ensureCompleteThemeSlots ({ }))
  const [editingThemeSlot, setEditingThemeSlot] =
      useState<UserThemeSlotSelection | null> (null)
  const [userCodeVsbl, setUserCodeVsbl] = useState (false)
  const { conflictActionIds } = useKeyboardShortcutSettings ()
  const { baseErrors: userBaseErrors,
	  fieldErrors: userFieldErrors,
	  clearValidationErrors: clearUserValidationErrors,
	  applyValidationError: applyUserValidationError } = useValidationErrors<UserFormField> ()
  const { baseErrors: settingsBaseErrors,
	  fieldErrors: settingsFieldErrors,
	  clearValidationErrors: clearSettingsValidationErrors,
	  applyValidationError: applySettingsValidationError } =
      useValidationErrors<SettingsFormField> ()

  const activeTab = useMemo<SettingsTab> (() => parseTab (location.search), [location.search])
  const selectedTheme = useMemo<ClientTheme> (
      () => {
	  const resolvedTheme =
	      resolveThemeFromSlotSelection (draftActiveThemeSlot, draftThemeSlots)
	  return {
	      id: resolvedTheme.baseTheme,
	      name: themeLabelBySelection (draftActiveThemeSlot),
	      builtin: resolvedTheme.builtin,
	      baseTheme: resolvedTheme.baseTheme,
	      tokens: resolvedTheme.tokens,
	  }
      },
      [draftActiveThemeSlot, draftThemeSlots],
  )
  const hasUnsavedThemeChanges = useMemo (
      () =>
	  serialiseThemeDraft (draftActiveThemeSlot, draftThemeSlots)
	  !== serialiseThemeDraft (savedActiveThemeSlot, savedThemeSlots),
      [draftActiveThemeSlot, draftThemeSlots, savedActiveThemeSlot, savedThemeSlots],
  )

  const setActiveTab = (tab: SettingsTab) => {
    const params = new URLSearchParams (location.search)
    params.set ('tab', tab)
    navigate (
	`${ location.pathname }?${ params.toString () }`,
	{ replace: true })
  }

  const settingsTabErrors = useMemo<Record<SettingsTab, boolean>> (
      () => (
	  { account: Boolean (userFieldErrors.name?.length),
	    theme: Boolean (settingsFieldErrors.theme?.length),
	    keyboard: conflictActionIds.size > 0,
	    behavior: false }),
      [conflictActionIds.size, settingsFieldErrors.theme, userFieldErrors.name],
  )

  const applyDraftThemeSelection = (
      activeThemeSlot: ThemeSlotSelection,
      themeSlots:      UserThemeSlotMap,
  ) => {
    setDraftActiveThemeSlot (activeThemeSlot)
    setDraftThemeSlots (themeSlots)
    setDraftSettings (current => ({
	...current,
	theme: deriveUserThemeModeFromSlotSelection (activeThemeSlot),
    }))
    applyThemeSelection (activeThemeSlot, themeSlots)
  }

  const confirmThemeSlotSwitch = async (
      onConfirmed: (themeSlots: UserThemeSlotMap) => void,
  ): Promise<void> => {
    if (!(hasUnsavedThemeChanges))
      {
	onConfirmed (draftThemeSlots)
	return
      }

    const confirmed = await dialogue.confirm ({
	title: '未保存の変更があります',
	description: 'このまま切り替えると、保存していない変更は失われます。',
	confirmText: '変更を破棄して切り替える',
	cancelText: 'このまま編輯する',
    })

    if (!(confirmed))
      return

    setDraftActiveThemeSlot (savedActiveThemeSlot)
    setDraftThemeSlots (savedThemeSlots)
    setEditingThemeSlot (null)
    onConfirmed (savedThemeSlots)
  }

  const ensureEditableThemeSlot = async (): Promise<UserThemeSlotSelection | null> => {
    if (editingThemeSlot != null)
      return editingThemeSlot
    if (isUserThemeSlotSelection (draftActiveThemeSlot))
      {
	setEditingThemeSlot (draftActiveThemeSlot)
	return draftActiveThemeSlot
      }

    const choice = await dialogue.choice<UserThemeSlotSelection> ({
	title: '保存先を選択してください',
	description: '色を変更する前に、保存先のテーマ枠を選択してください。',
	cancelText: '取消',
	choices: themeSelections
	    .filter (selection => selection.editable)
	    .map (selection => ({
		value: selection.id as UserThemeSlotSelection,
		label: selection.label,
	    })),
    })

    if (choice == null)
      return null

    setEditingThemeSlot (choice)
    applyDraftThemeSelection (choice, draftThemeSlots)
    return choice
  }

  const updateDraftThemeSlot = (
      selection: UserThemeSlotSelection,
      updater:   (tokens: ThemeTokens) => ThemeTokens,
      options?:  { activeThemeSlot?: ThemeSlotSelection },
  ) => {
    const currentThemeSlot =
	draftThemeSlots[selection]
	?? ensureCompleteThemeSlots ({ })[selection]
    const nextThemeSlots = {
	...draftThemeSlots,
	[selection]: {
	    ...currentThemeSlot,
	    tokens: updater (currentThemeSlot.tokens),
	},
    }

    applyDraftThemeSelection (
	options?.activeThemeSlot ?? draftActiveThemeSlot,
	nextThemeSlots,
    )
  }

  const handleTabKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
    const currentIndex = tabs.findIndex (tab => tab.id === activeTab)

    switch (event.key)
    {
    case 'ArrowDown':
    case 'ArrowRight':
      event.preventDefault ()
      setActiveTab (tabs[(currentIndex + 1) % tabs.length].id)
      break

    case 'ArrowUp':
    case 'ArrowLeft':
      event.preventDefault ()
      setActiveTab (tabs[(currentIndex - 1 + tabs.length) % tabs.length].id)
      break

    case 'Home':
      event.preventDefault ()
      setActiveTab (tabs[0].id)
      break

    case 'End':
      event.preventDefault ()
      setActiveTab (tabs[tabs.length - 1].id)
      break
    }
  }

  const handleUserSubmit = async () => {
    if (!(user))
      return

    clearUserValidationErrors ()

    const formData = new FormData
    formData.append ('name', name)

    try
    {
      const data = await apiPut<User> (
	  `/users/${ user.id }`, formData,
	  { headers: { 'Content-Type': 'multipart/form-data' } },
      )
      setUser (currentUser => ({ ...currentUser, ...data }))
      toast ({ title: '表示名を更新しました．' })
    }
    catch (submitError)
    {
      applyUserValidationError (submitError)
      toast ({ title: '表示名を更新できませんでした．' })
    }
  }

  const handleThemeSubmit = async () => {
    clearSettingsValidationErrors ()

    try
    {
      let nextSavedThemeSlots = { ...savedThemeSlots }

      for (const selection of USER_THEME_SLOT_SELECTIONS)
	{
	  const draftThemeSlot = draftThemeSlots[selection]
	  const savedThemeSlot = savedThemeSlots[selection]
	  const requiresPersist =
	      selection === draftActiveThemeSlot
	      && isUserThemeSlotSelection (draftActiveThemeSlot)
	      && savedThemeSlot?.createdAt == null

	  if (
	      JSON.stringify (draftThemeSlot?.tokens)
	      === JSON.stringify (savedThemeSlot?.tokens)
	      && !(requiresPersist)
	  )
	    continue

	  const persisted = await upsertUserThemeSlot (
	      draftThemeSlot?.baseTheme ?? selection.split (':')[1] as BuiltinThemeId,
	      draftThemeSlot?.slotNo ?? Number (selection.split (':')[2]) as UserThemeSlotNo,
	      draftThemeSlot?.tokens ?? getDefaultUserThemeSlot (
		  selection.split (':')[1] as BuiltinThemeId,
		  Number (selection.split (':')[2]) as UserThemeSlotNo,
	      ).tokens,
	  )
	  nextSavedThemeSlots = {
	      ...nextSavedThemeSlots,
	      [selection]: persisted,
	  }
	}

      const themeMode =
	  deriveUserThemeModeFromSlotSelection (draftActiveThemeSlot)
      const data = await updateUserSettings ({ theme: themeMode })
      const completeThemeSlots = ensureCompleteThemeSlots (nextSavedThemeSlots)

      setDraftSettings ({ ...data, theme: themeMode })
      setSavedActiveThemeSlot (draftActiveThemeSlot)
      setSavedThemeSlots (completeThemeSlots)
      setDraftThemeSlots (completeThemeSlots)
      setEditingThemeSlot (
	  isUserThemeSlotSelection (draftActiveThemeSlot)
	  ? draftActiveThemeSlot
	  : null,
      )
      setClientActiveThemeSlot (draftActiveThemeSlot)
      setCachedUserThemeSlots (completeThemeSlots)
      applyThemeSelection (draftActiveThemeSlot, completeThemeSlots)
      toast ({ title: 'テーマ設定を保存しました．' })
    }
    catch (submitError)
    {
      applySettingsValidationError (submitError)
      toast ({ title: 'テーマ設定を保存できませんでした．' })
    }
  }

  const handleThemeDiscard = () => {
    setDraftActiveThemeSlot (savedActiveThemeSlot)
    setDraftThemeSlots (savedThemeSlots)
    setEditingThemeSlot (
	isUserThemeSlotSelection (savedActiveThemeSlot)
	? savedActiveThemeSlot
	: null,
    )
    applyThemeSelection (savedActiveThemeSlot, savedThemeSlots)
  }

  useEffect (() => {
    if (!user)
      return

    setName (user.name ?? '')
  }, [user])

  useEffect (() => {
    if (!(user))
      return

    let cancelled = false

    void (async () => {
      setLoading (true)

      try
      {
	const [settings, themeSlots] = await Promise.all ([
	    fetchUserSettings (),
	    fetchUserThemeSlots (),
	])
	if (cancelled)
	  return

	const storedThemeSlots = normaliseUserThemeSlots (themeSlots)
	const completeThemeSlots = ensureCompleteThemeSlots (storedThemeSlots)
	const initialSelection = (
	    hasStoredClientThemeSelection ()
	    ? getClientActiveThemeSlot ()
	    : themeToSelection (settings.theme)
	)
	const nextSelection = normaliseThemeSlotSelectionAgainstSlots (
	    initialSelection,
	    storedThemeSlots,
	)
	const themeMode = deriveUserThemeModeFromSlotSelection (nextSelection)

	setDraftSettings ({ ...settings, theme: themeMode })
	setSavedActiveThemeSlot (nextSelection)
	setDraftActiveThemeSlot (nextSelection)
	setSavedThemeSlots (completeThemeSlots)
	setDraftThemeSlots (completeThemeSlots)
	setEditingThemeSlot (
	    isUserThemeSlotSelection (nextSelection)
	    ? nextSelection
	    : null,
	)
	setCachedUserThemeSlots (completeThemeSlots)
	applyThemeSelection (nextSelection, completeThemeSlots)
	if (nextSelection !== initialSelection)
	  setClientActiveThemeSlot (nextSelection)
	setSettingsError (null)
      }
      catch
      {
	if (cancelled)
	  return

	setSettingsError ('設定の読込みに失敗しました．')
      }
      finally
      {
	if (!(cancelled))
	  setLoading (false)
      }
    }) ()

    return () => {
      cancelled = true
    }
  }, [user])

  useEffect (() => {
    if (userFieldErrors.name?.length)
      setActiveTab ('account')
  }, [location.pathname, location.search, userFieldErrors.name])

  useEffect (() => {
    if (settingsFieldErrors.theme?.length)
      setActiveTab ('theme')
  }, [location.pathname, location.search, settingsFieldErrors.theme])

  useEffect (() => {
    applyThemeSelection (draftActiveThemeSlot, draftThemeSlots)

    return () => {
      applyThemeSelection (savedActiveThemeSlot, savedThemeSlots)
    }
  }, [draftActiveThemeSlot, draftThemeSlots, savedActiveThemeSlot, savedThemeSlots])

  const accountSectionProps: AccountSectionProps | null =
      user
      ? {
	  user,
	  name,
	  onNameChange: setName,
	  onInheritOpen: () => setInheritVsbl (true),
	  onUserCodeOpen: () => setUserCodeVsbl (true),
	  onUserSubmit: handleUserSubmit,
	  userBaseErrors,
	  userFieldErrors,
      }
      : null

  const themeSectionProps: ThemeSectionProps = {
      draftActiveThemeSlot,
      draftThemeSlots,
      editingThemeSlot,
      selectedTheme,
      selectedThemeLabel: themeLabelBySelection (draftActiveThemeSlot),
      hasUnsavedChanges: hasUnsavedThemeChanges,
      settingsBaseErrors,
      settingsFieldErrors,
      onSelectThemeSlot: selection => {
	  void confirmThemeSlotSwitch (themeSlots => {
	      setEditingThemeSlot (null)
	      applyDraftThemeSelection (selection, themeSlots)
	  })
      },
      onEditThemeSlot: selection => {
	  void confirmThemeSlotSwitch (themeSlots => {
	      setEditingThemeSlot (selection)
	      applyDraftThemeSelection (selection, themeSlots)
	  })
      },
      onEnsureEditableTheme: () => {
	  void ensureEditableThemeSlot ()
      },
      onThemeTokenChange: (key, value) => {
	  void (async () => {
	      const editableThemeSlot = await ensureEditableThemeSlot ()
	      if (editableThemeSlot == null)
		return

	      updateDraftThemeSlot (editableThemeSlot, tokens => ({
		  ...tokens,
		  [key]: value,
	      }), { activeThemeSlot: editableThemeSlot })
	  }) ()
      },
      onTagColourChange: (category, colour) => {
	  void (async () => {
	      const editableThemeSlot = await ensureEditableThemeSlot ()
	      if (editableThemeSlot == null)
		return

	      updateDraftThemeSlot (editableThemeSlot, tokens => ({
		  ...tokens,
		  tagColours: {
		      ...tokens.tagColours,
		      [category]: colour,
		  },
	      }), { activeThemeSlot: editableThemeSlot })
	  }) ()
      },
      onResetThemeSlot: selection => {
	  const baseTheme = draftThemeSlots[selection]?.baseTheme ?? selection.split (':')[1] as BuiltinThemeId
	  updateDraftThemeSlot (
	      selection,
	      () => getDefaultUserThemeSlot (
		  baseTheme,
		  draftThemeSlots[selection]?.slotNo
		      ?? Number (selection.split (':')[2]) as UserThemeSlotNo,
	      ).tokens,
	  )
      },
      onThemeSubmit: handleThemeSubmit,
      onThemeDiscard: handleThemeDiscard,
  }

  return (
      <MainArea>
	<Helmet>
	  <meta name="robots" content="noindex"/>
	  <title>設定 | {SITE_TITLE}</title>
	</Helmet>

	<div className="mx-auto max-w-xl space-y-4 p-4 md:hidden">
	  <PageTitle>設定</PageTitle>
	  <FieldError messages={settingsError ? [settingsError] : []}/>
	  <div
	      role="tablist"
	      aria-label="設定区分"
	      aria-orientation="horizontal"
	      className="-mx-4 flex gap-2 overflow-x-auto px-4 pb-1">
	    {tabs.map (tab => (
		<button
		    key={tab.id}
		    id={tabButtonId (tab.id)}
		    type="button"
		    role="tab"
		    aria-selected={activeTab === tab.id}
		    aria-controls={tabPanelId (tab.id)}
		    className={cn (
			'shrink-0 rounded-full border px-3 py-2 text-sm font-medium',
			(activeTab === tab.id
			 ? ['border-slate-900 bg-slate-900 text-white',
			    'dark:border-slate-100 dark:bg-slate-100 dark:text-slate-900']
			 : ['border-border bg-background text-foreground']),
		    )}
		    onClick={() => setActiveTab (tab.id)}>
		  {tab.label}
		  {settingsTabErrors[tab.id] ? ' !' : ''}
		</button>))}
	  </div>
	  {loading ? 'Loading...' : (
	      <div
		  id={tabPanelId (activeTab)}
		  role="tabpanel"
		  aria-labelledby={tabButtonId (activeTab)}>
		{accountSectionProps && activeTab === 'account' && (
		    <AccountSection {...accountSectionProps}/>)}
		{activeTab === 'theme' && <ThemeSection {...themeSectionProps}/>}
		{activeTab === 'keyboard' && (
		    <KeyboardSettingsSection sectionClassName={sectionClassName}/>)}
		{activeTab === 'behavior' && (
		    <BehaviourSettingsSection sectionClassName={sectionClassName}/>)}
	      </div>)}
	</div>

	<div className="hidden md:flex md:justify-center md:px-4">
	  <div className="grid w-full max-w-[58rem] grid-cols-[12rem_minmax(0,1fr)] gap-6">
	    <div
		role="tablist"
		aria-label="設定区分"
		aria-orientation="vertical"
		className="sticky top-4 flex h-fit flex-col gap-2">
	      {tabs.map (tab => (
		  <button
		      key={tab.id}
		      id={tabButtonId (tab.id)}
		      type="button"
		      role="tab"
		      aria-selected={activeTab === tab.id}
		      aria-controls={tabPanelId (tab.id)}
		      tabIndex={activeTab === tab.id ? 0 : -1}
		      className={cn (
			  'rounded-xl border px-4 py-3 text-left text-sm font-medium',
			  (activeTab === tab.id
			   ? ['border-slate-900 bg-slate-900 text-white',
			      'dark:border-slate-100 dark:bg-slate-100 dark:text-slate-900']
			   : ['border-slate-300 bg-white text-slate-700',
			      'dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100']),
		      )}
		      onClick={() => setActiveTab (tab.id)}
		      onKeyDown={handleTabKeyDown}>
		    {tab.label}
		    {settingsTabErrors[tab.id] ? ' ⚠' : ''}
		  </button>))}
	    </div>

	    <div className="w-full max-w-xl justify-self-center space-y-4">
	      <PageTitle>設定</PageTitle>
	      <FieldError messages={settingsError ? [settingsError] : []}/>
	      {loading ? 'Loading...' : (
		  <div
		      id={tabPanelId (activeTab)}
		      role="tabpanel"
		      aria-labelledby={tabButtonId (activeTab)}>
		    {activeTab === 'account' && accountSectionProps && (
			<AccountSection {...accountSectionProps}/>)}
		    {activeTab === 'theme' && <ThemeSection {...themeSectionProps}/>}
		    {activeTab === 'keyboard' && (
			<KeyboardSettingsSection sectionClassName={sectionClassName}/>)}
		    {activeTab === 'behavior' && (
			<BehaviourSettingsSection sectionClassName={sectionClassName}/>)}
		  </div>)}
	    </div>
	  </div>
	</div>

	<UserCodeDialogue
	    visible={userCodeVsbl}
	    onVisibleChange={setUserCodeVsbl}
	    user={user}
	    setUser={setUser}/>

	<InheritDialogue
	    visible={inheritVsbl}
	    onVisibleChange={setInheritVsbl}
	    setUser={setUser}/>
      </MainArea>)
}

export default SettingPage