// Serah Terima (BAST) — check-out, check-in, riwayat BAST dgn checklist, damage map, foto, ttd
const { useState: useStateS, useMemo: useMemoS } = React;

function SerahTerima({ role, setPage }) {
  const [tab, setTab] = useStateS('checkout'); // checkout | checkin | done
  const [fCabang, setFCabang] = useStateS('all');
  const [q, setQ] = useStateS('');
  const [sel, setSel] = useStateS(null);

  // Derive antrian dari BOOKINGS
  const queue = useMemoS(() => {
    const addDays = (iso, n) => { const d = new Date(iso); d.setDate(d.getDate() + n); return d.toISOString().slice(0, 10); };
    const list = [];
    BOOKINGS.forEach(b => {
      const mulaiDate = b.mulai.slice(0, 10);
      const selesaiDate = b.selesai.slice(0, 10);
      if ((b.status === 'confirmed' || b.status === 'pending') && mulaiDate >= TODAY && mulaiDate <= addDays(TODAY, 2)) {
        list.push({ mode: 'checkout', booking: b, when: b.mulai });
      }
      if (b.status === 'ongoing' && selesaiDate >= TODAY && selesaiDate <= addDays(TODAY, 2)) {
        list.push({ mode: 'checkin', booking: b, when: b.selesai });
      }
      if (b.status === 'done' && selesaiDate <= TODAY && selesaiDate >= addDays(TODAY, -14)) {
        list.push({ mode: 'done', booking: b, when: b.selesai });
      }
    });
    return list.sort((a, b) => a.when.localeCompare(b.when));
  }, []);

  const counts = {
    checkout: queue.filter(it => it.mode === 'checkout').length,
    checkin:  queue.filter(it => it.mode === 'checkin').length,
    done:     queue.filter(it => it.mode === 'done').length,
  };

  const filtered = useMemoS(() => queue.filter(it => {
    if (it.mode !== tab) return false;
    if (fCabang !== 'all' && it.booking.cabang !== fCabang) return false;
    if (q) {
      const s = q.toLowerCase();
      const cust = CUSTOMER_BY_ID[it.booking.cust];
      if (!it.booking.id.toLowerCase().includes(s)
        && !(cust?.nama || '').toLowerCase().includes(s)
        && !it.booking.armada.toLowerCase().includes(s)) return false;
    }
    return true;
  }), [queue, tab, fCabang, q]);

  const checkoutToday = queue.filter(it => it.mode === 'checkout' && it.when.slice(0,10) === TODAY).length;
  const checkinToday  = queue.filter(it => it.mode === 'checkin'  && it.when.slice(0,10) === TODAY).length;

  return (
    <div>
      <PageHeader
        eyebrow="Operasional Harian"
        title="Serah Terima"
        subtitle={`BAST check-out & check-in — ${counts.checkout} keluar, ${counts.checkin} kembali, ${counts.done} riwayat 14 hari`}
        actions={[
          <Btn key="tpl" icon="print" tone="ghost" size="sm">Template BAST</Btn>,
          <Btn key="man" icon="plus" tone="primary" size="sm">BAST Manual</Btn>,
        ]}
      />

      {/* Stats */}
      <div className="grid-4 mb-4">
        <Kpi label="Check-out Hari Ini" value={checkoutToday} hint="Armada keluar pool" icon="key"       tone="info" />
        <Kpi label="Check-in Hari Ini"  value={checkinToday}  hint="Armada kembali pool" icon="check"    tone="success" />
        <Kpi label="Antrian BAST"       value={counts.checkout + counts.checkin} hint="Menunggu serah-terima" icon="clipboard" tone="warn" />
        <Kpi label="Selesai 14 Hari"    value={counts.done}    hint="Riwayat BAST" icon="history"  tone="info" />
      </div>

      {/* Tabs + filter */}
      <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: 'checkout', label: 'Check-out', icon: 'key',     n: counts.checkout },
              { id: 'checkin',  label: 'Check-in',  icon: 'check',   n: counts.checkin },
              { id: 'done',     label: 'Riwayat',   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 ID / customer / armada…" value={q} onChange={e=>setQ(e.target.value)} style={{paddingLeft:30, width:'100%'}} />
          </div>
          <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>

      {/* List */}
      <div className="grid-2" style={{gap:14}}>
        {filtered.map(it => <BastCard key={`${it.mode}-${it.booking.id}`} item={it} onClick={() => setSel(it)} />)}
        {filtered.length === 0 && (
          <Card style={{gridColumn:'1 / -1'}}>
            <div className="empty">Tidak ada antrian BAST sesuai filter.</div>
          </Card>
        )}
      </div>

      {sel && <BastDrawer item={sel} onClose={() => setSel(null)} />}
    </div>
  );
}

function BastCard({ item, onClick }) {
  const b = item.booking;
  const veh = ARMADA_BY_ID[b.armada];
  const cust = CUSTOMER_BY_ID[b.cust];
  const isToday = item.when.slice(0, 10) === TODAY;
  const modeMeta = item.mode === 'checkout'
    ? { label: 'Check-out', icon: 'key', tone: 'accent' }
    : item.mode === 'checkin'
      ? { label: 'Check-in', icon: 'check', tone: 'success' }
      : { label: 'Selesai', icon: 'history', tone: 'neutral' };

  return (
    <Card hoverLift>
      <div onClick={onClick} style={{padding:16, cursor:'pointer'}}>
        <div className="row between mb-2" style={{alignItems:'flex-start'}}>
          <div className="row gap-2" style={{alignItems:'center'}}>
            <Pill tone={modeMeta.tone} dot><Icon name={modeMeta.icon} size={11} style={{marginRight:4}} />{modeMeta.label}</Pill>
            {isToday && item.mode !== 'done' && <Pill tone="warn">Hari Ini</Pill>}
          </div>
          <span className="mono" style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>{b.id}</span>
        </div>

        <div style={{fontFamily:'Fraunces, Georgia, serif', fontSize:16, fontWeight:600, letterSpacing:'-0.01em'}}>
          {veh ? `${veh.merk} ${veh.model}` : b.armada}
        </div>
        <div className="row gap-2" style={{fontSize:12, color:'hsl(var(--muted-foreground))', marginTop:3, flexWrap:'wrap'}}>
          <span className="mono">{veh?.plat || b.armada}</span>
          <span>·</span>
          <span>{tipeArmadaLabel(veh?.tipe)}</span>
          <span>·</span>
          <span>{statusLabel(b.layanan)}</span>
          <span>·</span>
          <span>{cabangName(b.cabang)}</span>
        </div>

        <div style={{marginTop:12, padding:'10px 12px', background:'hsl(var(--muted))', borderRadius:8}}>
          <div className="row between" style={{marginBottom:4}}>
            <span style={{fontSize:11.5, color:'hsl(var(--muted-foreground))', fontWeight:600}}>Customer</span>
            <span style={{fontSize:12.5, fontWeight:600}}>{cust?.nama || b.cust}</span>
          </div>
          <div className="row between">
            <span style={{fontSize:11.5, color:'hsl(var(--muted-foreground))', fontWeight:600}}>{item.mode === 'checkout' ? 'Pickup' : 'Drop-off'}</span>
            <span style={{fontSize:12, color:'hsl(var(--foreground))'}}>{item.mode === 'checkout' ? b.pickup : b.dropoff}</span>
          </div>
        </div>

        <div className="row between" style={{marginTop:12, fontSize:11.5}}>
          <div className="row gap-1" style={{color:'hsl(var(--muted-foreground))'}}>
            <Icon name="clock" size={12} />
            <span className="mono">{formatDateTimeID(item.when)}</span>
          </div>
          <div className="row gap-1" style={{color:'hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 10%))', fontWeight:600}}>
            Buka BAST <Icon name="send" size={12} />
          </div>
        </div>
      </div>
    </Card>
  );
}

function BastDrawer({ item, onClose }) {
  const [dtab, setDtab] = useStateS('checklist');
  const b = item.booking;
  const veh = ARMADA_BY_ID[b.armada];
  const cust = CUSTOMER_BY_ID[b.cust];
  const isDone = item.mode === 'done';

  // Checklist state — pre-fill berdasarkan status
  const [checks, setChecks] = useStateS(() => {
    const init = {};
    let counter = 0;
    BAST_CHECKLIST.forEach((cat, ci) => cat.items.forEach((itm, ii) => {
      const key = `${ci}-${ii}`;
      counter++;
      if (isDone) init[key] = 'ok';
      // for active: most checked, a couple unchecked, 1 failed (deterministic pseudo-random)
      else if (counter % 11 === 3) init[key] = 'fail';
      else if (counter % 7 === 0) init[key] = null;
      else init[key] = 'ok';
    }));
    return init;
  });

  // Demo damages (markers on car outline)
  const damages = [
    { id: 1, x: 26, y: 46, note: 'Lecet ringan pintu depan kiri', sev: 'ringan' },
    { id: 2, x: 70, y: 38, note: 'Penyok kecil fender kanan',     sev: 'sedang' },
    { id: 3, x: 84, y: 70, note: 'Goresan bumper belakang',       sev: 'ringan' },
  ];

  const totalChecks = BAST_CHECKLIST.reduce((a, c) => a + c.items.length, 0);
  const okChecks   = Object.values(checks).filter(v => v === 'ok').length;
  const failChecks = Object.values(checks).filter(v => v === 'fail').length;
  const pct = Math.round((okChecks / totalChecks) * 100);

  const toggle = (key) => {
    if (isDone) return;
    setChecks(c => {
      const cur = c[key];
      const next = cur === 'ok' ? 'fail' : cur === 'fail' ? null : 'ok';
      return { ...c, [key]: next };
    });
  };

  const modeLabel = item.mode === 'checkout' ? 'Check-out' : item.mode === 'checkin' ? 'Check-in' : 'Riwayat';

  return (
    <div className="drawer-backdrop" onClick={onClose}>
      <div className="drawer" onClick={e => e.stopPropagation()} style={{width:'min(720px, 96vw)'}}>
        <div className="drawer-header">
          <div>
            <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.06em'}}>BAST {modeLabel}</div>
            <div className="drawer-title" style={{marginTop:2}}>{b.id} · {veh?.plat || b.armada}</div>
            <div style={{fontSize:12, color:'hsl(var(--muted-foreground))', marginTop:4}}>
              {veh ? `${veh.merk} ${veh.model} (${veh.thn})` : b.armada} · {cust?.nama || b.cust}
            </div>
          </div>
          <Btn icon="x" tone="ghost" size="sm" onClick={onClose} />
        </div>

        <div className="drawer-body">
          {/* Summary card */}
          <Card className="mb-4">
            <div style={{padding:14}}>
              <div className="kv-grid">
                <div className="kv"><span className="kv-k">Customer</span><span className="kv-v">{cust?.nama || b.cust}</span></div>
                <div className="kv"><span className="kv-k">Telepon</span><span className="kv-v mono">{cust?.tel || '—'}</span></div>
                <div className="kv"><span className="kv-k">Mulai</span><span className="kv-v">{formatDateTimeID(b.mulai)}</span></div>
                <div className="kv"><span className="kv-k">Selesai</span><span className="kv-v">{formatDateTimeID(b.selesai)}</span></div>
                <div className="kv"><span className="kv-k">Durasi</span><span className="kv-v">{b.durasi} hari</span></div>
                <div className="kv"><span className="kv-k">Layanan</span><span className="kv-v">{statusLabel(b.layanan)}</span></div>
                <div className="kv"><span className="kv-k">Pickup</span><span className="kv-v">{b.pickup}</span></div>
                <div className="kv"><span className="kv-k">Drop-off</span><span className="kv-v">{b.dropoff}</span></div>
              </div>
            </div>
          </Card>

          {/* Progress strip */}
          <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 Checklist</span>
                <span className="mono" style={{fontSize:11.5, color:'hsl(var(--muted-foreground))'}}>{okChecks} / {totalChecks} · {pct}%</span>
              </div>
              <div style={{height:6, background:'hsl(var(--border))', borderRadius:999, overflow:'hidden'}}>
                <div style={{height:'100%', width:`${pct}%`, background:'linear-gradient(90deg, hsl(158 56% 44%), hsl(158 56% 36%))', borderRadius:999, transition:'width 200ms'}} />
              </div>
            </div>
            {failChecks > 0 && <Pill tone="danger" dot>{failChecks} catatan</Pill>}
            <Pill tone="accent" dot>{damages.length} damage</Pill>
          </div>

          {/* Tabs */}
          <div style={{borderBottom:'1px solid hsl(var(--border))', marginBottom:16, display:'flex', gap:0}}>
            {[
              { id: 'checklist', label: 'Checklist',      icon: 'check',  n: totalChecks },
              { id: 'damage',    label: 'Peta Kerusakan', icon: 'alert',  n: damages.length },
              { id: 'foto',      label: 'Foto 4 Sisi',    icon: 'camera', n: 4 },
              { id: 'sign',      label: 'Tanda Tangan',   icon: 'signature', n: null },
            ].map(t => (
              <button key={t.id} onClick={() => setDtab(t.id)}
                style={{padding:'10px 14px', border:0, background:'transparent', cursor:'pointer',
                  fontSize:12.5, fontWeight: dtab===t.id ? 600 : 500,
                  color: dtab===t.id ? 'hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 8%))' : 'hsl(var(--muted-foreground))',
                  borderBottom: dtab===t.id ? '2px solid hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 8%))' : '2px solid transparent',
                  marginBottom:-1, display:'inline-flex', alignItems:'center', gap:6}}>
                <Icon name={t.icon} size={13} />{t.label}{t.n != null && <span style={{opacity:0.7}}>· {t.n}</span>}
              </button>
            ))}
          </div>

          {dtab === 'checklist' && (
            <div style={{display:'flex', flexDirection:'column', gap:16}}>
              {BAST_CHECKLIST.map((cat, ci) => (
                <div key={cat.kategori}>
                  <div style={{fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'hsl(var(--muted-foreground))', marginBottom:8}}>
                    {cat.kategori} · {cat.items.length} item
                  </div>
                  <div className="checklist">
                    {cat.items.map((itm, ii) => {
                      const key = `${ci}-${ii}`;
                      const st = checks[key];
                      return (
                        <div key={key} className={`check-item ${st === 'ok' ? 'checked' : st === 'fail' ? 'fail' : ''}`} onClick={() => toggle(key)}>
                          <div className="check-box">
                            {st === 'ok' && <Icon name="check" size={12} />}
                            {st === 'fail' && <Icon name="x" size={12} />}
                          </div>
                          <div className="check-name">{itm}</div>
                          {st === 'fail' && <div className="check-meta">Perlu catatan</div>}
                        </div>
                      );
                    })}
                  </div>
                </div>
              ))}
            </div>
          )}

          {dtab === 'damage' && (
            <div>
              <div className="damage-canvas">
                <svg viewBox="0 0 400 225" style={{width:'100%', height:'100%'}}>
                  <g fill="none" stroke="hsl(195 30% 50%)" strokeWidth="1.5">
                    <rect x="60" y="70" width="280" height="85" rx="22" fill="hsl(195 40% 88%)" />
                    <path d="M 110 70 L 145 35 L 255 35 L 290 70 Z" fill="hsl(195 36% 82%)" />
                    <path d="M 118 68 L 150 40 L 198 40 L 198 68 Z" fill="hsl(200 50% 70%)" opacity="0.55" />
                    <path d="M 202 68 L 202 40 L 250 40 L 282 68 Z" fill="hsl(200 50% 70%)" opacity="0.55" />
                    <circle cx="115" cy="160" r="20" fill="hsl(220 10% 25%)" />
                    <circle cx="115" cy="160" r="9" fill="hsl(220 10% 50%)" />
                    <circle cx="285" cy="160" r="20" fill="hsl(220 10% 25%)" />
                    <circle cx="285" cy="160" r="9" fill="hsl(220 10% 50%)" />
                    <rect x="62" y="92" width="10" height="14" rx="3" fill="hsl(45 90% 70%)" />
                    <rect x="328" y="92" width="10" height="14" rx="3" fill="hsl(0 70% 60%)" />
                    <line x1="200" y1="70" x2="200" y2="155" />
                  </g>
                </svg>
                {damages.map(d => (
                  <div key={d.id} className="damage-marker" style={{left:`${d.x}%`, top:`${d.y}%`, transform:'translate(-50%, -50%)'}} title={d.note}>
                    {d.id}
                  </div>
                ))}
              </div>
              <div style={{marginTop:14, display:'flex', flexDirection:'column', gap:8}}>
                {damages.map(d => (
                  <div key={d.id} className="row gap-3" style={{padding:'10px 14px', border:'1px solid hsl(var(--border))', borderRadius:10, alignItems:'center'}}>
                    <div className="damage-marker" style={{position:'relative', flexShrink:0}}>{d.id}</div>
                    <div style={{flex:1}}>
                      <div style={{fontSize:13, fontWeight:500}}>{d.note}</div>
                      <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:2}}>
                        Tingkat: <Pill tone={d.sev === 'sedang' ? 'warn' : 'neutral'}>{d.sev}</Pill>
                      </div>
                    </div>
                    {!isDone && <Btn icon="x" tone="ghost" size="sm" />}
                  </div>
                ))}
                {!isDone && (
                  <Btn icon="plus" tone="ghost" size="sm">Tambah Titik Kerusakan</Btn>
                )}
              </div>
            </div>
          )}

          {dtab === 'foto' && (
            <>
              <div className="grid-2" style={{gap:12}}>
                {['Depan', 'Belakang', 'Samping Kiri', 'Samping Kanan'].map((sisi, i) => (
                  <Card key={sisi}>
                    <div style={{padding:10}}>
                      <div style={{
                        aspectRatio:'4/3',
                        background:'linear-gradient(135deg, hsl(195 36% 92%), hsl(196 40% 86%))',
                        borderRadius:10,
                        display:'grid', placeItems:'center',
                        border:'1px dashed hsl(var(--border))',
                        position:'relative',
                      }}>
                        <div style={{textAlign:'center', color:'hsl(var(--muted-foreground))'}}>
                          <Icon name="camera" size={28} />
                          <div style={{fontSize:11.5, marginTop:6}}>
                            {isDone ? `IMG-${b.id.slice(-4)}-${i+1}.jpg` : 'Tap untuk upload'}
                          </div>
                        </div>
                        {isDone && (
                          <div style={{position:'absolute', top:8, right:8}}>
                            <Pill tone="success" dot>Tersimpan</Pill>
                          </div>
                        )}
                      </div>
                      <div className="row between" style={{marginTop:8}}>
                        <span style={{fontSize:12.5, fontWeight:600}}>{sisi}</span>
                        <span style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>{isDone ? '2.4 MB' : 'Wajib'}</span>
                      </div>
                    </div>
                  </Card>
                ))}
              </div>
              <Card className="mt-4" style={{marginTop:14}}>
                <div style={{padding:14}}>
                  <div style={{fontSize:12.5, fontWeight:600, marginBottom:10}}>Foto Detail Tambahan</div>
                  <div style={{display:'flex', gap:8, flexWrap:'wrap'}}>
                    {['Odometer', 'Indikator BBM', 'Interior depan', 'Bagasi'].map(t => (
                      <div key={t} style={{
                        width:120, height:90,
                        background:'hsl(195 36% 95%)',
                        borderRadius:8,
                        border:'1px dashed hsl(var(--border))',
                        display:'grid', placeItems:'center',
                        fontSize:11, color:'hsl(var(--muted-foreground))',
                        textAlign:'center', padding:6,
                      }}>
                        <div>
                          <Icon name="camera" size={18} />
                          <div style={{marginTop:4}}>{t}</div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </Card>
            </>
          )}

          {dtab === 'sign' && (
            <>
              <div className="grid-2" style={{gap:12}}>
                {[
                  { who: 'Customer',    name: cust?.nama || b.cust, role: 'Penyewa', path: 'M 20 50 Q 35 20 50 45 T 80 40 Q 95 25 110 50 T 150 35 Q 170 30 180 45' },
                  { who: 'Petugas BDR', name: item.mode === 'checkout' ? 'Komang (Dispatcher)' : 'Made (HQ)', role: 'Officer', path: 'M 25 45 Q 40 25 55 50 Q 70 35 85 45 T 120 40 Q 140 30 165 50 L 175 40' },
                ].map(s => (
                  <Card key={s.who}>
                    <div style={{padding:14}}>
                      <div style={{fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'hsl(var(--muted-foreground))', marginBottom:10}}>
                        Tanda Tangan {s.who}
                      </div>
                      <div style={{
                        height:140,
                        background:'hsl(195 36% 97%)',
                        borderRadius:10,
                        border:'1px dashed hsl(var(--border))',
                        display:'grid', placeItems:'center',
                      }}>
                        {isDone ? (
                          <svg viewBox="0 0 200 80" style={{width:'72%'}}>
                            <path d={s.path} stroke="hsl(220 50% 32%)" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
                          </svg>
                        ) : (
                          <div style={{textAlign:'center', color:'hsl(var(--muted-foreground))', fontSize:12}}>
                            <Icon name="edit" size={22} />
                            <div style={{marginTop:6}}>Tap untuk tanda tangan</div>
                          </div>
                        )}
                      </div>
                      <div style={{marginTop:10, fontSize:13, fontWeight:600}}>{s.name}</div>
                      <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:2}}>
                        {s.role} · {isDone ? formatDateTimeID(item.when) : 'Belum ditandatangani'}
                      </div>
                    </div>
                  </Card>
                ))}
              </div>
              <Card style={{marginTop:14}}>
                <div style={{padding:14}}>
                  <div style={{fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'hsl(var(--muted-foreground))', marginBottom:8}}>
                    Catatan Tambahan
                  </div>
                  <textarea
                    className="textarea"
                    rows={3}
                    placeholder="Catatan kondisi khusus, kesepakatan, dll…"
                    defaultValue={isDone ? 'Mobil diterima dalam kondisi baik. Customer setuju dengan checklist & damage map.' : ''}
                    readOnly={isDone}
                    style={{width:'100%', resize:'vertical'}}
                  />
                </div>
              </Card>
            </>
          )}
        </div>

        {/* Footer */}
        <div className="row between" style={{padding:'14px 26px', borderTop:'1px solid hsl(var(--border))', background:'hsl(195 36% 99%)'}}>
          <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))'}}>
            {isDone
              ? <>Selesai {formatDateTimeID(item.when)}</>
              : <>Jadwal: <span className="mono">{formatDateTimeID(item.when)}</span></>
            }
          </div>
          <div className="row gap-2">
            <Btn tone="ghost" size="sm" onClick={onClose}>Tutup</Btn>
            {!isDone && (
              <>
                <Btn icon="print" tone="outline" size="sm">Cetak</Btn>
                <Btn icon="check" tone="primary" size="sm">Selesaikan {item.mode === 'checkout' ? 'Check-out' : 'Check-in'}</Btn>
              </>
            )}
            {isDone && <Btn icon="download" tone="primary" size="sm">Unduh PDF</Btn>}
          </div>
        </div>
      </div>
    </div>
  );
}

window.SerahTerima = SerahTerima;