/* Pólix — App raíz: estado, contexto, navegación, tweaks */
const { useState, useEffect, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "azul",
  "font": "Plus Jakarta Sans",
  "density": "compacta",
  "dashStyle": "acento",
  "comparadorStyle": "tarjetas"
}/*EDITMODE-END*/;

const FONTS = {
  "Plus Jakarta Sans": "'Plus Jakarta Sans', system-ui, sans-serif",
  "Manrope": "'Manrope', system-ui, sans-serif",
  "Hanken Grotesque": "'Hanken Grotesque', system-ui, sans-serif",
};

function Toast({ msg, onDone }) {
  useEffect(() => { const id = setTimeout(onDone, 2600); return () => clearTimeout(id); }, []);
  return (
    <div style={{ position: "fixed", bottom: 24, left: "50%", transform: "translateX(-50%)", zIndex: 500,
      background: "var(--text)", color: "var(--surface)", padding: "12px 20px", borderRadius: 99,
      boxShadow: "var(--shadow-lg)", fontWeight: 700, fontSize: 13.5, display: "flex", gap: 9, alignItems: "center", animation: "pop .2s ease" }}>
      <Icon name="checkCircle" size={17} />{msg}
    </div>
  );
}

function NuevoClienteForm({ onClose, onSave, initial }) {
  const HOY = window.POLIX_DATA.HOY;
  const [f, setF] = useState(initial
    ? { nombre: initial.nombre || "", apellido: initial.apellido || "", cedula: initial.cedula || "", telefono: initial.telefono || "", email: initial.email || "", direccion: initial.direccion || "", departamento: initial.departamento || "Montevideo", empresa: !!initial.empresa }
    : { nombre: "", apellido: "", cedula: "", telefono: "", email: "", direccion: "", departamento: "Montevideo", empresa: false });
  const set = (k, v) => setF((s) => ({ ...s, [k]: v }));
  const deptos = ["Montevideo", "Canelones", "Maldonado", "Colonia", "Rocha", "Salto", "Paysandú", "Rivera", "Tacuarembó", "Florida", "San José"];
  return (
    <Modal title={initial ? "Editar cliente" : "Nuevo cliente"} onClose={onClose}
      footer={<><button className="btn btn-ghost" onClick={onClose}>Cancelar</button>
        <button className="btn btn-primary" disabled={!f.nombre || !f.cedula} style={(!f.nombre || !f.cedula) ? { opacity: .5, pointerEvents: "none" } : null}
          onClick={() => onSave(initial ? { ...initial, ...f } : { id: "c" + Math.random().toString(36).slice(2, 6), ...f, desde: HOY })}>{initial ? "Guardar cambios" : "Guardar cliente"}</button></>}>
      <label className="hint row" style={{ gap: 7, marginBottom: 14, cursor: "pointer" }}><input type="checkbox" checked={f.empresa} onChange={(e) => set("empresa", e.target.checked)} />Es una empresa (persona jurídica)</label>
      <div className="form-grid">
        <div className="field"><label>{f.empresa ? "Razón social *" : "Nombre *"}</label><input className="input" value={f.nombre} onChange={(e) => set("nombre", e.target.value)} /></div>
        {!f.empresa && <div className="field"><label>Apellido</label><input className="input" value={f.apellido} onChange={(e) => set("apellido", e.target.value)} /></div>}
        <div className="field"><label>{f.empresa ? "RUT *" : "Cédula *"}</label><input className="input mono" value={f.cedula} onChange={(e) => set("cedula", e.target.value)} placeholder={f.empresa ? "21.xxx.xxx-xxxx" : "3.842.157-6"} /></div>
        <div className="field"><label>Teléfono</label><input className="input" value={f.telefono} onChange={(e) => set("telefono", e.target.value)} placeholder="099 123 456" /></div>
        <div className="field"><label>Email</label><input className="input" value={f.email} onChange={(e) => set("email", e.target.value)} /></div>
        <div className="field"><label>Departamento</label><select className="select" value={f.departamento} onChange={(e) => set("departamento", e.target.value)}>{deptos.map((d) => <option key={d}>{d}</option>)}</select></div>
        <div className="field full"><label>Dirección</label><input className="input" value={f.direccion} onChange={(e) => set("direccion", e.target.value)} /></div>
      </div>
    </Modal>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [authed, setAuthed] = useState(() => { try { return localStorage.getItem("polix_auth") === "1"; } catch (e) { return false; } });
  const [data, setData] = useState(() => {
    try { const s = localStorage.getItem("polix_data_v2"); if (s) { const d = JSON.parse(s); if (d && Array.isArray(d.polizas)) return d; } } catch (e) {}
    return JSON.parse(JSON.stringify(window.POLIX_DATA));
  });
  const [route, setRoute] = useState({ screen: "dashboard", params: {} });
  const [detail, setDetail] = useState(null); // {type, id}
  const [search, setSearch] = useState("");
  const [navOpen, setNavOpen] = useState(false);
  const [nuevoCliente, setNuevoCliente] = useState(false);
  const [editClienteId, setEditClienteId] = useState(null);
  const [editCompaniaId, setEditCompaniaId] = useState(null);
  const [toast, setToast] = useState(null);
  const hoy = window.POLIX_DATA.HOY;

  // persistencia local: cada cambio se guarda en el navegador
  useEffect(() => {
    try { localStorage.setItem("polix_data_v2", JSON.stringify(data)); } catch (e) {}
  }, [data]);

  // aplicar tweaks al documento
  useEffect(() => {
    const r = document.documentElement;
    r.setAttribute("data-theme", t.theme);
    if (t.density === "balance") r.removeAttribute("data-density");
    else r.setAttribute("data-density", t.density);
    r.style.setProperty("--font-ui", FONTS[t.font] || FONTS["Plus Jakarta Sans"]);
  }, [t.theme, t.density, t.font]);

  function go(screen, params = {}) { setRoute({ screen, params }); setDetail(null); if (screen !== "clientes" && screen !== "polizas") setSearch(""); }
  const notify = (msg) => setToast(msg);

  // --- CRUD / acciones ---
  const ctx = {
    data, route, go, detail, search, setSearch, navOpen, setNavOpen, hoy, t,
    openPoliza: (id) => setDetail({ type: "poliza", id }),
    openCliente: (id) => setDetail({ type: "cliente", id }),
    openSiniestro: (id) => setDetail({ type: "siniestro", id }),
    openCompania: (id) => setDetail({ type: "compania", id }),
    closeDetail: () => setDetail(null),
    openNuevoCliente: () => setNuevoCliente(true),
    openEditCliente: (id) => setEditClienteId(id),
    openEditCompania: (id) => setEditCompaniaId(id),
    addPoliza: (p) => { setData((d) => ({ ...d, polizas: [p, ...d.polizas] })); notify("Póliza emitida ✓"); },
    updatePoliza: (p) => { setData((d) => ({ ...d, polizas: d.polizas.map((x) => x.id === p.id ? p : x) })); notify("Póliza actualizada ✓"); },
    deletePoliza: (id) => { setData((d) => ({ ...d, polizas: d.polizas.filter((p) => p.id !== id), siniestros: d.siniestros.filter((s) => s.polizaId !== id) })); notify("Póliza eliminada"); setDetail(null); },
    renovarPoliza: (id) => { setData((d) => ({ ...d, polizas: d.polizas.map((p) => p.id === id ? { ...p, renovada: true, anulada: false, inicio: p.fin, fin: addMonths(p.fin, 12) } : p) })); notify("Póliza renovada por 12 meses"); setDetail(null); },
    anularPoliza: (id) => { setData((d) => ({ ...d, polizas: d.polizas.map((p) => p.id === id ? { ...p, anulada: true } : p) })); notify("Póliza anulada"); },
    addSiniestro: (s) => { setData((d) => ({ ...d, siniestros: [s, ...d.siniestros] })); notify("Siniestro registrado"); },
    setEstadoSiniestro: (id, estado) => setData((d) => ({ ...d, siniestros: d.siniestros.map((s) => s.id === id ? { ...s, estado } : s) })),
    addCompania: (c) => { setData((d) => ({ ...d, companias: [...d.companias, c] })); notify("Compañía dada de alta"); },
    updateCompania: (c) => { setData((d) => ({ ...d, companias: d.companias.map((x) => x.id === c.id ? c : x) })); notify("Compañía actualizada ✓"); },
    deleteCompania: (id) => { setData((d) => ({ ...d, companias: d.companias.filter((c) => c.id !== id) })); notify("Compañía dada de baja"); },
    addCliente: (c) => { setData((d) => ({ ...d, clientes: [c, ...d.clientes] })); notify("Cliente creado"); },
    updateCliente: (c) => { setData((d) => ({ ...d, clientes: d.clientes.map((x) => x.id === c.id ? c : x) })); notify("Cliente actualizado ✓"); },
    deleteCliente: (id) => { setData((d) => ({ ...d, clientes: d.clientes.filter((c) => c.id !== id), polizas: d.polizas.filter((p) => p.clienteId !== id), siniestros: d.siniestros.filter((s) => s.clienteId !== id) })); notify("Cliente eliminado"); setDetail(null); },
    addImportadas: (cli, pol) => { setData((d) => ({ ...d, clientes: [...cli, ...d.clientes], polizas: [...pol, ...d.polizas] })); notify(`${pol.length} pólizas importadas ✓`); },
    resetData: () => { try { localStorage.removeItem("polix_data_v2"); } catch (e) {} setData(JSON.parse(JSON.stringify(window.POLIX_DATA))); setDetail(null); notify("Datos de ejemplo restablecidos"); },
    logout: () => { try { localStorage.removeItem("polix_auth"); } catch (e) {} setAuthed(false); },
  };

  const Screen = { dashboard: Dashboard, clientes: Clientes, polizas: Polizas, siniestros: Siniestros, comparador: Comparador, companias: Companias, importar: Importar }[route.screen] || Dashboard;

  if (!authed) return <Auth onAuthed={() => { try { localStorage.setItem("polix_auth", "1"); } catch (e) {} setAuthed(true); }} />;

  return (
    <AppCtx.Provider value={ctx}>
      <div className={"app" + (navOpen ? " nav-open" : "")}>
        <div className="sidebar-backdrop" onClick={() => setNavOpen(false)} />
        <Sidebar />
        <div className="main">
          <TopBar />
          <main className="content"><Screen /></main>
        </div>
      </div>

      {detail?.type === "poliza" && <PolizaDetail id={detail.id} />}
      {detail?.type === "cliente" && <ClienteDetail id={detail.id} />}
      {detail?.type === "siniestro" && <SiniestroDetail id={detail.id} />}
      {detail?.type === "compania" && <CompaniaDetail id={detail.id} />}
      {nuevoCliente && <NuevoClienteForm onClose={() => setNuevoCliente(false)} onSave={(c) => { ctx.addCliente(c); setNuevoCliente(false); }} />}
      {editClienteId && <NuevoClienteForm initial={data.clientes.find((c) => c.id === editClienteId)} onClose={() => setEditClienteId(null)} onSave={(c) => { ctx.updateCliente(c); setEditClienteId(null); }} />}
      {editCompaniaId && <NuevaCompania initial={data.companias.find((c) => c.id === editCompaniaId)} onClose={() => setEditCompaniaId(null)} onSave={(c) => { ctx.updateCompania(c); setEditCompaniaId(null); }} />}
      {toast && <Toast msg={toast} onDone={() => setToast(null)} />}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Marca" />
        <TweakColor label="Color" value={themeColor(t.theme)}
          options={["#3056c8", "#1b9aa8", "#9b4dca", "#1f9d6b"]}
          onChange={(v) => setTweak("theme", colorToTheme(v))} />
        <TweakRadio label="Tipografía" value={t.font} options={["Plus Jakarta Sans", "Manrope", "Hanken Grotesque"]} onChange={(v) => setTweak("font", v)} />
        <TweakSection label="Densidad" />
        <TweakRadio label="Tablas" value={t.density} options={["compacta", "balance", "comoda"]} onChange={(v) => setTweak("density", v)} />
        <TweakSection label="Variantes de pantalla" />
        <TweakRadio label="KPIs del inicio" value={t.dashStyle} options={["acento", "simple"]} onChange={(v) => setTweak("dashStyle", v)} />
        <TweakRadio label="Comparador" value={t.comparadorStyle} options={["tabla", "tarjetas"]} onChange={(v) => setTweak("comparadorStyle", v)} />
        <TweakSection label="Datos" />
        <TweakButton label="Restablecer datos de ejemplo" secondary onClick={() => { if (confirm("¿Restablecer todos los datos a los de ejemplo? Se perderán los cambios locales.")) ctx.resetData(); }} />
      </TweaksPanel>
    </AppCtx.Provider>
  );
}

const THEME_COLORS = { azul: "#3056c8", teal: "#1b9aa8", violeta: "#9b4dca", verde: "#1f9d6b" };
function themeColor(th) { return THEME_COLORS[th] || THEME_COLORS.azul; }
function colorToTheme(c) { return Object.keys(THEME_COLORS).find((k) => THEME_COLORS[k] === c) || "azul"; }

ReactDOM.createRoot(document.getElementById("root")).render(<App />);