// Materials page — inventory, stock levels, POs, vendors.
// V2 Copilot Console base.

function MaterialsPage() {
  return (
    <div style={{
      width: '100%', height: '100%', background: C.bg, color: C.ink,
      fontFamily: C.sans, fontSize: 13, letterSpacing: '-0.005em',
      display: 'grid', gridTemplateColumns: '220px 1fr',
    }}>
      <CSidebar active="Materials" />
      <div style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <CHead
          crumb="Field / Materials"
          title="Materials"
          sub="Inventory, purchase orders & vendor terms across 4 active projects"
          right={
            <div style={{ display: 'flex', gap: 8 }}>
              <CButton icon="↥">Import xlsx</CButton>
              <CButton icon="⌕">Find in stock</CButton>
              <CButton primary icon="+">New PO</CButton>
            </div>
          }
        />

        {/* KPI strip */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 1, background: C.line, borderBottom: `1px solid ${C.line}` }}>
          <MatKpi label="Inventory value"  value="$1.82M"  sub="across 3 yards" />
          <MatKpi label="On order"          value="$640K"   sub="17 open POs" />
          <MatKpi label="Low stock"         value="9 SKUs"  sub="need reorder" tone="amber" />
          <MatKpi label="Expiring quotes"   value="4"       sub="within 7 days" tone="amber" />
          <MatKpi label="Receivable today"  value="3 deliv." sub="2 need inspection" tone="mint" />
        </div>

        {/* Filter bar */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8, padding: '12px 24px',
          background: C.panel, borderBottom: `1px solid ${C.line}`,
        }}>
          <FilterChip label="Project" value="Harborview Blk B" />
          <FilterChip label="Category" value="All" />
          <FilterChip label="Vendor" value="All" />
          <FilterChip label="Status" value="All" />
          <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 10, fontSize: 11, color: C.ink3 }}>
            <span>248 SKUs</span>
            <span>·</span>
            <span style={{ fontFamily: C.mono }}>Sorted: reorder first</span>
          </div>
        </div>

        {/* Main two columns */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.7fr 1fr', gap: 0, flex: 1, minHeight: 0 }}>
          <MatTable />
          <MatRightRail />
        </div>
      </div>
    </div>
  );
}

function MatKpi({ label, value, sub, tone }) {
  const col = { mint: C.mint, amber: C.amber, red: C.red }[tone] || C.ink2;
  return (
    <div style={{ background: C.panel, padding: '14px 18px' }}>
      <div style={{ fontSize: 11, color: C.ink2, marginBottom: 6 }}>{label}</div>
      <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1 }}>{value}</div>
      <div style={{ fontSize: 11, color: col, marginTop: 6, fontWeight: 500 }}>{sub}</div>
    </div>
  );
}

function FilterChip({ label, value }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 6,
      padding: '4px 10px 4px 10px', border: `1px solid ${C.line}`,
      borderRadius: 14, fontSize: 11, background: '#fff',
    }}>
      <span style={{ color: C.ink3 }}>{label}</span>
      <span style={{ color: C.ink, fontWeight: 500 }}>{value}</span>
      <span style={{ color: C.ink3, fontSize: 9 }}>▾</span>
    </div>
  );
}

function MatTable() {
  const rows = [
    { sku: 'SB-050', name: 'Rebar #5, 60ksi', cat: 'Steel',    unit: 'ton',  stock:  12,  req:  48, price: '$860/t',  tone: 'amber', status: 'Reorder', vend: 'Atlantic Steel' },
    { sku: 'CM-040', name: 'Type IL cement',  cat: 'Concrete', unit: 'bag',  stock: 320,  req: 480, price: '$9.40',   tone: 'amber', status: 'Reorder', vend: 'Brannigan' },
    { sku: 'LM-210', name: '2×10 SPF #2 KD',  cat: 'Lumber',   unit: 'ea',   stock: 640,  req: 240, price: '$18.20',  tone: 'mint',  status: 'In stock', vend: 'Pine Ridge' },
    { sku: 'IN-015', name: 'Mineral wool R-23', cat: 'Insul',  unit: 'bdl',  stock:  38,  req:  64, price: '$74.10',  tone: 'amber', status: 'Low',    vend: 'Rockwool NE' },
    { sku: 'GL-220', name: 'Low-E IGU 4×6',    cat: 'Glass',    unit: 'unit', stock:   0,  req:  28, price: '$612',    tone: 'red',   status: 'On order · CO-017', vend: 'Clearline' },
    { sku: 'EL-110', name: 'MC cable 12/2',    cat: 'Electric', unit: 'ft',   stock: 4200, req:1500, price: '$1.14',   tone: 'mint',  status: 'In stock', vend: 'Atlas Elec.' },
    { sku: 'PL-330', name: 'PEX-A 3/4"',       cat: 'Plumb',    unit: 'ft',   stock: 1840, req: 800, price: '$2.10',   tone: 'mint',  status: 'In stock', vend: 'Uponor' },
    { sku: 'HD-092', name: 'Anchor bolt 5/8', cat: 'Hardware', unit: 'ea',   stock:  84,  req: 120, price: '$4.80',   tone: 'amber', status: 'Low',    vend: 'Simpson' },
    { sku: 'FN-410', name: 'Finish tile 12×24 matte', cat: 'Finish', unit: 'sqft', stock: 0, req: 1800, price: '$6.40', tone: 'red', status: 'Needs quote', vend: '—' },
    { sku: 'MB-050', name: 'Membrane roofing TPO 60mil', cat: 'Roof', unit: 'sqft', stock: 0, req: 4200, price: '$3.80', tone: 'red',   status: 'On order', vend: 'Northern' },
    { sku: 'DW-120', name: 'Drywall 5/8" Type X', cat: 'Finish', unit: 'sheet', stock: 720, req: 2100, price: '$18.90', tone: 'amber', status: 'Partial', vend: 'USG' },
  ];

  return (
    <div style={{
      background: C.panel, borderRight: `1px solid ${C.line}`,
      display: 'flex', flexDirection: 'column', minHeight: 0, overflow: 'hidden',
    }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: '80px 1.5fr 0.7fr 0.6fr 0.8fr 1.1fr 0.9fr 0.9fr',
        padding: '10px 18px', fontSize: 10, color: C.ink3,
        letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 500,
        borderBottom: `1px solid ${C.line}`, background: C.bg,
      }}>
        <span>SKU</span>
        <span>Material</span>
        <span style={{ textAlign: 'right' }}>Stock</span>
        <span style={{ textAlign: 'right' }}>Req</span>
        <span style={{ textAlign: 'right' }}>Unit $</span>
        <span>Status</span>
        <span>Vendor</span>
        <span></span>
      </div>
      <div style={{ flex: 1, overflow: 'hidden' }}>
        {rows.map((r, i) => {
          const deficit = r.req - r.stock;
          const pct = Math.min(100, (r.stock / r.req) * 100);
          return (
            <div key={r.sku} style={{
              display: 'grid',
              gridTemplateColumns: '80px 1.5fr 0.7fr 0.6fr 0.8fr 1.1fr 0.9fr 0.9fr',
              padding: '12px 18px', fontSize: 12, alignItems: 'center',
              borderBottom: `1px solid ${C.line2}`,
              background: i === 0 ? '#fbfbfd' : 'transparent',
            }}>
              <span style={{ fontFamily: C.mono, color: C.ink2, fontSize: 11 }}>{r.sku}</span>
              <div>
                <div style={{ fontWeight: 500 }}>{r.name}</div>
                <div style={{ fontSize: 10, color: C.ink3 }}>{r.cat} · per {r.unit}</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontFamily: C.mono, fontWeight: 500 }}>{r.stock.toLocaleString()}</div>
                <div style={{
                  height: 2, background: C.line2, marginTop: 4, position: 'relative', overflow: 'hidden',
                }}>
                  <div style={{
                    position: 'absolute', inset: 0, width: `${pct}%`,
                    background: r.tone === 'red' ? C.red : r.tone === 'amber' ? C.amber : C.mint,
                  }} />
                </div>
              </div>
              <span style={{ textAlign: 'right', fontFamily: C.mono, color: C.ink2, fontSize: 11 }}>{r.req.toLocaleString()}</span>
              <span style={{ textAlign: 'right', fontFamily: C.mono, fontSize: 11 }}>{r.price}</span>
              <span><CPill tone={r.tone}>{r.status}</CPill></span>
              <span style={{ color: C.ink2, fontSize: 11 }}>{r.vend}</span>
              <span style={{ textAlign: 'right', fontSize: 11, color: C.blue, fontWeight: 500 }}>
                {deficit > 0 ? 'Order →' : 'View →'}
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function MatRightRail() {
  return (
    <div style={{ background: C.panel, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      {/* AI suggested PO */}
      <div style={{ padding: '14px 18px 16px', borderBottom: `1px solid ${C.line}` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <span style={{
            width: 20, height: 20, borderRadius: 5,
            background: `linear-gradient(135deg, ${C.blue}, ${C.indigo})`,
            display: 'grid', placeItems: 'center', color: '#fff', fontFamily: C.mono, fontSize: 10, fontWeight: 600,
          }}>C</span>
          <span style={{ fontSize: 11, color: C.ink3, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 500 }}>
            Copilot drafted · bundled PO
          </span>
        </div>
        <div style={{ fontSize: 13, lineHeight: 1.5, color: C.ink, marginBottom: 12 }}>
          9 SKUs hit reorder on Harborview. I grouped them into 3 POs by vendor — total <b>$128,420</b>, all within monthly budget.
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
            { v: 'Atlantic Steel', items: 3, amt: '$58,120', savings: '−$2,400 vs last qtr' },
            { v: 'Brannigan',      items: 2, amt: '$42,180', savings: 'on terms Net-30' },
            { v: 'Simpson + Rockwool', items: 4, amt: '$28,120', savings: 'merged shipment' },
          ].map((p) => (
            <div key={p.v} style={{
              padding: 10, border: `1px solid ${C.line}`, borderRadius: 7, fontSize: 12,
              display: 'flex', gap: 10, alignItems: 'center', background: C.bg,
            }}>
              <div style={{ width: 6, height: 6, background: C.blue, borderRadius: '50%' }} />
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 500 }}>{p.v}</div>
                <div style={{ fontSize: 10, color: C.ink3 }}>{p.items} items · {p.savings}</div>
              </div>
              <span style={{ fontFamily: C.mono, fontWeight: 500 }}>{p.amt}</span>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
          <CButton primary icon="✓">Send all 3</CButton>
          <CButton>Edit</CButton>
        </div>
      </div>

      {/* Deliveries today */}
      <div style={{ padding: '14px 18px 16px', borderBottom: `1px solid ${C.line}` }}>
        <div style={{ fontSize: 11, color: C.ink3, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 500, marginBottom: 10 }}>
          Deliveries · today
        </div>
        {[
          { t: '10:30', d: 'Atlantic Steel · beams W12×22', stat: 'inspection', tone: 'amber' },
          { t: '13:00', d: 'Pine Ridge · 2×10 SPF bdl',      stat: 'received',   tone: 'mint'  },
          { t: '15:45', d: 'Uponor · PEX-A spools',           stat: 'en route',   tone: 'default' },
        ].map((d, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '50px 1fr auto',
            padding: '8px 0', fontSize: 12, alignItems: 'center', gap: 10,
            borderTop: i ? `1px solid ${C.line2}` : 'none',
          }}>
            <span style={{ fontFamily: C.mono, fontSize: 11, color: C.ink3 }}>{d.t}</span>
            <span>{d.d}</span>
            <CPill tone={d.tone}>{d.stat}</CPill>
          </div>
        ))}
      </div>

      {/* Consumption chart */}
      <div style={{ padding: '14px 18px' }}>
        <div style={{ fontSize: 11, color: C.ink3, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 500, marginBottom: 10 }}>
          Weekly consumption · rebar #5
        </div>
        <div style={{ display: 'flex', gap: 5, alignItems: 'end', height: 80 }}>
          {[0.3, 0.5, 0.4, 0.7, 0.6, 0.9, 0.8, 1.0, 0.85, 0.7, 0.95, 0.6].map((h, i) => (
            <div key={i} style={{
              flex: 1, height: `${h * 100}%`,
              background: i >= 9 ? C.blue : C.ink4, borderRadius: 2,
            }} />
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: C.ink3, marginTop: 6, fontFamily: C.mono }}>
          <span>W01</span><span>W06</span><span>W12</span>
        </div>
        <div style={{ fontSize: 11, color: C.ink2, marginTop: 10, lineHeight: 1.5 }}>
          Usage up <b style={{ color: C.amber }}>+22%</b> vs plan — framing accelerated after steel arrival. Copilot suggests reorder <b>in 5 days</b>.
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { MaterialsPage });