/* Pólix — Sidebar + TopBar */

const NAV = [
  { id: "dashboard", label: "Inicio", icon: "dashboard" },
  { id: "clientes", label: "Clientes", icon: "users" },
  { id: "polizas", label: "Pólizas", icon: "file" },
  { id: "siniestros", label: "Siniestros", icon: "claims" },
  { id: "comparador", label: "Comparador", icon: "compare" },
  { id: "companias", label: "Compañías", icon: "building" },
];

function Sidebar() {
  const { route, go, data, navOpen, setNavOpen, logout } = useApp();
  const hoy = window.POLIX_DATA.HOY;
  const abiertos = data.siniestros.filter((s) => s.estado === "Abierto" || s.estado === "En análisis").length;
  const porVencer = data.polizas.filter((p) => {
    const s = ventStatus(p, hoy); return s.key === "critico" || s.key === "vencida" || s.key === "mes";
  }).length;
  const counts = { siniestros: abiertos, polizas: porVencer };

  return (
    <aside className="sidebar">
      <div className="brand">
        <div>
          <Wordmark size={25} />
          <div className="brand-sub" style={{ marginTop: 4 }}>Corredores</div>
        </div>
      </div>
      <nav className="nav">
        <div className="nav-label">Gestión</div>
        {NAV.map((n) => (
          <button key={n.id} className={"nav-item" + (route.screen === n.id ? " active" : "")}
            onClick={() => { go(n.id); setNavOpen(false); }}>
            <Icon name={n.icon} size={18} />
            {n.label}
            {counts[n.id] > 0 && <span className="badge-count">{counts[n.id]}</span>}
          </button>
        ))}
        <div className="nav-label">Herramientas</div>
        <button className="nav-item" onClick={() => { go("comparador"); setNavOpen(false); }}>
          <Icon name="sparkle" size={18} />Cotizar
        </button>
        <button className="nav-item" onClick={() => { go("importar"); setNavOpen(false); }}>
          <Icon name="download" size={18} />Importar Excel
        </button>
        <button className="nav-item" onClick={() => alert("Reportes — próximamente en el prototipo")}>
          <Icon name="trending" size={18} />Reportes
        </button>
      </nav>
      <div className="nav-foot">
        <div className="user-chip">
          <span className="avatar">FR</span>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontWeight: 700, fontSize: 13.5, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>Federico Rey</div>
            <div className="muted" style={{ fontSize: 11.5 }}>Corredor · Matrícula 0482</div>
          </div>
          <button className="iconbtn" style={{ marginLeft: "auto" }} title="Salir" onClick={logout}><Icon name="logout" size={16} /></button>
        </div>
      </div>
    </aside>
  );
}

const TITLES = {
  dashboard: "Inicio", clientes: "Clientes", polizas: "Pólizas",
  siniestros: "Siniestros", comparador: "Comparador de cotizaciones", companias: "Compañías de seguro", importar: "Importar desde Excel",
};

function TopBar() {
  const { route, setNavOpen, search, setSearch, go } = useApp();
  const title = TITLES[route.screen] || "Brida";
  return (
    <header className="topbar">
      <button className="iconbtn menu-btn" onClick={() => setNavOpen((v) => !v)}><Icon name="menu" /></button>
      <div>
        <h1>{title}</h1>
      </div>
      <label className="search">
        <Icon name="search" size={17} />
        <input value={search} placeholder="Buscar cliente, cédula, póliza…"
          onChange={(e) => setSearch(e.target.value)}
          onFocus={() => { if (route.screen !== "clientes" && route.screen !== "polizas") go("clientes"); }} />
      </label>
      <button className="btn btn-ghost btn-icon" title="Notificaciones"><Icon name="bell" size={18} /></button>
    </header>
  );
}

Object.assign(window, { Sidebar, TopBar, NAV });