/* HTD Program 3a — Splash, Boot/Sync, Auth (Welcome / Login / Create) */
(function () {
  const { useState, useEffect, useRef } = React;
  const Icon = window.HTDIcon;
  const { useNav } = window.HTDUI;
  const { StatusBar } = window.HTDShell;

  // — HTD brand mark: blocky H with acid proof-slash —
  function HTDMark({ size=96, slash=true }) {
    return (
      <div style={{ width:size, height:size, position:'relative', borderRadius:size*0.18,
        background:'linear-gradient(150deg,#23271f,#0c0e0b 55%,#191d15)',
        border:'1px solid rgba(244,241,232,0.14)', display:'grid', placeItems:'center', overflow:'hidden',
        boxShadow:'inset 0 1px 0 rgba(255,255,255,0.06)' }}>
        <span style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:size*0.62, lineHeight:1,
          color:'#d9d6cc', letterSpacing:'-1px', textShadow:'0 1px 2px #000' }}>H</span>
        {slash && <div style={{ position:'absolute', width:size*1.15, height:size*0.085, background:'var(--acid)',
          transform:'rotate(-32deg)', top:'46%', left:'-8%', boxShadow:'0 0 12px var(--acid-glow)',
          clipPath:'polygon(0 50%, 12% 0, 100% 0, 100% 100%, 12% 100%)' }} />}
      </div>
    );
  }

  function Wordmark({ small }) {
    return (
      <div style={{ textAlign:'center' }}>
        <div style={{ fontFamily:'var(--display)', fontWeight:700, fontSize: small?22:30, letterSpacing:1,
          color:'var(--bone)', lineHeight:1, whiteSpace:'nowrap' }}>HARD THINGS</div>
        <div className="row" style={{ justifyContent:'center', gap:10, marginTop:4 }}>
          <span style={{ height:2, width:18, background:'var(--acid)' }} />
          <span style={{ fontFamily:'var(--display)', fontWeight:600, fontSize: small?16:22, letterSpacing:6, color:'var(--bone)' }}>DAILY</span>
          <span style={{ height:2, width:18, background:'var(--acid)' }} />
        </div>
      </div>
    );
  }

  function Splash() {
    const nav = useNav();
    useEffect(() => { const t = setTimeout(()=>nav.setPhase('boot'), 1700); return ()=>clearTimeout(t); }, []);
    return (
      <div onClick={()=>nav.setPhase('boot')} className="grid-bg" style={{ position:'absolute', inset:0, background:'var(--void)',
        display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:26, cursor:'pointer' }}>
        <div className="screen-enter"><HTDMark size={104} /></div>
        <Wordmark />
        <div className="label-mono" style={{ letterSpacing:2.5, marginTop:6 }}>
          DISCIPLINE. <span className="acid">PROOF.</span> FREEDOM.
        </div>
        <div className="label-mono" style={{ position:'absolute', bottom:54, color:'var(--steel)' }}>TAP TO CONTINUE</div>
      </div>
    );
  }

  function BootSync() {
    const nav = useNav();
    const lines = ['HTD IDENTITY CHECK','MISSION CACHE','PROOF NETWORK','CREW PRESSURE','AI MEMORY'];
    const [n, setN] = useState(0);
    useEffect(() => {
      if (n < lines.length) { const t = setTimeout(()=>setN(n+1), 260); return ()=>clearTimeout(t); }
      const t = setTimeout(()=>nav.setPhase('manifesto'), 650); return ()=>clearTimeout(t);
    }, [n]);
    return (
      <div onClick={()=>nav.setPhase('manifesto')} className="grid-bg" style={{ position:'absolute', inset:0, background:'var(--void)',
        display:'flex', flexDirection:'column', justifyContent:'center', padding:'0 40px', cursor:'pointer' }}>
        <div style={{ marginBottom:30 }}><HTDMark size={56} /></div>
        <div className="label-mono" style={{ color:'var(--steel)', marginBottom:16 }}>SYSTEM BOOT</div>
        {lines.map((l,i)=>(
          <div key={i} className="row between" style={{ padding:'9px 0', opacity: i<n?1:0.18, transition:'opacity .2s',
            borderBottom:'1px solid var(--hairline)' }}>
            <span style={{ fontFamily:'var(--mono)', fontSize:12, letterSpacing:1, color:'var(--bone-muted)' }}>{l}</span>
            {i<n ? <Icon name="check" size={15} color="var(--acid)" /> : <span className="label-mono" style={{ color:'var(--steel)' }}>···</span>}
          </div>
        ))}
        <div className="label-mono" style={{ color:'var(--acid)', marginTop:18 }}>{n>=lines.length?'READY':'SYNCING…'}</div>
      </div>
    );
  }

  function OAuthRow() {
    const toast = window.HTDUI.toast;
    return (
      <div style={{ display:'flex', flexDirection:'column', gap:10, marginTop:14 }}>
        {[['APPLE','user'],['GOOGLE','plusCircle'],['EMAIL','feed']].map(([l,ic])=>(
          <button key={l} className="btn-ghost row" style={{ justifyContent:'center', gap:9, whiteSpace:'nowrap' }}
            onClick={()=>toast(l+' SIGN-IN · PROVIDER STUB · WIRES TO YOUR AUTH')}>
            <Icon name={ic} size={16} color="var(--bone-muted)" /> CONTINUE WITH {l}
          </button>
        ))}
      </div>
    );
  }

  function AuthWelcome() {
    const nav = useNav();
    return (
      <div className="grid-bg" style={{ position:'absolute', inset:0, background:'var(--void)', display:'flex', flexDirection:'column' }}>
        <StatusBar />
        <div className="screen-body screen-enter" style={{ display:'flex', flexDirection:'column', padding:'0 26px 30px' }}>
          <div style={{ flex:1, display:'flex', flexDirection:'column', justifyContent:'center', alignItems:'center', gap:22, paddingTop:30 }}>
            <HTDMark size={92} />
            <Wordmark />
            <div style={{ textAlign:'center', maxWidth:300 }}>
              <div className="display-lg" style={{ fontSize:23, lineHeight:1.08, color:'var(--bone)', marginTop:8 }}>NO ONE IS COMING.</div>
              <div className="display-lg acid" style={{ fontSize:23, lineHeight:1.08, marginTop:2 }}>EARN YOUR FREEDOM.</div>
              <div className="muted" style={{ fontSize:13.5, marginTop:14, lineHeight:1.5 }}>
                Daily discipline missions. Real proof. Public standards. Adaptive resilience.
              </div>
            </div>
          </div>
          <button className="btn-primary" onClick={()=>nav.setPhase('onboarding')}>
            START TODAY<span className="sub">DISCIPLINE. PROOF. FREEDOM.</span>
          </button>
          <button className="btn-ghost" style={{ marginTop:10 }} onClick={()=>nav.setPhase('login')}>LOG IN</button>
          <OAuthRow />
        </div>
      </div>
    );
  }

  function Field({ label, type='text', value, placeholder }) {
    const [v, setV] = useState(value||'');
    return (
      <label style={{ display:'block', marginBottom:14 }}>
        <div className="label-mono" style={{ marginBottom:7 }}>{label}</div>
        <input type={type} defaultValue={value} placeholder={placeholder}
          style={{ width:'100%', height:48, background:'var(--panel)', border:'1px solid var(--hairline-2)',
            borderRadius:'var(--r)', color:'var(--bone)', fontFamily:'var(--ui)', fontSize:15, padding:'0 14px', outline:'none' }}
          onFocus={e=>e.target.style.borderColor='var(--border-active)'}
          onBlur={e=>e.target.style.borderColor='var(--hairline-2)'} />
      </label>
    );
  }

  function Login() {
    const nav = useNav();
    return (
      <div className="grid-bg" style={{ position:'absolute', inset:0, background:'var(--void)', display:'flex', flexDirection:'column' }}>
        <StatusBar />
        <div className="appbar"><button className="iconbtn" onClick={()=>nav.setPhase('welcome')}><Icon name="back" size={22} /></button>
          <div className="appbar-title">LOG IN</div></div>
        <div className="screen-body screen-enter" style={{ padding:'18px 26px 30px', display:'flex', flexDirection:'column' }}>
          <HTDMark size={56} />
          <div className="display-lg" style={{ fontSize:26, margin:'18px 0 22px' }}>WELCOME BACK,<br/>OPERATOR.</div>
          <Field label="EMAIL" type="email" placeholder="you@standard.com" />
          <Field label="PASSWORD" type="password" placeholder="••••••••" />
          <div className="row between" style={{ marginTop:-4 }}>
            <button className="label-mono" style={{ background:'none', border:'none', cursor:'pointer', color:'var(--steel)', padding:0 }}
              onClick={()=>window.HTDUI.toast('RESET LINK SENT · CHECK YOUR EMAIL')}>FORGOT PASSWORD</button>
            <button className="label-mono acid" style={{ background:'none', border:'none', cursor:'pointer', padding:0 }}
              onClick={()=>window.HTDUI.toast('MAGIC LINK SENT · CHECK YOUR EMAIL')}>USE MAGIC LINK</button>
          </div>
          <button className="btn-primary" style={{ marginTop:20 }} onClick={()=>nav.setPhase('app')}>LOG IN</button>
          <div className="label-mono" style={{ textAlign:'center', color:'var(--steel)', margin:'18px 0' }}>— OR —</div>
          <OAuthRow />
          <div className="label-mono" style={{ textAlign:'center', marginTop:22 }}>
            NO ACCOUNT? <span className="acid" onClick={()=>nav.setPhase('onboarding')}>START TODAY</span>
          </div>
        </div>
      </div>
    );
  }

  window.HTDAuth = { HTDMark, Wordmark, Splash, BootSync, AuthWelcome, Login };
})();