/* ===== Dashboard / History (saved load plans) ===== */
const DashboardScreen = ({ onNavigate }) => {
  return (
    <div style={{ height:'100%', overflow:'auto' }}>
      <div style={{ padding:'24px 32px 16px', background:'#fff', borderBottom:'1px solid var(--line)' }}>
        <div style={{ display:'flex', alignItems:'flex-end' }}>
          <div>
            <div className="h-eyebrow">Dashboard</div>
            <h1 className="h-title" style={{ marginTop:4 }}>Operations overview · this week</h1>
            <div className="h-subtitle">42 plans built across 3 facilities · 18 carriers · 388 t shipped.</div>
          </div>
          <div style={{ marginLeft:'auto', display:'flex', gap:8 }}>
            <button className="btn"><Icon name="download" size={13}/> Export week</button>
            <button className="btn btn--primary" onClick={() => onNavigate('home')}>+ New plan</button>
          </div>
        </div>

        <div style={{ display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:10, marginTop:18 }}>
          {[
            ['Plans built',    '42',     '+8 vs last',  'ok'],
            ['Avg. utilisation','83%',   '+2.1pp',       'ok'],
            ['Total weight',   '388 t',  '40t over',     'ok'],
            ['Violations',     '3',      '-7 vs last',   'ok'],
            ['Empty miles',    '6.4%',   '-1.2pp',       'ok'],
          ].map(([l,v,d,t]) => (
            <div key={l} className="card" style={{ padding:'12px 14px' }}>
              <div style={{ fontSize:10.5, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'0.08em', fontWeight:600 }}>{l}</div>
              <div className="mono" style={{ fontSize:22, fontWeight:700, marginTop:2 }}>{v}</div>
              <div style={{ fontSize:11, color: t==='ok'?'var(--ok)':'var(--ink-3)' }}>{d}</div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ padding:'18px 32px', display:'grid', gridTemplateColumns:'2fr 1fr', gap:18 }}>
        {/* utilisation timeline */}
        <div className="card" style={{ padding:'14px 16px' }}>
          <div style={{ display:'flex', alignItems:'baseline' }}>
            <div className="h-eyebrow">Utilisation by day</div>
            <span className="mono" style={{ marginLeft:'auto', fontSize:11, color:'var(--ink-3)' }}>last 14 days</span>
          </div>
          <div style={{ marginTop:14 }}>
            <ChartBars/>
          </div>
        </div>

        {/* by module breakdown */}
        <div className="card" style={{ padding:'14px 16px' }}>
          <div className="h-eyebrow">By module</div>
          <div style={{ marginTop:10 }}>
            <ModBar label="Containerization" pct={62} color="#C13333"/>
            <ModBar label="Palletization"   pct={24} color="#F0B830"/>
            <ModBar label="Cartonization"   pct={14} color="#E8893C"/>
          </div>
        </div>
      </div>

      <div style={{ padding:'0 32px 32px' }}>
        <div className="card" style={{ overflow:'hidden' }}>
          <div style={{ padding:'10px 14px', borderBottom:'1px solid var(--line)', display:'flex', alignItems:'center' }}>
            <strong>Recent plans</strong>
            <span className="chip" style={{ marginLeft:8 }}>all facilities</span>
            <div style={{ flex:1 }}/>
            <button className="btn btn--sm btn--ghost"><Icon name="filter" size={12}/> Filter</button>
          </div>
          <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.concat(window.Mojro.RECENT_SESSIONS).map((r,i) => (
                <tr key={i}>
                  <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={12}/></button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

const ChartBars = () => {
  const data = [72,84,79,88,76,83,91, 85,80,77,84,86,82,88];
  return (
    <div>
      <div style={{ display:'flex', alignItems:'flex-end', gap:6, height:120, borderBottom:'1px solid var(--line)', paddingBottom:4 }}>
        {data.map((v,i) => (
          <div key={i} style={{ flex:1, position:'relative' }}>
            <div title={`Day ${i+1}: ${v}%`} style={{
              height: v + '%',
              background: 'linear-gradient(to top, var(--mojro-red-deep), var(--mojro-red))',
              borderRadius: '4px 4px 0 0',
            }}/>
          </div>
        ))}
      </div>
      <div style={{ display:'flex', justifyContent:'space-between', marginTop:4, fontSize:10, color:'var(--ink-4)' }}>
        <span>Apr 4</span><span>Apr 11</span><span>Apr 17</span>
      </div>
    </div>
  );
};

const ModBar = ({ label, pct, color }) => (
  <div style={{ marginBottom:10 }}>
    <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', fontSize:12, marginBottom:4 }}>
      <span>{label}</span>
      <span className="mono" style={{ fontWeight:600 }}>{pct}%</span>
    </div>
    <div style={{ height:8, background:'#efe8df', borderRadius:4, overflow:'hidden' }}>
      <div style={{ width: pct+'%', height:'100%', background: color }}/>
    </div>
  </div>
);

window.DashboardScreen = DashboardScreen;