// ============================================================
// AUTH + LANDING — homepage, login, register.
// ============================================================
const { useState: useStateAuth } = React;

// mini calendar preview used in hero + auth aside
function MiniCalendar() {
  const tr = window.CJUI.t; // cells use `t` as a tone key, so alias the translator
  const cells = [
    { d: 2, p: '−$438', t: 'neg' }, { d: 3, p: '+$998', t: 'pos' }, { d: 4, p: '', t: '' },
    { d: 5, p: '+$350', t: 'pos' }, { d: 8, p: '+$880', t: 'pos' }, { d: 10, p: '−$250', t: 'neg' },
    { d: 11, p: '+$1.1k', t: 'pos' }, { d: 12, p: '', t: '' }, { d: 15, p: '+$1.0k', t: 'pos' },
    { d: 17, p: '+$357', t: 'pos' },
  ];
  return (
    <div className="lprev">
      <div className="lprev-top">
        <span className="lprev-mo">{tr('mini.month')}</span>
        <span className="lprev-net pos">+$4,162</span>
      </div>
      <div className="lprev-grid">
        {cells.map((c, i) => (
          <div key={i} className={'lprev-cell ' + c.t}>
            <span className="d">{c.d}</span>
            {c.p && <span className={'p ' + c.t}>{c.p}</span>}
          </div>
        ))}
      </div>
      <div className="lprev-foot">
        <div className="lprev-stat"><div className="k">{tr('stat.winRate')}</div><div className="v">59%</div></div>
        <div className="lprev-stat"><div className="k">{tr('stat.discipline')}</div><div className="v" style={{ color: 'var(--warn)' }}>67%</div></div>
        <div className="lprev-stat"><div className="k">{tr('stat.profitFactor')}</div><div className="v pos">3.41</div></div>
      </div>
    </div>
  );
}

// ---------------- Landing ----------------
function Landing({ onLogin, onRegister, authed, onEnter }) {
  const { Icon, Btn, useTheme, t, LangToggle } = window.CJUI;
  const { theme, toggle } = useTheme();

  const features = [
    { ico: 'plus', n: '01', h: t('land.feat1h'), p: t('land.feat1p') },
    { ico: 'ledger', n: '02', h: t('land.feat2h'), p: t('land.feat2p') },
    { ico: 'chart', n: '03', h: t('land.feat3h'), p: t('land.feat3p') },
    { ico: 'spark', n: '04', h: t('land.feat4h'), p: t('land.feat4p') },
  ];

  return (
    <div className="landing">
      <nav className="lnav">
        <div className="lnav-in">
          <div className="lnav-brand">
            <div className="brand-mark">C</div>
            <div><div className="brand-name">Confluence Score</div></div>
          </div>
          <div className="lnav-actions">
            <LangToggle />
            <button className="lnav-theme" onClick={toggle} aria-label={t('aria.toggleTheme')}><Icon d={theme === 'dark' ? 'sun' : 'moon'} size={15} /></button>
            {authed ? (
              <Btn kind="primary" size="sm" iconR="arrowR" onClick={onEnter}>{t('common.openDashboard')}</Btn>
            ) : (
              <>
                <Btn kind="ghost" size="sm" onClick={onLogin}>{t('common.login')}</Btn>
                <Btn kind="primary" size="sm" onClick={onRegister}>{t('common.getStarted')}</Btn>
              </>
            )}
          </div>
        </div>
      </nav>

      <div className="land-inner">
        {/* hero */}
        <header className="lhero">
          <div>
            <span className="lhero-tag"><Icon d="spark" size={12} /> {t('land.tag')}</span>
            <h1 className="lhero-title">{t('land.titlePre')}<em>{t('land.titleEm')}</em></h1>
            <p className="lhero-sub">{t('land.sub')}</p>
            <div className="lhero-cta">
              <Btn kind="primary" size="lg" iconR="arrowR" onClick={onRegister}>{t('land.ctaStart')}</Btn>
              <Btn kind="ghost" size="lg" onClick={onLogin}>{t('land.ctaHave')}</Btn>
            </div>
            <div className="lhero-note"><Icon d="check" size={14} /> {t('land.note')}</div>
          </div>
          <MiniCalendar />
        </header>

        {/* principle */}
        <section className="lprinciple">
          <span className="lsec-kicker">{t('land.principleKicker')}</span>
          <h2>{t('land.principleH2pre')}<b>{t('land.principleH2b')}</b></h2>
          <p>{t('land.principleP')}</p>
        </section>

        {/* features */}
        <section className="lsection">
          <span className="lsec-kicker">{t('land.featKicker')}</span>
          <h2 className="lsec-title">{t('land.featTitle')}</h2>
          <div className="lfeatures">
            {features.map((f) => (
              <div className="lfeat" key={f.n}>
                <span className="lfeat-num">{f.n}</span>
                <div className="lfeat-ico"><Icon d={f.ico} size={19} /></div>
                <h3>{f.h}</h3>
                <p>{f.p}</p>
              </div>
            ))}
          </div>
        </section>

        {/* how it works */}
        <section className="lsection">
          <span className="lsec-kicker">{t('land.howKicker')}</span>
          <h2 className="lsec-title">{t('land.howTitle')}</h2>
          <div className="lsteps">
            <div className="lstep"><div className="lstep-n">{t('land.s1n')}</div><h4>{t('land.s1h')}</h4><p>{t('land.s1p')}</p></div>
            <div className="lstep"><div className="lstep-n">{t('land.s2n')}</div><h4>{t('land.s2h')}</h4><p>{t('land.s2p')}</p></div>
            <div className="lstep"><div className="lstep-n">{t('land.s3n')}</div><h4>{t('land.s3h')}</h4><p>{t('land.s3p')}</p></div>
          </div>
        </section>

        {/* cta */}
        <section className="lcta">
          <span className="lsec-kicker">{t('land.ctaKicker')}</span>
          <h2>{t('land.ctaH2')}</h2>
          <p>{t('land.ctaP')}</p>
          <Btn kind="primary" size="lg" iconR="arrowR" onClick={onRegister}>{t('land.ctaStart')}</Btn>
        </section>

        <footer className="lfooter">
          <span className="mono">CONFLUENCE SCORE · 2026</span>
          <span>{t('land.footRight')}</span>
        </footer>
      </div>
    </div>
  );
}

// ---------------- Login / Register ----------------
function AuthScreen({ mode, onBack, onSwitch }) {
  const { Icon, Btn, t, LangToggle } = window.CJUI;
  const CJSupa = window.CJSupa;
  const isReg = mode === 'register';
  const [email, setEmail] = useStateAuth('');
  const [pw, setPw] = useStateAuth('');
  const [err, setErr] = useStateAuth('');
  const [info, setInfo] = useStateAuth('');
  const [busy, setBusy] = useStateAuth(false);

  // On success the App's onAuthChange listener flips to the desk — nothing to do here.
  const submit = async (e) => {
    e.preventDefault();
    if (busy) return;
    setErr(''); setInfo('');
    if (!email.trim() || !pw) { setErr(t('auth.errEnter')); return; }
    setBusy(true);
    if (isReg) {
      const { error, needsConfirm } = await CJSupa.signUp(email.trim(), pw);
      if (error) { setErr(error); setBusy(false); return; }
      if (needsConfirm) { setInfo(t('auth.infoConfirm')); setBusy(false); }
      // else: a session was returned → onAuthChange takes over.
    } else {
      const { error } = await CJSupa.signIn(email.trim(), pw);
      if (error) { setErr(error); setBusy(false); }
    }
  };
  const google = async () => {
    if (busy) return;
    setErr(''); setBusy(true);
    const { error } = await CJSupa.signInGoogle();
    if (error) { setErr(error); setBusy(false); } // success redirects away
  };
  const forgot = async (e) => {
    e.preventDefault();
    setErr(''); setInfo('');
    if (!email.trim()) { setErr(t('auth.resetNeedEmail')); return; }
    const { error } = await CJSupa.resetPassword(email.trim());
    if (error) setErr(error); else setInfo(t('auth.resetSent'));
  };

  return (
    <div className="auth">
      <aside className="auth-aside">
        <div className="auth-aside-grid" />
        <div className="auth-aside-top">
          <div className="lnav-brand"><div className="brand-mark">C</div><div className="brand-name">Confluence Score</div></div>
        </div>
        <div>
          <p className="auth-aside-quote">{t('auth.asideQuote')}</p>
          <div className="auth-aside-prev"><MiniCalendar /></div>
          <p className="auth-aside-by">{t('auth.asideBy')}</p>
        </div>
        <div />
      </aside>

      <main className="auth-main">
        <div className="auth-card">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
            <button className="auth-back" onClick={onBack}><Icon d="arrowL" size={14} /> {t('auth.backHome')}</button>
            <LangToggle />
          </div>
          <h1 className="auth-title">{isReg ? t('auth.titleReg') : t('auth.titleLogin')}</h1>
          <p className="auth-sub">{isReg ? t('auth.subReg') : t('auth.subLogin')}</p>

          <button className="auth-sso" type="button" onClick={google} disabled={busy}>
            <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 700 }}>G</span> {t('auth.google')}
          </button>
          <div className="auth-divider">{t('auth.divider')}</div>

          <form onSubmit={submit}>
            <div className="auth-field">
              <label>{t('auth.email')}</label>
              <input className="auth-input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@desk.trade" autoComplete="email" />
            </div>
            <div className="auth-field">
              <label>{t('auth.password')}</label>
              <input className="auth-input" type="password" value={pw} onChange={(e) => setPw(e.target.value)} placeholder={isReg ? t('auth.choosePw') : t('auth.yourPw')} autoComplete={isReg ? 'new-password' : 'current-password'} />
            </div>
            {err && <div className="auth-err">{err}</div>}
            {info && <div className="auth-info">{info}</div>}
            <div className="auth-row">
              {isReg ? (
                <label className="auth-check"><input type="checkbox" defaultChecked /> {t('auth.agree')}</label>
              ) : (
                <label className="auth-check"><input type="checkbox" defaultChecked /> {t('auth.remember')}</label>
              )}
              {!isReg && <a onClick={forgot} style={{ cursor: 'pointer' }}>{t('auth.forgot')}</a>}
            </div>
            <Btn kind="primary" size="lg" type="submit" iconR="arrowR" style={{ width: '100%' }} disabled={busy}>
              {busy ? t('auth.working') : isReg ? t('auth.createBtn') : t('auth.loginBtn')}
            </Btn>
          </form>

          <div className="auth-switch">
            {isReg ? (
              <>{t('auth.haveAccount')} <a onClick={() => onSwitch('login')}>{t('auth.toLogin')}</a></>
            ) : (
              <>{t('auth.newHere')} <a onClick={() => onSwitch('register')}>{t('auth.toRegister')}</a></>
            )}
          </div>
        </div>
      </main>
    </div>
  );
}

window.Landing = Landing;
window.AuthScreen = AuthScreen;