// ============================================================
// BusManager — Dashboard & Kalender Armada
// ============================================================

function Dashboard({ onNav }) {
  const { user, version } = useApp();
  void version;
  const today = new Date("2026-05-20");
  // active rentals today
  const todayRentals = window.RENTALS.filter(r => {
    if (r.status === "batal") return false;
    const s = new Date(r.start), e = new Date(r.end);
    return today >= s && today <= e;
  });
  const upcoming = window.RENTALS
    .filter(r => new Date(r.start) > today && r.status !== "batal")
    .sort((a,b) => new Date(a.start) - new Date(b.start)).slice(0, 5);

  // saldo kas
  const saldoMasuk = window.CASH_TX.filter(t => t.tipe === "masuk").reduce((s,t) => s + t.jumlah, 0);
  const saldoKeluar = window.CASH_TX.filter(t => t.tipe === "keluar").reduce((s,t) => s + t.jumlah, 0);
  const saldo = saldoMasuk - saldoKeluar;

  // pendapatan bulan ini (May)
  const may = window.CASH_TX.filter(t => t.tanggal.startsWith("2026-05") && t.tipe === "masuk").reduce((s,t) => s + t.jumlah, 0);
  const expMay = window.CASH_TX.filter(t => t.tanggal.startsWith("2026-05") && t.tipe === "keluar").reduce((s,t) => s + t.jumlah, 0);

  // chart: trips per bus (last 30 days)
  const tripsByBus = window.BUSES.map(b => ({
    nama: b.kode,
    count: window.RENTALS.filter(r => r.busId === b.id && r.status !== "batal" && r.start >= "2026-04-21").length,
    revenue: window.RENTALS.filter(r => r.busId === b.id && r.status !== "batal" && r.start >= "2026-04-21").reduce((s,r) => s + r.harga, 0),
  }));
  const maxRev = Math.max(...tripsByBus.map(t => t.revenue), 1);

  const busAktif = window.BUSES.filter(b => b.status === "aktif").length;
  const busTotal = window.BUSES.length;

  return (
    <div>
      <div className="page-head">
        <div className="ttl">
          <h2>Selamat datang, {user?.nama || "—"} 👋</h2>
          <div className="sub">Rabu, 20 Mei 2026 — Ada {todayRentals.length} trip aktif hari ini.</div>
        </div>
        <div className="actions">
          <button className="btn btn-primary" onClick={() => onNav("sewa", { action: "new" })}>
            <I.Plus size={15} /> Sewa Baru
          </button>
        </div>
      </div>

      {/* KPI cards */}
      <div className="grid grid-4 mb-4">
        <div className="kpi">
          <div className="label">
            <div className="ic-bg"><I.Bus size={15} /></div>
            Armada Aktif
          </div>
          <div className="value">{busAktif} <span className="unit">/ {busTotal} unit</span></div>
          <div className="delta">1 unit sedang servis</div>
        </div>
        <div className="kpi">
          <div className="label">
            <div className="ic-bg" style={{background: "var(--st-booking-tint)", color: "var(--st-booking)"}}><I.Calendar size={15} /></div>
            Trip Aktif Hari Ini
          </div>
          <div className="value">{todayRentals.length}</div>
          <div className="delta">{upcoming.length} trip mendatang minggu ini</div>
        </div>
        <div className="kpi">
          <div className="label">
            <div className="ic-bg" style={{background: "var(--st-lunas-tint)", color: "var(--st-lunas)"}}><I.PiggyBank size={15} /></div>
            Saldo Kas
          </div>
          <div className="value">{window.RP(saldo)}</div>
          <div className="delta up"><I.TrendUp size={12} /> +Rp {Math.round((may - expMay)/1e6)} jt bulan ini</div>
        </div>
        <div className="kpi">
          <div className="label">
            <div className="ic-bg" style={{background: "var(--st-dp-tint)", color: "oklch(0.55 0.13 70)"}}><I.Receipt size={15} /></div>
            Pendapatan Mei
          </div>
          <div className="value">{window.RP(may)}</div>
          <div className="delta">Pengeluaran: {window.RP(expMay)}</div>
        </div>
      </div>

      {/* Today + Upcoming */}
      <div className="grid mb-4" style={{gridTemplateColumns: "2fr 1fr"}}>
        <div className="card">
          <div className="card-head">
            <h3>Trip Hari Ini</h3>
            <span className="sub">{today.toLocaleDateString("id-ID", { weekday: "long", day: "numeric", month: "long", year: "numeric" })}</span>
            <div style={{marginLeft: "auto"}}>
              <button className="btn btn-sm btn-ghost" onClick={() => onNav("kalender")}>Lihat Kalender <I.ArrowRight size={13} /></button>
            </div>
          </div>
          <div className="tbl-wrap">
            <table className="tbl">
              <thead>
                <tr>
                  <th>Kode</th>
                  <th>Penyewa & Tujuan</th>
                  <th>Unit Bus</th>
                  <th>Sopir</th>
                  <th>Jam</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                {todayRentals.map(r => {
                  const cust = window.getCustomer(r.customerId);
                  return (
                    <tr key={r.id} style={{cursor: "pointer"}} onClick={() => onNav("sewa", { detail: r.id })}>
                      <td className="mono" style={{fontSize: 12, color: "var(--ink-mute)"}}>{r.kode}</td>
                      <td>
                        <div style={{fontWeight: 600}}>{cust?.nama}</div>
                        <div className="cell-secondary">{r.tujuan}</div>
                      </td>
                      <td><BusChip id={r.busId} /></td>
                      <td>
                        <div style={{fontSize: 12}}>
                          {r.driverIds.map(id => window.getDriver(id)?.nama.replace("Pak ", "")).join(" + ")}
                        </div>
                      </td>
                      <td className="mono">{r.jam}</td>
                      <td><StatusBadge s={r.status} /></td>
                    </tr>
                  );
                })}
                {todayRentals.length === 0 && (
                  <tr><td colSpan={6} style={{textAlign: "center", padding: 30, color: "var(--ink-mute)"}}>Tidak ada trip aktif hari ini.</td></tr>
                )}
              </tbody>
            </table>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <h3>Trip Mendatang</h3>
            <span className="sub">5 terdekat</span>
          </div>
          <div style={{padding: "8px 4px"}}>
            {upcoming.map(r => {
              const cust = window.getCustomer(r.customerId);
              const bus = window.getBus(r.busId);
              return (
                <div key={r.id} className="tl-item" style={{padding: "10px 14px", gridTemplateColumns: "44px 1fr auto"}}
                  onClick={() => onNav("sewa", { detail: r.id })}>
                  <div style={{textAlign: "center"}}>
                    <div style={{fontSize: 10, color: "var(--ink-mute)", textTransform: "uppercase", fontWeight: 700}}>
                      {new Date(r.start).toLocaleDateString("id-ID", { month: "short" })}
                    </div>
                    <div style={{fontSize: 20, fontWeight: 700, lineHeight: 1}}>{new Date(r.start).getDate()}</div>
                  </div>
                  <div>
                    <div style={{fontWeight: 600, fontSize: 13}}>{cust?.nama}</div>
                    <div className="cell-secondary">{r.tujuan} · {bus?.kode}</div>
                  </div>
                  <StatusBadge s={r.status} />
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* Revenue per bus + activity */}
      <div className="grid mb-4" style={{gridTemplateColumns: "2fr 1fr"}}>
        <div className="card">
          <div className="card-head">
            <h3>Pendapatan per Unit Bus</h3>
            <span className="sub">30 hari terakhir</span>
            <div style={{marginLeft: "auto"}}>
              <button className="btn btn-sm btn-ghost" onClick={() => onNav("laporan")}>Detail Laporan <I.ArrowRight size={13} /></button>
            </div>
          </div>
          <div style={{padding: "12px 18px 18px"}}>
            <div className="bar-chart">
              {tripsByBus.map(t => {
                const h = (t.revenue / maxRev) * 100;
                return (
                  <div key={t.nama} className="bar-col">
                    <div className="val">{t.count}x</div>
                    <div className="bar" style={{height: `${Math.max(h, 4)}%`, background: t.count === 0 ? "var(--border-strong)" : undefined}} title={window.RP(t.revenue)} />
                    <div className="lbl">{t.nama.replace("BJL-","")}</div>
                  </div>
                );
              })}
            </div>
            <div style={{display: "flex", justifyContent: "space-between", fontSize: 11.5, color: "var(--ink-mute)", padding: "8px 4px 0", borderTop: "1px solid var(--divider)", marginTop: 6}}>
              <span>Total: {tripsByBus.reduce((s,t) => s + t.count, 0)} trip</span>
              <span className="mono">{window.RP(tripsByBus.reduce((s,t) => s + t.revenue, 0))}</span>
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <h3>Aktivitas Terbaru</h3>
          </div>
          <div style={{padding: "8px 16px 12px"}}>
            {window.AUDIT.slice(0,5).map(a => (
              <div key={a.id} className="tl-item">
                <div className={`tl-dot ${a.action === "Create" ? "green" : a.action === "Cancel" ? "red" : "yellow"}`}>
                  {a.action === "Create" && <I.Plus size={14} />}
                  {a.action === "Update" && <I.Edit size={14} />}
                  {a.action === "Cancel" && <I.X size={14} />}
                </div>
                <div>
                  <div style={{fontSize: 12.5}}>
                    <strong>{a.user}</strong> · {a.action.toLowerCase()} <span className="mono" style={{color: "var(--brand)"}}>{a.target}</span>
                  </div>
                  <div className="tl-meta">{a.desc}</div>
                </div>
                <div className="tl-meta">{new Date(a.ts).toLocaleTimeString("id-ID", { hour: "2-digit", minute: "2-digit" })}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Quick actions */}
      <div className="grid grid-4">
        {[
          { lbl: "Sewa Baru", ic: I.Plus, to: "sewa", action: "new", desc: "Catat order baru" },
          { lbl: "Catat Kas", ic: I.Wallet, to: "kas", action: "new", desc: "Masuk / keluar" },
          { lbl: "Kalender", ic: I.Calendar, to: "kalender", desc: "Lihat jadwal armada" },
          { lbl: "Cetak Laporan", ic: I.Print, to: "laporan", desc: "Rekap & export" },
        ].map(a => (
          <button key={a.lbl} className="card card-pad" style={{textAlign: "left", border: "1px solid var(--border)", background: "var(--surface)", cursor: "pointer"}}
            onClick={() => onNav(a.to, { action: a.action })}>
            <div style={{display: "flex", alignItems: "center", gap: 12}}>
              <div className="ic-bg" style={{width: 36, height: 36, background: "var(--brand-tint)", color: "var(--brand)", borderRadius: 10, display: "grid", placeItems: "center"}}>
                <a.ic size={18} />
              </div>
              <div>
                <div style={{fontWeight: 700, fontSize: 14}}>{a.lbl}</div>
                <div style={{fontSize: 12, color: "var(--ink-mute)"}}>{a.desc}</div>
              </div>
            </div>
          </button>
        ))}
      </div>
    </div>
  );
}

// ============================================================
// KALENDER ARMADA
// ============================================================
function KalenderArmada({ onNav }) {
  const { version } = useApp();
  void version;
  const [view, setView] = useState("week"); // week | month
  const [refDate, setRefDate] = useState(new Date("2026-05-20"));
  const [detail, setDetail] = useState(null);
  const [filterStatus, setFilterStatus] = useState("all");
  const [filterBus, setFilterBus] = useState("all");

  // Calc visible date range
  const days = useMemo(() => {
    if (view === "week") {
      // start from Monday of refDate's week
      const d = new Date(refDate);
      const dow = (d.getDay() + 6) % 7; // 0=Mon
      d.setDate(d.getDate() - dow);
      return Array.from({length: 7}, (_, i) => {
        const nd = new Date(d); nd.setDate(d.getDate() + i); return nd;
      });
    } else {
      // month: first day to last day
      const y = refDate.getFullYear(), m = refDate.getMonth();
      const last = new Date(y, m+1, 0).getDate();
      return Array.from({length: last}, (_, i) => new Date(y, m, i+1));
    }
  }, [view, refDate]);

  const todayKey = "2026-05-20";
  const buses = window.BUSES.filter(b => filterBus === "all" ? true : b.id === parseInt(filterBus));

  const filteredRentals = window.RENTALS.filter(r => filterStatus === "all" ? true : r.status === filterStatus);

  // For each bus, compute rental blocks within visible days
  const getRentalsForBus = (busId) => {
    return filteredRentals.filter(r => r.busId === busId).filter(r => {
      const s = new Date(r.start), e = new Date(r.end);
      return e >= days[0] && s <= days[days.length-1];
    });
  };

  const colStart = (d) => {
    const t = d.toISOString().split("T")[0];
    return days.findIndex(dx => dx.toISOString().split("T")[0] === t);
  };

  const monthLabel = view === "week"
    ? `${days[0].toLocaleDateString("id-ID", {day: "numeric", month: "short"})} – ${days[6].toLocaleDateString("id-ID", {day: "numeric", month: "short", year: "numeric"})}`
    : refDate.toLocaleDateString("id-ID", {month: "long", year: "numeric"});

  const goPrev = () => {
    const d = new Date(refDate);
    if (view === "week") d.setDate(d.getDate() - 7); else d.setMonth(d.getMonth() - 1);
    setRefDate(d);
  };
  const goNext = () => {
    const d = new Date(refDate);
    if (view === "week") d.setDate(d.getDate() + 7); else d.setMonth(d.getMonth() + 1);
    setRefDate(d);
  };

  // Grid template columns: bus-cell + N day cells
  const dayColWidth = view === "week" ? "minmax(120px, 1fr)" : "minmax(34px, 1fr)";
  const gridTemplate = `220px repeat(${days.length}, ${dayColWidth})`;

  return (
    <div>
      <div className="page-head">
        <div className="ttl">
          <h2>Kalender Armada</h2>
          <div className="sub">Visibilitas penjadwalan 8 unit bus. Klik blok untuk detail.</div>
        </div>
        <div className="actions">
          <div style={{display: "inline-flex", border: "1px solid var(--border-strong)", borderRadius: 8, overflow: "hidden"}}>
            <button className={`btn btn-sm ${view === "week" ? "btn-primary" : "btn-ghost"}`} style={{borderRadius: 0, border: 0}} onClick={() => setView("week")}>Minggu</button>
            <button className={`btn btn-sm ${view === "month" ? "btn-primary" : "btn-ghost"}`} style={{borderRadius: 0, border: 0}} onClick={() => setView("month")}>Bulan</button>
          </div>
          <button className="btn btn-primary" onClick={() => onNav("sewa", { action: "new" })}>
            <I.Plus size={15} /> Sewa Baru
          </button>
        </div>
      </div>

      <div className="cal-wrap">
        <div className="cal-head">
          <button className="btn btn-icon btn-sm" onClick={goPrev}><I.ChevronLeft size={16} /></button>
          <button className="btn btn-icon btn-sm" onClick={goNext}><I.ChevronRight size={16} /></button>
          <button className="btn btn-sm" onClick={() => setRefDate(new Date("2026-05-20"))}>Hari Ini</button>
          <div className="cal-month">{monthLabel}</div>
          <div style={{flex: 1}} />
          <div className="chip-filter" style={{display: "inline-flex", alignItems: "center", gap: 6, height: 36, padding: "0 12px", border: "1px solid var(--border-strong)", borderRadius: 8, background: "white", fontSize: 13}}>
            <I.Bus size={14} style={{color: "var(--ink-mute)"}} />
            <select value={filterBus} onChange={e => setFilterBus(e.target.value)} style={{border: 0, background: "transparent", outline: "none"}}>
              <option value="all">Semua Unit</option>
              {window.BUSES.map(b => <option key={b.id} value={b.id}>{b.kode} · {b.plate}</option>)}
            </select>
          </div>
          <div className="chip-filter" style={{display: "inline-flex", alignItems: "center", gap: 6, height: 36, padding: "0 12px", border: "1px solid var(--border-strong)", borderRadius: 8, background: "white", fontSize: 13}}>
            <I.Filter size={14} style={{color: "var(--ink-mute)"}} />
            <select value={filterStatus} onChange={e => setFilterStatus(e.target.value)} style={{border: 0, background: "transparent", outline: "none"}}>
              <option value="all">Semua Status</option>
              <option value="booking">Booking</option>
              <option value="dp">DP</option>
              <option value="lunas">Lunas</option>
              <option value="selesai">Selesai</option>
              <option value="batal">Batal</option>
            </select>
          </div>
        </div>

        <div style={{overflow: "auto"}}>
          <div className="cal-grid" style={{gridTemplateColumns: gridTemplate, minWidth: view === "month" ? 1400 : "auto"}}>
            {/* Header row */}
            <div className="cal-bus-cell" style={{background: "var(--surface-2)", fontWeight: 700, fontSize: 11.5, textTransform: "uppercase", letterSpacing: ".04em", color: "var(--ink-mute)"}}>
              Unit Bus
            </div>
            {days.map(d => {
              const dow = d.getDay();
              const weekend = dow === 0 || dow === 6;
              const isToday = d.toISOString().split("T")[0] === todayKey;
              return (
                <div key={d.toISOString()} className={`cal-day-head ${weekend ? "is-weekend" : ""} ${isToday ? "is-today" : ""}`}>
                  <div>{d.toLocaleDateString("id-ID", { weekday: "short" }).toUpperCase()}</div>
                  <div className="dnum">{d.getDate()}</div>
                </div>
              );
            })}

            {/* Bus rows */}
            {buses.map(bus => {
              const rentals = getRentalsForBus(bus.id);
              return (
                <React.Fragment key={bus.id}>
                  <div className="cal-bus-cell">
                    <BusChip id={bus.id} />
                  </div>
                  {days.map((d, idx) => {
                    const dk = d.toISOString().split("T")[0];
                    const dow = d.getDay();
                    const weekend = dow === 0 || dow === 6;
                    const isToday = dk === todayKey;
                    // find rentals that start on this day
                    const startsHere = rentals.filter(r => r.start === dk);
                    return (
                      <div key={dk} className={`cal-cell ${weekend ? "is-weekend" : ""} ${isToday ? "is-today" : ""}`}>
                        {startsHere.map(r => {
                          const span = Math.min(
                            (new Date(r.end) - new Date(r.start)) / 86400000 + 1,
                            days.length - idx
                          );
                          const cust = window.getCustomer(r.customerId);
                          return (
                            <div key={r.id}
                              className={`cal-block ${r.status}`}
                              style={{
                                left: 4,
                                width: `calc(${span * 100}% - 8px)`,
                              }}
                              onClick={() => setDetail(r)}
                            >
                              <div style={{whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis"}}>{r.tujuan}</div>
                              {view === "week" && (
                                <div className="blk-cust" style={{whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis"}}>
                                  {cust?.nama}
                                </div>
                              )}
                            </div>
                          );
                        })}
                      </div>
                    );
                  })}
                </React.Fragment>
              );
            })}
          </div>
        </div>

        <div className="cal-head" style={{borderTop: "1px solid var(--border)", borderBottom: 0}}>
          <span style={{fontSize: 12, color: "var(--ink-mute)", fontWeight: 600}}>Legend:</span>
          <div className="cal-legend">
            <div className="lgnd"><span className="sw" style={{background: "var(--st-lunas)"}} /> Lunas</div>
            <div className="lgnd"><span className="sw" style={{background: "var(--st-dp)"}} /> DP</div>
            <div className="lgnd"><span className="sw" style={{background: "var(--st-booking)"}} /> Booking</div>
            <div className="lgnd"><span className="sw" style={{background: "oklch(0.78 0.008 250)"}} /> Selesai</div>
            <div className="lgnd"><span className="sw" style={{background: "var(--st-batal-tint)", border: "1px dashed var(--st-batal)"}} /> Batal</div>
          </div>
          <div style={{marginLeft: "auto", fontSize: 12, color: "var(--ink-mute)"}}>
            {filteredRentals.length} sewa ditampilkan
          </div>
        </div>
      </div>

      {/* Detail drawer */}
      <Drawer open={!!detail} onClose={() => setDetail(null)}
        title={detail?.kode}
        icon={<I.Calendar size={20} style={{color: "var(--brand)"}} />}
        footer={<>
          <button className="btn" onClick={() => setDetail(null)}>Tutup</button>
          <button className="btn btn-primary" onClick={() => { onNav("sewa", { detail: detail.id }); setDetail(null); }}>
            <I.Edit size={14} /> Buka & Edit
          </button>
        </>}>
        {detail && <RentalDetailContent rental={detail} />}
      </Drawer>
    </div>
  );
}

function RentalDetailContent({ rental }) {
  const cust = window.getCustomer(rental.customerId);
  const bus = window.getBus(rental.busId);
  return (
    <div>
      <div style={{display: "flex", gap: 10, marginBottom: 18, alignItems: "center"}}>
        <StatusBadge s={rental.status} />
        <span className="mono" style={{fontSize: 12, color: "var(--ink-mute)"}}>{rental.kode}</span>
      </div>

      <div className="kv mb-4">
        <span className="k">Tanggal</span>
        <span className="v">{window.FDATE(rental.start)}{rental.start !== rental.end ? ` – ${window.FDATE(rental.end)}` : ""}</span>
        <span className="k">Penyewa</span>
        <span className="v">{cust?.nama}<div style={{fontSize: 12, color: "var(--ink-mute)", fontWeight: 400}}>{cust?.phone}</div></span>
        <span className="k">Unit Bus</span>
        <span className="v"><BusChip id={rental.busId} /></span>
        <span className="k">Tujuan</span>
        <span className="v">{rental.tujuan}</span>
        <span className="k">Penjemputan</span>
        <span className="v">{rental.lokasi}<div style={{fontSize: 12, color: "var(--ink-mute)", fontWeight: 400}}>jam {rental.jam}</div></span>
        <span className="k">Sopir</span>
        <span className="v">
          {rental.driverIds.length > 0 ? rental.driverIds.map(id => window.getDriver(id)?.nama).join(", ") : <em style={{color: "var(--ink-mute)"}}>belum diassign</em>}
        </span>
        <span className="k">Catatan</span>
        <span className="v">{rental.catatan || <em style={{color: "var(--ink-mute)"}}>—</em>}</span>
      </div>

      <div style={{borderTop: "1px solid var(--divider)", paddingTop: 16}}>
        <div className="fs-title">Pembayaran</div>
        <div className="grid grid-3">
          <div className="mini-stat">
            <div className="lbl">Ongkos Sewa</div>
            <div className="val mono">{window.RP(rental.harga)}</div>
          </div>
          <div className="mini-stat">
            <div className="lbl">DP Diterima</div>
            <div className="val mono">{window.RP(rental.dp)}</div>
          </div>
          <div className="mini-stat">
            <div className="lbl">Sisa</div>
            <div className="val mono" style={{color: rental.harga - rental.dp > 0 ? "var(--danger)" : "var(--success)"}}>
              {window.RP(rental.harga - rental.dp)}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Dashboard, KalenderArmada, RentalDetailContent });