const { useState, useEffect, useMemo, useRef, createContext, useContext } = React;

function App() {
  const [lang, setLang] = useState('es');
  const [page, setPage] = useState('home');
  const [session, setSession] = useState(null);
  const [extraction, setExtraction] = useState(null);
  const [blueprints, setBlueprints] = useState([
    { id: 'bp-1', name: 'Citas médicas', fingerprint: 'a3f2b1c4d5e6f7a8', date: '2026-05-01', score: 87, domain: 'salud', sessions: 3, entities: 5, workflows: 2 },
    { id: 'bp-2', name: 'E-commerce premium', fingerprint: '8d7e6f5a4b3c2d1e', date: '2026-04-28', score: 92, domain: 'ecommerce', sessions: 5, entities: 8, workflows: 3 },
    { id: 'bp-3', name: 'Plataforma educativa', fingerprint: 'c9b8a7d6e5f4g3h2', date: '2026-04-15', score: 74, domain: 'educacion', sessions: 2, entities: 4, workflows: 1 },
  ]);
  const [modalBp, setModalBp] = useState(null);
  const [toasts, setToasts] = useState([]);

  const toast = (msg, type) => {
    const id = Date.now();
    setToasts(p => [...p, { id, msg, type }]);
    setTimeout(() => setToasts(p => p.filter(t => t.id !== id)), 3000);
  };

  const tt = (key) => window.t(key, lang);

  const handleStart = (idea, mode, domain) => {
    setSession({ id: 's-' + Date.now(), mode, domain, idea });
    setExtraction(null);
    setPage(mode === 'forense' ? 'forensic' : 'extraction');
    const modeLabel = mode === 'rapido' ? (lang === 'es' ? 'Rápido' : 'Fast') : mode === 'forense' ? (lang === 'es' ? 'Forense' : 'Forensic') : (lang === 'es' ? 'Estándar' : 'Standard');
    toast(tt('toast.sessionStarted') + modeLabel, 'success');
  };

  const handleExtractionDone = (data) => {
    setExtraction(data);
    toast((data.entities?.length || 0) + tt('toast.entitiesDetected'), 'success');
    setPage('blueprint');
  };

  const handleForensicDone = () => {
    setPage('extraction');
  };

  const handleBlueprintDone = (compiledData) => {
    const data = compiledData || extraction || {};
    const safeEntities = Array.isArray(data.entities) ? data.entities : (Array.isArray(extraction?.entities) ? extraction.entities : []);
    const safeCatalog = Array.isArray(data.catalog) ? data.catalog : (Array.isArray(data.workflows) ? data.workflows : (Array.isArray(extraction?.catalog) ? extraction.catalog : []));
    const newBp = {
      id: 'bp-' + Date.now(),
      name: session?.idea?.substring(0, 35) || (lang === 'es' ? 'Nuevo Blueprint' : 'New Blueprint'),
      fingerprint: Math.random().toString(36).substring(2, 10) + Math.random().toString(36).substring(2, 10),
      date: new Date().toISOString().split('T')[0],
      score: data.confidence || extraction?.confidence || 75,
      domain: session?.domain || 'general',
      sessions: 1,
      entities: safeEntities.length || 0,
      workflows: safeCatalog.length || 0
    };
    setBlueprints(p => [newBp, ...p]);
    setTimeout(() => {
      setSession(null);
      setExtraction(null);
      setPage('dashboard');
      toast(tt('toast.blueprintCompiled'), 'success');
    }, 100);
  };

  const handleDelete = (id) => {
    setBlueprints(p => p.filter(b => b.id !== id));
    toast(tt('toast.deleted'));
  };

  // ========== EXPOSICIÓN A ALMA Brain ==========
  // Mantenemos una referencia actualizada de handleStart
  const handleStartRef = useRef(handleStart);
  useEffect(() => {
    handleStartRef.current = handleStart;
  }, [handleStart]);

  // Al montar la app, exponemos la función de compilación y notificamos a ALMA Brain
  useEffect(() => {
    window.ALMA = window.ALMA || {};
    window.ALMA.triggerCompilation = (idea, mode, domain) => {
      if (handleStartRef.current) {
        handleStartRef.current(idea, mode, domain);
      }
    };
    // Emitir evento de que la app está lista
    window.dispatchEvent(new Event('alma-ready'));
    
    return () => {
      // Limpiar al desmontar (poco probable en esta SPA, pero por buena práctica)
      if (window.ALMA && window.ALMA.triggerCompilation) {
        delete window.ALMA.triggerCompilation;
      }
    };
  }, []);

  let content;
  if (page === 'home') content = <window.Home onStart={handleStart}/>;
  else if (page === 'extraction') content = <window.Extraction key={session?.id||'ext'} idea={session?.idea} domain={session?.domain} onComplete={handleExtractionDone} onBack={()=>{setPage('home');setSession(null);}}/>;
  else if (page === 'blueprint') content = <window.Blueprint extraction={extraction} session={session} onComplete={handleBlueprintDone} onBack={()=>setPage('extraction')}/>;
  else if (page === 'forensic') content = <window.Forensic key={session?.id||'forensic'} session={session} onComplete={handleForensicDone} onBack={()=>{setPage('home');setSession(null);}}/>;
  else if (page === 'dashboard') content = <window.Dashboard blueprints={blueprints} onView={setModalBp} onNew={()=>{setPage('home');setSession(null);}} onDelete={handleDelete}/>;
  else if (page === 'docs') content = <window.Docs/>;

  return (
    <window.LangContext.Provider value={{lang, setLang}}>
      <div className="min-h-screen bg-[#0a0a1a]">
        <window.Nav page={page} setPage={setPage}/>
        {content}
        <window.Toasts items={toasts}/>
        <window.Modal bp={modalBp} onClose={()=>setModalBp(null)}/>
      </div>
    </window.LangContext.Provider>
  );
}

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