// ---------- Email/Password auth + auto-login ----------
const { useState, useEffect, useRef } = React;

function PinLock({ onUnlock }) {
  // Auto-login: wait for Firebase, then onAuthStateChanged unlocks the app.
  useEffect(() => {
    const start = () => {
      if (!window.fb) { window.addEventListener('fb-ready', start, { once: true }); return; }
      const unsub = window.fb.onAuthStateChanged(window.fb.auth, (user) => {
        if (user) onUnlock(user);
      });
      return unsub;
    };
    const cleanup = start();
    return () => { if (typeof cleanup === 'function') cleanup(); };
  }, []);

  const [auth, setAuth] = useState(null);
  const isSignup = !localStorage.getItem('mycal.hasSignedUp');
  const [mode, setMode] = useState(isSignup ? 'signup' : 'signin');
  const [email, setEmail] = useState(localStorage.getItem('mycal.lastEmail') || '');
  const [pw, setPw] = useState('');
  const [pw2, setPw2] = useState('');
  const [err, setErr] = useState('');
  const [busy, setBusy] = useState(false);
  const [shake, setShake] = useState(false);
  const emailRef = useRef(null);

  useEffect(() => {
    setTimeout(() => emailRef.current?.focus(), 80);
  }, []);

  const fail = (msg) => {
    setErr(msg);
    setShake(true);
    setTimeout(() => setShake(false), 420);
  };

  const validEmail = (s) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(s);

  const submit = async (e) => {
    e?.preventDefault?.();
    setErr('');
    if (!validEmail(email)) return fail('이메일 형식을 확인해주세요.');
    if (!pw) return fail('비밀번호를 입력해주세요.');
    if (!window.fb) return fail('Firebase 로드 중… 잠시 후 다시 시도해주세요.');
    setBusy(true);
    try {
      if (mode === 'signup') {
        if (pw.length < 6) { setBusy(false); return fail('비밀번호는 최소 6자 이상이에요.'); }
        if (pw !== pw2) { setBusy(false); return fail('비밀번호가 일치하지 않아요.'); }
        await window.fb.createUserWithEmailAndPassword(window.fb.auth, email.trim(), pw);
      } else {
        await window.fb.signInWithEmailAndPassword(window.fb.auth, email.trim(), pw);
      }
      // onAuthStateChanged in App will call onUnlock
    } catch (err) {
      const code = err.code || '';
      const msg =
        code.includes('email-already-in-use') ? '이미 가입된 이메일이에요. 로그인 해주세요.' :
        code.includes('invalid-credential') || code.includes('wrong-password') || code.includes('user-not-found') ? '이메일 또는 비밀번호가 맞지 않아요.' :
        code.includes('weak-password') ? '비밀번호가 너무 약해요. (6자 이상)' :
        code.includes('network') ? '네트워크 오류. 인터넷을 확인해주세요.' :
        err.message || '오류가 발생했어요.';
      fail(msg);
    } finally {
      setBusy(false);
    }
  };

  const title = mode === 'signup' ? '계정 만들기' : '돌아오신 걸 환영해요';
  const sub = mode === 'signup'
    ? '이메일과 비밀번호로 한 번만 설정하면, 이후엔 자동으로 로그인돼요.'
    : email ? `${email} 으로 로그인` : '저장된 데이터에 접근하려면 로그인하세요.';

  return (
    <div className="lock-root">
      <form className={"lock-card " + (shake ? 'shake' : '')} onSubmit={submit} noValidate>
        <div className="lock-brand">
          <div className="lock-logo"><Icon.Calendar size={18} /></div>
          <div className="lock-app">Dada Calendar</div>
        </div>
        <h1 className="lock-title">{title}</h1>
        <p className="lock-sub">{sub}</p>

        <div className="lock-fields">
          <label className="lock-field">
            <span className="lock-fl">이메일</span>
            <input
              ref={emailRef}
              type="email"
              autoComplete="email"
              inputMode="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="you@example.com"
              disabled={mode === 'signin' && !!auth?.email}
              required
            />
          </label>
          <label className="lock-field">
            <span className="lock-fl">비밀번호</span>
            <input
              type="password"
              autoComplete={mode === 'signup' ? 'new-password' : 'current-password'}
              value={pw}
              onChange={(e) => setPw(e.target.value)}
              placeholder={mode === 'signup' ? '6자 이상' : ''}
              required
            />
          </label>
          {mode === 'signup' && (
            <label className="lock-field">
              <span className="lock-fl">비밀번호 확인</span>
              <input
                type="password"
                autoComplete="new-password"
                value={pw2}
                onChange={(e) => setPw2(e.target.value)}
                required
              />
            </label>
          )}
        </div>

        <div className="lock-err" aria-live="polite">{err || '\u00a0'}</div>

        <button className="lock-submit" type="submit" disabled={busy}>
          {busy ? '확인 중…' : mode === 'signup' ? '계정 만들고 시작하기' : '로그인'}
        </button>

        <div className="lock-foot">
          {mode === 'signup' ? (
            auth?.email ? (
              <button type="button" className="lock-link" onClick={() => { setMode('signin'); setErr(''); }}>
                이미 계정이 있어요 — 로그인
              </button>
            ) : null
          ) : (
            <button type="button" className="lock-link" onClick={() => {
              if (confirm('정말 모든 데이터와 계정을 초기화할까요?\n저장된 일정/메모/일/배움이 모두 삭제됩니다.')) {
                clearAuth(); saveData({ items: [] }); location.reload();
              }
            }}>
              계정 초기화 (모든 데이터 삭제)
            </button>
          )}
        </div>

        <div className="lock-note">
          <Icon.Lock size={10} /> 이메일/비번은 이 기기에 안전하게 저장되고, 다음 접속부터 자동 로그인됩니다.
        </div>
      </form>

      <style>{`
        .lock-root{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--lock-bg);color:var(--lock-fg);z-index:1000;padding:20px;transition:background .2s,color .2s}
        .lock-card{width:100%;max-width:380px;animation:lockfade .35s ease both}
        .lock-card.shake{animation:lockshake .42s ease}
        @keyframes lockfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
        @keyframes lockshake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
        .lock-brand{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:36px;color:var(--lock-muted)}
        .lock-logo{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--lock-field-bg)}
        .lock-app{font-size:13px;font-weight:600;letter-spacing:.04em}
        .lock-title{margin:0 0 8px;font-size:24px;font-weight:700;letter-spacing:-.015em;text-align:center}
        .lock-sub{margin:0 0 28px;color:var(--lock-muted);font-size:13px;line-height:1.55;text-align:center}
        .lock-fields{display:flex;flex-direction:column;gap:10px;margin-bottom:8px}
        .lock-field{display:flex;flex-direction:column;gap:6px}
        .lock-fl{font-size:11px;font-weight:600;color:var(--lock-muted);letter-spacing:.02em}
        .lock-field input{appearance:none;background:var(--lock-field-bg);border:1px solid var(--lock-field-border);color:var(--lock-fg);padding:12px 14px;border-radius:10px;font-size:14px;outline:none;font-family:inherit;transition:all .12s}
        .lock-field input:focus{border-color:var(--lock-field-focus)}
        .lock-field input:disabled{opacity:.7;cursor:not-allowed}
        .lock-field input::placeholder{color:var(--lock-faint)}
        .lock-err{color:#fca5a5;font-size:12.5px;min-height:18px;text-align:center;margin:10px 0 14px}
        .lock-submit{width:100%;appearance:none;border:none;background:var(--lock-submit-bg);color:var(--lock-submit-fg);padding:13px 16px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .12s;font-family:inherit}
        .lock-submit:hover{opacity:.9}
        .lock-submit:active{transform:scale(.99)}
        .lock-submit:disabled{opacity:.6;cursor:not-allowed}
        .lock-foot{margin-top:14px;display:flex;justify-content:center}
        .lock-link{appearance:none;border:none;background:transparent;color:var(--lock-muted);font-size:12.5px;cursor:pointer;text-decoration:underline;text-decoration-color:var(--lock-faint);text-underline-offset:3px;font-family:inherit;padding:4px 8px}
        .lock-link:hover{color:var(--lock-fg)}
        .lock-note{margin-top:22px;display:flex;align-items:center;justify-content:center;gap:5px;color:var(--lock-faint);font-size:11px;line-height:1.5}
      `}</style>
    </div>
  );
}

window.PinLock = PinLock;