// Auth · Login + multi-step Signup
// Night theme · matches Welcome aesthetic.

const { useState: auState } = React;

// =================== Login ===================
function LoginScreen({ onBack, onLogin, onGoSignup }) {
  const [email, setEmail] = auState('');
  const [pw, setPw] = auState('');
  const [error, setError] = auState('');

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

  function tryLogin() {
    if (!email.trim()) { setError('이메일을 입력해주세요'); return; }
    if (!validEmail) { setError('올바른 이메일 형식이 아니에요 (예: you@example.com)'); return; }
    if (pw.length < 1) { setError('비밀번호를 입력해주세요'); return; }
    if (pw.length < 6) { setError('이메일 또는 비밀번호가 올바르지 않아요'); return; }
    setError('');
    onLogin && onLogin();
  }

  return (
    <>
      <NightSky showMoon={false} />
      <div className="welcome-shell auth-screen">
        <div className="home-night-topbar">
          <button className="hnt-icon" aria-label="Back" onClick={onBack}><Icon name="chev-left" /></button>
          <div className="hnt-brand"><span>로그인</span></div>
          <div style={{ width: 34 }} />
        </div>

        <div className="auth-hero">
          <div className="auth-cross"><span className="cross-glow" /></div>
          <div className="auth-title">다시 만나서 반가워요</div>
          <div className="auth-sub">중문교회 동행자로 다시 시작해요</div>
        </div>

        <div className="auth-form">
          {error && (
            <div className="auth-error" role="alert">
              <span className="ae-icon">⚠️</span>
              <span>{error}</span>
            </div>
          )}
          <label className="auth-field">
            <span className="af-label">이메일</span>
            <input
              type="email"
              className={`af-input ${error && !validEmail ? 'err' : ''}`}
              placeholder="you@example.com"
              value={email}
              onChange={e => { setEmail(e.target.value); if (error) setError(''); }}
            />
          </label>
          <label className="auth-field">
            <span className="af-label">비밀번호</span>
            <input
              type="password"
              className="af-input"
              placeholder="••••••••"
              value={pw}
              onChange={e => { setPw(e.target.value); if (error) setError(''); }}
              onKeyDown={e => { if (e.key === 'Enter') tryLogin(); }}
            />
          </label>

          <button className="wa-primary auth-submit" onClick={tryLogin}>로그인</button>

          <div className="auth-divider"><span>또는</span></div>

          <div className="social-stack">
            <button className="social-btn kakao">
              <span className="sb-icon">💬</span>
              <span>카카오로 시작하기</span>
            </button>
            <button className="social-btn naver">
              <span className="sb-icon" style={{color:'#fff'}}>N</span>
              <span>네이버로 시작하기</span>
            </button>
            <button className="social-btn apple">
              <span className="sb-icon"></span>
              <span>Apple로 시작하기</span>
            </button>
          </div>

          <div className="auth-foot">
            아직 계정이 없으신가요?
            <button className="auth-link" onClick={onGoSignup}>회원가입</button>
          </div>
        </div>
      </div>
    </>
  );
}

// =================== Sign-up (multi-step) ===================
const SIGNUP_STEPS = ['name', 'detail', 'email', 'avatar', 'done'];

function SignupScreen({ onBack, onDone }) {
  const [step, setStep] = auState(0);
  // 데모 시연용 기본값 — 목사님 PT에서 타이핑 없이 '다음'만 탭해도 진행됨 (필요 시 직접 수정 가능)
  const [name, setName] = auState('은혜');
  const [nickname, setNickname] = auState('별빛기도');
  const [grade, setGrade] = auState('대학 2학년');
  const [role, setRole] = auState('성도');
  const [email, setEmail] = auState('eunhye@jch.or.kr');
  const [pw, setPw] = auState('123456');
  const [pwConfirm, setPwConfirm] = auState('123456');
  const joinedAt = (window.aimenToday && window.aimenToday()) || '2026-06-09';
  const GRADES = window.GRADE_OPTIONS || ['성인'];
  const ROLES = window.ROLE_OPTIONS || ['성도'];

  const currentStep = SIGNUP_STEPS[step];
  const totalSteps = SIGNUP_STEPS.length - 1; // exclude 'done' from progress

  const canProceed = () => {
    if (currentStep === 'name') return name.trim().length >= 2 && nickname.trim().length >= 1;
    if (currentStep === 'detail') return !!grade && !!role;
    if (currentStep === 'email') return /^[^@]+@[^@]+\.[^@]+$/.test(email) && pw.length >= 6 && pw === pwConfirm;
    if (currentStep === 'avatar') return true;
    return true;
  };

  const next = () => {
    if (!canProceed()) return;
    if (step < SIGNUP_STEPS.length - 1) setStep(step + 1);
  };
  const back = () => {
    if (step === 0) { onBack && onBack(); }
    else setStep(step - 1);
  };

  return (
    <>
      <NightSky showMoon={false} />
      <div className="welcome-shell auth-screen signup">
        <div className="home-night-topbar">
          <button className="hnt-icon" aria-label="Back" onClick={back}><Icon name="chev-left" /></button>
          <div className="hnt-brand"><span>회원가입</span></div>
          <div style={{ width: 34 }} />
        </div>

        {/* Progress bar */}
        {currentStep !== 'done' && (
          <div className="signup-progress">
            {SIGNUP_STEPS.slice(0, totalSteps).map((_, i) => (
              <span key={i} className={`sp-dot ${i <= step ? 'on' : ''}`} />
            ))}
            <span className="sp-text">{step + 1} / {totalSteps}</span>
          </div>
        )}

        {/* Step content */}
        <div className="signup-content">
          {currentStep === 'name' && (
            <>
              <div className="signup-eyebrow">STEP 1</div>
              <div className="signup-h1">어떻게<br/>불러드릴까요?</div>
              <div className="signup-sub">이름과 앱 안에서 보일 닉네임을 알려주세요. 나중에 바꿀 수 있어요.</div>
              <label className="auth-field big">
                <span className="af-label">이름</span>
                <input
                  type="text"
                  className="af-input"
                  placeholder="예: 김은혜"
                  value={name}
                  onChange={e => setName(e.target.value)}
                  maxLength={20}
                  autoFocus
                />
              </label>
              <label className="auth-field">
                <span className="af-label">닉네임</span>
                <input
                  type="text"
                  className="af-input"
                  placeholder="앱 안에서 보일 이름"
                  value={nickname}
                  onChange={e => setNickname(e.target.value)}
                  maxLength={16}
                />
                <span className="af-help">기도·감사 나눔과 랭킹에 표시돼요.</span>
              </label>
              <button className={`wa-primary auth-submit ${canProceed() ? '' : 'disabled'}`} onClick={next}>
                다음
              </button>
            </>
          )}

          {currentStep === 'detail' && (
            <>
              <div className="signup-eyebrow">STEP 2</div>
              <div className="signup-h1">교회 정보를<br/>알려주세요</div>
              <div className="signup-sub">학년과 직분은 맞춤 콘텐츠와 부서 운영에 사용돼요.</div>
              <label className="auth-field">
                <span className="af-label">학년</span>
                <div className="af-select-wrap">
                  <select className="af-input af-select" value={grade} onChange={e => setGrade(e.target.value)}>
                    {GRADES.map(g => <option key={g} value={g}>{g}</option>)}
                  </select>
                  <span className="af-select-arrow">▾</span>
                </div>
              </label>
              <label className="auth-field">
                <span className="af-label">교회 직분</span>
                <div className="af-select-wrap">
                  <select className="af-input af-select" value={role} onChange={e => setRole(e.target.value)}>
                    {ROLES.map(r => <option key={r} value={r}>{r}</option>)}
                  </select>
                  <span className="af-select-arrow">▾</span>
                </div>
              </label>
              <div className="signup-joined">
                <span className="sj-ic">🗓️</span>
                <span className="sj-text">가입일 <b>{joinedAt}</b> · 자동 저장</span>
              </div>
              <button className={`wa-primary auth-submit ${canProceed() ? '' : 'disabled'}`} onClick={next}>
                다음
              </button>
            </>
          )}

          {currentStep === 'email' && (
            <>
              <div className="signup-eyebrow">STEP 3</div>
              <div className="signup-h1">계정 정보를<br/>입력해주세요</div>
              <div className="signup-sub">이메일은 로그인과 기록 백업에 사용돼요.</div>
              <label className="auth-field">
                <span className="af-label">이메일</span>
                <input
                  type="email"
                  className="af-input"
                  placeholder="you@example.com"
                  value={email}
                  onChange={e => setEmail(e.target.value)}
                />
                {email && !/^[^@]+@[^@]+\.[^@]+$/.test(email) && (
                  <span className="af-error">올바른 이메일 형식이 아니에요 (예: you@example.com)</span>
                )}
              </label>
              <label className="auth-field">
                <span className="af-label">비밀번호 (6자 이상)</span>
                <input
                  type="password"
                  className="af-input"
                  placeholder="••••••••"
                  value={pw}
                  onChange={e => setPw(e.target.value)}
                />
                {pw && pw.length < 6 && (
                  <span className="af-error">비밀번호는 6자 이상이어야 해요 (현재 {pw.length}자)</span>
                )}
              </label>
              <label className="auth-field">
                <span className="af-label">비밀번호 확인</span>
                <input
                  type="password"
                  className="af-input"
                  placeholder="••••••••"
                  value={pwConfirm}
                  onChange={e => setPwConfirm(e.target.value)}
                />
                {pwConfirm && pw !== pwConfirm && (
                  <span className="af-error">비밀번호가 일치하지 않아요</span>
                )}
              </label>
              <button className={`wa-primary auth-submit ${canProceed() ? '' : 'disabled'}`} onClick={next}>
                다음
              </button>
            </>
          )}

          {currentStep === 'avatar' && (
            <>
              <div className="signup-eyebrow">STEP 4</div>
              <div className="signup-h1">당신만의<br/>마스코트를 만나요</div>
              <div className="signup-sub">기도와 묵상이 쌓일수록 함께 자라요.</div>

              <div className="avatar-summon">
                <div className="as-glow" />
                <img src={window.__res("assets/avatar-1.png")} alt="Lv.1 기도 새싹" className="as-img" />
                <div className="as-sparkle s1">✨</div>
                <div className="as-sparkle s2">⭐</div>
                <div className="as-sparkle s3">✨</div>
              </div>

              <div className="avatar-info">
                <div className="ai-name">Lv.1 · 기도 새싹</div>
                <div className="ai-desc">
                  기본 랜턴을 들고 회색 외투를 입은 첫 단계.<br/>
                  앞으로 6단계까지 함께 진화해요.
                </div>
              </div>

              <button className={`wa-primary auth-submit`} onClick={next}>
                {name ? `${name}님, 시작할게요` : '시작할게요'}
              </button>
            </>
          )}

          {currentStep === 'done' && (
            <>
              <div className="signup-celebrate">
                <div className="sc-emoji">🎉</div>
                <div className="signup-h1 sc-title">
                  환영합니다,<br/>
                  <span className="sc-name">{name || '동행자'}님</span>
                </div>
                <div className="signup-sub">
                  중문교회 AI-Men 가입이 완료되었어요.<br/>
                  오늘부터 매일 함께 걸어요.
                </div>
                <div className="sc-reward">
                  <span className="scr-eyebrow">첫 출석 보상</span>
                  <span className="scr-value">+10 XP · 🌱 기도 새싹 캐릭터 획득</span>
                </div>
              </div>
              <button className="wa-primary auth-submit" onClick={onDone}>
                홈으로 가기
              </button>
            </>
          )}
        </div>
      </div>
    </>
  );
}

window.LoginScreen = LoginScreen;
window.SignupScreen = SignupScreen;