const { useState, useEffect, useMemo } = React;

function Sidebar({ view, setView, counts }) {
  const items = [
    { id: "overview", label: "Resumen", icon: window.Icons.overview, badge: null },
    { id: "people", label: "Personas", icon: window.Icons.people, badge: counts.total },
    { id: "tools", label: "Soluciones conjuntas", icon: window.Icons.tools, badge: counts.clusters },
    { id: "roadmap", label: "Roadmap", icon: window.Icons.roadmap, badge: 4 },
    { id: "costs", label: "Costes", icon: window.Icons.costs, badge: null },
  ];
  return (
    <aside className="sidebar">
      <div className="sidebar-header">
        <img src="logo-xul.png" alt="XUL" className="logo-img" />
      </div>
      <nav className="nav">
        <div className="nav-section">Vistas</div>
        {items.map(it => (
          <button key={it.id} className={`nav-item${view === it.id ? " active" : ""}`} onClick={() => setView(it.id)}>
            <span className="nav-icon">{it.icon}</span>
            <span>{it.label}</span>
            {it.badge != null && <span className="nav-badge">{it.badge}</span>}
          </button>
        ))}
      </nav>
      <div className="sidebar-footer">
        <div className="meta-row"><span>Auditoría</span><b>v1</b></div>
        <div className="meta-row"><span>Actualizada</span><b>24 abr 2026</b></div>
        <div className="meta-row"><span>Responsable</span><b>Victor García</b></div>
        <button onClick={() => { if(confirm("¿Cerrar sesión?")) window.location.reload(); }} 
          style={{ width: "100%", marginTop: 12, padding: "8px", borderRadius: 8, background: "var(--bg-3)", border: "1px solid var(--border)", color: "var(--fg-muted)", fontSize: 11, cursor: "pointer" }}>
          Cerrar sesión
        </button>
      </div>
    </aside>
  );
}

function Topbar({ view, filters, setFilters, darkMode, setDarkMode, editMode, setEditMode, editedCount, onResetAll }) {
  const titles = {
    overview: "Resumen ejecutivo",
    people: "Personas",
    tools: "Soluciones conjuntas",
    roadmap: "Roadmap",
    costs: "Costes"
  };
  return (
    <header className="topbar">
      <div className="crumbs">
        <span>Auditoría</span>
        <span className="crumb-sep">/</span>
        <b>{titles[view]}</b>
        {editedCount > 0 && <span className="badge badge-coste-paid" style={{ marginLeft: 8 }}><span className="dot" /> {editedCount} editado{editedCount > 1 ? "s" : ""}</span>}
      </div>
      <div className="topbar-spacer" />

      <div className="search">
        <span style={{ width: 14, height: 14, color: "var(--fg-subtle)" }}>{window.Icons.search}</span>
        <input
          placeholder="Buscar persona, pain point, herramienta…"
          value={filters.q}
          onChange={(e) => setFilters({ ...filters, q: e.target.value })}
        />
        <kbd>⌘K</kbd>
      </div>
      <button className="topbar-btn" onClick={() => setDarkMode(!darkMode)} title="Cambiar modo">
        {darkMode ? "◐" : "◑"}
      </button>
      <button className={`edit-toggle${editMode ? " active" : ""}`} onClick={() => setEditMode(!editMode)} title="Activar edición">
        <span className="ed-dot" />
        {editMode ? "Editando" : "Editar"}
      </button>
      <button className="topbar-btn primary">
        <span style={{ width: 14, height: 14 }}>{window.Icons.export}</span>
        Exportar
      </button>
    </header>
  );
}

function App() {
  const data = window.AUDIT_DATA;
  const defaultTweaks = /*EDITMODE-BEGIN*/{
    "darkMode": true,
    "dense": false,
    "accent": "purple"
  }/*EDITMODE-END*/;

  const [tweaks, setTweaks] = window.useTweaks(defaultTweaks);
  const [view, setView] = useState("overview");
  const [openRow, setOpenRow] = useState(null);
  const [filters, setFilters] = useState({ facilidad: "all", prioridad: "all", coste: "all", solucionado: "all", q: "" });
  const [editMode, setEditMode] = useState(false);
  const [isAuth, setIsAuth] = useState(false);

  const { edits, setEdit, resetEdit, resetAll } = window.useEdits();

  // Datos efectivos (con overrides aplicados)
  const effectiveData = useMemo(() => window.applyEditsToAll(data, edits), [data, edits]);
  const editedCount = Object.keys(edits).length;

  // Apply theme + editmode class
  useEffect(() => {
    document.body.classList.toggle("light", !tweaks.darkMode);
    document.body.classList.toggle("editmode", editMode);
    const map = {
      purple: { a: "#7A3FAF", soft: "rgba(122, 63, 175, 0.14)", ring: "rgba(122,63,175,0.35)" },
      red: { a: "#E8473D", soft: "rgba(232, 71, 61, 0.14)", ring: "rgba(232,71,61,0.35)" },
      teal: { a: "#3BB3B9", soft: "rgba(59, 179, 185, 0.14)", ring: "rgba(59,179,185,0.35)" }
    };
    const v = map[tweaks.accent] || map.purple;
    document.documentElement.style.setProperty("--accent", v.a);
    document.documentElement.style.setProperty("--accent-soft", v.soft);
    document.documentElement.style.setProperty("--accent-ring", v.ring);
  }, [tweaks.darkMode, tweaks.accent, editMode]);

  // Listen for cross-component "open this row" events
  useEffect(() => {
    const h = (e) => {
      const r = effectiveData.find(d => d.id === e.detail.id) || e.detail;
      setOpenRow(r);
    };
    window.addEventListener("open-row", h);
    return () => window.removeEventListener("open-row", h);
  }, [effectiveData]);

  // Re-sync openRow when edits change so drawer reflects new values
  useEffect(() => {
    if (openRow) {
      const fresh = effectiveData.find(d => d.id === openRow.id);
      if (fresh && fresh !== openRow) setOpenRow(fresh);
    }
  }, [effectiveData]);

  // Cmd+K focus search
  useEffect(() => {
    const h = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
        e.preventDefault();
        document.querySelector(".search input")?.focus();
      }
    };
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, []);

  const navDrawer = (dir) => {
    if (!openRow) return;
    const idx = effectiveData.findIndex(d => d.id === openRow.id);
    const next = effectiveData[(idx + dir + effectiveData.length) % effectiveData.length];
    setOpenRow(next);
  };

  const counts = useMemo(() => ({
    total: effectiveData.length,
    clusters: Object.values(window.TOOL_GROUPS).filter(ids => ids.length >= 2).length
  }), [effectiveData]);

  if (!isAuth) return <window.ViewLogin onLogin={() => setIsAuth(true)} />;

  return (
    <div className="app">
      <Sidebar view={view} setView={setView} counts={counts} />
      <main className="main" data-screen-label={view}>
        <Topbar view={view} filters={filters} setFilters={setFilters}
          darkMode={tweaks.darkMode}
          setDarkMode={(v) => setTweaks({ ...tweaks, darkMode: v })}
          editMode={editMode} setEditMode={setEditMode}
          editedCount={editedCount} onResetAll={resetAll} />
        <div className="content">
          {editMode && (
            <div className="edit-banner">
              <span style={{ width: 14, height: 14 }}>{window.Icons.info}</span>
              <div>
                <b>Modo edición activo.</b> Haz clic en cualquier campo de la tabla o ficha para editarlo. Los cambios se guardan automáticamente en este navegador.
              </div>
              <div className="spacer" />
              {editedCount > 0 && <><span style={{ fontSize: 12, color: "var(--fg-muted)" }}>{editedCount} fila{editedCount > 1 ? "s" : ""} modificada{editedCount > 1 ? "s" : ""}</span><button onClick={() => { if (confirm("¿Revertir todas las ediciones?")) resetAll(); }}>Revertir todo</button></>}
              <button onClick={() => setEditMode(false)}>Salir del modo edición</button>
            </div>
          )}
          {view === "overview" && <window.ViewOverview data={effectiveData} onOpen={setOpenRow} setView={setView} />}
          {view === "people" && <window.ViewPersonas data={effectiveData} onOpen={setOpenRow} filters={filters} setFilters={setFilters} dense={tweaks.dense} editMode={editMode} edits={edits} setEdit={setEdit} resetEdit={resetEdit} />}
          {view === "tools" && <window.ViewTools data={effectiveData} onOpen={setOpenRow} />}
          {view === "roadmap" && <window.ViewRoadmap data={effectiveData} onOpen={setOpenRow} />}
          {view === "costs" && <window.ViewCosts data={effectiveData} onOpen={setOpenRow} />}
        </div>
      </main>

      {openRow && (
        <window.Drawer row={openRow} onClose={() => setOpenRow(null)} onNav={navDrawer} data={effectiveData}
          editMode={editMode} setEdit={setEdit} resetEdit={resetEdit} isEdited={!!edits[openRow.id]} />
      )}

      {/* Tweaks panel */}
      <window.TweaksPanel title="Tweaks">
        <window.TweakSection title="Apariencia">
          <window.TweakToggle label="Modo oscuro" value={tweaks.darkMode} onChange={(v) => setTweaks({ ...tweaks, darkMode: v })} />
          <window.TweakToggle label="Tabla densa" value={tweaks.dense} onChange={(v) => setTweaks({ ...tweaks, dense: v })} />
          <window.TweakRadio label="Color de acento" value={tweaks.accent} options={[
            { value: "purple", label: "Morado XUL" },
            { value: "red", label: "Rojo XUL" },
            { value: "teal", label: "Teal" }
          ]} onChange={(v) => setTweaks({ ...tweaks, accent: v })} />
        </window.TweakSection>
        <window.TweakSection title="Edición">
          <window.TweakToggle label="Modo edición" value={editMode} onChange={setEditMode} />
          {editedCount > 0 && (
            <div style={{ fontSize: 12, color: "var(--fg-muted)", padding: "6px 0" }}>
              {editedCount} fila{editedCount > 1 ? "s" : ""} con cambios locales ·{" "}
              <button onClick={() => { if (confirm("¿Revertir todas las ediciones?")) resetAll(); }} style={{ color: "var(--accent)", textDecoration: "underline" }}>Revertir todo</button>
            </div>
          )}
        </window.TweakSection>
        <window.TweakSection title="Atajos">
          <div style={{ fontSize: 12, color: "var(--fg-muted)", lineHeight: 1.8 }}>
            <div><kbd style={{ fontFamily: "var(--mono)", padding: "1px 5px", background: "var(--bg-3, #eee)", borderRadius: 4 }}>⌘K</kbd> buscar</div>
            <div><kbd style={{ fontFamily: "var(--mono)", padding: "1px 5px", background: "var(--bg-3, #eee)", borderRadius: 4 }}>Enter</kbd> guardar edición</div>
            <div><kbd style={{ fontFamily: "var(--mono)", padding: "1px 5px", background: "var(--bg-3, #eee)", borderRadius: 4 }}>Esc</kbd> cancelar</div>
          </div>
        </window.TweakSection>
      </window.TweaksPanel>
    </div>
  );
}

(async () => {
  try {
    const res = await fetch('/api/load');
    if (res.ok) {
      const { data } = await res.json();
      if (data) window.AUDIT_DATA = data;
    }
  } catch {}
  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(<App />);
})();