// sitemap.jsx — visual sitemap of the FitKit app
// Diagrams every screen in the product and how they link

function Sitemap({ dark }) {
  const T = tokens(dark);

  // node styles
  const nodeBase = {
    padding:'10px 14px', borderRadius:12, border:`0.5px solid ${T.line}`,
    fontSize:12, fontWeight:600, lineHeight:1.3, display:'flex', flexDirection:'column', gap:2,
    minWidth:140, maxWidth:200,
  };

  const Node = ({ label, sub, kind='built', tone }) => {
    const styles = {
      built: { background: T.card, color: T.ink, borderStyle:'solid' },
      shared: { background: dark?'rgba(201,247,111,0.08)':'rgba(201,247,111,0.18)', borderColor: dark?'rgba(201,247,111,0.3)':'#A8D052', color:T.ink },
      trainee: { background: dark?'rgba(155,227,107,0.08)':'rgba(201,247,111,0.18)', color:T.ink, borderColor:dark?'rgba(155,227,107,0.3)':'#A8D052' },
      trainer: { background: dark?'rgba(255,214,107,0.1)':'rgba(255,214,107,0.25)', color:T.ink, borderColor:dark?'rgba(255,214,107,0.3)':'#E8B847' },
      todo: { background:'transparent', borderStyle:'dashed', color:T.ink2, borderColor:T.line },
      entry: { background: T.ink, color: T.bg, borderColor:T.ink },
    };
    return (
      <div style={{ ...nodeBase, ...styles[kind] }}>
        <div style={{ display:'flex', alignItems:'center', gap:6 }}>
          {kind==='trainee' && <span style={{ width:6, height:6, borderRadius:3, background:'#9BE36B', flexShrink:0 }}/>}
          {kind==='trainer' && <span style={{ width:6, height:6, borderRadius:3, background:'#FFD66B', flexShrink:0 }}/>}
          {kind==='shared' && <span style={{ width:6, height:6, borderRadius:3, background:T.brand, flexShrink:0 }}/>}
          {kind==='todo' && <span style={{ width:6, height:6, borderRadius:3, background:'transparent', border:`1px dashed ${T.ink3}`, flexShrink:0 }}/>}
          <span style={{ fontSize:13, fontWeight:700 }}>{label}</span>
        </div>
        {sub && <div style={{ fontSize:10, color:T.ink3, fontWeight:500, lineHeight:1.4 }}>{sub}</div>}
      </div>
    );
  };

  const Branch = ({ title, nodes, accent }) => (
    <div style={{ background:T.bg, border:`0.5px solid ${T.line}`, borderRadius:18, padding:16 }}>
      <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:12 }}>
        <span style={{ width:10, height:10, borderRadius:5, background:accent }}/>
        <div style={{ fontSize:11, fontWeight:700, color:T.ink2, letterSpacing:1.2, textTransform:'uppercase' }}>{title}</div>
      </div>
      <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
        {nodes.map((n,i)=>(
          <div key={i} style={{ display:'flex', alignItems:'flex-start', gap:8 }}>
            <div style={{ paddingTop:14, color:T.ink3, fontFamily:'"JetBrains Mono", monospace', fontSize:10, fontWeight:700, minWidth:18 }}>{String(i+1).padStart(2,'0')}</div>
            <Node {...n}/>
          </div>
        ))}
      </div>
    </div>
  );

  return (
    <div style={{ background: dark?'#0E1110':'#F4F3EE', borderRadius:24, padding:'32px 28px', border:`0.5px solid ${T.line}` }}>
      <div style={{ textAlign:'center', marginBottom:24 }}>
        <div style={{ fontSize:11, fontWeight:700, letterSpacing:1.4, textTransform:'uppercase', color:T.ink3 }}>● Sitemap</div>
        <div style={{ fontFamily:'"Plus Jakarta Sans"', fontSize:28, letterSpacing:-0.8, fontWeight:800, marginTop:6, color:T.ink }}>FitKit · ทุกหน้าในแอพ</div>
        <div style={{ fontSize:13, color:T.ink2, marginTop:6, maxWidth:520, marginLeft:'auto', marginRight:'auto', lineHeight:1.5 }}>
          Trainee + Trainer + flow ที่ใช้ร่วมกัน · เขียวคือสร้างแล้ว · เส้นขีดคือยังต้องสร้างเพิ่ม
        </div>
        <div style={{ display:'flex', gap:10, justifyContent:'center', marginTop:12, flexWrap:'wrap' }}>
          {[
            {l:'Built · Trainee', c:'#9BE36B'},
            {l:'Built · Trainer', c:'#FFD66B'},
            {l:'Shared', c:T.brand},
            {l:'To build', c:'transparent', dashed:true},
          ].map(x=>(
            <div key={x.l} style={{ display:'flex', alignItems:'center', gap:6, fontSize:11, fontWeight:600, color:T.ink2 }}>
              <span style={{ width:8, height:8, borderRadius:4, background:x.c, border: x.dashed?`1px dashed ${T.ink3}`:0 }}/>
              {x.l}
            </div>
          ))}
        </div>
      </div>

      {/* ENTRY column */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(260px, 1fr))', gap:14, marginBottom:14 }}>
        <Branch title="Entry / Onboarding" accent={T.ink} nodes={[
          { label:'Splash', sub:'แรกเปิด · CTA + login link', kind:'built' },
          { label:'Login', sub:'email / phone / OAuth', kind:'todo' },
          { label:'Role pick', sub:'Trainee vs Trainer', kind:'built' },
          { label:'Trainer invite gate 🔒', sub:'รหัสเชิญ · invite-only', kind:'trainer' },
          { label:'Trainee onboarding · 5 step', sub:'ชื่อ · goal · body · sched · pair', kind:'trainee' },
          { label:'Trainer onboarding · 5 step', sub:'profile · expertise · cert · avail · invite', kind:'trainer' },
          { label:'Welcome / Done', sub:'animated · entry CTA', kind:'built' },
        ]}/>

        <Branch title="Trainee · Main tabs" accent="#9BE36B" nodes={[
          { label:'Home / Today', sub:'todo · macros · biometrics · note', kind:'trainee' },
          { label:'Plan (Week)', sub:'7-day workout calendar', kind:'trainee' },
          { label:'Meals', sub:'log · history · macros', kind:'trainee' },
          { label:'Chat', sub:'with coach · voice + text', kind:'trainee' },
          { label:'Me / Profile', sub:'goals · streaks · settings', kind:'trainee' },
        ]}/>

        <Branch title="Trainee · Sub-screens" accent="#9BE36B" nodes={[
          { label:'Workout detail', sub:'sets · reps · timer · video', kind:'trainee' },
          { label:'Meal logger (AI)', sub:'photo → macros estimate', kind:'trainee' },
          { label:'Health Connect ⌚', sub:'always · by-request · pending', kind:'trainee' },
          { label:'Body progress', sub:'photos · weight chart · measure', kind:'todo' },
          { label:'Goal detail', sub:'history · revise · milestones', kind:'todo' },
          { label:'Achievements', sub:'streak badges · PRs', kind:'todo' },
          { label:'Coach profile (public)', sub:'cert · review · sessions', kind:'todo' },
          { label:'Notifications', sub:'reminder · message · summary', kind:'todo' },
        ]}/>

        <Branch title="Trainer · Main tabs" accent="#FFD66B" nodes={[
          { label:'Monitor (Home)', sub:'gauges · roster · live feed', kind:'trainer' },
          { label:'Roster', sub:'รายชื่อลูกเทรน · filter', kind:'trainer' },
          { label:'Meal Review', sub:'queue · approve · feedback', kind:'trainer' },
          { label:'Chat', sub:'inbox + thread (shared)', kind:'shared' },
          { label:'Calendar', sub:'sessions · day/week view', kind:'trainer' },
        ]}/>

        <Branch title="Trainer · Sub-screens" accent="#FFD66B" nodes={[
          { label:'Trainee detail', sub:'biometrics · plan · notes', kind:'trainer' },
          { label:'Assign workout', sub:'pick blocks · schedule · send', kind:'trainer' },
          { label:'Assign meal plan', sub:'macros · sample meals', kind:'todo' },
          { label:'Plan library', sub:'reusable templates', kind:'todo' },
          { label:'Session detail', sub:'check-in · notes · sign-off', kind:'todo' },
          { label:'Trainee notes', sub:'private journal per ลูกเทรน', kind:'todo' },
          { label:'Trainer profile (edit)', sub:'public bio · gallery', kind:'todo' },
          { label:'Income / Payouts', sub:'revenue · subscriptions', kind:'todo' },
        ]}/>

        <Branch title="Shared / System" accent={T.brand} nodes={[
          { label:'Chat thread', sub:'voice · text · attachment', kind:'shared' },
          { label:'Video call', sub:'in-app session', kind:'todo' },
          { label:'Settings', sub:'account · notif · privacy', kind:'todo' },
          { label:'Subscription / Plan', sub:'tier · billing', kind:'todo' },
          { label:'Help / Support', sub:'FAQ · contact', kind:'todo' },
          { label:'Onboarding match', sub:'trainee → trainer pairing', kind:'todo' },
        ]}/>
      </div>

      {/* Connection narrative */}
      <div style={{ background:T.card, border:`0.5px solid ${T.line}`, borderRadius:14, padding:'14px 18px', display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(220px, 1fr))', gap:14 }}>
        {[
          { f:'⌚', t:'Watch sync', d:'lookup ลูกเทรน → biometric panel ขึ้นในเทรนเนอร์' },
          { f:'📋', t:'Assign → Plan', d:'เทรนเนอร์ assign → ขึ้นที่ Home/Plan ของลูกเทรน' },
          { f:'🥗', t:'Meal → Review', d:'logger ของลูกเทรน → queue ของเทรนเนอร์' },
          { f:'💬', t:'Chat shared', d:'thread เดียวกันสองมุมมอง' },
        ].map(x=>(
          <div key={x.t} style={{ display:'flex', gap:10, alignItems:'flex-start' }}>
            <div style={{ width:32, height:32, borderRadius:8, background:T.chip, display:'flex', alignItems:'center', justifyContent:'center', fontSize:16, flexShrink:0 }}>{x.f}</div>
            <div>
              <div style={{ fontSize:12, fontWeight:700, color:T.ink }}>{x.t}</div>
              <div style={{ fontSize:11, color:T.ink2, marginTop:2, lineHeight:1.5 }}>{x.d}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.Sitemap = Sitemap;