// Dashboard — Bengkel Mitra Sejahtera
const { useState, useMemo } = React;

function DashboardPage({ role }) {
  const can = ROLES[role].can;
  const reminders = useMemo(() => buildReminders(), []);
  const topReminders = reminders.slice(0, 6);
  const todayBookings = BOOKING_SERVIS.filter(b => b.tgl === TODAY).sort((a,b) => a.jam.localeCompare(b.jam));
  const activeWO = WORK_ORDER.filter(w => w.status === 'in_progress');
  const maxRev = Math.max(...REVENUE_14D.map(r => r.v));

  return (
    <div>
      <PageHeader
        eyebrow={`${cabangName(ROLES[role].cabang)} • ${SHIFT}`}
        title={`Selamat pagi, ${ROLES[role].name.split(' ')[0]}.`}
        subtitle={`Hari ini ada ${todayBookings.length} booking dan ${activeWO.length} work order aktif. ${KPI.reminderUrgent} kendaraan butuh perhatian segera.`}
        actions={
          <Fragment>
            <Btn icon="calendar" tone="outline">Booking Baru</Btn>
            <Btn icon="wrench">Mulai WO</Btn>
          </Fragment>
        }
      />

      {/* KPI strip */}
      <div className="grid mb-6" style={{gridTemplateColumns:'repeat(6, 1fr)', gap:12}}>
        <Kpi label="Reminder Urgent" value={KPI.reminderUrgent} hint={`dari ${KPI.reminderDue} total due`} icon="bellRing" tone="danger" />
        <Kpi label="Booking Hari Ini"  value={KPI.bookingHariIni} hint={`${KPI.bookingMingguIni} minggu ini`} icon="calendar" tone="info" />
        <Kpi label="WO Aktif" value={KPI.woAktif} hint={`${KPI.woSelesaiHariIni} selesai hari ini`} icon="wrench" tone="warn" />
        <Kpi label="Health Avg" value={KPI.healthAvg} hint="dari 180 kendaraan" icon="heart" tone="good" progress={KPI.healthAvg} />
        <Kpi label="Revenue Hari Ini" value={rupiah(KPI.revenueHariIni, {compact:true})} hint={`bulan: ${rupiah(KPI.revenueBulanIni, {compact:true})}`} icon="dollar" tone="success" />
        <Kpi label="Dokumen Expired" value={KPI.dokumenExpSoon} hint="dalam 90 hari" icon="document" tone="warn" />
      </div>

      <div className="grid mb-6" style={{gridTemplateColumns:'2fr 1fr', gap:14}}>
        {/* Reminder urgent */}
        <Card style={{padding:18}}>
          <SectionHead
            title="Reminder paling mendesak"
            hint="Kendaraan yang servis berkala atau dokumen-nya hampir/sudah lewat"
            action={<Btn size="sm" tone="ghost" icon="send">Kirim WA semua</Btn>}
          />
          <div className="flex-col gap-2">
            {topReminders.map(r => (
              <div key={r.id} className={'reminder-card ' + (r.tone === 'danger' ? 'urgent' : r.tone === 'warn' ? 'warn' : 'ok')}>
                <div className={'reminder-icon-wrap ' + (r.tone === 'danger' ? 'urgent' : r.tone === 'warn' ? 'warn' : '')}>
                  <Icon name={r.icon} size={18} />
                </div>
                <div className="reminder-meta">
                  <div className="reminder-title">{r.title}</div>
                  <div className="reminder-sub">
                    <span>{r.sub}</span>
                    <span className="sep">•</span>
                    <span>{cabangName(r.cabang)}</span>
                  </div>
                  <div className="reminder-progress"><div className={'bar ' + r.tone} style={{width: r.progress + '%'}} /></div>
                </div>
                <div className="reminder-actions">
                  <Btn size="sm" tone="ghost" icon="whatsapp" title="Kirim WA" />
                  <Btn size="sm" tone="outline">Booking</Btn>
                </div>
              </div>
            ))}
          </div>
        </Card>

        {/* Aktivitas */}
        <Card style={{padding:18}}>
          <SectionHead title="Aktivitas terkini" hint={`Live · update terakhir ${NOW_HHMM}`} />
          <div className="activity-feed">
            {ACTIVITY.map(a => (
              <div key={a.id} className="activity-item">
                <div className={'activity-dot ' + (a.tone || 'info')} />
                <div style={{flex:1, minWidth:0}}>
                  <div style={{fontSize:13, lineHeight:1.4}}>{a.txt}</div>
                  <div className="mono" style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:2, fontVariantNumeric:'tabular-nums'}}>{a.t}</div>
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      <div className="grid mb-6" style={{gridTemplateColumns:'1.4fr 1fr', gap:14}}>
        {/* Booking hari ini */}
        <Card style={{padding:18}}>
          <SectionHead title="Booking hari ini" hint={`${todayBookings.length} slot · ${cabangName(ROLES[role].cabang)} & cabang lain`} action={<Btn size="sm" tone="outline">Lihat kalender</Btn>} />
          <table className="table">
            <thead>
              <tr><th style={{width:60}}>Jam</th><th>Kendaraan</th><th>Owner</th><th>Item</th><th style={{width:90}}>Mekanik</th><th style={{width:120}}>Status</th></tr>
            </thead>
            <tbody>
              {todayBookings.map(bk => {
                const vh = KENDARAAN_BY_ID[bk.vhId];
                const ow = OWNER_BY_ID[bk.ownerId];
                const mk = MEKANIK_BY_ID[bk.mekanikId];
                return (
                  <tr key={bk.id}>
                    <td className="mono" style={{fontWeight:600}}>{bk.jam}</td>
                    <td>
                      <div style={{fontWeight:600}}>{vh.merk} {vh.model}</div>
                      <div className="mono" style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>{vh.plat}</div>
                    </td>
                    <td>{ow?.name || '—'}</td>
                    <td>
                      <div className="row gap-1" style={{flexWrap:'wrap'}}>
                        {bk.items.slice(0, 2).map(id => (
                          <span key={id} className="svc-item-chip">{ITEM_SERVIS_BY_ID[id]?.label.replace(/^Ganti |^Service |^Tune Up /,'') || id}</span>
                        ))}
                        {bk.items.length > 2 && <span style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>+{bk.items.length - 2}</span>}
                      </div>
                    </td>
                    <td><div className="row gap-1" style={{alignItems:'center'}}><Avatar initials={mk?.initials} className="sm" tone="accent" /><span style={{fontSize:12}}>{mk?.name.split(' ')[0]}</span></div></td>
                    <td><StatusPill status={bk.status} /></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </Card>

        {/* Revenue chart */}
        <Card style={{padding:18}}>
          <SectionHead title="Revenue 14 hari" hint={`Total: ${rupiah(REVENUE_14D.reduce((s,r) => s+r.v, 0), {compact:true})}`} />
          <div style={{display:'flex', alignItems:'flex-end', gap:6, height:160, padding:'10px 0'}}>
            {REVENUE_14D.map((r, i) => {
              const h = (r.v / maxRev) * 100;
              const isToday = i === REVENUE_14D.length - 1;
              return (
                <div key={r.d} style={{flex:1, display:'flex', flexDirection:'column', alignItems:'center', gap:4}}>
                  <div style={{
                    width:'100%',
                    height: h + '%',
                    background: isToday ? 'hsl(var(--accent-h) var(--accent-s) 38%)' : 'hsl(var(--accent-h) var(--accent-s) 75%)',
                    borderRadius:'4px 4px 0 0',
                    transition:'all .3s ease',
                  }} title={rupiah(r.v)} />
                  <span style={{fontSize:10, color:'hsl(var(--muted-foreground))', fontVariantNumeric:'tabular-nums'}}>{r.d}</span>
                </div>
              );
            })}
          </div>
          <div style={{borderTop:'1px solid hsl(var(--border))', paddingTop:10, marginTop:4, display:'flex', justifyContent:'space-between', fontSize:12}}>
            <div>
              <div style={{color:'hsl(var(--muted-foreground))', fontSize:11}}>Rata-rata harian</div>
              <div style={{fontWeight:650}}>{rupiah(Math.round(REVENUE_14D.reduce((s,r) => s+r.v, 0) / REVENUE_14D.length), {compact:true})}</div>
            </div>
            <div style={{textAlign:'right'}}>
              <div style={{color:'hsl(var(--muted-foreground))', fontSize:11}}>Tertinggi</div>
              <div style={{fontWeight:650, color:'hsl(158 60% 32%)'}}>{rupiah(maxRev, {compact:true})}</div>
            </div>
          </div>
        </Card>
      </div>

      {/* Bottom: alerts + WO aktif */}
      <div className="grid" style={{gridTemplateColumns:'1fr 1fr', gap:14}}>
        <Card style={{padding:18}}>
          <SectionHead title="Alert operasional" hint={`${ALERTS.length} item perlu ditindak`} />
          <div className="flex-col gap-2">
            {ALERTS.map(a => (
              <div key={a.id} className="row gap-2" style={{padding:'10px 12px', background:'hsl(var(--muted) / 0.5)', borderRadius:8, alignItems:'flex-start'}}>
                <Pill tone={a.level === 'danger' ? 'danger' : a.level === 'warn' ? 'warn' : 'accent'} dot>{a.level}</Pill>
                <div style={{flex:1, fontSize:13}}>{a.msg}</div>
                <Btn size="sm" tone="ghost">Detail</Btn>
              </div>
            ))}
          </div>
        </Card>

        <Card style={{padding:18}}>
          <SectionHead title="Work Order aktif" hint={`${activeWO.length} job sedang dikerjakan`} action={<Btn size="sm" tone="outline">Lihat semua</Btn>} />
          <div className="flex-col gap-2">
            {WORK_ORDER.map(wo => {
              const vh = KENDARAAN_BY_ID[wo.vhId];
              const mk = MEKANIK_BY_ID[wo.mekanikId];
              return (
                <div key={wo.id} className="row gap-3" style={{padding:'12px 14px', background:'hsl(var(--card))', border:'1px solid hsl(var(--border))', borderRadius:8, alignItems:'center'}}>
                  <div style={{minWidth:0, flex:1}}>
                    <div className="row gap-2" style={{alignItems:'center', marginBottom:4}}>
                      <span className="mono" style={{fontSize:11, fontWeight:650, color:'hsl(var(--accent-h) var(--accent-s) 28%)'}}>{wo.no}</span>
                      <StatusPill status={wo.status === 'qc' ? 'pending' : wo.status} />
                    </div>
                    <div style={{fontSize:13, fontWeight:600}}>{vh.merk} {vh.model} • <span className="mono">{vh.plat}</span></div>
                    <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))', marginTop:2}}>
                      Mekanik {mk?.name.split(' ')[0]} · mulai {wo.mulai} · est. selesai {wo.estSelesai}
                    </div>
                    <div className="reminder-progress" style={{marginTop:6}}><div className="bar ok" style={{width: wo.progress + '%', background: wo.status === 'qc' ? 'hsl(158 60% 42%)' : 'hsl(var(--accent-h) var(--accent-s) 50%)'}} /></div>
                  </div>
                  <div className="mono" style={{fontSize:18, fontWeight:650, fontVariantNumeric:'tabular-nums', minWidth:50, textAlign:'right'}}>{wo.progress}%</div>
                </div>
              );
            })}
          </div>
        </Card>
      </div>
    </div>
  );
}

window.DashboardPage = DashboardPage;