/* Home / Command Center — Wild ring hub direction.
   Center "Your Roundhouse Record" ring with four pillar spokes around it.
   This is the user's chosen home variant. */

function Home({ go, emptyMode }) {
  if (emptyMode) return <HomeEmpty go={go}/>;
  return (
    <>
      <TopBar title="Roundhouse"/>
      <div className="screen" style={{paddingBottom: 72}}>
        <div className="screen-hero" style={{padding:'2px 0 4px', position:'relative'}}>
          <div className="eyebrow" style={{textAlign:'center'}}>Sat · April 19 · 6:14 am</div>
          <h1 className="hero-title" style={{textAlign:'center', fontSize:40}}>Time to <span className="red">train.</span></h1>
          {/* Tour button — top-right of the Home hero, since Home doesn't use CollapsingHero */}
          <div style={{position:'absolute', top:6, right:0}}>
            <TourButton onClick={()=>window.__rhTour && window.__rhTour('home')}/>
          </div>
        </div>

        {/* Hub — re-energized: breathing ring + state-driven spoke colors +
            pulsing attention spoke + subtle brass-dash accent around the center. */}
        <div className="hub-ring" style={{marginTop:4}}>
          <div className="ring-track"/>

          {/* Subtle brass-dash accent ring just outside the center disc */}
          <div style={{position:'absolute', inset:'28% 28%', pointerEvents:'none', display:'flex', alignItems:'center', justifyContent:'center'}}>
            <SegRing size={120} segments={36} filled={28} color="var(--rh-brass-tint-32)" track="transparent" stroke={1} gap={3}/>
          </div>

          {/* spokes — state-classed: ready / low / attention */}
          <div className="hub-spoke top s-ready" onClick={()=>go('gear')}>
            <I.gear s={18}/>
            <div className="label-md" style={{marginTop:4, fontSize:8}}>Gear</div>
            <div style={{fontFamily:'var(--font-display)', fontSize:16, color:'var(--fg-1)', lineHeight:1, marginTop:2}}>5</div>
            <div className="label-md" style={{fontSize:7, color:'var(--rh-bone-500)', marginTop:1}}>FIREARMS</div>
          </div>
          <div className="hub-spoke left s-low" onClick={()=>go('supply')}>
            <I.package s={18}/>
            <div className="label-md" style={{marginTop:4, fontSize:8}}>Supply</div>
            <div style={{fontFamily:'var(--font-display)', fontSize:16, color:'#E5B07E', lineHeight:1, marginTop:2}}>LOW</div>
            <div className="label-md" style={{fontSize:7, color:'var(--rh-bone-500)', marginTop:1}}>5.56</div>
          </div>
          <div className="hub-spoke right s-attention" onClick={()=>go('maintain')}>
            <I.cog s={18}/>
            <div className="label-md" style={{marginTop:4, fontSize:8}}>Maintain</div>
            <div style={{fontFamily:'var(--font-display)', fontSize:16, color:'var(--rh-dusty-red)', lineHeight:1, marginTop:2}}>+247</div>
            <div className="label-md" style={{fontSize:7, color:'var(--rh-bone-500)', marginTop:1}}>OVERDUE</div>
          </div>
          <div className="hub-spoke bottom s-ready" onClick={()=>go('protect')}>
            <I.shield s={18}/>
            <div className="label-md" style={{marginTop:4, fontSize:8}}>Protect</div>
            <div style={{fontFamily:'var(--font-display)', fontSize:16, color:'var(--fg-1)', lineHeight:1, marginTop:2}}>65<span style={{fontSize:10}}>%</span></div>
            <div className="label-md" style={{fontSize:7, color:'var(--rh-bone-500)', marginTop:1}}>READY</div>
          </div>
          {/* Center — the Record. v3.4: replaced the abstract "78% complete"
              with a tangible number — lifetime rounds is the most visceral
              stat for a shooter, and the delta below shows recent momentum. */}
          <div className="hub-center" onClick={()=>go('record')} style={{cursor:'pointer'}}>
            <div className="label-md" style={{color:'var(--rh-brass-400)', fontSize:7}}>Your Record</div>
            <div style={{fontFamily:'var(--font-display)', fontSize:26, color:'var(--fg-1)', letterSpacing:'0.02em', lineHeight:1, marginTop:3, fontVariantNumeric:'tabular-nums'}}>24,318</div>
            <div className="label-md" style={{fontSize:7, marginTop:3, color:'var(--rh-bone-500)'}}>LIFETIME RDS</div>
            <div className="label-md" style={{fontSize:7, marginTop:2, color:'#A6C293'}}>+247 THIS MO</div>
          </div>
        </div>

        {/* Primary actions — three distinct entry points to the central loop.
            Plan = ahead of time. Live = at the range right now. Log = after the fact. */}
        <div style={{marginTop:14, display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:6}}>
          <Button variant="primary" block onClick={()=>go('plan')} icon={<Wedge size={4}/>}>Plan</Button>
          <Button variant="secondary" block onClick={()=>go('live')} icon={<span style={{width:6, height:6, background:'var(--rh-dusty-red)', borderRadius:'50%', display:'inline-block'}}/>}>Live</Button>
          <Button variant="secondary" block onClick={()=>go('log')}>Log</Button>
        </div>
        <div className="rh-body-sm" style={{textAlign:'center', marginTop:8, color:'var(--rh-bone-500)', fontSize:11}}>
          Plan ahead · Live at the range · Log after the fact
        </div>

        {/* Most recent session — a quiet footer */}
        <LabelRule more="All">Last session</LabelRule>
        <div className="card" style={{padding:'10px 12px'}}>
          <SessionRow d="14" m="Apr" title="Indoor · 25yd" sub="Glock 19 · drills · 0 issues" rounds="250"/>
        </div>

        {/* Explicit Settings entry — also reachable via the topbar menu icon,
            but this surface guarantees discoverability. */}
        <div style={{marginTop:18, display:'flex', justifyContent:'center'}}>
          <button
            onClick={()=>go('settings')}
            style={{
              background:'transparent',
              border:'1px solid var(--border-default)',
              color:'var(--rh-bone-500)',
              padding:'8px 14px',
              borderRadius:2,
              fontFamily:'var(--font-ui)', fontSize:10, letterSpacing:'0.18em',
              textTransform:'uppercase', fontWeight:600,
              cursor:'pointer',
              display:'inline-flex', alignItems:'center', gap:8,
            }}>
            <span style={{width:14, height:14, display:'inline-flex', alignItems:'center', justifyContent:'center'}}>⚙</span>
            Settings & defaults
          </button>
        </div>
      </div>
    </>
  );
}

function HomeEmpty({ go }) {
  return (
    <>
      <TopBar title="Roundhouse"/>
      <div className="screen" style={{paddingBottom: 72, display:'flex', flexDirection:'column', minHeight:'90%'}}>
        <div className="screen-hero" style={{padding:'8px 0 4px', textAlign:'center'}}>
          <div className="eyebrow">Welcome to Roundhouse</div>
          <h1 className="hero-title" style={{fontSize:38}}>Lay the <span className="red">foundation.</span></h1>
          <div className="hero-sub" style={{marginTop:6}}>Roundhouse evolves with every range trip. Start with your first firearm — everything builds from there.</div>
        </div>

        {/* Collapsed ring — grayed pillars, single center prompt */}
        <div style={{marginTop:18, display:'flex', justifyContent:'center'}}>
          <div style={{position:'relative', width:240, height:240}}>
            <div style={{position:'absolute', inset:0, border:'1px dashed var(--rh-brass-tint-32)', borderRadius:'50%'}}/>
            {[
              {pos:{top:0, left:'50%', transform:'translateX(-50%)'}, label:'Gear'},
              {pos:{left:0, top:'50%', transform:'translateY(-50%)'}, label:'Supply'},
              {pos:{right:0, top:'50%', transform:'translateY(-50%)'}, label:'Maintain'},
              {pos:{bottom:0, left:'50%', transform:'translateX(-50%)'}, label:'Protect'},
            ].map(s => (
              <div key={s.label} style={{position:'absolute', ...s.pos, width:60, height:60, borderRadius:'50%', border:'1px dashed var(--border-default)', background:'var(--rh-obsidian-800)', display:'flex', alignItems:'center', justifyContent:'center', opacity:0.5}}>
                <span className="label-md" style={{fontSize:8, color:'var(--rh-bone-500)'}}>{s.label}</span>
              </div>
            ))}
            <div style={{position:'absolute', inset:'25% 25%', border:'1px solid var(--rh-brass)', borderRadius:'50%', background:'var(--rh-obsidian-800)', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', textAlign:'center', padding:8}}>
              <div className="label-md" style={{color:'var(--rh-brass-400)', fontSize:7}}>Your Record</div>
              <div style={{fontFamily:'var(--font-display)', fontSize:24, color:'var(--rh-bone-500)', letterSpacing:'0.02em', lineHeight:1, marginTop:3}}>0</div>
              <div className="label-md" style={{fontSize:7, marginTop:3, color:'var(--rh-bone-500)'}}>NO ROUNDS YET</div>
            </div>
          </div>
        </div>

        <div style={{marginTop:24, padding:'0 4px'}}>
          <Button variant="primary" block onClick={()=>go('addgun')} icon={<I.plus s={14}/>}>Add your first firearm</Button>
          <div className="rh-body-sm" style={{textAlign:'center', marginTop:10, color:'var(--rh-bone-500)'}}>
            Maintain and Protect unlock after your first gun and ammo are added.
          </div>
        </div>

        <div style={{marginTop:'auto', paddingTop:24}}>
          <LabelRule>What you'll get</LabelRule>
          <div className="card" style={{padding:'10px 12px'}}>
            <FoundationPoint k="Service Record" v="Every round, mod, malfunction, and clean tracked per gun."/>
            <FoundationPoint k="Live Sessions" v="Glove-friendly logging at the range, no chore feel."/>
            <FoundationPoint k="Claim-Ready" v="Photos, receipts, NFA — exportable on demand."/>
          </div>
        </div>
      </div>
    </>
  );
}

function FoundationPoint({ k, v }) {
  return (
    <div style={{display:'grid', gridTemplateColumns:'80px 1fr', gap:10, padding:'8px 0', borderBottom:'1px solid var(--border-hairline)'}}>
      <div className="label-md" style={{color:'var(--rh-brass-400)', fontSize:9}}>{k}</div>
      <div className="rh-body-sm" style={{color:'var(--rh-bone-300)'}}>{v}</div>
    </div>
  );
}

window.Home = Home;