/* ============================================================
   APP — shell, sidebar, header, routing, auth/session
   ============================================================ */

const GUEST_LIMIT = 15;

function initialsFrom(name) {
  const parts = (name || '').trim().split(/\s+/).filter(Boolean);
  if (!parts.length) return '?';
  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
}

function loadSession() {
  try {
    const s = JSON.parse(localStorage.getItem('lexly_session') || 'null');
    if (s && s.status && s.user) return s;
  } catch (e) {}
  return null;
}
function loadGuestQueries() {
  const n = parseInt(localStorage.getItem('lexly_guest_queries') || '0', 10);
  return isNaN(n) ? 0 : n;
}

/* Nav groups (labels resolved via t()) */
const NAV_TOOLS = [
  { id: 'inicio',   labelKey: 'nav.inicio',   icon: 'home' },
  { id: 'chat',     labelKey: 'nav.chat',     icon: 'chat' },
  { id: 'contract', labelKey: 'nav.contract', icon: 'contract' },
  { id: 'review',   labelKey: 'nav.review',   icon: 'review' },
  { id: 'alerts',   labelKey: 'nav.alerts',   icon: 'alerts', badge: 1 },
  { id: 'risks',    labelKey: 'nav.risks',    icon: 'shield' },
  { id: 'hacienda', labelKey: 'nav.hacienda', icon: 'mail' },
];
const NAV_WORKSPACE = [
  { id: 'library', labelKey: 'nav.library', icon: 'book' },
  { id: 'history', labelKey: 'nav.history', icon: 'history' },
  { id: 'settings', labelKey: 'nav.settings', icon: 'settings' },
];

function initialAuthMode() {
  if (loadSession()) return null;
  try {
    const p = new URLSearchParams(location.search).get('auth');
    if (p === 'login' || p === 'register') return p;
  } catch (e) {}
  return 'welcome';
}

/* Activación del plan al volver del pago de Stripe.
   Los Payment Links redirigen tras el pago a app.html?paid=<plan>.
   NOTA: validación provisional sin backend — el control robusto
   llegará con webhooks de Stripe + base de datos (Supabase).

   *** PAGOS EN PREPARACIÓN ***
   Mientras los pagos no estén activos, esta función está desactivada
   para que nadie pueda activarse un plan premium escribiendo ?paid= en la URL.
   Para reactivar el cobro: poner PAGOS_ACTIVOS = true. */
const PAGOS_ACTIVOS = false;
function applyPaidParam() {
  if (!PAGOS_ACTIVOS) return null;
  try {
    const params = new URLSearchParams(location.search);
    const paid = params.get('paid');
    if (paid && ['particular', 'autonomo', 'pyme'].includes(paid)) {
      localStorage.setItem('lexly_plan', paid);
      // Limpiar el parámetro de la URL sin recargar.
      params.delete('paid');
      const clean = location.pathname + (params.toString() ? '?' + params.toString() : '');
      history.replaceState(null, '', clean);
      return paid;
    }
  } catch (e) {}
  return null;
}
const PAID_ON_LOAD = applyPaidParam();

function App() {
  const [active, setActive] = useState('inicio');
  const [menuOpen, setMenuOpen] = useState(false);
  const [session, setSession] = useState(loadSession);
  const [authMode, setAuthMode] = useState(initialAuthMode);
  const [paidWelcome, setPaidWelcome] = useState(PAID_ON_LOAD);
  const [guestQueries, setGuestQueries] = useState(loadGuestQueries);
  const [userMenu, setUserMenu] = useState(false);

  // Cerrar el menú de usuario al hacer clic fuera de él (sin usar una capa que bloquee los clics).
  useEffect(() => {
    if (!userMenu) return;
    const onDocClick = (e) => {
      if (!e.target.closest('.user-wrap')) setUserMenu(false);
    };
    // Se registra en el siguiente tick para no capturar el propio clic que abre el menú.
    const id = setTimeout(() => document.addEventListener('click', onDocClick), 0);
    return () => { clearTimeout(id); document.removeEventListener('click', onDocClick); };
  }, [userMenu]);
  const [lang, setLang, t] = useLang();
  const [showOnboarding, setShowOnboarding] = useState(false);

  // open-from-history / template tokens
  const [chatToOpen, setChatToOpen] = useState(null);
  const [chatSeed, setChatSeed] = useState(null);
  const [seedNonce, setSeedNonce] = useState(0);
  const [contractPreset, setContractPreset] = useState(null);
  const [contractToOpen, setContractToOpen] = useState(null);

  const isGuest = session?.status === 'guest';
  const isRegistered = session?.status === 'registered';
  // Acceso a funciones premium (riesgos, hacienda) según el plan de pago.
  const canRisks = lxCanUse(session, 'risks').allowed;
  const canHacienda = lxCanUse(session, 'hacienda').allowed;
  const user = session?.user || { name: 'Invitado', email: '', activity: 'particular' };

  // Onboarding: solo para usuarios registrados que no lo han completado.
  useEffect(() => {
    if (session?.status === 'registered' && typeof lxOnboarded === 'function' && !lxOnboarded()) {
      setShowOnboarding(true);
    } else {
      setShowOnboarding(false);
    }
  }, [session]);

  const persistSession = (s) => {
    setSession(s);
    try { localStorage.setItem('lexly_session', JSON.stringify(s)); } catch (e) {}
  };

  const handleGuest = () => {
    persistSession({ status: 'guest', user: { name: 'Invitado', email: '', activity: 'particular' } });
    setAuthMode(null);
  };
  const handleAuthenticated = (u) => {
    persistSession({ status: 'registered', user: u });
    setGuestQueries(0);
    try { localStorage.setItem('lexly_guest_queries', '0'); } catch (e) {}
    setAuthMode(null);
    setActive('inicio');
  };
  const openAuth = (mode) => setAuthMode(mode);
  const closeAuth = () => setAuthMode(null);

  const logout = () => {
    setUserMenu(false);
    try { localStorage.removeItem('lexly_session'); } catch (e) {}
    setSession(null);
    setAuthMode('welcome');
  };

  const incGuestQueries = () => {
    setGuestQueries(n => {
      const next = n + 1;
      try { localStorage.setItem('lexly_guest_queries', String(next)); } catch (e) {}
      return next;
    });
  };

  const saveUser = (next) => {
    const s = { status: session?.status || 'registered', user: next };
    persistSession(s);
    if (s.status === 'registered') {
      const all = loadAccounts();
      const existing = all[next.email.toLowerCase()] || {};
      persistAccount({ ...existing, ...next });
    }
  };

  const go = (id) => { setActive(id); setMenuOpen(false); };

  // workspace navigation helpers
  const openChat = (conv) => { setChatToOpen(conv || null); setChatSeed(null); setActive('chat'); setMenuOpen(false); };
  const openChatSeed = (text) => { setChatToOpen(null); setChatSeed(text); setSeedNonce(n => n + 1); setActive('chat'); setMenuOpen(false); };
  const openContractPreset = (tipo) => { setContractToOpen(null); setContractPreset({ tipo }); setActive('contract'); setMenuOpen(false); };
  const openContract = (contractObj) => {
    if (contractObj && contractObj.content) { setContractToOpen(contractObj); setContractPreset(null); }
    else { setContractToOpen(null); setContractPreset(null); }
    setActive('contract'); setMenuOpen(false);
  };
  const useTemplate = (doc) => {
    if (isGuest) { openAuth('register'); return; }
    setContractToOpen(null);
    setContractPreset({ tipo: doc.type });
    setActive('contract'); setMenuOpen(false);
  };

  // Logo (arriba a la izquierda): registrado → chat; no registrado → landing
  const onLogoClick = () => {
    if (isRegistered) { openChat(); }
    else { window.location.href = 'Lexly Landing.html'; }
  };

  const TITLES = {
    inicio:   { h: t('title.inicio'),   s: t('sub.inicio') },
    chat:     { h: t('nav.chat'),       s: t('sub.chat') },
    contract: { h: t('nav.contract'),   s: t('sub.contract') },
    review:   { h: t('nav.review'),     s: t('sub.review') },
    alerts:   { h: t('nav.alerts'),     s: t('sub.alerts') },
    library:  { h: t('title.library'),  s: t('sub.library') },
    history:  { h: t('title.history'),  s: t('sub.history') },
    risks:    { h: t('nav.risks'),       s: 'Revisión preventiva de tu situación fiscal' },
    hacienda: { h: t('nav.hacienda'),    s: 'Entiende y responde a las cartas de Hacienda' },
    settings: { h: t('nav.settings'),   s: t('sub.settings') },
    privacy:  { h: 'Privacidad y mis datos', s: 'Tus datos, bajo tu control · RGPD' },
  };
  const ttl = TITLES[active] || TITLES.inicio;

  const renderNavItem = (n) => {
    const locked = (isGuest && (n.id === 'contract' || n.id === 'review'))
      || (n.id === 'risks' && !canRisks)
      || (n.id === 'hacienda' && !canHacienda);
    return (
      <button key={n.id} className={'nav-item' + (active === n.id ? ' active' : '')} onClick={() => n.id === 'chat' ? openChat() : n.id === 'contract' ? openContract() : go(n.id)}>
        <Icon name={n.icon} size={17} />
        {t(n.labelKey)}
        {locked && <Icon name="shield" size={13} className="nav-lock" />}
        {!locked && n.badge && isRegistered && <span className="nav-badge">{n.badge}</span>}
      </button>
    );
  };

  // content remount token
  const token = active === 'chat' ? ((chatToOpen?.id || 'new') + ':' + seedNonce)
    : active === 'contract' ? (contractToOpen?.id || (contractPreset ? 'tpl-' + contractPreset.tipo : 'new'))
    : '';

  return (
    <div className={'app' + (menuOpen ? ' menu-open' : '')}>
      <div className="scrim" onClick={() => setMenuOpen(false)}></div>

      {/* Sidebar */}
      <aside className="sidebar">
        <button className="brand" onClick={onLogoClick} title={isRegistered ? (lang === 'ca' ? 'Anar al xat' : 'Ir al chat') : (lang === 'ca' ? 'Anar a la pàgina d’inici' : 'Ir a la página de inicio')}>
          <div className="brand-mark"><Icon name="scale" size={20} className="brand-ic" stroke={1.8} /></div>
          <div>
            <div className="brand-name">Lex<b>ly</b></div>
            <div className="brand-sub">Legal · IA</div>
          </div>
        </button>

        <div className="nav-group-label">{t('group.tools')}</div>
        <nav className="nav">{NAV_TOOLS.map(renderNavItem)}</nav>

        <div className="nav-group-label">{t('group.workspace')}</div>
        <nav className="nav">{NAV_WORKSPACE.map(renderNavItem)}</nav>

        <div className="sidebar-foot">
          {isGuest ? (
            <div className="upsell">
              <h4>{lang === 'ca' ? 'Estàs en mode convidat' : 'Estás en modo invitado'}</h4>
              <p>{Math.max(0, GUEST_LIMIT - guestQueries)} {lang === 'ca' ? `de ${GUEST_LIMIT} consultes gratuïtes restants.` : `de ${GUEST_LIMIT} consultas gratuitas restantes.`}</p>
              <button onClick={() => openAuth('register')}>{lang === 'ca' ? 'Crear un compte gratis' : 'Crear cuenta gratis'}</button>
            </div>
          ) : lxCurrentPlan(session) === 'free' ? (
            <div className="upsell">
              <h4>{lang === 'ca' ? 'Millora el teu pla' : 'Mejora tu plan'}</h4>
              <p>{lang === 'ca' ? 'Desbloqueja consultes il·limitades, anàlisi de riscos i assistent amb Hisenda.' : 'Desbloquea consultas ilimitadas, análisis de riesgos y asistente con Hacienda.'}</p>
              <button onClick={() => go('settings')}>{lang === 'ca' ? 'Veure plans' : 'Ver planes'}</button>
            </div>
          ) : null}
        </div>
        <style>{`
          .brand-mark .brand-ic { color: #fff; }
          .nav-lock { margin-left: auto; color: var(--text-4) !important; }
          .brand { width: 100%; text-align: left; cursor: pointer; border-radius: 10px; transition: opacity .15s; }
          .brand:hover { opacity: 0.82; }
          .brand:focus-visible { outline: 2px solid var(--violet-line); outline-offset: 2px; }
          .mobile-brand { cursor: pointer; display: inline-flex; align-items: center; padding: 4px; }
          .mobile-brand:active { opacity: 0.7; }
        `}</style>
      </aside>

      {/* Main */}
      <div className="main">
        {paidWelcome && (
          <div className="paid-banner">
            <Icon name="check" size={16} />
            <span>¡Tu {lxPlanLabel(paidWelcome, lang)} está activo! Gracias por confiar en Lexly.</span>
            <button onClick={() => setPaidWelcome(null)} aria-label="Cerrar">✕</button>
            <style>{`
              .paid-banner { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: rgba(34,197,94,0.12); border-bottom: 1px solid rgba(34,197,94,0.3); font-size: 13.5px; color: #4ade80; font-weight: 500; }
              .paid-banner .ic { flex-shrink: 0; }
              .paid-banner span { flex: 1; }
              .paid-banner button { background: none; border: none; color: #4ade80; cursor: pointer; font-size: 14px; padding: 2px 6px; }
            `}</style>
          </div>
        )}
        {/* Mobile top bar */}
        <div className="mobile-bar">
          <button className="menu-btn" onClick={() => setMenuOpen(true)} aria-label="Menú"><Icon name="menu" size={19} /></button>
          <button className="mobile-brand" onClick={onLogoClick}><span className="brand-name">Lex<b style={{ color: 'var(--violet-soft)' }}>ly</b></span></button>
          <div style={{ marginLeft: 'auto' }} className={'plan-badge' + (isGuest ? ' guest' : '')}><span className="dot"></span>{isGuest ? t('header.guest') : lxPlanLabel(lxCurrentPlan(session), lang)}</div>
        </div>

        {/* Header */}
        <header className="header">
          <div className="header-title">
            <h1>{ttl.h}</h1>
            <p>{ttl.s}</p>
          </div>
          <div className="header-right">
            <LangToggle lang={lang} setLang={setLang} />
            {isGuest ? (
              <button className="btn btn-primary header-cta" onClick={() => openAuth('register')}>
                <Icon name="sparkle" size={15} /> {lang === 'ca' ? 'Crear compte' : 'Crear cuenta'}
              </button>
            ) : (
              <div className="plan-badge"><span className="dot"></span>{lxPlanLabel(lxCurrentPlan(session), lang)}</div>
            )}
            <div className="user-wrap">
              <button className="user-chip" onClick={() => setUserMenu(v => !v)}>
                <span className="uname">{user.name}</span>
                <div className={'avatar-sm' + (isGuest ? ' guest' : '')}>{isGuest ? <Icon name="user" size={15} /> : initialsFrom(user.name)}</div>
              </button>
              {userMenu && (
                <div className="user-menu fade-up" onClick={(e) => e.stopPropagation()}>
                    <div className="um-head">
                      <div className={'avatar-sm' + (isGuest ? ' guest' : '')}>{isGuest ? <Icon name="user" size={15} /> : initialsFrom(user.name)}</div>
                      <div className="um-meta">
                        <strong>{user.name}</strong>
                        <span>{isGuest ? (lang === 'ca' ? 'Mode convidat' : 'Modo invitado') : user.email}</span>
                      </div>
                    </div>
                    {isGuest ? (
                      <>
                        <button className="um-item" onClick={() => { setUserMenu(false); openAuth('register'); }}><Icon name="sparkle" size={15} /> {lang === 'ca' ? 'Crear un compte gratis' : 'Crear cuenta gratis'}</button>
                        <button className="um-item" onClick={() => { setUserMenu(false); openAuth('login'); }}><Icon name="user" size={15} /> {lang === 'ca' ? 'Iniciar sessió' : 'Iniciar sesión'}</button>
                      </>
                    ) : (
                      <>
                        <button className="um-item" onClick={() => { setUserMenu(false); go('settings'); }}><Icon name="settings" size={15} /> {t('nav.settings')}</button>
                        <button className="um-item danger" onClick={logout}><Icon name="arrowRight" size={15} /> {lang === 'ca' ? 'Tancar sessió' : 'Cerrar sesión'}</button>
                      </>
                    )}
                    <a className="um-item" href="como-funciona.html" target="_blank" rel="noopener" onClick={() => setUserMenu(false)}><Icon name="shield" size={15} /> {t('header.howItWorks')}</a>
                </div>
              )}
            </div>
          </div>
        </header>

        {/* Content */}
        <div className="content" key={active + ':' + token + ':' + (session?.status || 'none')}>
          {active === 'inicio' && (
            <Dashboard user={user} t={t} lang={lang} onGo={go} onOpenChat={openChat} onOpenContract={openContract} />
          )}
          {active === 'chat' && (
            <ChatLegal
              isGuest={isGuest}
              guestQueries={guestQueries}
              guestLimit={GUEST_LIMIT}
              onGuestQuery={incGuestQueries}
              onRegister={() => openAuth('register')}
              initialConversation={chatToOpen}
              initialInput={chatSeed}
            />
          )}
          {active === 'contract' && (isRegistered
            ? <GenerarContrato preset={contractPreset} initialContract={contractToOpen} session={session} onRegister={() => openAuth('register')} onGoSettings={() => go('settings')} />
            : <LockedFeature title="Generar contrato" desc="La generación de contratos está disponible para usuarios registrados. Crea tu cuenta gratuita y redacta contratos conformes a la ley española en segundos." onRegister={() => openAuth('register')} />)}
          {active === 'review' && (isRegistered
            ? <RevisarDocumento />
            : <LockedFeature title="Revisar documento" desc="El análisis de documentos está disponible para usuarios registrados. Crea tu cuenta gratuita para detectar cláusulas problemáticas antes de firmar." onRegister={() => openAuth('register')} />)}
          {active === 'alerts' && <AlertasFiscales />}
          {active === 'risks' && (!isRegistered
            ? <LockedFeature title="Análisis de riesgos" desc="El análisis de riesgos fiscales está disponible para usuarios registrados. Crea tu cuenta gratuita para empezar." onRegister={() => openAuth('register')} />
            : canRisks
            ? <Riesgos onAskInChat={openChatSeed} onGenerateDoc={openContractPreset} onGoPrivacy={() => go('privacy')} />
            : <PremiumFeature title="Análisis de riesgos" desc="El análisis de riesgos fiscales forma parte del plan Autónomo. Detecta de forma preventiva los puntos de tu situación que conviene revisar." onUpgrade={() => go('settings')} />)}
          {active === 'hacienda' && (!isRegistered
            ? <LockedFeature title="Asistente con Hacienda" desc="El asistente para notificaciones de la AEAT está disponible para usuarios registrados. Crea tu cuenta gratuita para empezar." onRegister={() => openAuth('register')} />
            : canHacienda
            ? <AsistenteHacienda />
            : <PremiumFeature title="Asistente con Hacienda" desc="El asistente para entender y responder a las cartas de Hacienda forma parte del plan Autónomo. Te ayuda en el momento de mayor urgencia." onUpgrade={() => go('settings')} />)}
          {active === 'library' && <BibliotecaLegal t={t} lang={lang} isGuest={isGuest} onUseTemplate={useTemplate} onRegister={() => openAuth('register')} />}
          {active === 'history' && <Historial t={t} lang={lang} onOpenChat={openChat} onOpenContract={openContract} />}
          {active === 'settings' && <Configuracion user={user} onSave={saveUser} isGuest={isGuest} session={session} onRegister={() => openAuth('register')} onOpenPrivacy={() => go('privacy')} />}
          {active === 'privacy' && <PrivacyData onBack={() => go('settings')} />}
        </div>

        {active !== 'chat' && (
          <div className="app-footer">
            <div className="trust-badges">
              <span className="tbadge"><Icon name="lock" size={13} /> {t('badge.encrypted')}</span>
              <span className="tbadge"><Icon name="shield" size={13} /> {t('badge.gdpr')}</span>
              <span className="tbadge"><Icon name="checkCircle" size={13} /> {t('badge.law')}</span>
            </div>
            <div className="footer-disc-text">{t('common.disclaimer')}</div>
          </div>
        )}
      </div>

      {authMode && (
        <AuthModal
          mode={authMode}
          setMode={setAuthMode}
          onGuest={handleGuest}
          onAuthenticated={handleAuthenticated}
          onClose={closeAuth}
          dismissable={!!session}
        />
      )}

      {showOnboarding && isRegistered && !authMode && (
        <Onboarding user={user} onClose={() => setShowOnboarding(false)} />
      )}

      <style>{`
        .header-cta { padding: 8px 14px; font-size: 13px; }
        .plan-badge.guest { background: rgba(255,255,255,0.05); border-color: var(--line-2); color: var(--text-2); }
        .plan-badge.guest .dot { background: var(--text-3); box-shadow: none; }
        .avatar-sm.guest { background: rgba(255,255,255,0.05); color: var(--text-2); }
        .user-wrap { position: relative; z-index: 9000; }
        .user-chip { position: relative; z-index: 9001; }
        .user-menu {
          position: absolute; top: calc(100% + 8px); right: 0; z-index: 9999;
          width: 232px; background: var(--surface-2); border: 1px solid var(--line-2);
          border-radius: 13px; box-shadow: var(--shadow-lg); padding: 7px;
          isolation: isolate;
        }
        .um-head { display: flex; align-items: center; gap: 10px; padding: 9px 9px 11px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
        .um-meta { min-width: 0; }
        .um-meta strong { display: block; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .um-meta span { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
        .um-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 8px; font-size: 13px; color: var(--text-2); font-weight: 500; transition: background .14s, color .14s; cursor: pointer; position: relative; z-index: 1; background: transparent; border: none; }
        .um-item .ic { color: var(--text-3); }
        .um-item:hover { background: rgba(255,255,255,0.05); color: var(--text); }
        .um-item.danger:hover { color: var(--red); }
        .um-item.danger:hover .ic { color: var(--red); }

        /* language toggle */
        .lang-toggle { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 9px; padding: 2px; }
        .lang-toggle button { padding: 4px 9px; border-radius: 7px; font-size: 11.5px; font-weight: 600; color: var(--text-3); transition: color .15s, background .15s; }
        .lang-toggle button.on { background: var(--violet-dim); color: var(--violet-soft); }
        .lang-toggle button:not(.on):hover { color: var(--text); }

        /* app footer with trust badges */
        .app-footer { flex-shrink: 0; border-top: 1px solid var(--line); padding: 13px 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
        .trust-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .tbadge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: var(--text-3); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 4px 11px; }
        .tbadge .ic { color: var(--green); }
        .footer-disc-text { margin-left: auto; font-size: 11px; color: var(--text-4); }

        @media (max-width: 860px) { .header-cta span { display: inline; } .header-cta { padding: 8px 12px; } .lang-toggle { display: none; } }
        @media (max-width: 600px) { .header-cta .ic { display: none; } .footer-disc-text { display: none; } }
      `}</style>
    </div>
  );
}

function LangToggle({ lang, setLang }) {
  return (
    <div className="lang-toggle" role="group" aria-label="Idioma">
      <button className={lang === 'es' ? 'on' : ''} onClick={() => setLang('es')}>ES</button>
      <button className={lang === 'ca' ? 'on' : ''} onClick={() => setLang('ca')}>CA</button>
    </div>
  );
}

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