import { useState } from 'react'
import { useAuth, login, changePassword, getUser } from './auth'
import { box } from './util'

/**
 * 관리자 로그인 게이트. 인증 전이면 로그인 폼, 초기암호변경 필요 시 변경 폼,
 * 그 외에는 children(보호 대상 화면)을 렌더한다. 관리자 패널·포탈이 공유.
 */
export default function LoginGate({ children }: { children: React.ReactNode }) {
  const { token, logout } = useAuth()
  const [form, setForm] = useState({ username: '', secret: '' })
  const [mustChange, setMustChange] = useState(false)
  const [newSecret, setNewSecret] = useState('')
  const [err, setErr] = useState<string | null>(null)
  const [msg, setMsg] = useState<string | null>(null)

  const doLogin = async () => {
    setErr(null)
    const r = await login(form.username, form.secret)
    if (!r.ok) { setErr(r.error!); return }
    setMustChange(!!r.mustChange) // 성공 시 token이 전역 세팅 → useAuth 재렌더
  }
  const doChange = async () => {
    setErr(null)
    if (newSecret.length < 1) { setErr('새 비밀번호를 입력하세요'); return }
    const r = await changePassword(getUser(), form.secret, newSecret)
    if (!r.ok) { setErr(r.error!); return }
    setMsg('비밀번호가 변경되었습니다.'); setMustChange(false)
  }

  if (!token) {
    return (
      <section style={{ ...box, maxWidth: 380, margin: '40px auto', background: '#f7fbff' }}>
        <h2 style={{ marginTop: 0 }}>🔐 관리자 로그인</h2>
        <p style={{ color: '#666', fontSize: 13 }}>시스템관리(LouisVuitton)·포탈 상태 조회는 <b>ADMIN</b> 로그인이 필요합니다.</p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <input placeholder="아이디" value={form.username} onChange={(e) => setForm({ ...form, username: e.target.value })} style={{ padding: 8 }} />
          <input placeholder="비밀번호" type="password" value={form.secret}
            onChange={(e) => setForm({ ...form, secret: e.target.value })}
            onKeyDown={(e) => { if (e.key === 'Enter') doLogin() }} style={{ padding: 8 }} />
          <button onClick={doLogin} style={{ padding: '10px', background: '#2d6cdf', color: '#fff', border: 0, borderRadius: 6, cursor: 'pointer' }}>로그인</button>
        </div>
        {err && <p style={{ color: '#c00', marginTop: 12 }}>{err}</p>}
      </section>
    )
  }
  if (mustChange) {
    return (
      <section style={{ ...box, maxWidth: 380, margin: '40px auto', background: '#fff8f0' }}>
        <h2 style={{ marginTop: 0 }}>🔑 초기 비밀번호 변경</h2>
        <p style={{ color: '#666', fontSize: 13 }}>본격 사용 전 초기 비밀번호를 변경해야 합니다.</p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <input placeholder="새 비밀번호" type="password" value={newSecret}
            onChange={(e) => setNewSecret(e.target.value)}
            onKeyDown={(e) => { if (e.key === 'Enter') doChange() }} style={{ padding: 8 }} />
          <button onClick={doChange} style={{ padding: '10px', background: '#c0392b', color: '#fff', border: 0, borderRadius: 6, cursor: 'pointer' }}>변경</button>
          <button onClick={logout} style={{ fontSize: 12 }}>로그아웃</button>
        </div>
        {msg && <p style={{ color: '#1a7f37', marginTop: 12 }}>{msg}</p>}
        {err && <p style={{ color: '#c00', marginTop: 12 }}>{err}</p>}
      </section>
    )
  }
  return <>{children}</>
}
