/* ===== Home screen — module entry + recent sessions ===== */
const HomeScreen = ({ onNavigate }) => {
  const modules = [
    {
      id: 'cartonization', icon: 'carton', name: 'Cartonization',
      tagline: 'SKUs → cartons',
      inputs: ['SKU list', 'Excel / CSV upload', 'SKU library'],
      kpi: { label: 'Avg. cube fill', value: '88%' },
      accent: '#E8893C',
    },
    {
      id: 'palletization', icon: 'pallet', name: 'Palletization',
      tagline: 'Cartons / SKUs → pallets',
      inputs: ['Carton list', 'Loose SKUs', 'Mixed manifest'],
      kpi: { label: 'Avg. density gain', value: '+11%' },
      accent: '#F0B830',
    },
    {
      id: 'containerization', icon: 'container', name: 'Containerization',
      tagline: 'Pallets / cargo → container',
      inputs: ['Pallet list', 'Mixed manifest', 'Special cargo'],
      kpi: { label: 'Avg. utilisation', value: '83%' },
      accent: '#C13333', featured: true,
    },
  ];

  return (
    <div style={{ height:'100%', overflow:'auto', padding:'28px 40px 60px' }}>
      <div style={{ maxWidth:1280, margin:'0 auto' }}>
        {/* greeting */}
        <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom:24 }}>
          <div>
            <div className="h-eyebrow">Mojro Load Builder · v2.4</div>
            <h1 className="h-title" style={{ fontSize:30, marginTop:6, marginBottom:6 }}>Good afternoon, Priya.</h1>
            <div className="h-subtitle">7 plans in progress across 3 facilities. 2 plans waiting on driver assignment.</div>
          </div>
          <div style={{ display:'flex', gap:8 }}>
            <button className="btn"><Icon name="upload" size={13}/> Upload Excel</button>
            <button className="btn"><Icon name="history" size={13}/> Open recent</button>
            <button className="btn btn--primary"><Icon name="plus" size={13}/> New plan</button>
          </div>
        </div>

        {/* module cards */}
        <div className="h-eyebrow" style={{ marginBottom:10 }}>Start a module · each works independently</div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:14 }}>
          {modules.map(m => (
            <ModuleCard key={m.id} m={m} onClick={() => onNavigate(m.id)} />
          ))}
        </div>

        {/* full chain promo */}
        <div className="card" style={{ marginTop:14, padding:'16px 18px', display:'flex', alignItems:'center', gap:18, background:'linear-gradient(90deg, #2C1010 0%, #4d1f1f 60%, #6B1A1A 100%)', border:'none', color:'var(--ink-on-dark)' }}>
          <div style={{ display:'flex', alignItems:'center', gap:8 }}>
            <Icon name="carton" size={20} style={{ color:'#E8893C' }}/>
            <Icon name="arrow-right" size={14} style={{ opacity:0.6 }}/>
            <Icon name="pallet" size={20} style={{ color:'#F0B830' }}/>
            <Icon name="arrow-right" size={14} style={{ opacity:0.6 }}/>
            <Icon name="container" size={20} style={{ color:'#fff' }}/>
          </div>
          <div style={{ flex:1 }}>
            <div style={{ fontWeight:700, fontSize:15 }}>Run the full chain</div>
            <div style={{ fontSize:12.5, color:'var(--ink-on-dark-2)' }}>Cartonization → Palletization → Containerization in one guided session. Output of each stage cascades to the next.</div>
          </div>
          <button className="btn btn--dark" onClick={() => onNavigate('cartonization')}>Start guided flow <Icon name="arrow-right" size={12}/></button>
        </div>

        {/* recent sessions */}
        <div style={{ display:'flex', alignItems:'baseline', marginTop:32, marginBottom:10 }}>
          <h2 style={{ fontSize:16, fontWeight:700, margin:0 }}>Recent sessions</h2>
          <button className="btn btn--ghost btn--sm" style={{ marginLeft:'auto' }}>View all →</button>
        </div>
        <div className="card" style={{ overflow:'hidden' }}>
          <table className="tbl">
            <thead><tr>
              <th>Name</th>
              <th>Module</th>
              <th>Utilisation</th>
              <th>Weight</th>
              <th>Status</th>
              <th>Updated</th>
              <th></th>
            </tr></thead>
            <tbody>
              {window.Mojro.RECENT_SESSIONS.map(r => (
                <tr key={r.id}>
                  <td>
                    <div style={{ fontWeight:600 }}>{r.name}</div>
                  </td>
                  <td><span className="chip">{r.module}</span></td>
                  <td>
                    <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                      <div style={{ width:120, height:6, background:'#efe8df', borderRadius:3, overflow:'hidden' }}>
                        <div style={{ width: r.util+'%', height:'100%', background: r.util>85?'var(--ok)':r.util>70?'var(--warn)':'var(--bad)' }}/>
                      </div>
                      <span className="mono" style={{ fontSize:12 }}>{r.util}%</span>
                    </div>
                  </td>
                  <td className="mono" style={{ fontSize:12 }}>{r.weight}</td>
                  <td>
                    {r.status==='ok'   && <span className="chip chip--ok"><span className="dot"/>OK</span>}
                    {r.status==='warn' && <span className="chip chip--warn"><span className="dot"/>{r.violations} warn</span>}
                    {r.status==='bad'  && <span className="chip chip--bad"><span className="dot"/>{r.violations} blocking</span>}
                  </td>
                  <td style={{ color:'var(--ink-3)', fontSize:12 }}>{r.date}</td>
                  <td><button className="btn btn--icon btn--ghost"><Icon name="kebab" size={14}/></button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* What's new / footer band */}
        <div style={{ marginTop:24, display:'grid', gridTemplateColumns:'2fr 1fr', gap:14 }}>
          <div className="card" style={{ padding:'14px 16px' }}>
            <div className="h-eyebrow">What's new</div>
            <div style={{ marginTop:8, display:'flex', flexDirection:'column', gap:8 }}>
              <NewsRow tag="Containerization" text="Pipe loading now supports cross-bunk side-loading mode."/>
              <NewsRow tag="Rules"            text="Category matrix can be exported and re-imported across orgs."/>
              <NewsRow tag="API"              text="Optimization result webhook now retries on 5xx."/>
            </div>
          </div>
          <div className="card" style={{ padding:'14px 16px' }}>
            <div className="h-eyebrow">Quota</div>
            <div style={{ marginTop:8, fontSize:13 }}>Optimizations used this month</div>
            <div style={{ display:'flex', alignItems:'baseline', gap:6, marginTop:2 }}>
              <span className="mono" style={{ fontSize:24, fontWeight:700 }}>2,184</span>
              <span style={{ color:'var(--ink-3)', fontSize:12 }}>/ 10,000</span>
            </div>
            <div style={{ height:6, background:'#efe8df', borderRadius:3, marginTop:8, overflow:'hidden' }}>
              <div style={{ width:'21%', height:'100%', background:'var(--mojro-red)' }}/>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

const ModuleCard = ({ m, onClick }) => (
  <div className="card" style={{ padding:'18px 18px 16px', position:'relative', overflow:'hidden', cursor:'pointer', transition:'transform 120ms, box-shadow 120ms' }}
    onClick={onClick}
    onMouseEnter={e=>{ e.currentTarget.style.boxShadow='var(--sh-md)'; e.currentTarget.style.borderColor='var(--ink-4)'; }}
    onMouseLeave={e=>{ e.currentTarget.style.boxShadow='var(--sh-sm)'; e.currentTarget.style.borderColor='var(--line)'; }}>
    {/* corner accent */}
    <div style={{ position:'absolute', top:0, right:0, width:140, height:140, background: m.accent, opacity: 0.08, borderBottomLeftRadius:'100%' }}/>
    <div style={{ position:'relative' }}>
      <div style={{
        width:44, height:44, borderRadius:9,
        background: m.accent, color:'#fff',
        display:'grid', placeItems:'center', marginBottom:14,
      }}>
        <Icon name={m.icon} size={22}/>
      </div>
      <div style={{ display:'flex', alignItems:'baseline', gap:8 }}>
        <h3 style={{ fontSize:18, fontWeight:700, margin:0 }}>{m.name}</h3>
        {m.featured && <span className="chip chip--bad" style={{ fontSize:10 }}>Most used</span>}
      </div>
      <div style={{ fontSize:13, color:'var(--ink-3)', marginTop:2 }}>{m.tagline}</div>

      <div className="h-eyebrow" style={{ marginTop:18, fontSize:10 }}>Accepts</div>
      <div style={{ display:'flex', flexWrap:'wrap', gap:5, marginTop:6 }}>
        {m.inputs.map(i => <span key={i} className="chip">{i}</span>)}
      </div>

      <div style={{ display:'flex', alignItems:'center', marginTop:18, paddingTop:12, borderTop:'1px solid var(--line)' }}>
        <div>
          <div style={{ fontSize:10.5, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'0.08em' }}>{m.kpi.label}</div>
          <div className="mono" style={{ fontSize:16, fontWeight:700 }}>{m.kpi.value}</div>
        </div>
        <button className="btn btn--primary" style={{ marginLeft:'auto' }}>
          Start <Icon name="arrow-right" size={12}/>
        </button>
      </div>
    </div>
  </div>
);

const NewsRow = ({ tag, text }) => (
  <div style={{ display:'flex', gap:10, alignItems:'flex-start' }}>
    <span className="chip" style={{ minWidth:104, justifyContent:'center' }}>{tag}</span>
    <span style={{ fontSize:13, color:'var(--ink-2)' }}>{text}</span>
  </div>
);

window.HomeScreen = HomeScreen;