// login.jsx — 로그인 페이지
// 중앙 정렬 카드, ID + Password + 로그인 버튼

const { useState: useLoginState, useEffect: useLoginEffect } = React;

function LoginPage({ onSuccess }) {
  const [id, setId] = useLoginState('');
  const [pw, setPw] = useLoginState('');
  const [err, setErr] = useLoginState('');
  const [loading, setLoading] = useLoginState(false);
  // Read /api/health (public) once on mount so the login screen's mode chip
  // matches reality. Don't poll — login screen is short-lived.
  const [paperTrading, setPaperTrading] = useLoginState(null);
  useLoginEffect(() => {
    let alive = true;
    fetch('/api/health', { credentials: 'same-origin' })
      .then(r => r.json())
      .then(d => { if (alive && d) setPaperTrading(d.paper_trading); })
      .catch(() => {});
    return () => { alive = false; };
  }, []);

  const submit = async (e) => {
    e?.preventDefault();
    if (!id || !pw) { setErr('아이디와 비밀번호를 입력하세요.'); return; }
    setErr(''); setLoading(true);
    try {
      const res = await fetch('/api/auth/login', {
        method: 'POST',
        credentials: 'same-origin',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id, password: pw }),
      });
      const data = await res.json().catch(() => ({}));
      if (res.ok && data && data.authenticated) {
        onSuccess?.(data.user || { id });
        return;
      }
      const code = data?.error?.code || '';
      if (res.status === 503) {
        setErr('서버 설정 누락 — 관리자에게 문의 (' + code + ').');
      } else {
        setErr('인증 실패 — 자격 증명이 올바르지 않습니다.');
      }
    } catch (err) {
      setErr('네트워크 오류 — 잠시 후 다시 시도해 주세요.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="login-page" data-theme="dark">
      <div className="login-bg" aria-hidden />

      <div className="login-stage">
        <div className="login-brand">
          <div className="login-brand-mark">L</div>
          <div className="login-brand-text">
            <b>LSTL</b>
            <span className="mono">stock-trading-lite</span>
          </div>
        </div>

        <form className="login-card" onSubmit={submit}>
          <div className="login-card-head">
            <h1>로그인</h1>
            {paperTrading === false ? (
              <span className="login-status mono" style={{ color: 'var(--critical)' }} title="실거래 모드">
                <span className="dotpulse" style={{ background: 'var(--critical)' }} />
                LIVE
              </span>
            ) : paperTrading === true ? (
              <span className="login-status mono" title="모의 운영 모드">
                <span className="dotpulse" style={{ background: 'var(--warn)' }} />
                PAPER MODE
              </span>
            ) : null}
          </div>

          <label className="login-field">
            <span className="login-field-label">아이디</span>
            <input
              className="login-input mono"
              type="text"
              autoComplete="username"
              placeholder="admin"
              value={id}
              onChange={(e) => setId(e.target.value)}
              autoFocus
            />
          </label>

          <label className="login-field">
            <span className="login-field-label">비밀번호</span>
            <input
              className="login-input mono"
              type="password"
              autoComplete="current-password"
              placeholder="••••••••"
              value={pw}
              onChange={(e) => setPw(e.target.value)}
            />
          </label>

          {err && (
            <div className="login-err mono">
              <span style={{ color: 'var(--critical)' }}>⚠</span> {err}
            </div>
          )}

          <button type="submit" className="login-submit mono" disabled={loading}>
            {loading ? (
              <span>인증 중…</span>
            ) : (
              <>
                <span>로그인</span>
                <span className="mono" style={{ opacity: 0.6, marginLeft: 6 }}>↵</span>
              </>
            )}
          </button>

          <div className="login-foot">
            <div className="login-foot-row mono">
              <span>build</span>
              <span>0.4.2 · main · {new Date().toISOString().slice(0,10)}</span>
            </div>
            <div className="login-foot-row mono">
              <span>env</span>
              <span style={{ color: paperTrading === false ? 'var(--critical)' : 'var(--warn)' }}>
                {paperTrading === false ? 'live · 실거래' : paperTrading === true ? 'paper / read-only' : '—'} · 단일 사용자
              </span>
            </div>
            <div className="login-foot-hint mono">
              운영자 단일 계정. 자격 증명은 서버 환경변수에서 로드됨.
            </div>
          </div>
        </form>

        <div className="login-disclaimer mono">
          이 시스템은 LLM 기반 자동매매를 모니터링합니다.{' '}
          {paperTrading === false
            ? '현재 LIVE(실거래) 모드로 동작 중입니다.'
            : paperTrading === true
            ? '모든 결정은 PAPER 모드에서 시뮬레이션됩니다.'
            : ''}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { LoginPage });