/*
 * 설정 레이아웃 커스터마이저(#43) — 상단바 설정 아이콘 → 우측 offcanvas.
 * Nifty 설정 패널 톤: 테마(라이트/다크/시스템) · 레이아웃(사이드바·밀도) · 강조색 프리셋 + 기본값 복원.
 *
 * 상태 소스(단일 출처 재사용, 신규 store 최소):
 *  - 테마     → themeStore(mode/setMode)
 *  - 사이드바 → uiStore(navCollapsed/setNavCollapsed)
 *  - 밀도·강조색 → customizerStore(density·accent, localStorage 지속·documentElement 스탬프)
 *
 * 접근성: Offcanvas 가 role=dialog·aria-modal·Esc·포커스트랩 제공. 각 옵션 그룹은 radiogroup 시맨틱.
 */
import { useTranslation } from 'react-i18next';
import { Offcanvas } from '../ui/Offcanvas';
import { IconCheck, IconMoon, IconSun, IconSettings } from '../ui/icons';
import { useThemeStore, type ThemeMode } from '../../store/themeStore';
import { useUiStore } from '../../store/uiStore';
import { ACCENT_PRESETS, useCustomizerStore, type AccentKey, type Density } from '../../store/customizerStore';
import './settings-customizer.css';

export interface SettingsCustomizerProps {
  open: boolean;
  onClose: () => void;
}

/** 강조색 프리셋 라벨 i18n 키(폴백=store label). */
const ACCENT_LABEL_KEY: Record<AccentKey, string> = {
  default: 'customizer.accent.default',
  indigo: 'customizer.accent.indigo',
  teal: 'customizer.accent.teal',
  violet: 'customizer.accent.violet',
  rose: 'customizer.accent.rose',
  amber: 'customizer.accent.amber',
};

export function SettingsCustomizer({ open, onClose }: SettingsCustomizerProps) {
  const { t } = useTranslation();
  const mode = useThemeStore((s) => s.mode);
  const setMode = useThemeStore((s) => s.setMode);
  const navCollapsed = useUiStore((s) => s.navCollapsed);
  const setNavCollapsed = useUiStore((s) => s.setNavCollapsed);
  const density = useCustomizerStore((s) => s.density);
  const setDensity = useCustomizerStore((s) => s.setDensity);
  const accent = useCustomizerStore((s) => s.accent);
  const setAccent = useCustomizerStore((s) => s.setAccent);
  const reset = useCustomizerStore((s) => s.reset);

  const themeOptions: { value: ThemeMode; label: string; Icon?: typeof IconSun }[] = [
    { value: 'light', label: t('customizer.theme.light', { defaultValue: '라이트' }), Icon: IconSun },
    { value: 'dark', label: t('customizer.theme.dark', { defaultValue: '다크' }), Icon: IconMoon },
    { value: 'system', label: t('customizer.theme.system', { defaultValue: '시스템' }), Icon: IconSettings },
  ];

  const densityOptions: { value: Density; label: string }[] = [
    { value: 'comfortable', label: t('customizer.density.comfortable', { defaultValue: '보통' }) },
    { value: 'compact', label: t('customizer.density.compact', { defaultValue: '컴팩트' }) },
  ];

  /** 기본값 복원 — 커스터마이저 상태(밀도·강조색) + 테마·사이드바까지 초기값으로. */
  const handleReset = () => {
    reset();
    setMode('system');
    setNavCollapsed(false);
  };

  return (
    <Offcanvas
      open={open}
      onClose={onClose}
      title={t('customizer.title', { defaultValue: '화면 설정' })}
      width={360}
      footer={
        <button type="button" className="kx-cz__reset" onClick={handleReset}>
          {t('customizer.reset', { defaultValue: '기본값으로 복원' })}
        </button>
      }
    >
      <p className="kx-cz__lead">
        {t('customizer.lead', { defaultValue: '테마·레이아웃·강조색을 개인화합니다. 이 기기에 저장됩니다.' })}
      </p>

      {/* ── 테마 ── */}
      <section className="kx-cz__section" role="radiogroup" aria-label={t('customizer.theme.title', { defaultValue: '테마' })}>
        <h3 className="kx-cz__heading">{t('customizer.theme.title', { defaultValue: '테마' })}</h3>
        <div className="kx-cz__seg">
          {themeOptions.map((opt) => {
            const active = mode === opt.value;
            return (
              <button
                key={opt.value}
                type="button"
                className={`kx-cz__seg-btn${active ? ' is-active' : ''}`}
                role="radio"
                aria-checked={active}
                onClick={() => setMode(opt.value)}
              >
                {opt.Icon && <opt.Icon size={16} />}
                <span>{opt.label}</span>
              </button>
            );
          })}
        </div>
      </section>

      {/* ── 레이아웃 ── */}
      <section className="kx-cz__section">
        <h3 className="kx-cz__heading">{t('customizer.layout.title', { defaultValue: '레이아웃' })}</h3>

        {/* 사이드바 접기/펼치기 */}
        <div className="kx-cz__row">
          <div className="kx-cz__row-text">
            <span className="kx-cz__row-label">{t('customizer.layout.sidebar', { defaultValue: '사이드바' })}</span>
            <span className="kx-cz__row-desc">
              {navCollapsed
                ? t('customizer.layout.sidebarCollapsed', { defaultValue: '접힘 — 콘텐츠 전폭' })
                : t('customizer.layout.sidebarExpanded', { defaultValue: '펼침 — 메뉴 표시' })}
            </span>
          </div>
          <button
            type="button"
            className={`kx-cz__switch${!navCollapsed ? ' is-on' : ''}`}
            role="switch"
            aria-checked={!navCollapsed}
            aria-label={t('customizer.layout.sidebar', { defaultValue: '사이드바' })}
            onClick={() => setNavCollapsed(!navCollapsed)}
          >
            <span className="kx-cz__switch-knob" aria-hidden="true" />
          </button>
        </div>

        {/* 밀도 */}
        <div className="kx-cz__field" role="radiogroup" aria-label={t('customizer.density.title', { defaultValue: '밀도' })}>
          <span className="kx-cz__field-label">{t('customizer.density.title', { defaultValue: '밀도' })}</span>
          <div className="kx-cz__seg">
            {densityOptions.map((opt) => {
              const active = density === opt.value;
              return (
                <button
                  key={opt.value}
                  type="button"
                  className={`kx-cz__seg-btn${active ? ' is-active' : ''}`}
                  role="radio"
                  aria-checked={active}
                  onClick={() => setDensity(opt.value)}
                >
                  <span>{opt.label}</span>
                </button>
              );
            })}
          </div>
        </div>
      </section>

      {/* ── 강조색 ── */}
      <section className="kx-cz__section" role="radiogroup" aria-label={t('customizer.accent.title', { defaultValue: '강조색' })}>
        <h3 className="kx-cz__heading">{t('customizer.accent.title', { defaultValue: '강조색' })}</h3>
        <div className="kx-cz__swatches">
          {ACCENT_PRESETS.map((preset) => {
            const active = accent === preset.key;
            const label = t(ACCENT_LABEL_KEY[preset.key], { defaultValue: preset.label });
            return (
              <button
                key={preset.key}
                type="button"
                className={`kx-cz__swatch${active ? ' is-active' : ''}`}
                role="radio"
                aria-checked={active}
                aria-label={label}
                title={label}
                onClick={() => setAccent(preset.key)}
              >
                <span className="kx-cz__swatch-dot" style={{ background: preset.swatch }} aria-hidden="true">
                  {active && <IconCheck size={14} />}
                </span>
                <span className="kx-cz__swatch-label">{label}</span>
              </button>
            );
          })}
        </div>
      </section>
    </Offcanvas>
  );
}
