// Supabase client (único en toda la app)
var _SB = window.supabase
  ? window.supabase.createClient(
      "https://mybineipprqyumaaulje.supabase.co",
      "sb_publishable_p6MO0I6HPV02cSwSps3idA_nmq87olT"
    )
  : null;

// Años disponibles para el selector global de Control: desde 2025 hasta el año real
// actual. Se desbloquea un año nuevo automáticamente al llegar enero de ese año.
function aniosDisponibles() {
  const anioActual = new Date().getFullYear();
  const out = [];
  for (let y = anioActual; y >= 2025; y--) out.push(y);
  return out;
}

// Año/mes por defecto: el más reciente CON datos reales cargados en las órdenes
// (no el real-"hoy", que puede no tener nada cargado todavía).
function defaultAnioMes(ordenes) {
  const keys = new Set();
  ordenes.forEach(o => {
    [o.entrada, o.terminado, o.entregado, o.fechaPagado].forEach(f => { if (f) keys.add(f.slice(0, 7)); });
  });
  const ordenado = [...keys].sort((a, b) => b.localeCompare(a));
  const hoy = new Date();
  const hoyKey = `${hoy.getFullYear()}-${String(hoy.getMonth() + 1).padStart(2, "0")}`;
  const [anio, mes] = (ordenado[0] || hoyKey).split("-");
  return { anio: Number(anio), mes: Number(mes) };
}

// App principal
function App() {
  const [data, setData] = React.useState(() => {
    try {
      const saved = localStorage.getItem("Automecanica_San_Jorge");
      if (!saved) return window.TALLER_DATA;
      const parsed = JSON.parse(saved);
      // Deduplicar órdenes por número (en caso de datos corruptos de sesiones previas)
      const seen = new Set();
      parsed.ordenes = parsed.ordenes.filter(o => {
        if (seen.has(o.numero)) return false;
        seen.add(o.numero);
        return true;
      });
      return parsed;
    } catch { return window.TALLER_DATA; }
  });
  const [view, setView] = React.useState("dashboard");
  const [search, setSearch] = React.useState("");
  const [selectedOrden, setSelectedOrden] = React.useState(null);
  const [isNewOrden, setIsNewOrden] = React.useState(false);
  const [selectedCliente, setSelectedCliente] = React.useState(null);
  const [isOwner, setIsOwner] = React.useState(() => {
    const reload = performance.getEntriesByType("navigation")[0]?.type === "reload";
    if (reload) { sessionStorage.removeItem("taller_owner"); sessionStorage.removeItem("taller_admin"); return false; }
    return sessionStorage.getItem("taller_owner") === "1";
  });
  const [isAuthenticated, setIsAuthenticated] = React.useState(() => {
    const reload = performance.getEntriesByType("navigation")[0]?.type === "reload";
    if (reload) return false;
    return sessionStorage.getItem("taller_admin") === "1" || sessionStorage.getItem("taller_owner") === "1";
  });

  // Año/mes seleccionado para toda la sección Control (Contabilidad / Objetivos / Técnicos)
  const aniosControl = aniosDisponibles();
  const defaultAM = React.useMemo(() => defaultAnioMes(data.ordenes), []);
  const [controlAnio, setControlAnio] = React.useState(defaultAM.anio);
  const [controlMesNum, setControlMesNum] = React.useState(defaultAM.mes);
  const controlMes = `${controlAnio}-${String(controlMesNum).padStart(2, "0")}`;

  const _sbTimer = React.useRef(null);

  // Al montar: carga datos desde Supabase (o sube los locales si es la primera vez)
  React.useEffect(() => {
    if (!_SB) return;
    (async () => {
      const { data: row } = await _SB.from("Automecanica_San_Jorge").select("data").eq("id", 1).maybeSingle();
      if (row?.data?.ordenes) {
        setData(row.data);
      } else {
        // Primera vez: subir datos existentes de localStorage
        const local = (() => { try { return JSON.parse(localStorage.getItem("Automecanica_San_Jorge")); } catch { return null; } })();
        await _SB.from("Automecanica_San_Jorge").upsert({ id: 1, data: local || data, updated_at: new Date().toISOString() });
      }
    })();
  }, []);

  // Guarda en localStorage al instante y en Supabase con 800ms de debounce
  React.useEffect(() => {
    try { localStorage.setItem("Automecanica_San_Jorge", JSON.stringify(data)); } catch {}
    if (_SB) {
      clearTimeout(_sbTimer.current);
      _sbTimer.current = setTimeout(() => {
        _SB.from("Automecanica_San_Jorge")
          .update({ data, updated_at: new Date().toISOString() })
          .eq("id", 1)
          .then(r => { if (r.error) console.error("Supabase save error:", r.error); });
      }, 800);
    }
  }, [data]);

  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => { setSearch(""); setMenuOpen(false); document.body.dataset.view = view; }, [view]);

  // Guard: si la sesión de dueño se cierra, volver al dashboard desde vistas restringidas
  const RESTRICTED = ["contabilidad", "objetivos", "tecnicos", "costos"];
  React.useEffect(() => {
    if (!isOwner && RESTRICTED.includes(view)) setView("dashboard");
  }, [isOwner]);

  const ordenesActivas = data.ordenes.filter(o => o.estado !== "entregado" && o.estado !== "pagados" && !o.archivado).length;

  // Número auto-generado para nueva orden: máximo existente + 1, sin posibilidad de colisión
  const nextNumero = React.useMemo(() => {
    const maxN = data.ordenes.reduce((m, o) => Math.max(m, parseInt(o.numero) || 0), 0);
    return String(maxN + 1).padStart(8, "0");
  }, [data.ordenes.length]);

  const titles = {
    dashboard: { title: "Panel de control", crumb: "Inicio" },
    ordenes:   { title: "Órdenes de reparación", crumb: "Operación" },
    turnos:    { title: "Calendario de turnos", crumb: "Operación" },
    clientes:  { title: "Base de clientes", crumb: "Operación" },
    historial: { title: "Historial completo", crumb: "Operación" },
    objetivos: { title: "Objetivos del mes", crumb: "Contable" },
    costos:    { title: "Costos fijos", crumb: "Contable" },
    cuentas:   { title: "Cuentas corrientes", crumb: "Proveedores" },
    costosvar: { title: "Costos variables",   crumb: "Operación" },
    tecnicos:  { title: "Técnicos", crumb: "Equipo" },
    contabilidad: { title: "Contabilidad", crumb: "Contable" },
  };

  const showSearch = ["ordenes", "clientes", "historial"].includes(view);

  if (!isAuthenticated) {
    return (
      <LoginScreen onLogin={(ownerLogin) => {
        if (ownerLogin) {
          sessionStorage.setItem("taller_owner", "1");
          sessionStorage.setItem("taller_admin", "1");
          setIsOwner(true);
        } else {
          sessionStorage.setItem("taller_admin", "1");
        }
        setIsAuthenticated(true);
      }} />
    );
  }

  return (
    <div className="app">
      <Sidebar
        current={view} setCurrent={setView} ordenesActivas={ordenesActivas} isOwner={isOwner} setIsOwner={setIsOwner}
        setIsAuthenticated={setIsAuthenticated}
        anios={aniosControl} anio={controlAnio} setAnio={setControlAnio}
        mesNum={controlMesNum} setMesNum={setControlMesNum}
        open={menuOpen} onClose={() => setMenuOpen(false)}
      />
      {view === "dashboard" && (
        <button className="mobile-nav-trigger" onClick={() => setMenuOpen(true)} aria-label="Menú">
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
            <line x1="2" y1="4.5" x2="16" y2="4.5"/><line x1="2" y1="9" x2="16" y2="9"/><line x1="2" y1="13.5" x2="16" y2="13.5"/>
          </svg>
        </button>
      )}
      <div className={`main${view === "dashboard" || view === "turnos" ? " main--fixed" : ""}`}>
        {view !== "dashboard" && (
          <Topbar
            title={titles[view].title}
            crumb={titles[view].crumb}
            search={showSearch ? search : null}
            setSearch={showSearch ? setSearch : null}
            onMenuOpen={() => setMenuOpen(true)}
          />
        )}
        <div className={`content${view === "dashboard" || view === "turnos" ? " content--fixed" : ""}`}>
          {view === "dashboard" && <Dashboard data={data} mes={controlMes} onSelectOrden={(o) => { setIsNewOrden(false); setSelectedOrden(o); }} />}
          {view === "ordenes" && <OrdenesView data={data} setData={setData} search={search} onSelectOrden={(o) => { setIsNewOrden(false); setSelectedOrden(o); }} onNuevaOrden={() => { setIsNewOrden(true); setSelectedOrden({}); }} />}
          {view === "turnos" && <TurnosView data={data} setData={setData} />}
          {view === "clientes" && <ClientesView data={data} search={search} onSelectCliente={setSelectedCliente} />}
          {view === "historial" && <HistorialView data={data} search={search} isOwner={isOwner} onSelectOrden={(o) => { setIsNewOrden(false); setSelectedOrden(o); }} />}
          {view === "costos" && <CostosFijosView data={data} setData={setData} />}
          {view === "objetivos" && <ObjetivosView data={data} setData={setData} mes={controlMes} />}
          {view === "cuentas"    && <CuentasCorrientesView data={data} setData={setData} />}
          {view === "costosvar"  && <CostosVariablesView  data={data} setData={setData} />}
          {view === "tecnicos" && <TecnicosView data={data} setData={setData} onSelectOrden={(o) => { setIsNewOrden(false); setSelectedOrden(o); }} mes={controlMes} />}
          {view === "contabilidad" && <ContabilidadView data={data} setData={setData} mes={controlMes} />}
        </div>
      </div>

      {selectedOrden && (
        <OrdenModal
          orden={isNewOrden ? null : selectedOrden}
          isNew={isNewOrden}
          nextNumero={nextNumero}
          tecnicos={data.tecnicos}
          proveedores={data.cuentasCorrientes}
          objetivosTrabajo={data.objetivosTrabajo}
          ordenes={data.ordenes}
          onClose={() => { setSelectedOrden(null); setIsNewOrden(false); }}
          onDelete={() => {
            const numero = selectedOrden.numero;
            setData(prev => ({
              ...prev,
              ordenes: prev.ordenes.filter(o => o.numero !== numero),
              cuentasCorrientes: prev.cuentasCorrientes.map(c => ({
                ...c,
                registros: c.registros.filter(r => r.ordenId !== numero),
              })),
            }));
            setSelectedOrden(null);
            setIsNewOrden(false);
          }}
          onSave={(updated) => {
            const originalNumero = selectedOrden.numero;
            setData(prev => ({
              ...prev,
              ordenes: isNewOrden
                ? [updated, ...prev.ordenes]
                : prev.ordenes.map(o => o.numero === originalNumero ? updated : o),
              cuentasCorrientes: syncRepuestosConCuentas(prev.cuentasCorrientes, updated),
            }));
            setSelectedOrden(null);
            setIsNewOrden(false);
          }}
        />
      )}

      {selectedCliente && (
        <ClienteDetalle
          cliente={selectedCliente}
          ordenes={data.ordenes}
          onClose={() => setSelectedCliente(null)}
          onSelectOrden={(o) => { setSelectedCliente(null); setIsNewOrden(false); setSelectedOrden(o); }}
        />
      )}
    </div>
  );
}

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