import { useEffect, useState } from 'react'
import {
  ShieldCheck, QrCode, Lock, Eye, EyeOff, CheckCircle2, AlertTriangle,
} from 'lucide-react'
import {
  getMe, otpSetup, otpConfirm, otpDisable, changePassword,
} from '../api/client'

/**
 * 마이페이지(HRM 라이트 테마) — OTP 2차 인증(등록/재설정/해제) + 비밀번호 변경.
 * 보안: setup 응답의 secret/qrImage 는 화면 표시용만 — 로그/저장 절대 금지.
 *       새 비밀번호는 콘솔/응답에 출력 금지, 검증 4대(필수·8자·일치·현재와 다름).
 * me() 는 otpEnabled 를 내려주지 않으므로 상태는 중립(null) 표시.
 */
const MIN_PW = 8

type OtpPhase = 'idle' | 'setup' | 'done'

function errMsg(e: any, fallback: string): string {
  if (e?.response?.status === 403) return '권한이 없습니다.'
  return e?.response?.data?.message || fallback
}

export default function MyPage() {
  const [username, setUsername] = useState('')
  const [otpEnabled, setOtpEnabled] = useState<boolean | null>(null)

  // ── OTP 상태머신 ──────────────────────────────────────────────────────
  const [phase, setPhase] = useState<OtpPhase>('idle')
  const [qrImage, setQrImage] = useState('')
  const [secret, setSecret] = useState('')
  const [otpCode, setOtpCode] = useState('')
  const [otpBusy, setOtpBusy] = useState(false)
  const [otpMsg, setOtpMsg] = useState<{ ok: boolean; text: string } | null>(null)

  // ── 비밀번호 변경 ─────────────────────────────────────────────────────
  const [curPw, setCurPw] = useState('')
  const [newPw, setNewPw] = useState('')
  const [newPw2, setNewPw2] = useState('')
  const [showPw, setShowPw] = useState(false)
  const [pwBusy, setPwBusy] = useState(false)
  const [pwMsg, setPwMsg] = useState<{ ok: boolean; text: string } | null>(null)

  const loadMe = () =>
    getMe().then(r => {
      const me = r.data?.data || {}
      let fallback = ''
      try { fallback = JSON.parse(localStorage.getItem('hrm_user') || '{}').username || '' } catch { /* noop */ }
      setUsername(me.username || fallback)
      if (typeof me.otpEnabled === 'boolean') setOtpEnabled(me.otpEnabled)
      else if (typeof me.verifyMethod === 'string') setOtpEnabled(me.verifyMethod === 'OTP')
    }).catch(() => {})

  useEffect(() => { loadMe() }, [])

  const startSetup = async () => {
    setOtpMsg(null); setOtpBusy(true)
    try {
      const res = await otpSetup()
      const d = res.data?.data || {}
      setQrImage(d.qrImage || '')
      setSecret(d.secret || '')
      setOtpCode('')
      setPhase('setup')
    } catch (e) {
      setOtpMsg({ ok: false, text: errMsg(e, 'OTP 등록을 시작하지 못했습니다.') })
    } finally { setOtpBusy(false) }
  }

  const confirmOtp = async () => {
    setOtpMsg(null); setOtpBusy(true)
    try {
      await otpConfirm(otpCode)
      setSecret(''); setQrImage(''); setOtpCode('')  // 시크릿 잔존 방지
      setPhase('done'); setOtpEnabled(true)
      setOtpMsg({ ok: true, text: '2차 인증이 활성화되었습니다.' })
    } catch (e) {
      setOtpMsg({ ok: false, text: errMsg(e, '코드가 일치하지 않거나 만료되었습니다.') })
    } finally { setOtpBusy(false) }
  }

  const cancelSetup = () => {
    setPhase('idle'); setSecret(''); setQrImage(''); setOtpCode(''); setOtpMsg(null)
  }

  const disableOtp = async () => {
    if (!window.confirm('Authenticator 2차 인증을 해제하시겠습니까?')) return
    setOtpMsg(null); setOtpBusy(true)
    try {
      await otpDisable()
      setPhase('idle'); setSecret(''); setQrImage(''); setOtpEnabled(false)
      setOtpMsg({ ok: true, text: '2차 인증이 해제되었습니다.' })
    } catch (e) {
      setOtpMsg({ ok: false, text: errMsg(e, 'OTP 해제에 실패했습니다.') })
    } finally { setOtpBusy(false) }
  }

  const submitPw = async () => {
    setPwMsg(null)
    if (!curPw) { setPwMsg({ ok: false, text: '현재 비밀번호를 입력하세요.' }); return }
    if (newPw.length < MIN_PW) { setPwMsg({ ok: false, text: `새 비밀번호는 최소 ${MIN_PW}자 이상이어야 합니다.` }); return }
    if (newPw !== newPw2) { setPwMsg({ ok: false, text: '새 비밀번호가 일치하지 않습니다.' }); return }
    if (newPw === curPw) { setPwMsg({ ok: false, text: '새 비밀번호는 현재 비밀번호와 달라야 합니다.' }); return }
    setPwBusy(true)
    try {
      await changePassword(curPw, newPw)
      setCurPw(''); setNewPw(''); setNewPw2('')
      setPwMsg({ ok: true, text: '비밀번호가 변경되었습니다.' })
    } catch (e) {
      setPwMsg({ ok: false, text: errMsg(e, '비밀번호 변경에 실패했습니다.') })
    } finally { setPwBusy(false) }
  }

  const inputCls =
    'w-full border border-slate-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500'
  const codeCls = inputCls + ' tracking-[0.4em] text-center text-lg'

  const StatusMsg = ({ m }: { m: { ok: boolean; text: string } | null }) =>
    m ? (
      <div className={`flex items-center gap-2 text-sm rounded-lg px-3 py-2 mb-3 border ${
        m.ok
          ? 'bg-green-50 border-green-200 text-green-700'
          : 'bg-red-50 border-red-200 text-red-600'
      }`}>
        {m.ok ? <CheckCircle2 size={16} /> : <AlertTriangle size={16} />}
        {m.text}
      </div>
    ) : null

  return (
    <div className="max-w-2xl space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-slate-800">마이페이지</h1>
        <p className="text-sm text-slate-500 mt-1">
          {username && <>계정: <span className="text-slate-700 font-medium">{username}</span></>}
        </p>
      </div>

      {/* ── OTP 2차 인증 ──────────────────────────────────────────────── */}
      <section className="card">
        <div className="flex items-center gap-2 mb-1">
          <ShieldCheck size={18} className="text-blue-600" />
          <h2 className="font-semibold text-slate-800">2차 인증 — Authenticator(OTP)</h2>
        </div>
        <p className="text-xs text-slate-500 mb-4">
          Google·Microsoft Authenticator 앱으로 6자리 코드를 사용하는 2차 인증을 설정합니다.
          {otpEnabled !== null && (
            <span className="ml-2">
              현재 상태:{' '}
              <span className={otpEnabled ? 'text-green-600 font-medium' : 'text-slate-500'}>
                {otpEnabled ? 'OTP 사용 중' : '미설정'}
              </span>
            </span>
          )}
        </p>

        <StatusMsg m={otpMsg} />

        {phase === 'idle' && (
          <div className="flex flex-wrap gap-2">
            <button onClick={startSetup} disabled={otpBusy}
              className="flex items-center gap-1.5 px-3 py-2 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 disabled:opacity-50">
              <QrCode size={16} /> {otpBusy ? '발급 중...' : otpEnabled ? 'OTP 재설정 시작' : 'OTP 등록 시작'}
            </button>
            {otpEnabled && (
              <button onClick={disableOtp} disabled={otpBusy}
                className="px-3 py-2 rounded-lg border border-red-300 text-red-600 text-sm hover:bg-red-50 disabled:opacity-50">
                Authenticator 해제
              </button>
            )}
          </div>
        )}

        {phase === 'setup' && (
          <div>
            <ol className="list-decimal list-inside text-sm text-slate-600 leading-7 mb-3">
              <li>Authenticator 앱에서 아래 QR을 스캔하세요.</li>
              <li>스캔이 안 되면 수동 키를 직접 입력하세요.</li>
              <li>앱에 표시된 6자리 코드를 입력해 확인하세요.</li>
            </ol>
            {qrImage && (
              <div className="flex justify-center mb-3">
                <img src={qrImage} alt="OTP QR" width={200} height={200}
                  style={{ background: '#fff', padding: 8, borderRadius: 8, border: '1px solid #e2e8f0' }} />
              </div>
            )}
            {secret && (
              <div className="mb-4">
                <div className="text-[11px] text-slate-400 mb-1">수동 입력 키</div>
                <code className="block text-xs text-blue-700 bg-slate-50 border border-slate-200 rounded-md px-2 py-1.5 break-all select-all">
                  {secret}
                </code>
              </div>
            )}
            <label className="block text-xs text-slate-500 mb-1">앱에 표시된 6자리 코드</label>
            <input value={otpCode} onChange={e => setOtpCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
              inputMode="numeric" autoComplete="one-time-code" maxLength={6} placeholder="000000"
              className={codeCls + ' mb-3'} />
            <div className="flex gap-2">
              <button onClick={confirmOtp} disabled={otpBusy || otpCode.length !== 6}
                className="px-4 py-2 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 disabled:opacity-50">
                {otpBusy ? '확인 중...' : '코드 확인 · 활성화'}
              </button>
              <button onClick={cancelSetup} disabled={otpBusy}
                className="px-4 py-2 rounded-lg border border-slate-200 text-sm text-slate-600 hover:bg-slate-50">
                취소
              </button>
            </div>
          </div>
        )}

        {phase === 'done' && (
          <div className="flex flex-wrap gap-2">
            <button onClick={disableOtp} disabled={otpBusy}
              className="px-3 py-2 rounded-lg border border-red-300 text-red-600 text-sm hover:bg-red-50 disabled:opacity-50">
              Authenticator 해제
            </button>
          </div>
        )}
      </section>

      {/* ── 비밀번호 변경 ─────────────────────────────────────────────── */}
      <section className="card">
        <div className="flex items-center gap-2 mb-4">
          <Lock size={18} className="text-blue-600" />
          <h2 className="font-semibold text-slate-800">비밀번호 변경</h2>
        </div>

        <StatusMsg m={pwMsg} />

        <div className="space-y-3">
          <div>
            <label className="block text-xs text-slate-500 mb-1">현재 비밀번호</label>
            <input type={showPw ? 'text' : 'password'} value={curPw} autoComplete="current-password"
              onChange={e => setCurPw(e.target.value)} className={inputCls} />
          </div>
          <div>
            <label className="block text-xs text-slate-500 mb-1">새 비밀번호 (최소 {MIN_PW}자)</label>
            <input type={showPw ? 'text' : 'password'} value={newPw} autoComplete="new-password"
              onChange={e => setNewPw(e.target.value)} className={inputCls} />
          </div>
          <div>
            <label className="block text-xs text-slate-500 mb-1">새 비밀번호 확인</label>
            <input type={showPw ? 'text' : 'password'} value={newPw2} autoComplete="new-password"
              onChange={e => setNewPw2(e.target.value)} className={inputCls} />
          </div>
          <label className="flex items-center gap-1.5 text-xs text-slate-500 cursor-pointer select-none">
            <button type="button" onClick={() => setShowPw(!showPw)} className="text-slate-400 hover:text-blue-600">
              {showPw ? <EyeOff size={15} /> : <Eye size={15} />}
            </button>
            비밀번호 표시
          </label>
          <button onClick={submitPw} disabled={pwBusy}
            className="px-4 py-2 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 disabled:opacity-50">
            {pwBusy ? '변경 중...' : '비밀번호 변경'}
          </button>
        </div>
      </section>
    </div>
  )
}
