import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import { login, getMe } from '../api/client'
import { verify2fa, verifyOtp, authSignup, authFindId, authResetPassword } from '../api/uiws'
import LanguageSwitcher from '../i18n/LanguageSwitcher'

/** 로그인 보조 모달 종류(UIWS auth 패턴 이식). */
type HelperKind = 'signup' | 'findId' | 'resetPw'
/** 2차 인증 방식 — OTP: Authenticator 등록됨, OTP_SETUP: 최초 QR 등록, EMAIL: 이메일 코드(하위호환). */
type VerifyMethod = 'OTP' | 'OTP_SETUP' | 'EMAIL'

/**
 * 관리자/매장(운영) 로그인.
 * - UIWS 2FA 이식: 운영 계정(ADMIN/MANAGER) + twofa-enabled 시 1차 로그인 후 verify-token + 이메일코드 단계.
 *   응답 { twofa:"false", token } → 즉시 로그인(2FA off 또는 토글 off 회귀 0).
 *   응답 { twofa:"true", verifyToken, maskedEmail } → 코드 입력 화면 → /api/mall/auth/verify → token.
 * - 인증코드는 서버 메일/감사 채널로만 전달(응답 미노출). 메일 미설정(admin 등 email 미시드)은 서버 로그 폴백.
 */
export default function AdminLogin() {
  const { t } = useTranslation()
  const [username, setUsername] = useState('admin')
  const [password, setPassword] = useState('')
  const [err, setErr] = useState('')
  // 2FA 단계
  const [step, setStep] = useState<'login' | 'verify'>('login')
  const [verifyToken, setVerifyToken] = useState('')
  const [verifyMethod, setVerifyMethod] = useState<VerifyMethod>('EMAIL')
  const [maskedEmail, setMaskedEmail] = useState('')
  const [qrImage, setQrImage] = useState('')   // OTP_SETUP 등록 순간만 존재
  const [secret, setSecret] = useState('')     // OTP_SETUP 등록 순간만 존재
  const [code, setCode] = useState('')
  // 로그인 보조 모달(UIWS auth 패턴 이식): 회원가입 / 아이디찾기 / 비밀번호 초기화
  const [helper, setHelper] = useState<HelperKind | null>(null)
  const nav = useNavigate()

  const isOtp = verifyMethod === 'OTP' || verifyMethod === 'OTP_SETUP'
  const isSetup = verifyMethod === 'OTP_SETUP'

  useEffect(() => {
    document.documentElement.classList.add('admin-shell')
    return () => document.documentElement.classList.remove('admin-shell')
  }, [])

  /** 토큰 저장 + 역할 확인 후 진입(공통). */
  const finishLogin = async (token: string) => {
    localStorage.setItem('mall_admin_token', token)
    const me: any = await getMe().catch(() => null)
    if (me?.role) localStorage.setItem('mall_role', me.role)
    if (me?.username) localStorage.setItem('mall_admin_user', me.username)
    if (me?.role === 'USER') { setErr(t('admin.login.errNoPriv')); localStorage.removeItem('mall_admin_token'); return }
    nav('/admin/dashboard')
  }

  const submitLogin = async (e: React.FormEvent) => {
    e.preventDefault(); setErr('')
    try {
      const res = await login(username, password)
      const data = res.data?.data || {}
      if (data.twofa === 'true') {
        // 운영 계정 2FA — verifyMethod 로 분기(OTP/OTP_SETUP: Authenticator, 그 외: 이메일 코드)
        setVerifyToken(data.verifyToken || '')
        setVerifyMethod((data.verifyMethod as VerifyMethod) || 'EMAIL')
        setMaskedEmail(data.maskedEmail || '')
        setQrImage(data.qrImage || '')
        setSecret(data.secret || '')
        setCode('')
        setStep('verify')
        return
      }
      const token = data.token
      if (!token) throw new Error('no token')
      await finishLogin(token)
    } catch {
      setErr(t('admin.login.errFailed'))
    }
  }

  const submitVerify = async (e: React.FormEvent) => {
    e.preventDefault(); setErr('')
    try {
      // OTP·OTP_SETUP 은 /verify-otp, 이메일은 /verify(하위호환)
      const res = isOtp
        ? await verifyOtp(verifyToken, code.trim())
        : await verify2fa(verifyToken, code.trim())
      const token = res.data?.data?.token
      if (!token) throw new Error('no token')
      // 시크릿 잔존 방지
      setQrImage(''); setSecret('')
      await finishLogin(token)
    } catch {
      setErr('인증 코드가 올바르지 않거나 만료되었습니다. (Invalid or expired code)')
    }
  }

  return (
    <div className="admin-shell min-h-screen flex items-center justify-center bg-ink text-[#e6edf6]">
      <div className="absolute top-5 right-5"><LanguageSwitcher variant="admin" /></div>

      {step === 'login' ? (
        <form onSubmit={submitLogin} className="w-[360px] bg-panel border border-edge rounded-2xl p-8">
          <div className="flex items-center gap-2 justify-center mb-6">
            <img src="/login.png" alt="GUARDiA" style={{height:36,width:'auto'}} onError={e => { (e.target as HTMLImageElement).style.display = 'none' }} />
            <span className="text-xl font-bold">{t('admin.login.title')}</span>
          </div>
          <p className="text-center text-sm text-slate-400 mb-6">{t('admin.login.subtitle')}</p>
          <label className="block text-xs text-slate-400 mb-1">{t('admin.login.username')}</label>
          <input value={username} onChange={e => setUsername(e.target.value)}
            className="w-full mb-4 px-3 py-2 rounded-lg bg-card border border-edge text-sm focus:border-brand outline-none" />
          <label className="block text-xs text-slate-400 mb-1">{t('admin.login.password')}</label>
          <input type="password" value={password} onChange={e => setPassword(e.target.value)}
            className="w-full mb-4 px-3 py-2 rounded-lg bg-card border border-edge text-sm focus:border-brand outline-none" />
          {err && <p className="text-rose-400 text-xs mb-3">{err}</p>}
          <button className="w-full py-2.5 rounded-lg bg-brand text-ink font-semibold hover:bg-brand/90">{t('admin.login.signIn')}</button>
          {/* 로그인 보조 3종(UIWS auth 이식): 운영자 회원가입 / 아이디 찾기 / 비밀번호 초기화 */}
          <div className="flex items-center justify-center gap-2 text-[11px] text-slate-400 mt-4">
            <button type="button" onClick={() => setHelper('signup')} className="hover:text-brand">운영자 가입</button>
            <span className="text-slate-600">|</span>
            <button type="button" onClick={() => setHelper('findId')} className="hover:text-brand">아이디 찾기</button>
            <span className="text-slate-600">|</span>
            <button type="button" onClick={() => setHelper('resetPw')} className="hover:text-brand">비밀번호 초기화</button>
          </div>
          <p className="text-center text-[11px] text-slate-500 mt-3">{t('admin.login.storefrontHere')} <a href="/" className="text-brand">{t('admin.login.here')}</a></p>
        </form>
      ) : (
        <form onSubmit={submitVerify} className="w-[360px] bg-panel border border-edge rounded-2xl p-8">
          <div className="flex items-center gap-2 justify-center mb-4">
            <span className="text-xl font-bold">2차 인증 / 2FA</span>
          </div>
          <p className="text-center text-sm text-slate-400 mb-2">운영 계정 보안을 위한 2차 인증입니다.</p>

          {isOtp ? (
            isSetup ? (
              <>
                <p className="text-center text-[12px] text-slate-500 mb-3">
                  최초 로그인입니다. 아래 QR을 Authenticator 앱(Google·Microsoft)으로 스캔해 등록한 뒤 6자리 코드를 입력하세요.
                </p>
                {qrImage && (
                  <div className="flex justify-center mb-3">
                    <img src={qrImage} alt="OTP QR" width={180} height={180}
                      style={{ background: '#fff', padding: 8, borderRadius: 8 }} />
                  </div>
                )}
                {secret && (
                  <div className="mb-4">
                    <div className="text-[11px] text-slate-500 mb-1">QR 스캔이 안 되면 수동 입력 키</div>
                    <code className="block text-xs text-accent bg-ink border border-edge rounded-md px-2 py-1.5 break-all select-all">
                      {secret}
                    </code>
                  </div>
                )}
              </>
            ) : (
              <p className="text-center text-[12px] text-slate-500 mb-6">
                Authenticator 앱에 표시된 6자리 코드를 입력하세요.
              </p>
            )
          ) : (
            <p className="text-center text-[12px] text-slate-500 mb-6">
              인증 코드를 {maskedEmail || '등록된 이메일'} 로 보냈습니다.
            </p>
          )}

          <label className="block text-xs text-slate-400 mb-1">인증 코드 (6자리)</label>
          <input value={code} onChange={e => setCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
            inputMode="numeric" autoComplete="one-time-code" maxLength={6} autoFocus
            className="w-full mb-4 px-3 py-2 rounded-lg bg-card border border-edge text-sm tracking-[0.4em] text-center focus:border-brand outline-none" />
          {err && <p className="text-rose-400 text-xs mb-3">{err}</p>}
          <button className="w-full py-2.5 rounded-lg bg-brand text-ink font-semibold hover:bg-brand/90">{isSetup ? '등록하고 로그인 / Register' : '확인 / Verify'}</button>
          <button type="button" onClick={() => { setStep('login'); setCode(''); setErr(''); setQrImage(''); setSecret('') }}
            className="w-full py-2 mt-2 rounded-lg text-slate-400 text-xs hover:text-brand">← 돌아가기 / Back</button>
        </form>
      )}

      {helper && <AuthHelperModal kind={helper} onClose={() => setHelper(null)} />}
    </div>
  )
}

/**
 * 로그인 보조 모달(UIWS auth 패턴 이식) — 회원가입 / 아이디찾기 / 비밀번호 초기화.
 * 관리자 다크 셸 토큰(bg-panel/bg-card/border-edge/bg-brand/text-ink)을 그대로 사용해 테마 일관 유지.
 * 보안: 서버가 임시비번·존재여부를 응답에 노출하지 않음 → 화면도 일반 안내 메시지만 표시.
 */
function AuthHelperModal({ kind, onClose }: { kind: HelperKind; onClose: () => void }) {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [displayName, setDisplayName] = useState('')
  const [email, setEmail] = useState('')
  const [busy, setBusy] = useState(false)
  const [msg, setMsg] = useState('')
  const [ok, setOk] = useState(false)

  const title = kind === 'signup' ? '운영자 가입 (승인 대기)'
    : kind === 'findId' ? '아이디 찾기' : '비밀번호 초기화'

  const submit = async (e: React.FormEvent) => {
    e.preventDefault(); setBusy(true); setMsg(''); setOk(false)
    try {
      if (kind === 'signup') {
        const res = await authSignup({ username, password, displayName, email })
        const d = res.data?.data || {}
        setOk(!!d.success); setMsg(d.message || '처리되었습니다.')
      } else if (kind === 'findId') {
        const res = await authFindId({ displayName, email })
        const d = res.data?.data || {}
        setOk(!!d.found)
        setMsg(d.found ? `회원님의 아이디는 [ ${d.maskedUsername} ] 입니다.` : '일치하는 계정을 찾을 수 없습니다.')
      } else {
        const res = await authResetPassword({ username, email })
        const d = res.data?.data || {}
        setOk(!!d.success); setMsg(d.message || '처리되었습니다.')
      }
    } catch {
      setMsg('요청을 처리하지 못했습니다. 잠시 후 다시 시도하세요.')
    } finally {
      setBusy(false)
    }
  }

  const field = 'w-full mb-3 px-3 py-2 rounded-lg bg-card border border-edge text-sm focus:border-brand outline-none'

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60" onClick={onClose}>
      <div className="w-[360px] bg-panel border border-edge rounded-2xl p-7 text-[#e6edf6]" onClick={e => e.stopPropagation()}>
        <div className="flex items-center justify-between mb-5">
          <span className="text-lg font-bold">{title}</span>
          <button type="button" onClick={onClose} className="text-slate-400 hover:text-brand text-xl leading-none">×</button>
        </div>

        <form onSubmit={submit}>
          {(kind === 'signup' || kind === 'resetPw') && (
            <>
              <label className="block text-xs text-slate-400 mb-1">아이디</label>
              <input value={username} onChange={e => setUsername(e.target.value)} className={field} autoFocus />
            </>
          )}
          {kind === 'signup' && (
            <>
              <label className="block text-xs text-slate-400 mb-1">비밀번호 (4자 이상)</label>
              <input type="password" value={password} onChange={e => setPassword(e.target.value)} className={field} />
            </>
          )}
          {(kind === 'signup' || kind === 'findId') && (
            <>
              <label className="block text-xs text-slate-400 mb-1">이름 (표시명)</label>
              <input value={displayName} onChange={e => setDisplayName(e.target.value)} className={field} autoFocus={kind === 'findId'} />
            </>
          )}
          <label className="block text-xs text-slate-400 mb-1">이메일</label>
          <input type="email" value={email} onChange={e => setEmail(e.target.value)} className={field} />

          {msg && <p className={`text-xs mb-3 ${ok ? 'text-emerald-400' : 'text-amber-400'}`}>{msg}</p>}

          <button disabled={busy}
            className="w-full py-2.5 rounded-lg bg-brand text-ink font-semibold hover:bg-brand/90 disabled:opacity-60">
            {busy ? '처리 중…' : (kind === 'signup' ? '가입 신청' : kind === 'findId' ? '아이디 찾기' : '임시 비밀번호 발송')}
          </button>
        </form>

        {kind === 'signup' && (
          <p className="text-[11px] text-slate-500 mt-3">가입 후 관리자 승인이 완료되면 로그인할 수 있습니다.</p>
        )}
        {kind === 'resetPw' && (
          <p className="text-[11px] text-slate-500 mt-3">임시 비밀번호는 등록된 이메일로만 발송됩니다.</p>
        )}
      </div>
    </div>
  )
}
