// Workorder page — board view of active work orders, with detail drawer
function WorkorderPage({ role, pushToast }) {
  const [selected, setSelected] = React.useState(null);
  const [filter, setFilter] = React.useState('active');

  const filtered = WORK_ORDER.filter(wo => {
    if (filter === 'active') return wo.status === 'in_progress';
    if (filter === 'qc') return wo.status === 'qc';
    if (filter === 'done') return wo.status === 'done';
    return true;
  });

  const cols = [
    { id: 'in_progress', label: 'Sedang Dikerjakan', tone: 'info'  },
    { id: 'qc',          label: 'Quality Check',     tone: 'warn'  },
    { id: 'done',        label: 'Selesai Hari Ini',  tone: 'good'  },
  ];

  return (
    <div>
      <PageHeader
        eyebrow="Operasional"
        title="Work Order"
        subtitle={`${WORK_ORDER.filter(w => w.status === 'in_progress').length} WO sedang dikerjakan · ${WORK_ORDER.filter(w => w.status === 'qc').length} menunggu QC final`}
        actions={
          <React.Fragment>
            <Btn icon="filter" tone="outline">Filter</Btn>
            <Btn icon="plus">WO Baru (Walk-in)</Btn>
          </React.Fragment>
        }
      />

      <div className="grid mb-6" style={{gridTemplateColumns:'repeat(4, 1fr)', gap:12}}>
        <Kpi label="Aktif" value={WORK_ORDER.filter(w => w.status === 'in_progress').length} hint="rata-rata 1.5 jam/WO" icon="wrench" tone="info" />
        <Kpi label="Menunggu QC" value={WORK_ORDER.filter(w => w.status === 'qc').length} hint="SLA: < 30 menit" icon="check" tone="warn" />
        <Kpi label="Bay Terpakai" value="3 / 19" hint="16% utilisasi 3 cabang" icon="building" tone="accent" />
        <Kpi label="Avg Cycle Time" value="1h 32m" hint="-8% vs minggu lalu" icon="clock" tone="good" />
      </div>

      <div className="grid" style={{gridTemplateColumns:'repeat(3, 1fr)', gap:14}}>
        {cols.map(col => {
          const items = WORK_ORDER.filter(w => w.status === col.id);
          // Synthesize a "done" column entry for demo
          const display = col.id === 'done' ? [
            ...items,
            { id: 'wo_done_demo', no: 'WO-2026-0521-099', vhId: 'vh020', mekanikId: 'mk2', cabang: 'snt', mulai: '08:30', estSelesai: '09:30', progress: 100, status: 'done', items: [{id:'is04', done:true}], fotoBefore: 1, fotoAfter: 2, catatan: 'Tune up selesai, customer puas.' },
          ] : items;
          return (
            <Card key={col.id} style={{padding:0, overflow:'hidden'}}>
              <div style={{padding:'11px 14px', borderBottom:'1px solid hsl(var(--border))', display:'flex', justifyContent:'space-between', alignItems:'center', background:'hsl(var(--muted) / 0.35)'}}>
                <div className="row gap-2" style={{alignItems:'center'}}>
                  <Pill tone={col.tone} dot>{col.label}</Pill>
                </div>
                <span style={{fontSize:12, fontWeight:600, color:'hsl(var(--muted-foreground))'}}>{display.length}</span>
              </div>
              <div className="flex-col gap-2" style={{padding:10}}>
                {display.length === 0 && (
                  <div style={{padding:'18px 8px', textAlign:'center', fontSize:12, color:'hsl(var(--muted-foreground))'}}>Tidak ada WO</div>
                )}
                {display.map(wo => {
                  const vh = KENDARAAN_BY_ID[wo.vhId];
                  const mk = MEKANIK_BY_ID[wo.mekanikId];
                  const itemsTotal = wo.items.length;
                  const itemsDone = wo.items.filter(i => i.done).length;
                  return (
                    <div key={wo.id} onClick={() => setSelected(wo)} style={{padding:11, border:'1px solid hsl(var(--border))', borderRadius:10, background:'hsl(var(--card))', cursor:'pointer'}}>
                      <div className="row" style={{justifyContent:'space-between', alignItems:'flex-start', marginBottom:6}}>
                        <div>
                          <div style={{fontSize:12, fontWeight:650, fontFamily:'Fraunces, Georgia, serif'}}>{vh?.merk} {vh?.model}</div>
                          <div className="mono" style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>{vh?.plat} · {wo.no}</div>
                        </div>
                        <Avatar initials={mk?.initials} className="sm" tone="accent" />
                      </div>
                      <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))', marginBottom:6, lineHeight:1.45}}>{wo.catatan || '—'}</div>
                      <div style={{height:5, background:'hsl(var(--muted))', borderRadius:99, overflow:'hidden', marginBottom:6}}>
                        <div style={{height:'100%', width: wo.progress + '%', background: wo.status === 'done' ? 'hsl(var(--good))' : wo.status === 'qc' ? 'hsl(var(--warn))' : 'hsl(var(--info))', borderRadius:99}} />
                      </div>
                      <div className="row" style={{justifyContent:'space-between', alignItems:'center', fontSize:11}}>
                        <span style={{color:'hsl(var(--muted-foreground))'}}>{itemsDone}/{itemsTotal} item · est. {wo.estSelesai}</span>
                        <span className="row gap-1" style={{alignItems:'center', color:'hsl(var(--muted-foreground))'}}>
                          <Icon name="camera" size={11} /> {wo.fotoBefore + wo.fotoAfter}
                        </span>
                      </div>
                    </div>
                  );
                })}
              </div>
            </Card>
          );
        })}
      </div>

      {selected && <WorkorderDrawer wo={selected} onClose={() => setSelected(null)} pushToast={pushToast} />}
    </div>
  );
}

function WorkorderDrawer({ wo, onClose, pushToast }) {
  const vh = KENDARAAN_BY_ID[wo.vhId];
  const mk = MEKANIK_BY_ID[wo.mekanikId];
  const ow = OWNER_BY_ID[vh?.ownerId];
  const total = wo.items.reduce((s, i) => s + (ITEM_SERVIS_BY_ID[i.id]?.hargaJasa || 0), 0);

  return (
    <div className="drawer-overlay" onClick={onClose}>
      <div className="drawer" onClick={e => e.stopPropagation()}>
        <div className="drawer-head">
          <div>
            <Pill tone={wo.status === 'qc' ? 'warn' : wo.status === 'done' ? 'good' : 'info'} dot>
              {wo.status === 'in_progress' ? 'Sedang Dikerjakan' : wo.status === 'qc' ? 'Quality Check' : 'Selesai'}
            </Pill>
            <h2 style={{margin:'6px 0 2px', fontFamily:'Fraunces, Georgia, serif', fontSize:20, fontWeight:650}}>{wo.no}</h2>
            <div style={{fontSize:13, color:'hsl(var(--muted-foreground))'}}>{vh?.merk} {vh?.model} · {vh?.plat}</div>
          </div>
          <Btn icon="x" tone="ghost" onClick={onClose}>Tutup</Btn>
        </div>

        <div className="drawer-body">
          {/* Customer & mechanic */}
          <Card style={{padding:14, marginBottom:12}}>
            <div className="grid" style={{gridTemplateColumns:'1fr 1fr', gap:14}}>
              <div>
                <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', textTransform:'uppercase', letterSpacing:0.4, fontWeight:600, marginBottom:5}}>Customer</div>
                <div className="row gap-2" style={{alignItems:'center'}}>
                  <Avatar initials={ow?.name?.split(' ').map(s=>s[0]).slice(0,2).join('') || '?'} />
                  <div>
                    <div style={{fontWeight:600, fontSize:13}}>{ow?.name}</div>
                    <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))'}}>{ow?.phone}</div>
                  </div>
                </div>
              </div>
              <div>
                <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', textTransform:'uppercase', letterSpacing:0.4, fontWeight:600, marginBottom:5}}>Mekanik PIC</div>
                <div className="row gap-2" style={{alignItems:'center'}}>
                  <Avatar initials={mk?.initials} tone="accent" />
                  <div>
                    <div style={{fontWeight:600, fontSize:13}}>{mk?.name}</div>
                    <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))'}}>{mk?.level} · {mk?.spec}</div>
                  </div>
                </div>
              </div>
            </div>
          </Card>

          {/* Item checklist */}
          <SectionHead title="Item Pekerjaan" subtitle={`${wo.items.filter(i=>i.done).length} dari ${wo.items.length} selesai`} />
          <Card style={{padding:0, marginBottom:12}}>
            {wo.items.map((it, idx) => {
              const item = ITEM_SERVIS_BY_ID[it.id];
              return (
                <div key={it.id} style={{display:'flex', alignItems:'center', gap:10, padding:'10px 14px', borderTop: idx === 0 ? 'none' : '1px solid hsl(var(--border))'}}>
                  <div style={{width:20, height:20, borderRadius:6, background: it.done ? 'hsl(var(--good))' : 'hsl(var(--muted))', display:'flex', alignItems:'center', justifyContent:'center', color: it.done ? 'white' : 'hsl(var(--muted-foreground))'}}>
                    {it.done && <Icon name="check" size={12} />}
                  </div>
                  <div style={{flex:1}}>
                    <div style={{fontSize:13, fontWeight: it.done ? 500 : 600, textDecoration: it.done ? 'line-through' : 'none', color: it.done ? 'hsl(var(--muted-foreground))' : 'inherit'}}>{item?.label}</div>
                    <div style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>Estimasi {item?.durMin} menit · {rupiah(item?.hargaJasa, {compact:true})}</div>
                  </div>
                </div>
              );
            })}
            <div style={{padding:'10px 14px', borderTop:'1px solid hsl(var(--border))', background:'hsl(var(--muted) / 0.3)', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
              <span style={{fontSize:12, fontWeight:600, color:'hsl(var(--muted-foreground))'}}>Total Jasa</span>
              <span className="mono" style={{fontSize:14, fontWeight:700}}>{rupiah(total)}</span>
            </div>
          </Card>

          {/* Foto before/after */}
          <SectionHead title="Foto Dokumentasi" subtitle={`${wo.fotoBefore} before · ${wo.fotoAfter} after`} />
          <Card style={{padding:12, marginBottom:12}}>
            <div className="grid" style={{gridTemplateColumns:'1fr 1fr', gap:10}}>
              <div>
                <div style={{fontSize:11, fontWeight:600, color:'hsl(var(--muted-foreground))', textTransform:'uppercase', letterSpacing:0.4, marginBottom:5}}>Before ({wo.fotoBefore})</div>
                <div className="grid" style={{gridTemplateColumns:'repeat(3, 1fr)', gap:5}}>
                  {Array.from({length: 3}).map((_, i) => (
                    <div key={i} style={{aspectRatio:'1', borderRadius:7, background: i < wo.fotoBefore ? 'linear-gradient(135deg, hsl(var(--muted)) 0%, hsl(var(--border)) 100%)' : 'transparent', border: i < wo.fotoBefore ? 'none' : '1px dashed hsl(var(--border))', display:'flex', alignItems:'center', justifyContent:'center'}}>
                      <Icon name={i < wo.fotoBefore ? 'camera' : 'plus'} size={16} color="hsl(var(--muted-foreground))" />
                    </div>
                  ))}
                </div>
              </div>
              <div>
                <div style={{fontSize:11, fontWeight:600, color:'hsl(var(--muted-foreground))', textTransform:'uppercase', letterSpacing:0.4, marginBottom:5}}>After ({wo.fotoAfter})</div>
                <div className="grid" style={{gridTemplateColumns:'repeat(3, 1fr)', gap:5}}>
                  {Array.from({length: 3}).map((_, i) => (
                    <div key={i} style={{aspectRatio:'1', borderRadius:7, background: i < wo.fotoAfter ? 'linear-gradient(135deg, hsl(var(--good) / 0.18) 0%, hsl(var(--good) / 0.05) 100%)' : 'transparent', border: i < wo.fotoAfter ? '1px solid hsl(var(--good) / 0.35)' : '1px dashed hsl(var(--border))', display:'flex', alignItems:'center', justifyContent:'center'}}>
                      <Icon name={i < wo.fotoAfter ? 'camera' : 'plus'} size={16} color={i < wo.fotoAfter ? 'hsl(var(--good))' : 'hsl(var(--muted-foreground))'} />
                    </div>
                  ))}
                </div>
              </div>
            </div>
            {wo.catatan && wo.catatan !== '-' && (
              <div style={{marginTop:10, padding:10, background:'hsl(var(--muted) / 0.4)', borderRadius:8, fontSize:12, color:'hsl(var(--foreground))', lineHeight:1.5}}>
                <strong style={{fontWeight:650}}>Catatan mekanik:</strong> {wo.catatan}
              </div>
            )}
          </Card>

          {wo.status === 'qc' && (
            <Card style={{padding:14, marginBottom:12, background:'hsl(var(--warn) / 0.08)', borderColor:'hsl(var(--warn) / 0.3)'}}>
              <div style={{fontSize:13, fontWeight:650, marginBottom:6}}>Checklist QC Final</div>
              <div className="flex-col gap-1">
                {['Test drive 5 km', 'Cek oli & cairan', 'Cek panel & lampu', 'Bersihkan area kerja', 'Foto after lengkap'].map((c, i) => (
                  <label key={i} style={{display:'flex', alignItems:'center', gap:8, fontSize:12.5}}>
                    <input type="checkbox" defaultChecked={i < 3} />
                    <span>{c}</span>
                  </label>
                ))}
              </div>
            </Card>
          )}

          <div className="row gap-2" style={{justifyContent:'flex-end'}}>
            <Btn tone="outline" icon="print">Cetak WO</Btn>
            {wo.status === 'in_progress' && <Btn icon="check" onClick={() => { pushToast({ msg: 'WO diteruskan ke QC', type:'success' }); onClose(); }}>Selesaikan → QC</Btn>}
            {wo.status === 'qc' && <Btn icon="check" onClick={() => { pushToast({ msg: 'WO selesai, invoice siap dicetak', type:'success' }); onClose(); }}>Approve & Buat Invoice</Btn>}
          </div>
        </div>
      </div>
    </div>
  );
}

window.WorkorderPage = WorkorderPage;