// Maintenance — Work Orders, parts, timeline, scheduled servis
const { useState: useStateM, useMemo: useMemoM } = React;

function Maintenance({ role, setPage }) {
  const [tab, setTab] = useStateM('aktif'); // aktif | scheduled | done | upcoming-due
  const [fMekanik, setFMekanik] = useStateM('all');
  const [fCabang, setFCabang] = useStateM('all');
  const [q, setQ] = useStateM('');
  const [sel, setSel] = useStateM(null);

  // Mekanik list (distinct)
  const mekanikList = useMemoM(() => Array.from(new Set(MAINTENANCE.map(m => m.mekanik))), []);

  // Service-due derived from ARMADA
  const serviceDue = useMemoM(() => ARMADA
    .filter(a => a.nextService && (a.nextService - a.odo) <= 5000)
    .map(a => ({ armada: a, kmRemain: a.nextService - a.odo }))
    .sort((a, b) => a.kmRemain - b.kmRemain),
  []);

  const filtered = useMemoM(() => MAINTENANCE.filter(m => {
    if (tab === 'aktif'     && m.status !== 'in-progress') return false;
    if (tab === 'scheduled' && m.status !== 'scheduled')   return false;
    if (tab === 'done'      && m.status !== 'done')        return false;
    if (fMekanik !== 'all' && m.mekanik !== fMekanik) return false;
    if (fCabang !== 'all') {
      const veh = ARMADA_BY_ID[m.armada];
      if (!veh || veh.cabang !== fCabang) return false;
    }
    if (q) {
      const s = q.toLowerCase();
      if (!m.id.toLowerCase().includes(s)
        && !m.armada.toLowerCase().includes(s)
        && !m.jenis.toLowerCase().includes(s)
        && !(m.mekanik || '').toLowerCase().includes(s)) return false;
    }
    return true;
  }), [tab, fMekanik, fCabang, q]);

  const counts = {
    aktif:     MAINTENANCE.filter(m => m.status === 'in-progress').length,
    scheduled: MAINTENANCE.filter(m => m.status === 'scheduled').length,
    done:      MAINTENANCE.filter(m => m.status === 'done').length,
  };
  const biayaAktif = MAINTENANCE.filter(m => m.status === 'in-progress').reduce((s, m) => s + m.biaya, 0);
  const partsCount = MAINTENANCE.filter(m => m.status === 'in-progress').reduce((s, m) => s + (m.parts?.length || 0), 0);

  return (
    <div>
      <PageHeader
        eyebrow="Workshop & Maintenance"
        title="Servis Armada"
        subtitle={`${counts.aktif} WO aktif · ${counts.scheduled} terjadwal · ${serviceDue.length} mobil mendekati servis berkala`}
        actions={[
          <Btn key="hist" icon="history" tone="ghost" size="sm">Riwayat Lengkap</Btn>,
          <Btn key="new" icon="plus" tone="primary" size="sm">Work Order Baru</Btn>,
        ]}
      />

      <div className="grid-4 mb-4">
        <Kpi label="WO Aktif"        value={counts.aktif}                 hint="Sedang dikerjakan workshop" icon="wrench" tone="warn" />
        <Kpi label="Terjadwal"       value={counts.scheduled}             hint="Servis mendatang" icon="calendar" tone="info" />
        <Kpi label="Biaya WO Aktif"  value={rupiah(biayaAktif, {compact:true})} hint="Total estimasi servis berjalan" icon="dollar" tone="info" />
        <Kpi label="Mendekati Servis" value={serviceDue.length}            hint="Armada < 5.000 KM dari berkala" icon="alert" tone="danger" />
      </div>

      {/* Service-due banner (top 4) */}
      {serviceDue.length > 0 && (
        <Card className="mb-4">
          <div style={{padding:'14px 18px', borderBottom:'1px solid hsl(var(--border))'}}>
            <div className="row between">
              <div>
                <div style={{fontFamily:'Fraunces, Georgia, serif', fontSize:15, fontWeight:600}}>Mendekati Servis Berkala</div>
                <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))', marginTop:2}}>Armada yang perlu dijadwalkan workshop ≤ 5.000 KM</div>
              </div>
              <Btn icon="calendar" tone="outline" size="sm">Jadwalkan Semua</Btn>
            </div>
          </div>
          <div style={{padding:14, display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(260px, 1fr))', gap:10}}>
            {serviceDue.slice(0, 6).map(({armada, kmRemain}) => {
              const pct = Math.max(0, Math.min(100, ((5000 - kmRemain) / 5000) * 100));
              const tone = kmRemain < 1000 ? 'danger' : kmRemain < 2500 ? 'warn' : 'neutral';
              return (
                <div key={armada.id} style={{padding:'10px 12px', border:'1px solid hsl(var(--border))', borderRadius:10, background:'hsl(var(--card))'}}>
                  <div className="row between" style={{marginBottom:6}}>
                    <span style={{fontSize:13, fontWeight:600}}>{armada.merk} {armada.model}</span>
                    <Pill tone={tone}>{kmRemain.toLocaleString('id-ID')} KM lagi</Pill>
                  </div>
                  <div className="row between" style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginBottom:8}}>
                    <span className="mono">{armada.plat}</span>
                    <span className="mono">{armada.odo.toLocaleString('id-ID')} / {armada.nextService.toLocaleString('id-ID')} KM</span>
                  </div>
                  <div style={{height:5, background:'hsl(var(--border))', borderRadius:999, overflow:'hidden'}}>
                    <div style={{height:'100%', width:`${pct}%`, background: tone === 'danger' ? 'hsl(0 70% 50%)' : tone === 'warn' ? 'hsl(35 80% 50%)' : 'hsl(195 60% 45%)', borderRadius:999}} />
                  </div>
                </div>
              );
            })}
          </div>
        </Card>
      )}

      {/* Tabs + filters */}
      <Card className="p-3 mb-4">
        <div className="row gap-3" style={{flexWrap:'wrap', alignItems:'center'}}>
          <div className="row" style={{background:'hsl(var(--muted))', borderRadius:8, padding:2}}>
            {[
              { id: 'aktif',     label: 'Aktif',     icon: 'wrench',   n: counts.aktif },
              { id: 'scheduled', label: 'Terjadwal', icon: 'calendar', n: counts.scheduled },
              { id: 'done',      label: 'Selesai',   icon: 'history',  n: counts.done },
            ].map(t => (
              <button key={t.id} onClick={() => setTab(t.id)}
                style={{padding:'6px 14px', borderRadius:6, border:0, fontSize:12, fontWeight:600, cursor:'pointer',
                  background: tab===t.id ? 'hsl(var(--card))' : 'transparent',
                  color: tab===t.id ? 'hsl(var(--foreground))' : 'hsl(var(--muted-foreground))',
                  boxShadow: tab===t.id ? 'var(--shadow-sm)' : 'none', display:'inline-flex', alignItems:'center', gap:6}}>
                <Icon name={t.icon} size={13} />{t.label} <span style={{opacity:0.7}}>· {t.n}</span>
              </button>
            ))}
          </div>
          <div style={{flex:'1 1 220px', minWidth:200, position:'relative'}}>
            <Icon name="search" size={14} style={{position:'absolute', left:10, top:'50%', transform:'translateY(-50%)', color:'hsl(var(--muted-foreground))', pointerEvents:'none'}} />
            <input className="input" placeholder="Cari WO / armada / jenis…" value={q} onChange={e=>setQ(e.target.value)} style={{paddingLeft:30, width:'100%'}} />
          </div>
          <select className="select" value={fMekanik} onChange={e=>setFMekanik(e.target.value)} style={{minWidth:160}}>
            <option value="all">Semua mekanik</option>
            {mekanikList.map(m => <option key={m} value={m}>{m}</option>)}
          </select>
          <select className="select" value={fCabang} onChange={e=>setFCabang(e.target.value)} style={{minWidth:140}}>
            <option value="all">Semua cabang</option>
            {CABANG.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
          </select>
        </div>
      </Card>

      {/* WO Table */}
      <Card>
        <div className="table-wrap">
          <table className="table">
            <thead>
              <tr>
                <th>WO</th>
                <th>Armada</th>
                <th>Jenis Pekerjaan</th>
                <th>Mekanik</th>
                <th>Masuk</th>
                <th>Estimasi</th>
                <th className="num">Biaya</th>
                <th>Prioritas</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(m => {
                const veh = ARMADA_BY_ID[m.armada];
                return (
                  <tr key={m.id} onClick={() => setSel(m)} style={{cursor:'pointer'}}>
                    <td className="code">{m.id}</td>
                    <td>
                      <div style={{fontWeight:600, fontSize:13}}>{veh ? `${veh.merk} ${veh.model}` : m.armada}</div>
                      <div style={{fontSize:11, color:'hsl(var(--muted-foreground))'}} className="mono">{veh?.plat || m.armada}</div>
                    </td>
                    <td>{m.jenis}</td>
                    <td>{m.mekanik}</td>
                    <td className="mono" style={{fontSize:12}}>{formatDateID(m.masuk)}</td>
                    <td className="mono" style={{fontSize:12}}>{formatDateID(m.estimasi)}</td>
                    <td className="num">{rupiah(m.biaya, {compact:true})}</td>
                    <td><Pill tone={statusTone(m.prioritas)}>{statusLabel(m.prioritas)}</Pill></td>
                    <td><StatusPill status={m.status} /></td>
                  </tr>
                );
              })}
              {filtered.length === 0 && (
                <tr><td colSpan={9}><div className="empty">Tidak ada WO sesuai filter.</div></td></tr>
              )}
            </tbody>
          </table>
        </div>
      </Card>

      {sel && <WoDrawer wo={sel} onClose={() => setSel(null)} />}
    </div>
  );
}

function WoDrawer({ wo, onClose }) {
  const veh = ARMADA_BY_ID[wo.armada];
  const isActive = wo.status === 'in-progress';
  const progress = isActive ? 60 : wo.status === 'scheduled' ? 0 : 100;

  // Timeline events (mock)
  const timeline = [
    { t: '08:30', date: wo.masuk, label: 'Mobil masuk workshop', actor: 'Dispatcher Komang', icon: 'wrench', done: true },
    { t: '09:15', date: wo.masuk, label: 'Inspeksi awal & estimasi', actor: wo.mekanik, icon: 'clipboard', done: true },
    { t: '10:00', date: wo.masuk, label: `WO ${wo.id} dibuka — ${wo.jenis}`, actor: wo.mekanik, icon: 'edit', done: true },
    ...(wo.parts && wo.parts.length > 0 ? [{ t: '11:30', date: wo.masuk, label: `Order parts: ${wo.parts.join(', ')}`, actor: 'Workshop', icon: 'truck', done: wo.status !== 'scheduled' }] : []),
    { t: '14:00', date: wo.masuk, label: 'Pengerjaan dimulai', actor: wo.mekanik, icon: 'settings', done: wo.status !== 'scheduled' },
    ...(wo.status === 'done' ? [
      { t: '16:30', date: wo.selesai || wo.estimasi, label: 'Quality check selesai', actor: wo.mekanik, icon: 'check', done: true },
      { t: '17:00', date: wo.selesai || wo.estimasi, label: 'WO ditutup — mobil siap rental', actor: 'Workshop Manager', icon: 'flag', done: true },
    ] : []),
    ...(isActive ? [{ t: NOW_HHMM, date: TODAY, label: 'Sedang dikerjakan…', actor: wo.mekanik, icon: 'clock', done: false, current: true }] : []),
  ];

  return (
    <div className="drawer-backdrop" onClick={onClose}>
      <div className="drawer" onClick={e => e.stopPropagation()} style={{width:'min(680px, 96vw)'}}>
        <div className="drawer-header">
          <div>
            <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.06em'}}>Work Order</div>
            <div className="drawer-title" style={{marginTop:2}}>{wo.id} · {wo.jenis}</div>
            <div className="row gap-2" style={{marginTop:8, alignItems:'center'}}>
              <StatusPill status={wo.status} />
              <Pill tone={statusTone(wo.prioritas)}>Prioritas {statusLabel(wo.prioritas)}</Pill>
            </div>
          </div>
          <Btn icon="x" tone="ghost" size="sm" onClick={onClose} />
        </div>

        <div className="drawer-body">
          {/* Vehicle */}
          <Card className="mb-4">
            <div style={{padding:14}}>
              <div className="row gap-3">
                <div className={`veh-thumb ${veh?.tipe || 'mpv'}`} style={{width:74, height:54, flexShrink:0}}>
                  <Icon name="car" size={32} />
                </div>
                <div style={{flex:1, minWidth:0}}>
                  <div style={{fontFamily:'Fraunces, Georgia, serif', fontSize:16, fontWeight:600}}>
                    {veh ? `${veh.merk} ${veh.model}` : wo.armada}
                  </div>
                  <div className="row gap-2" style={{fontSize:12, color:'hsl(var(--muted-foreground))', marginTop:3, flexWrap:'wrap'}}>
                    <span className="mono">{veh?.plat || wo.armada}</span>
                    <span>·</span>
                    <span>{veh ? tipeArmadaLabel(veh.tipe) : '—'}</span>
                    <span>·</span>
                    <span>{veh ? cabangName(veh.cabang) : '—'}</span>
                  </div>
                </div>
              </div>
              <div className="kv-grid" style={{marginTop:12}}>
                <div className="kv"><span className="kv-k">Odometer saat masuk</span><span className="kv-v mono">{wo.odo.toLocaleString('id-ID')} KM</span></div>
                <div className="kv"><span className="kv-k">Servis terakhir</span><span className="kv-v">{veh ? formatDateID(veh.lastService) : '—'}</span></div>
                <div className="kv"><span className="kv-k">Servis berikutnya</span><span className="kv-v mono">{veh ? `${veh.nextService.toLocaleString('id-ID')} KM` : '—'}</span></div>
                <div className="kv"><span className="kv-k">Mekanik</span><span className="kv-v">{wo.mekanik}</span></div>
              </div>
            </div>
          </Card>

          {/* Progress */}
          <div className="row gap-3 mb-4" style={{padding:'12px 14px', background:'hsl(var(--muted))', borderRadius:10, alignItems:'center'}}>
            <div style={{flex:1, minWidth:0}}>
              <div className="row between" style={{marginBottom:6}}>
                <span style={{fontSize:12.5, fontWeight:600}}>Progress Pekerjaan</span>
                <span className="mono" style={{fontSize:11.5, color:'hsl(var(--muted-foreground))'}}>{progress}%</span>
              </div>
              <div style={{height:6, background:'hsl(var(--border))', borderRadius:999, overflow:'hidden'}}>
                <div style={{height:'100%', width:`${progress}%`, background:'linear-gradient(90deg, hsl(28 78% 52%), hsl(20 78% 48%))', borderRadius:999, transition:'width 200ms'}} />
              </div>
            </div>
            <Pill tone="accent" dot>{formatDateID(wo.masuk)} → {formatDateID(wo.estimasi)}</Pill>
          </div>

          {/* Parts */}
          <Card className="mb-4">
            <div style={{padding:14}}>
              <div style={{fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'hsl(var(--muted-foreground))', marginBottom:10}}>
                Parts & Material · {wo.parts?.length || 0} item
              </div>
              {wo.parts && wo.parts.length > 0 ? (
                <div style={{display:'flex', flexDirection:'column', gap:6}}>
                  {wo.parts.map((p, i) => (
                    <div key={i} className="row between" style={{padding:'8px 10px', background:'hsl(195 36% 97%)', borderRadius:8, fontSize:13}}>
                      <span className="row gap-2"><Icon name="layers" size={13} />{p}</span>
                      <Pill tone={wo.status === 'scheduled' ? 'neutral' : wo.status === 'done' ? 'success' : 'warn'} dot>
                        {wo.status === 'scheduled' ? 'Order' : wo.status === 'done' ? 'Terpasang' : 'Tersedia'}
                      </Pill>
                    </div>
                  ))}
                </div>
              ) : (
                <div style={{fontSize:12, color:'hsl(var(--muted-foreground))'}}>Tidak ada parts untuk WO ini (jasa saja).</div>
              )}
              <div className="row between" style={{marginTop:12, paddingTop:12, borderTop:'1px solid hsl(var(--border))'}}>
                <span style={{fontSize:12.5, fontWeight:600}}>Total Estimasi Biaya</span>
                <span style={{fontFamily:'Fraunces, Georgia, serif', fontSize:18, fontWeight:600}}>{rupiah(wo.biaya)}</span>
              </div>
            </div>
          </Card>

          {/* Timeline */}
          <Card>
            <div style={{padding:14}}>
              <div style={{fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'hsl(var(--muted-foreground))', marginBottom:14}}>
                Status Timeline
              </div>
              <div style={{position:'relative', paddingLeft:32}}>
                <div style={{position:'absolute', left:13, top:6, bottom:6, width:2, background:'hsl(var(--border))'}} />
                {timeline.map((ev, i) => (
                  <div key={i} style={{position:'relative', paddingBottom: i === timeline.length - 1 ? 0 : 14}}>
                    <div style={{
                      position:'absolute', left:-32, top:-2,
                      width:28, height:28, borderRadius:'50%',
                      background: ev.current ? 'hsl(28 78% 52%)' : ev.done ? 'hsl(158 56% 44%)' : 'hsl(var(--muted))',
                      border:`2px solid ${ev.current ? 'hsl(28 78% 92%)' : ev.done ? 'hsl(158 56% 92%)' : 'hsl(var(--border))'}`,
                      display:'grid', placeItems:'center',
                      color: ev.done || ev.current ? 'white' : 'hsl(var(--muted-foreground))',
                    }}>
                      <Icon name={ev.icon} size={13} />
                    </div>
                    <div style={{fontSize:13, fontWeight:600}}>{ev.label}</div>
                    <div className="row gap-2" style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:2}}>
                      <span className="mono">{formatDateID(ev.date)} · {ev.t}</span>
                      <span>·</span>
                      <span>{ev.actor}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </Card>
        </div>

        <div className="row between" style={{padding:'14px 26px', borderTop:'1px solid hsl(var(--border))', background:'hsl(195 36% 99%)'}}>
          <div className="row gap-2" style={{fontSize:11.5, color:'hsl(var(--muted-foreground))'}}>
            <Icon name="clock" size={12} />
            <span>Update terakhir oleh {wo.mekanik}</span>
          </div>
          <div className="row gap-2">
            <Btn tone="ghost" size="sm" onClick={onClose}>Tutup</Btn>
            <Btn icon="print" tone="outline" size="sm">Cetak WO</Btn>
            {isActive && <Btn icon="check" tone="primary" size="sm">Tandai Selesai</Btn>}
            {wo.status === 'scheduled' && <Btn icon="zap" tone="primary" size="sm">Mulai Pekerjaan</Btn>}
          </div>
        </div>
      </div>
    </div>
  );
}

window.Maintenance = Maintenance;