// Root app — composes nav + sections + form + tweaks + edit mode.
// Frontend públic. Mostra Form només dins de la finestra d'inscripcions
// definida a la taula `ediciones` (fecha_inicio_inscripciones / fecha_fin_inscripciones).
// Fallback: lottery_config.preinscription_window (compatibilitat enrere).

const useFrontendConfig = () => {
  const [overridesTick, setTick] = React.useState(0);
  const [windowCfg, setWindowCfg] = React.useState(null);
  const [windowLoaded, setWindowLoaded] = React.useState(false);
  React.useEffect(() => {
    const url = window.__SUPABASE_URL__;
    const key = window.__SUPABASE_ANON_KEY__;
    if (!url || !key || !window.supabase || url.includes('YOUR_PROJECT')) {
      setWindowLoaded(true);
      return;
    }
    // Timeout de seguretat: si en 6s no s'ha resolt, marquem com a carregat
    // perquè mai es quedi penjat amb estat de càrrega infinit.
    const safetyTimer = setTimeout(() => {
      console.warn('[frontend config] timeout 6s; marcant windowLoaded sense config');
      setWindowLoaded(true);
    }, 6000);

    (async () => {
      try {
        const sb = window.__sb_public_client__ ||
          (window.__sb_public_client__ = window.supabase.createClient(url, key, {
            auth: { persistSession: false, autoRefreshToken: false, detectSessionInUrl: false },
          }));

        // Helper: race entre query i timeout individual de 4s
        const withTimeout = (promise, ms = 4000) =>
          Promise.race([
            promise,
            new Promise((_, rej) => setTimeout(() => rej(new Error('timeout')), ms)),
          ]);

        // Text overrides
        try {
          const ov = await withTimeout(sb.from('text_overrides').select('lang,key,value'));
          if (!ov.error && ov.data && ov.data.length) {
            window.applyTextOverrides(ov.data);
            setTick(x => x + 1);
          }
        } catch (e) { console.warn('[frontend config] text_overrides:', e.message); }

        // 1) PRIORITARI: lottery_config.preinscription_window
        // (editable des del panel · Configuració per al master, amb hora exacta).
        let cfg = null;
        try {
          const lc = await withTimeout(sb.from('lottery_config').select('value').eq('key', 'preinscription_window').maybeSingle());
          if (!lc.error && lc.data && lc.data.value && lc.data.value.start_at && lc.data.value.end_at) {
            cfg = { ...lc.data.value, source: 'lottery_config' };
          }
        } catch (e) { console.warn('[frontend config] lottery_config:', e.message); }

        // 2) Fallback: ediciones (si no hi ha config explícita al panel)
        if (!cfg) {
          try {
            const ed = await withTimeout(sb.from('ediciones')
              .select('fecha_inicio_inscripciones, fecha_fin_inscripciones, estado, anualidad')
              .order('anualidad', { ascending: false })
              .limit(10));
            if (!ed.error && ed.data && ed.data.length) {
              const ordre = ['abierta', 'en_curso', 'borrador', 'tancada', 'arxivada'];
              const sorted = [...ed.data].sort((a, b) => {
                const ai = ordre.indexOf(a.estado); const bi = ordre.indexOf(b.estado);
                return (ai === -1 ? 99 : ai) - (bi === -1 ? 99 : bi);
              });
              const candidate = sorted.find(e => e.fecha_inicio_inscripciones && e.fecha_fin_inscripciones);
              if (candidate) {
                cfg = {
                  start_at: candidate.fecha_inicio_inscripciones + 'T00:00:00',
                  end_at: candidate.fecha_fin_inscripciones + 'T23:59:59',
                  source: 'ediciones',
                  estado: candidate.estado,
                };
              }
            }
          } catch (e) { console.warn('[frontend config] ediciones:', e.message); }
        }

        if (cfg) setWindowCfg(cfg);
      } catch (e) { console.warn('[frontend config] exception:', e); }
      clearTimeout(safetyTimer);
      setWindowLoaded(true);
    })();
  }, []);
  return { overridesTick, windowCfg, windowLoaded };
};

// Decide if the form should be shown.
// IMPORTANT: si NO hi ha config, per defecte TANCAT (no es pot inscriure).
const computeWindowState = (cfg, loaded) => {
  if (!loaded) return { state: 'loading' };
  if (!cfg || !cfg.start_at || !cfg.end_at) return { state: 'no_config' };
  const now = Date.now();
  const start = new Date(cfg.start_at).getTime();
  const end = new Date(cfg.end_at).getTime();
  if (Number.isNaN(start) || Number.isNaN(end)) return { state: 'no_config' };
  if (now < start) return { state: 'before', start_at: cfg.start_at, end_at: cfg.end_at };
  if (now > end) return { state: 'after', start_at: cfg.start_at, end_at: cfg.end_at };
  return { state: 'open', start_at: cfg.start_at, end_at: cfg.end_at };
};

const PreinscriptionNotice = ({ lang, win }) => {
  const fmt = (iso) => {
    if (!iso) return '';
    const d = new Date(iso);
    return d.toLocaleString(lang === 'val' ? 'ca-ES' : 'es-ES', {
      day: 'numeric', month: 'long', year: 'numeric', hour: '2-digit', minute: '2-digit',
    });
  };
  let title, body, icon;
  if (win.state === 'before') {
    title = lang === 'val' ? 'Preinscripció encara no oberta' : 'Preinscripción aún no abierta';
    body = lang === 'val'
      ? `El formulari de preinscripció s'obrirà el ${fmt(win.start_at)} i estarà disponible fins al ${fmt(win.end_at)}.`
      : `El formulario de preinscripción se abrirá el ${fmt(win.start_at)} y estará disponible hasta el ${fmt(win.end_at)}.`;
    icon = '⏳';
  } else if (win.state === 'after') {
    title = lang === 'val' ? 'Període de preinscripció tancat' : 'Periodo de preinscripción cerrado';
    body = lang === 'val'
      ? `El termini va finalitzar el ${fmt(win.end_at)}. Si necessiteu informació, podeu contactar amb estiubenicarlo@gmail.com.`
      : `El plazo finalizó el ${fmt(win.end_at)}. Si necesitáis información, podéis contactar con estiubenicarlo@gmail.com.`;
    icon = '🔒';
  } else { // no_config
    title = lang === 'val' ? 'Preinscripcions no disponibles' : 'Preinscripciones no disponibles';
    body = lang === 'val'
      ? 'En aquests moments no hi ha cap edició oberta a la preinscripció. Si necessiteu informació, contacteu amb estiubenicarlo@gmail.com.'
      : 'En este momento no hay ninguna edición abierta a la preinscripción. Si necesitáis información, contactad con estiubenicarlo@gmail.com.';
    icon = 'ℹ';
  }
  return (
    <section className="block" id="inscribe">
      <div className="container">
        <div className="form-card" style={{ textAlign: 'center', padding: '60px 32px', maxWidth: 720, margin: '0 auto' }}>
          <div style={{ fontSize: 56, marginBottom: 14 }}>{icon}</div>
          <h2 className="section-title" style={{ marginBottom: 14 }}>{title}</h2>
          <p style={{ fontSize: 17, color: 'var(--ink-soft)', lineHeight: 1.55, maxWidth: 560, margin: '0 auto' }}>{body}</p>
        </div>
      </div>
    </section>
  );
};

const App = () => {
  const { overridesTick, windowCfg, windowLoaded } = useFrontendConfig();
  const winState = React.useMemo(() => computeWindowState(windowCfg, windowLoaded), [windowCfg, windowLoaded]);
  const [lang, setLangState] = React.useState(() => {
    try {
      const t = window.__TWEAKS || {};
      const saved = localStorage.getItem('ee_lang');
      return saved || t.lang || 'val';
    } catch (e) { return 'val'; }
  });
  const [editMode, setEditMode] = React.useState(false);

  const setLang = (l) => {
    setLangState(l);
    try { localStorage.setItem('ee_lang', l); } catch (e) {}
    try { window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { lang: l } }, '*'); } catch (e) {}
    document.documentElement.lang = l === 'val' ? 'ca' : 'es';
  };

  React.useEffect(() => {
    const onMsg = (e) => {
      const d = e.data || {};
      if (d.type === '__activate_edit_mode') setEditMode(true);
      else if (d.type === '__deactivate_edit_mode') setEditMode(false);
    };
    window.addEventListener('message', onMsg);
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch (e) {}
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const onSubmitted = () => {};

  React.useEffect(() => {
    document.documentElement.lang = lang === 'val' ? 'ca' : 'es';
  }, [lang]);

  // Render del formulari/notice
  let formOrNotice = null;
  if (winState.state === 'open') {
    formOrNotice = <Form lang={lang} onSubmitted={onSubmitted} />;
  } else if (winState.state !== 'loading') {
    formOrNotice = <PreinscriptionNotice lang={lang} win={winState} />;
  }

  return (
    <>
      <Nav lang={lang} setLang={setLang} winState={winState} />
      <Hero lang={lang} winState={winState} />
      <Audience lang={lang} />
      <Where lang={lang} />
      <When lang={lang} />
      <Schedule lang={lang} />
      <Prices lang={lang} />
      <HowTo lang={lang} />
      <Enrol lang={lang} />
      {formOrNotice}
      <Faq lang={lang} />
      <Footer lang={lang} />

      {editMode && (
        <div className="tweaks">
          <h4>Tweaks</h4>
          <div className="lang-toggle" style={{marginLeft: 0, width: '100%', justifyContent: 'stretch'}}>
            <button style={{flex: 1}} className={lang === 'val' ? 'active' : ''} onClick={() => setLang('val')}>Valencià</button>
            <button style={{flex: 1}} className={lang === 'es' ? 'active' : ''} onClick={() => setLang('es')}>Castellano</button>
          </div>
        </div>
      )}
    </>
  );
};

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