/* ===== Reports & export ===== */
const ReportsScreen = () => {
  return (
    <div style={{ height:'100%', overflow:'auto' }}>
      <div style={{ padding:'24px 32px 16px', background:'#fff', borderBottom:'1px solid var(--line)', display:'flex', alignItems:'flex-end' }}>
        <div>
          <div className="h-eyebrow">Reports & export</div>
          <h1 className="h-title" style={{ marginTop:4 }}>IKEA Hamburg → Munich · 40ft HC</h1>
          <div className="h-subtitle">Plan #PL-22489 · 76 items · sealed 14:08 · Carrier: DSV ROAD AG</div>
        </div>
        <div style={{ marginLeft:'auto', display:'flex', gap:8 }}>
          <button className="btn"><Icon name="share" size={13}/> Share link</button>
          <button className="btn"><Icon name="download" size={13}/> Excel manifest</button>
          <button className="btn btn--primary"><Icon name="download" size={13}/> Download PDF</button>
        </div>
      </div>
      <div style={{ padding:'18px 32px', display:'grid', gridTemplateColumns:'2fr 1fr', gap:18, maxWidth:1400 }}>
        {/* PDF preview */}
        <div className="card" style={{ overflow:'hidden' }}>
          <div style={{ padding:'10px 14px', borderBottom:'1px solid var(--line)', background:'var(--bg-elev)', display:'flex', alignItems:'center', gap:8 }}>
            <Icon name="report" size={14}/>
            <span style={{ fontWeight:600, fontSize:13 }}>Load report · page 1 of 6</span>
            <span className="chip">PDF · A4</span>
            <div style={{ flex:1 }}/>
            <button className="btn btn--sm btn--ghost"><Icon name="chevron-down" size={12}/></button>
          </div>
          <div style={{ padding:20, background:'#fbfaf8' }}>
            <PdfPreview/>
          </div>
        </div>

        <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
          <div className="card" style={{ padding:'14px 16px' }}>
            <div className="h-eyebrow">Plan summary</div>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:8, marginTop:8 }}>
              <KpiTile label="Volume" value="87%" sub="of 73.5 m³" tone="ok"/>
              <KpiTile label="Weight" value="24.8t" sub="of 28.5t" tone="ok"/>
              <KpiTile label="Violations" value="0" sub="all clear" tone="ok"/>
              <KpiTile label="Stops" value="3" sub="LIFO seq."/>
            </div>
          </div>
          <div className="card" style={{ padding:'14px 16px' }}>
            <div className="h-eyebrow">Export options</div>
            <div style={{ display:'flex', flexDirection:'column', gap:8, marginTop:8 }}>
              <ExportRow icon="report" name="Load report (PDF)" sub="3D screenshot, manifest, compliance"/>
              <ExportRow icon="list"   name="Step-by-step loading guide" sub="76 steps · printable A5 cards" />
              <ExportRow icon="download" name="Excel manifest" sub="item-level positions + dims" />
              <ExportRow icon="share" name="Shareable 3D link" sub="public · interactive viewer" code="mojro.app/v/2f8d"/>
              <ExportRow icon="settings" name="Webhook → WMS / ERP" sub="POST JSON to configured URL"/>
            </div>
          </div>
          <div className="card" style={{ padding:'14px 16px' }}>
            <div className="h-eyebrow">Recipients</div>
            <div style={{ display:'flex', alignItems:'center', gap:8, marginTop:8 }}>
              <span style={{ width:28, height:28, borderRadius:'50%', background:'#2C1010', color:'#fff', display:'grid', placeItems:'center', fontSize:11 }}>DS</span>
              <div style={{ flex:1, fontSize:13 }}>DSV ROAD AG · planning@dsv.com</div>
              <span className="chip chip--ok">accessed</span>
            </div>
            <div style={{ display:'flex', alignItems:'center', gap:8, marginTop:8 }}>
              <span style={{ width:28, height:28, borderRadius:'50%', background:'#6B1A1A', color:'#fff', display:'grid', placeItems:'center', fontSize:11 }}>FK</span>
              <div style={{ flex:1, fontSize:13 }}>F. Klein · loading dock supervisor</div>
              <span className="chip">pending</span>
            </div>
            <button className="btn btn--sm" style={{ marginTop:10, width:'100%', justifyContent:'center' }}>+ Add recipient</button>
          </div>
        </div>
      </div>
    </div>
  );
};

const ExportRow = ({ icon, name, sub, code }) => (
  <div style={{ display:'flex', alignItems:'center', gap:10, padding:'8px 10px', border:'1px solid var(--line)', borderRadius:6 }}>
    <Icon name={icon} size={14} style={{ color:'var(--mojro-red)' }}/>
    <div style={{ flex:1, minWidth:0 }}>
      <div style={{ fontSize:13, fontWeight:600 }}>{name}</div>
      <div style={{ fontSize:11.5, color:'var(--ink-3)' }}>{code ? <span className="mono">{code}</span> : sub}</div>
    </div>
    <button className="btn btn--icon btn--sm"><Icon name={code?'share':'download'} size={11}/></button>
  </div>
);

const PdfPreview = () => (
  <div style={{ background:'#fff', boxShadow:'var(--sh-md)', padding:'40px 36px', borderRadius:4, fontSize:11.5, color:'var(--ink-1)' }}>
    {/* header */}
    <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', borderBottom:'2px solid var(--mojro-maroon)', paddingBottom:8 }}>
      <div>
        <div className="mono" style={{ fontSize:10, color:'var(--ink-3)', letterSpacing:'0.1em' }}>MOJRO · LOAD REPORT</div>
        <div style={{ fontSize:16, fontWeight:800, marginTop:4 }}>IKEA Hamburg → Munich · 40ft HC</div>
        <div style={{ fontSize:11, color:'var(--ink-3)' }}>Plan #PL-22489 · sealed 17 Apr 2026 14:08 UTC</div>
      </div>
      <div style={{ width:50, height:50, background:'var(--mojro-maroon)', borderRadius:5, color:'#fff', display:'grid', placeItems:'center', fontWeight:800, fontSize:11, letterSpacing:'0.1em' }}>MOJRO</div>
    </div>

    {/* 3D screenshot mock */}
    <div style={{ marginTop:14, height:170, background: 'linear-gradient(160deg, #ECE6DF 0%, #d4c8b9 100%)', borderRadius:4, position:'relative', overflow:'hidden' }}>
      <svg viewBox="0 0 600 170" width="100%" height="100%" preserveAspectRatio="none">
        {/* container outline isometric */}
        <g transform="translate(80,20)">
          {/* floor */}
          <polygon points="0,120 440,120 480,80 40,80" fill="#cfc4b5" stroke="#2C1010" strokeWidth="1"/>
          {/* back wall */}
          <polygon points="40,80 480,80 480,20 40,20" fill="#f0e8de" stroke="#2C1010" strokeWidth="1"/>
          {/* right wall */}
          <polygon points="480,80 480,20 440,60 440,120" fill="#e2d6c5" stroke="#2C1010" strokeWidth="1"/>
          {/* cargo boxes */}
          {[
            [50, 90, 50, 25, '#C13333'],
            [105, 92, 70, 28, '#E8893C'],
            [180, 94, 55, 25, '#F0B830'],
            [240, 92, 80, 28, '#2E5FA8'],
            [325, 94, 50, 25, '#1F8A5B'],
            [380, 90, 50, 28, '#7B4FB5'],
            // layer 2
            [70, 65, 50, 22, '#C13333'],
            [125, 67, 60, 22, '#E8893C'],
            [190, 67, 60, 22, '#F0B830'],
          ].map(([x,y,w,h,c],i)=>(
            <g key={i}>
              <rect x={x} y={y} width={w} height={h} fill={c} stroke="#2C1010" strokeWidth="0.6"/>
              <polygon points={`${x},${y} ${x+10},${y-8} ${x+w+10},${y-8} ${x+w},${y}`} fill={c} opacity="0.85" stroke="#2C1010" strokeWidth="0.4"/>
              <polygon points={`${x+w},${y} ${x+w+10},${y-8} ${x+w+10},${y+h-8} ${x+w},${y+h}`} fill={c} opacity="0.7" stroke="#2C1010" strokeWidth="0.4"/>
            </g>
          ))}
        </g>
      </svg>
      <div style={{ position:'absolute', left:8, top:6, fontSize:9, color:'var(--ink-3)', letterSpacing:'0.08em' }}>FIGURE 1 · 3D isometric view (colour by SKU)</div>
    </div>

    {/* KPI strip */}
    <div style={{ display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:8, marginTop:14 }}>
      {[
        ['VOLUME',  '87%'],
        ['PAYLOAD','24.8 t'],
        ['ITEMS',  '76'],
        ['SKUs',   '8'],
        ['CoG x', '46%'],
      ].map(([l,v]) => (
        <div key={l} style={{ padding:'6px 8px', background:'#f6f1ea', borderRadius:3 }}>
          <div style={{ fontSize:8, color:'var(--ink-3)', letterSpacing:'0.06em' }}>{l}</div>
          <div className="mono" style={{ fontSize:14, fontWeight:700 }}>{v}</div>
        </div>
      ))}
    </div>

    {/* manifest mini-table */}
    <div style={{ marginTop:12 }}>
      <div style={{ fontSize:11, fontWeight:700, marginBottom:4 }}>Cargo manifest · top 6 by volume</div>
      <table style={{ width:'100%', borderCollapse:'collapse', fontSize:9.5 }}>
        <thead><tr style={{ background:'#f6f1ea' }}>
          {['#','SKU','Type','Qty','Dims (mm)','Wt (kg)','Pos'].map(h => <th key={h} style={{ textAlign:'left', padding:'3px 5px' }}>{h}</th>)}
        </tr></thead>
        <tbody>
          {[
            ['p001','PLT-EUR-A','Pallet',8,'1200×800×1450',720,'A1'],
            ['p002','PLT-EUR-B','Pallet',6,'1200×800×1400',820,'A2'],
            ['p003','PLT-EUR-C','Pallet',4,'1200×800×1300',540,'D4'],
            ['c004','BX-LRG-01','Carton',14,'600×400×400',22,'B3'],
            ['c005','BX-MED-04','Carton',22,'500×360×280',14,'C2'],
            ['s007','BR-200L','Barrel',4,'⌀580×880',196,'D1'],
          ].map((r,i)=>(
            <tr key={i} style={{ borderBottom:'0.5px solid #e3dcd3' }}>
              {r.map((c,j)=>(<td key={j} style={{ padding:'3px 5px', fontFamily: j>=1 && j<=4 ? 'var(--font-mono)':'inherit' }}>{c}</td>))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
    {/* footer */}
    <div style={{ marginTop:12, display:'flex', justifyContent:'space-between', color:'var(--ink-4)', fontSize:9 }}>
      <span>mojro.app/v/2f8d</span>
      <span>Generated by Mojro Load Builder v2.4</span>
      <span>Page 1 / 6</span>
    </div>
  </div>
);

window.ReportsScreen = ReportsScreen;