/*
 * SCR-48 마이페이지·환경설정. 참조: UIWS auth/MyProfilePage.
 * 좌: 탭 레일(프로필·보안·알림설정·테마/언어) / 우: 설정 폼.
 * 백엔드: /api/auth/me·/api/auth/otp/status. 2FA는 기존 /otp-setup 화면으로 연결(중복 구현 금지).
 * ★ 갭: 프로필 수정·알림 규칙·환경설정 저장 엔드포인트 부재 → 테마/언어는 클라이언트 로컬 저장. 07_work_api_gaps.md 기록.
 */
import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { authApi } from '../../api/endpoints';
import { useAuthStore } from '../../store/authStore';
import { Button } from '../../components/ui/Button';
import { RoleBadge } from '../../components/ui/Badge';
import { ErrorState, Skeleton } from '../../components/ui/States';
import { IconBell, IconCheckCircle, IconSettings, IconShieldCheck, IconUser } from '../../components/ui/icons';
import { useToast } from './workShared';
import './work.css';

type Tab = 'profile' | 'security' | 'notify' | 'theme';
const TABS: { v: Tab; l: string }[] = [
  { v: 'profile', l: '프로필' },
  { v: 'security', l: '보안(2차 인증)' },
  { v: 'notify', l: '알림 설정' },
  { v: 'theme', l: '테마·언어' },
];

const PREF_KEY = 'kintex.prefs';
interface Prefs {
  theme: 'light' | 'dark';
  lang: 'ko' | 'en' | 'zh' | 'ja';
  notifyDeadline: boolean;
  notifyApproval: boolean;
  notifyPayment: boolean;
}
const DEFAULT_PREFS: Prefs = {
  theme: 'light',
  lang: 'ko',
  notifyDeadline: true,
  notifyApproval: true,
  notifyPayment: true,
};

function loadPrefs(): Prefs {
  try {
    return { ...DEFAULT_PREFS, ...JSON.parse(localStorage.getItem(PREF_KEY) ?? '{}') };
  } catch {
    return DEFAULT_PREFS;
  }
}

export function MyPage() {
  const { show, node: toast } = useToast();
  const storeUser = useAuthStore((s) => s.user);
  const workspaces = useAuthStore((s) => s.workspaces);
  const [tab, setTab] = useState<Tab>('profile');
  const [prefs, setPrefs] = useState<Prefs>(loadPrefs);

  const meQ = useQuery({ queryKey: ['me'], queryFn: () => authApi.me() });
  const otpQ = useQuery({ queryKey: ['otp-status'], queryFn: () => authApi.otpStatus() });

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', prefs.theme);
    document.documentElement.setAttribute('lang', prefs.lang);
  }, [prefs.theme, prefs.lang]);

  function savePrefs(next: Prefs) {
    setPrefs(next);
    localStorage.setItem(PREF_KEY, JSON.stringify(next));
    show('설정이 저장되었습니다.');
  }

  const displayName = meQ.data?.displayName ?? storeUser?.displayName ?? '사용자';
  const roles = meQ.data?.eventRoles ? Object.values(meQ.data.eventRoles) : [];

  return (
    <div className="kx-page">
      <header className="kx-work__head">
        <div>
          <h1 className="kx-work__title">마이페이지</h1>
          <p className="kx-work__subtitle">프로필 · 보안 · 알림 · 환경설정</p>
        </div>
      </header>

      <div className="kx-my">
        <nav className="kx-my__rail" aria-label="설정 탭">
          {TABS.map((t) => (
            <button
              key={t.v}
              className={`kx-my__rail-btn ${tab === t.v ? 'is-active' : ''}`}
              onClick={() => setTab(t.v)}
            >
              {t.l}
            </button>
          ))}
        </nav>

        <section className="kx-card" aria-label="설정 내용">
          {/* 프로필 */}
          {tab === 'profile' && (
            <>
              <div className="kx-card__head">
                <h2><IconUser className="kx-title-ic" size={18} />프로필</h2>
              </div>
              {meQ.isLoading ? (
                <Skeleton height={80} />
              ) : meQ.isError ? (
                <ErrorState onRetry={() => meQ.refetch()} />
              ) : (
                <div style={{ display: 'flex', gap: 20, alignItems: 'center', flexWrap: 'wrap' }}>
                  <span className="kx-my__avatar">{displayName[0] ?? '·'}</span>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                    <strong style={{ fontSize: 18 }}>{displayName}</strong>
                    <span className="kx-list-table__muted">사용자 ID: {meQ.data?.userId}</span>
                    <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                      {meQ.data?.hallManager && <span className="kx-pill kx-pill--info">홀매니저</span>}
                      {roles.map((r, i) => (
                        <RoleBadge key={i} role={r} />
                      ))}
                    </div>
                    <span className="kx-list-table__muted">
                      참여 행사 {workspaces.length}건
                    </span>
                  </div>
                </div>
              )}
              <p className="kx-list-table__muted" style={{ marginTop: 12, fontSize: 12 }}>
                프로필 정보 수정은 준비 중입니다.
              </p>
            </>
          )}

          {/* 보안 (2FA) */}
          {tab === 'security' && (
            <>
              <div className="kx-card__head">
                <h2><IconShieldCheck className="kx-title-ic" size={18} />2차 인증(OTP)</h2>
              </div>
              {otpQ.isLoading ? (
                <Skeleton height={60} />
              ) : (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    {otpQ.data?.otpEnabled ? (
                      <>
                        <span style={{ color: 'var(--color-success)', display: 'inline-flex' }}>
                          <IconCheckCircle size={20} />
                        </span>
                        <span>2차 인증이 활성화되어 있습니다.</span>
                      </>
                    ) : (
                      <span className="kx-pill kx-pill--warn">2차 인증 미설정</span>
                    )}
                  </div>
                  <p className="kx-list-table__muted" style={{ fontSize: 13 }}>
                    Google Authenticator 등 TOTP 앱으로 로그인 2단계 인증을 사용합니다.
                    등록·재설정은 전용 화면에서 진행합니다.
                  </p>
                  <div>
                    <Link to="/otp-setup">
                      <Button>{otpQ.data?.otpEnabled ? '2차 인증 재설정' : '2차 인증 등록'}</Button>
                    </Link>
                  </div>
                </div>
              )}
            </>
          )}

          {/* 알림 설정 */}
          {tab === 'notify' && (
            <>
              <div className="kx-card__head">
                <h2><IconBell className="kx-title-ic" size={18} />알림 설정</h2>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {(
                  [
                    ['notifyDeadline', '마감 D-데이 알림'],
                    ['notifyApproval', '승인·검수 알림'],
                    ['notifyPayment', '결제·정산 알림'],
                  ] as const
                ).map(([key, label]) => (
                  <label className="kx-switch" key={key}>
                    <input
                      type="checkbox"
                      checked={prefs[key]}
                      onChange={(e) => savePrefs({ ...prefs, [key]: e.target.checked })}
                    />
                    <span>{label}</span>
                  </label>
                ))}
                <p className="kx-list-table__muted" style={{ fontSize: 12 }}>
                  현재 알림 설정은 이 기기에 저장됩니다. 서버 동기화는 준비 중입니다.
                </p>
              </div>
            </>
          )}

          {/* 테마·언어 */}
          {tab === 'theme' && (
            <>
              <div className="kx-card__head">
                <h2><IconSettings className="kx-title-ic" size={18} />테마·언어</h2>
              </div>
              <div className="kx-formgrid">
                <label className="kx-field">
                  <span className="kx-label">테마</span>
                  <div className="kx-seg" role="tablist">
                    {(['light', 'dark'] as const).map((t) => (
                      <button
                        key={t}
                        className={`kx-seg__btn ${prefs.theme === t ? 'is-active' : ''}`}
                        onClick={() => savePrefs({ ...prefs, theme: t })}
                      >
                        {t === 'light' ? '라이트' : '다크'}
                      </button>
                    ))}
                  </div>
                </label>
                <label className="kx-field">
                  <span className="kx-label">언어</span>
                  <select
                    className="kx-select"
                    value={prefs.lang}
                    onChange={(e) => savePrefs({ ...prefs, lang: e.target.value as Prefs['lang'] })}
                  >
                    <option value="ko">한국어</option>
                    <option value="en">English</option>
                    <option value="zh">中文</option>
                    <option value="ja">日本語</option>
                  </select>
                </label>
              </div>
              <p className="kx-list-table__muted" style={{ marginTop: 12, fontSize: 12 }}>
                테마·언어는 이 기기에 저장됩니다. 다국어 리소스는 순차 적용 예정입니다.
              </p>
            </>
          )}
        </section>
      </div>
      {toast}
    </div>
  );
}
