// Shared UI primitives: Sidebar, Topbar, KPIs, Dashboard

function Sidebar({ route, setRoute, tweaks, session, onLogout }) {
  const items = [
    { key: "dashboard", label: "Panel",             icon: Icon.dashboard },
    { key: "quote",     label: "Cotización actual", icon: Icon.quote },
    { key: "clients",   label: "Clientes",          icon: Icon.users },
    { key: "materials", label: "Materiales",        icon: Icon.box },
    { key: "hh",        label: "Horas hombre",      icon: Icon.users },
    { key: "print",     label: "Imprimir / Exportar", icon: Icon.print },
    { key: "accounting", label: "Contabilidad",       icon: Icon.wallet },
    { key: "backup",    label: "Respaldo",          icon: Icon.download },
    { key: "users",     label: "Usuarios",          icon: Icon.users },
  ];
  return (
    <aside className="sidebar no-print">
      <div className="sidebar-brand">
        <img src={tweaks.logoUrl} alt="MAB"
             onError={(e)=>{e.target.style.visibility="hidden"}} />
        <div className="t">
          <b>MAB</b>
          <span>Automatización SpA</span>
        </div>
      </div>

      <div className="nav-section-title">Principal</div>
      <nav className="nav stack">
        {items.map((it) => {
          const Ic = it.icon;
          return (
            <button key={it.key}
                    className={route === it.key ? "active" : ""}
                    onClick={() => setRoute(it.key)}>
              <Ic /> <span>{it.label}</span>
            </button>
          );
        })}
      </nav>

      <div style={{marginTop:"auto", padding:"10px", borderTop:"1px solid #26231E"}}>
        {session && (
          <div style={{display:"flex",alignItems:"center",gap:10,padding:"8px 6px"}}>
            <div style={{width:34,height:34,borderRadius:"50%",background:"var(--brand)",color:"#1a1a1a",display:"grid",placeItems:"center",fontWeight:700,fontSize:13}}>
              {(session.name || session.username).slice(0,1).toUpperCase()}
            </div>
            <div style={{flex:1,minWidth:0}}>
              <div style={{fontSize:13,fontWeight:600,color:"#fff",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{session.name}</div>
              <div style={{fontSize:10.5,color:"#8A877D",textTransform:"uppercase",letterSpacing:".08em"}}>{session.role}</div>
            </div>
            <button onClick={onLogout} title="Cerrar sesión"
                    style={{background:"transparent",border:0,color:"#aaa",cursor:"pointer",padding:6}}>
              <Icon.external />
            </button>
          </div>
        )}
        <SaveIndicator />
        <div style={{fontSize:10.5,color:"#6A6760",padding:"6px 6px 0"}}>v1.2 · MAB</div>
      </div>
    </aside>
  );
}

function SaveIndicator() {
  const status = useSaveStatus();
  if (status.error) {
    return (
      <div style={{
        margin:"6px 0",padding:"8px 10px",borderRadius:6,
        background:"#3a1d1d",border:"1px solid #c0392b",color:"#ffb3a7",fontSize:11,lineHeight:1.4,
      }}>
        <b style={{display:"block",fontSize:11,marginBottom:2}}>⚠️ No se está guardando</b>
        {status.error}
        <div style={{marginTop:6,opacity:.8}}>Revisa: modo incógnito, Brave/Safari estricto, cookies bloqueadas.</div>
      </div>
    );
  }
  return (
    <div style={{
      margin:"6px 0",padding:"6px 10px",borderRadius:6,
      background:"rgba(34,197,94,.10)",border:"1px solid rgba(34,197,94,.25)",
      color:"#a7e9b8",fontSize:10.5,display:"flex",alignItems:"center",gap:6,
    }}>
      <span style={{width:6,height:6,borderRadius:"50%",background:"#22c55e"}}></span>
      Guardado {timeAgo(status.lastSaved)}
    </div>
  );
}

function MobileTopbar({ title, crumb, actions, onMenu }) {
  return (
    <div className="mobile-topbar no-print">
      <button className="burger" onClick={onMenu} aria-label="Menú">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
      </button>
      <div className="title">
        {crumb && <div className="crumb">{typeof crumb === "string" ? crumb : crumb}</div>}
        <h1>{title}</h1>
      </div>
      <div className="m-actions">{actions}</div>
    </div>
  );
}

function MobileBottomNav({ route, setRoute }) {
  const items = [
    { key: "dashboard", label: "Inicio",    icon: Icon.dashboard },
    { key: "quote",     label: "Cotización", icon: Icon.quote },
    { key: "materials", label: "Materiales", icon: Icon.box },
    { key: "hh",        label: "HH",         icon: Icon.users },
    { key: "print",     label: "Imprimir",   icon: Icon.print },
  ];
  return (
    <nav className="mobile-nav no-print">
      {items.map(it => {
        const Ic = it.icon;
        return (
          <button key={it.key} className={route === it.key ? "active" : ""}
                  onClick={() => setRoute(it.key)}>
            <Ic /> <span>{it.label}</span>
          </button>
        );
      })}
    </nav>
  );
}

function MobileDrawer({ open, onClose, route, setRoute, session, onLogout, tweaks }) {
  if (!open) return null;
  const items = [
    { key: "dashboard", label: "Panel",             icon: Icon.dashboard },
    { key: "quote",     label: "Cotización actual", icon: Icon.quote },
    { key: "clients",   label: "Clientes",          icon: Icon.users },
    { key: "materials", label: "Materiales",        icon: Icon.box },
    { key: "hh",        label: "Horas hombre",      icon: Icon.users },
    { key: "print",     label: "Imprimir / Exportar", icon: Icon.print },
    { key: "accounting", label: "Contabilidad",       icon: Icon.wallet },
    { key: "backup",    label: "Respaldo",          icon: Icon.download },
    { key: "users",     label: "Usuarios",          icon: Icon.users },
  ];
  const go = (k) => { setRoute(k); onClose(); };
  return (
    <div className="mobile-drawer open" onClick={onClose}>
      <div className="panel" onClick={e => e.stopPropagation()}>
        <div className="sidebar-brand">
          <img src={tweaks.logoUrl} alt="MAB" onError={(e)=>{e.target.style.visibility="hidden"}} />
          <div className="t"><b>MAB</b><span>Automatización SpA</span></div>
        </div>
        <nav className="nav stack">
          {items.map(it => {
            const Ic = it.icon;
            return (
              <button key={it.key} className={route === it.key ? "active" : ""}
                      onClick={() => go(it.key)}>
                <Ic /> <span>{it.label}</span>
              </button>
            );
          })}
        </nav>
        <div style={{marginTop:"auto",padding:"12px 4px",borderTop:"1px solid #26231E"}}>
          <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:8}}>
            <div style={{width:36,height:36,borderRadius:"50%",background:"var(--brand)",color:"#1a1a1a",display:"grid",placeItems:"center",fontWeight:700}}>
              {(session.name||session.username).slice(0,1).toUpperCase()}
            </div>
            <div style={{flex:1,minWidth:0}}>
              <div style={{fontSize:13,fontWeight:600,color:"#fff"}}>{session.name}</div>
              <div style={{fontSize:10.5,color:"#8A877D",textTransform:"uppercase",letterSpacing:".08em"}}>{session.role}</div>
            </div>
          </div>
          <button className="btn" onClick={onLogout} style={{width:"100%",justifyContent:"center"}}>
            <Icon.external /> Cerrar sesión
          </button>
        </div>
      </div>
    </div>
  );
}

function TopbarSaveBadge() {
  const status = useSaveStatus();
  if (status.error) {
    return (
      <span title={status.error} style={{
        display:"inline-flex",alignItems:"center",gap:6,
        padding:"4px 10px",borderRadius:999,fontSize:11.5,fontWeight:600,
        background:"#fdecea",color:"#b3261e",border:"1px solid #f5c6c3",
      }}>
        <span style={{width:6,height:6,borderRadius:"50%",background:"#b3261e"}}></span>
        Error al guardar
      </span>
    );
  }
  return (
    <span title={status.lastSaved ? `Última escritura: ${new Date(status.lastSaved).toLocaleString("es-CL")}` : "Sin guardado aún"}
          style={{
      display:"inline-flex",alignItems:"center",gap:6,
      padding:"4px 10px",borderRadius:999,fontSize:11.5,fontWeight:600,
      background:"rgba(34,197,94,.10)",color:"#1f7a3a",border:"1px solid rgba(34,197,94,.30)",
    }}>
      <span style={{width:6,height:6,borderRadius:"50%",background:"#22c55e"}}></span>
      Guardado {timeAgo(status.lastSaved)}
    </span>
  );
}

function Topbar({ title, crumb, actions }) {
  return (
    <header className="topbar no-print">
      <div>
        {crumb && <div className="crumb">{crumb}</div>}
        <h1>{title}</h1>
      </div>
      <div className="topbar-actions">
        <TopbarSaveBadge />
        {actions}
      </div>
    </header>
  );
}

function Dashboard({ state, setState, setRoute, totals }) {
  const newQuote = () => {
    setState(s => ({ ...s, quote: window.emptyQuote(), route: "quote" }));
  };
  const openQuote = (qid) => {
    const found = (state.quotes || []).find(x => x.id === qid);
    if (!found) { setRoute("quote"); return; }
    // Before swapping out the current quote, auto-save it back to history if
    // it has unsaved changes — otherwise opening an older quote would lose
    // whatever the user was editing.
    setState(s => {
      const current = s.quote;
      let quotes = s.quotes || [];
      const currentInList = quotes.find(x => x.id === current.id);
      const currentHasContent = (current.items?.length || 0) + (current.hh?.length || 0) + (current.expenses?.length || 0) > 0;
      if (current.id !== qid && currentHasContent) {
        // Persist whatever is in the editor so it isn't lost when we swap
        const liveTotals = window.quoteTotals(current, window.__TWEAKS__ || {});
        const liveSnap = {
          id: current.id,
          client: current.client?.name || "(Sin cliente)",
          project: current.projectName || "(Sin proyecto)",
          total: liveTotals.total,
          status: current.status || "borrador",
          date: (currentInList && currentInList.date) || new Date().toISOString().slice(0, 10),
          data: JSON.parse(JSON.stringify(current)),
        };
        quotes = [liveSnap, ...quotes.filter(x => x.id !== current.id)];
      }
      // Load the requested quote. Prefer the full `.data` payload; fall back
      // to the legacy summary-only shape for backward compatibility.
      let restored;
      if (found.data && typeof found.data === "object") {
        restored = JSON.parse(JSON.stringify(found.data));
      } else {
        // Legacy entry — start from a blank quote and copy the summary fields
        const blank = window.emptyQuote();
        restored = {
          ...blank,
          id: found.id,
          status: found.status || "borrador",
          projectName: found.project || "",
          client: { ...(blank.client || {}), name: found.client || "" },
        };
        alert(
          "Esta cotización fue guardada con una versión anterior y sólo conserva el resumen.\n" +
          "Los materiales, HH y gastos no se pueden recuperar — pero puedes seguir editándola desde aquí."
        );
      }
      return { ...s, quotes, quote: restored, route: "quote" };
    });
  };
  const removeQuote = (e, qid) => {
    e.stopPropagation();
    if (!confirm(`¿Eliminar la cotización ${qid} del historial?`)) return;
    setState(s => ({ ...s, quotes: s.quotes.filter(x => x.id !== qid) }));
  };
  const countMonth = state.quotes.length;
  const montoMonth = state.quotes.reduce((a, q) => a + q.total, 0);
  const approved = state.quotes.filter(q => q.status === "aprobada").length;
  const pending = state.quotes.filter(q => q.status === "enviada").length;

  return (
    <>
      <Topbar
        title="Panel de control"
        crumb="MAB · Cotizaciones"
        actions={
          <>
            <button className="btn" onClick={() => setRoute("materials")}>
              <Icon.box /> Catálogo
            </button>
            <button className="btn primary" onClick={() => {
              setState(s => ({ ...s, quote: window.emptyQuote(), route: "quote" }));
            }}>
              <Icon.plus /> Nueva cotización
            </button>
          </>
        }
      />
      <div className="content narrow">
        <div className="kpi-grid">
          <div className="kpi accent">
            <div className="label">Total cotizado (mes)</div>
            <div className="value">{clp(montoMonth)}</div>
            <div className="delta">+14.2% vs. mes anterior</div>
          </div>
          <div className="kpi">
            <div className="label">Cotizaciones emitidas</div>
            <div className="value num">{countMonth}</div>
            <div className="delta">+3 esta semana</div>
          </div>
          <div className="kpi">
            <div className="label">Aprobadas</div>
            <div className="value num">{approved}</div>
            <div className="delta">Tasa conv. 20%</div>
          </div>
          <div className="kpi">
            <div className="label">En espera de respuesta</div>
            <div className="value num">{pending}</div>
            <div className="delta down">2 por vencer</div>
          </div>
        </div>

        <div className="section-title">
          <span className="n">01</span>
          <h3>Cotizaciones recientes</h3>
          <span className="hint">Click para abrir · últimas {state.quotes.length}</span>
        </div>

        <div className="card">
          <table className="data">
            <thead>
              <tr>
                <th style={{width: 140}}>Folio</th>
                <th>Cliente</th>
                <th>Proyecto</th>
                <th style={{width: 140}} className="num">Monto neto</th>
                <th style={{width: 120}}>Estado</th>
                <th style={{width: 110}}>Fecha</th>
                <th style={{width: 60}}></th>
              </tr>
            </thead>
            <tbody>
              {state.quotes.map(q => (
                <tr key={q.id} style={{cursor:"pointer"}}
                    onClick={() => openQuote(q.id)}>
                  <td className="mono">{q.id}</td>
                  <td style={{fontWeight:600}}>{q.client}</td>
                  <td className="muted">{q.project}</td>
                  <td className="num">{clp(q.total)}</td>
                  <td>{statusBadge(q.status)}</td>
                  <td className="muted">{q.date}</td>
                  <td>
                    <button className="btn danger icon" title="Eliminar"
                            onClick={(e) => removeQuote(e, q.id)}>
                      <Icon.trash />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="section-title">
          <span className="n">02</span>
          <h3>Atajos</h3>
        </div>
        <div className="grid-3">
          <div className="card" style={{padding:20,cursor:"pointer"}} onClick={() => setRoute("quote")}>
            <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:10}}>
              <span className="badge brand dot">Activa</span>
              <b style={{fontSize:13}}>{state.quote.id}</b>
            </div>
            <div style={{fontSize:15,fontWeight:600,lineHeight:1.3}}>{state.quote.projectName}</div>
            <div className="muted" style={{marginTop:6,fontSize:12}}>{state.quote.client.name}</div>
            <div style={{marginTop:14,fontSize:20,fontWeight:700}} className="num">
              {clp(totals.total)}
            </div>
          </div>
          <div className="card" style={{padding:20,cursor:"pointer"}} onClick={() => setRoute("materials")}>
            <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:10,color:"var(--brand-deep)"}}>
              <Icon.box /> <b style={{fontSize:13}}>Catálogo de materiales</b>
            </div>
            <div style={{fontSize:28,fontWeight:700}} className="num">{state.materials.length}</div>
            <div className="muted" style={{fontSize:12,marginTop:4}}>items en biblioteca</div>
            <button className="btn sm" style={{marginTop:14}}>
              <Icon.plus /> Agregar o importar
            </button>
          </div>
          <div className="card" style={{padding:20,cursor:"pointer"}} onClick={() => setRoute("hh")}>
            <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:10,color:"var(--brand-deep)"}}>
              <Icon.users /> <b style={{fontSize:13}}>Perfiles HH</b>
            </div>
            <div style={{fontSize:28,fontWeight:700}} className="num">{state.roles.length}</div>
            <div className="muted" style={{fontSize:12,marginTop:4}}>roles con tarifa configurada</div>
            <button className="btn sm" style={{marginTop:14}}>
              <Icon.settings /> Ajustar tarifas
            </button>
          </div>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { Sidebar, Topbar, Dashboard, MobileTopbar, MobileBottomNav, MobileDrawer });