// ============================================================
// BusManager — Shared UI primitives & Shell
// ============================================================
const { useState, useEffect, useMemo, useRef, useCallback, useContext } = React;

// ---- Toast system ----------------------------------------------------------
const ToastCtx = React.createContext({ push: () => {} });
function ToastProvider({ children }) {
  const [items, setItems] = useState([]);
  const push = useCallback((msg, kind = "success") => {
    const id = Date.now() + Math.random();
    setItems(x => [...x, { id, msg, kind }]);
    setTimeout(() => setItems(x => x.filter(t => t.id !== id)), 3200);
  }, []);
  return (
    <ToastCtx.Provider value={{ push }}>
      {children}
      <div className="toast-stack">
        {items.map(t => (
          <div key={t.id} className={`toast ${t.kind}`}>
            {t.kind === "success" && <I.Check size={16} />}
            {t.kind === "error" && <I.Alert size={16} />}
            <span>{t.msg}</span>
          </div>
        ))}
      </div>
    </ToastCtx.Provider>
  );
}
const useToast = () => React.useContext(ToastCtx);

// ---- Modal -----------------------------------------------------------------
function Modal({ open, onClose, title, children, footer, wide, icon }) {
  if (!open) return null;
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className={`modal ${wide ? "modal-wide" : ""}`} onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          {icon}
          <h3>{title}</h3>
          <button className="close" onClick={onClose}><I.X size={18} /></button>
        </div>
        <div className="modal-body">{children}</div>
        {footer && <div className="modal-foot">{footer}</div>}
      </div>
    </div>
  );
}

// ---- Drawer (right) --------------------------------------------------------
function Drawer({ open, onClose, title, children, footer, icon }) {
  if (!open) return null;
  return (
    <>
      <div className="drawer-overlay" onClick={onClose} />
      <div className="drawer" onClick={e => e.stopPropagation()}>
        <div className="drawer-head">
          {icon}
          <h3>{title}</h3>
          <button className="btn-ghost btn btn-icon btn-sm" style={{marginLeft: "auto"}} onClick={onClose}>
            <I.X size={16} />
          </button>
        </div>
        <div className="drawer-body">{children}</div>
        {footer && <div className="drawer-foot">{footer}</div>}
      </div>
    </>
  );
}

// ---- Badges ----------------------------------------------------------------
const STATUS_LABEL = {
  booking: "Booking",
  dp: "DP",
  lunas: "Lunas",
  selesai: "Selesai",
  batal: "Batal",
};
const StatusBadge = ({ s }) => <span className={`badge ${s}`}>{STATUS_LABEL[s] || s}</span>;

// ---- Small chips ----
const BusChip = ({ id }) => {
  const b = window.getBus(id);
  if (!b) return null;
  return (
    <div className="bus-mini">
      <div className="thumb">{b.kode.replace("BJL-", "")}</div>
      <div>
        <div className="nm">{b.nama}</div>
        <div className="sub">{b.plate}</div>
      </div>
    </div>
  );
};
const PersonChip = ({ name }) => {
  const ini = name ? name.split(" ").slice(0,2).map(s => s[0]).join("").toUpperCase() : "?";
  return (
    <div className="person-mini">
      <div className="av">{ini}</div>
      <div className="nm" style={{fontWeight: 600, fontSize: 13}}>{name}</div>
    </div>
  );
};

// ---- Confirm helper ----
function ConfirmDialog({ open, onClose, onConfirm, title, body, confirmLabel = "Hapus", danger }) {
  return (
    <Modal open={open} onClose={onClose} title={title} icon={danger ? <I.Alert size={20} style={{color: "var(--danger)"}} /> : <I.Info size={20} />}
      footer={<>
        <button className="btn" onClick={onClose}>Batal</button>
        <button className={`btn ${danger ? "btn-danger" : "btn-primary"}`} onClick={() => { onConfirm(); onClose(); }}>{confirmLabel}</button>
      </>}>
      <div style={{fontSize: 14}}>{body}</div>
    </Modal>
  );
}

// ---- App shell -------------------------------------------------------------
const NAV = [
  { key: "dashboard", label: "Dashboard", icon: I.Home, section: "operasional" },
  { key: "kalender", label: "Kalender Armada", icon: I.Calendar, section: "operasional" },
  { key: "sewa", label: "Manajemen Sewa", icon: I.Bus, section: "operasional" },
  { key: "kas", label: "Manajemen Kas", icon: I.Wallet, section: "operasional" },
  { key: "master", label: "Master Data", icon: I.Database, section: "data", sub: [
    { key: "master-bus", label: "Unit Bus" },
    { key: "master-sopir", label: "Sopir" },
    { key: "master-penyewa", label: "Penyewa" },
    { key: "master-kategori", label: "Kategori Kas" },
  ]},
  { key: "laporan", label: "Laporan", icon: I.Chart, section: "insight" },
  { key: "settings", label: "Settings", icon: I.Settings, section: "insight" },
];

function Sidebar({ page, onNav, user, onLogout, mobileOpen, onMobileClose }) {
  const [openMaster, setOpenMaster] = useState(page.startsWith("master"));
  useEffect(() => { if (page.startsWith("master")) setOpenMaster(true); }, [page]);

  const handleNav = (key) => {
    onNav(key);
    if (onMobileClose) onMobileClose();
  };

  return (
    <>
      {mobileOpen && <div className="sidebar-overlay" onClick={onMobileClose} />}
      <aside className={`sidebar ${mobileOpen ? "open" : ""}`}>
        <div className="sb-brand">
          <div className="logo">B</div>
          <div>
            <div className="brand-name">BusManager</div>
            <div className="brand-sub">PO Bintang Jaya Lancar</div>
          </div>
          {onMobileClose && (
            <button className="btn btn-icon btn-sm btn-ghost sb-close-btn" onClick={onMobileClose}>
              <I.X size={18} />
            </button>
          )}
        </div>
        <nav className="sb-nav">
          <div className="sb-section-label">Operasional</div>
          {NAV.filter(n => n.section === "operasional").map(n => (
            <button key={n.key} className={`sb-item ${page === n.key ? "active" : ""}`} onClick={() => handleNav(n.key)}>
              <n.icon className="ic" /> {n.label}
            </button>
          ))}

          <div className="sb-section-label">Data</div>
          <button className={`sb-item ${page.startsWith("master") ? "active" : ""}`} onClick={() => setOpenMaster(v => !v)}>
            <I.Database className="ic" /> Master Data
            <span style={{marginLeft: "auto"}}>{openMaster ? <I.ChevronUp size={14} /> : <I.ChevronDown size={14} />}</span>
          </button>
          {openMaster && (
            <div className="sb-sub">
              {NAV.find(n => n.key === "master").sub.map(s => (
                <button key={s.key} className={`sb-item ${page === s.key ? "active" : ""}`} onClick={() => handleNav(s.key)}>
                  <span style={{width: 4, height: 4, borderRadius: 4, background: "currentColor", opacity: .6}} />
                  {s.label}
                </button>
              ))}
            </div>
          )}

          <div className="sb-section-label">Insight</div>
          {NAV.filter(n => n.section === "insight").map(n => (
            <button key={n.key} className={`sb-item ${page === n.key ? "active" : ""}`} onClick={() => handleNav(n.key)}>
              <n.icon className="ic" /> {n.label}
            </button>
          ))}
        </nav>
        <div className="sb-foot">
          <div className="avatar">{user.inisial}</div>
          <div style={{flex: 1, minWidth: 0}}>
            <div className="nm" style={{whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis"}}>{user.nama}</div>
            <div className="rl">{user.role}</div>
          </div>
          <button className="btn btn-icon btn-sm btn-ghost" title="Keluar" onClick={onLogout}>
            <I.Logout size={16} />
          </button>
        </div>
      </aside>
    </>
  );
}

function TopBar({ title, crumb, actions, onMenuToggle }) {
  return (
    <div className="topbar">
      <button className="menu-btn" onClick={onMenuToggle}>
        <I.Menu size={20} />
      </button>
      <div>
        <h1>{title}</h1>
        {crumb && <div className="crumb">{crumb}</div>}
      </div>
      <div className="spacer" />
      <div className="topbar-search">
        <I.Search size={16} className="ic" />
        <input placeholder="Cari sewa, penyewa, kode..." />
      </div>
      <button className="icon-btn" title="Notifikasi">
        <I.Bell size={18} />
        <span className="dot" />
      </button>
      {actions}
    </div>
  );
}

// ---- Login -----------------------------------------------------------------
function Login({ onLogin }) {
  const [u, setU] = useState("hartono");
  const [p, setP] = useState("admin123");
  const [showPass, setShowPass] = useState(false);
  const submit = (e) => {
    e?.preventDefault();
    onLogin(window.USERS[0]);
  };
  return (
    <div className="login-wrap">
      <div className="login-side">
        <div className="brandblock">
          <div className="logo">B</div>
        </div>
        <div>
          <h1>BusManager<br/>PO Bintang Jaya Lancar</h1>
          <p>Sistem manajemen armada bus pariwisata. Kelola sewa, kas operasional, dan laporan dalam satu tempat — sederhana, cepat, offline-friendly.</p>
        </div>
        <div className="foot">v1.0 · Starfield Indonesia · 2026</div>
      </div>
      <div className="login-form-wrap">
        <form className="login-form" onSubmit={submit}>
          <h2>Masuk ke akun Anda</h2>
          <div className="sub">Gunakan username dan password yang diberikan admin.</div>

          <div className="field mb-3">
            <label className="lbl">Username</label>
            <input className="input" value={u} onChange={e => setU(e.target.value)} autoFocus />
          </div>
          <div className="field mb-3">
            <label className="lbl">Password</label>
            <div style={{position: "relative"}}>
              <input className="input" type={showPass ? "text" : "password"} value={p} onChange={e => setP(e.target.value)} />
              <button type="button" className="btn-ghost" style={{position: "absolute", right: 4, top: 4, height: 32, padding: "0 8px", border: 0, background: "transparent", color: "var(--ink-mute)"}}
                onClick={() => setShowPass(s => !s)}>
                <I.Eye size={16} />
              </button>
            </div>
          </div>

          <div className="flex items-center justify-between mb-4">
            <label className="flex items-center gap-2" style={{fontSize: 13, color: "var(--ink-2)"}}>
              <input type="checkbox" defaultChecked /> Ingat saya 8 jam
            </label>
            <a href="#" style={{color: "var(--brand)", fontSize: 13, fontWeight: 600}}>Lupa password?</a>
          </div>

          <button className="btn btn-primary w-full" type="submit" style={{height: 42}}>
            <I.Lock size={16} /> Masuk
          </button>

          <div className="demo-credentials">
            <strong>Demo · klik "Masuk" untuk lanjut</strong>
            User: <code>hartono</code> · Password: <code>admin123</code> · Role: Admin
          </div>
        </form>
      </div>
    </div>
  );
}

// expose to window
Object.assign(window, {
  ToastProvider, useToast, Modal, Drawer, ConfirmDialog,
  Sidebar, TopBar, Login,
  StatusBadge, BusChip, PersonChip, STATUS_LABEL, NAV,
});