// ===== RIVAMAR Group — App raíz (v4, store persistente + edición inline) =====
const { useState, useEffect } = React;

function App() {
  const state = useStore();               // estado global persistente
  const [view, setView] = useState('home');
  const [prefill, setPrefill] = useState({});
  const [adminAuthed, setAdminAuthed] = useState(false);
  const [editMode, setEditMode] = useState(false);

  useEffect(() => { try { trackVisit(); } catch (e) {} }, []);

  useReveal(view + (editMode ? '-e' : ''));   // re-escanear reveals al navegar

  const go = (v, opts) => {
    setPrefill(opts || {});
    setView(v);
    window.scrollTo({ top: 0, behavior: 'auto' });
  };

  // Setters al store
  const setReservas = (u) => storeSetKey('reservas', u);
  const setUsers = (u) => storeSetKey('users', u);
  const setGaleria = (u) => storeSetKey('galeria', u);
  const setCotizaciones = (u) => storeSetKey('cotizaciones', u);
  const onConfirm = (data) => {
    setReservas((prev) => [data, ...prev]);
    try { avisarTelefono(data); } catch (e) {}
    // Devolver la promesa de entrega al panel para que el formulario avise si falla.
    try { return pushToInbox('reserva', data); } catch (e) { return Promise.resolve({ ok: false }); }
  };
  const onCotizar = (cot) => { setCotizaciones((prev) => [cot, ...(prev || [])]); try { pushToInbox('cotizacion', cot); } catch (e) {} };

  // El panel admin recibe solicitudes de cualquier dispositivo (bandeja del servidor)
  useEffect(() => {
    if (!adminAuthed) return undefined;
    let stop = false;
    const tick = () => { if (!stop) { try { loadInbox(); } catch (e) {} } };
    tick();
    const iv = setInterval(tick, 20000);
    return () => { stop = true; clearInterval(iv); };
  }, [adminAuthed]);

  // Edición inline: escribe una ruta del store ('site.hero_titulo', 'locales.0.nombre', …)
  const onEdit = (path, value) => storeSet((s) => {
    const seg = path.split('.')[0];
    return { [seg]: setPath(s[seg], path.split('.').slice(1).join('.'), value) };
  });
  const edit = editMode && adminAuthed && view !== 'admin';
  const ep = { edit, onEdit };           // props de edición para páginas públicas

  const logout = () => { setAdminAuthed(false); setEditMode(false); go('home'); };

  const isAdmin = view === 'admin';

  return (
    <div className="min-h-screen flex flex-col bg-carbon" data-edit={edit ? 'on' : 'off'}>
      {!isAdmin && <Navbar view={view} go={go} adminAuthed={adminAuthed} />}
      {!isAdmin && adminAuthed && <EditModeBar edit={editMode} setEdit={setEditMode} go={go} />}

      <div className="flex-1">
        {view === 'home' && <Landing go={go} cms={state.site} convenios={state.convenios} stats={state.stats} {...ep} />}
        {view === 'galeria' && <Galeria go={go} initialLocal={prefill.local} />}
        {view === 'local' && <LocalPage slug={prefill.slug} go={go} {...ep} />}
        {view === 'nosotros' && <Nosotros go={go} data={state.nosotros} {...ep} />}
        {view === 'exponor' && <Exponor go={go} data={state.exponor} {...ep} />}
        {view === 'reservas' && <Reservas prefill={prefill} go={go} onConfirm={onConfirm} />}
        {view === 'convenios' && <Convenios go={go} data={state.convenios} onCotizar={onCotizar} {...ep} />}
        {view === 'privacidad' && <Privacidad go={go} />}
        {view === 'terminos' && <Terminos go={go} />}
        {view === 'admin' && (
          <Admin
            authed={adminAuthed} onAuthed={() => setAdminAuthed(true)} onLogout={logout}
            reservas={state.reservas} setReservas={setReservas}
            users={state.users} setUsers={setUsers}
            galeria={state.galeria} setGaleria={setGaleria}
            cotizaciones={state.cotizaciones || []} setCotizaciones={setCotizaciones}
            content={state} setContent={storeSet} resetContent={storeReset}
            go={go}
          />
        )}
      </div>

      {!isAdmin && <Footer go={go} cms={state.site} />}
      {!isAdmin && <WhatsAppFAB whatsapp={state.site.whatsapp} />}
      {!isAdmin && <ScrollTop />}
      {!isAdmin && view !== 'reservas' && <ExponorMobileBar go={go} />}
    </div>
  );
}

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