// app.tsx — root Jean-Claude application

const { useState: aUseState, useEffect: aUseEffect, useMemo: aUseMemo, useCallback: aUseCallback } = (window as any).React;

// REGS_DATA and STRINGS_DATA come from src/data.tsx attached to window.

function makeT(lang: string) {
  const STRINGS = (window as any).STRINGS_DATA || {};
  return (key: string) => {
    const dict = STRINGS[lang] || STRINGS.en || {};
    return dict[key] || (STRINGS.en && STRINGS.en[key]) || key;
  };
}

const DEFAULT_SETTINGS: UISettings = {
  language: 'en',
  satireDial: 80,
  storage: 'local',
  citizenship: 'FR',
  vonIntrusion: 'normal',
  showVonOnLoad: false,
};
const DEFAULT_PROVIDER: ProviderConfig = {
  provider: 'openai',
  apiKey: '',
  model: 'gpt-4o-mini',
};

function App() {
  const Util = (window as any).Util;
  const Components = (window as any).Components;
  const Cookie = (window as any).Cookie;
  const Settings = (window as any).Settings;
  const VonBot = (window as any).VonBot;
  const Pages = (window as any).Pages;
  const Chat = (window as any).Chat;
  const Seed = (window as any).Seed;

  // Initial state
  const persisted = Util.loadState({ settings: DEFAULT_SETTINGS, providerCfg: DEFAULT_PROVIDER, conversations: Seed.SEED_CONVOS, activeConvo: Seed.SEED_CONVOS[0]?.id, hasAcceptedCookies: false });
  const [settings, setSettings] = aUseState<UISettings>(persisted.settings);
  const [providerCfg, setProviderCfg] = aUseState<ProviderConfig>(persisted.providerCfg);
  const [conversations, setConversations] = aUseState<JCConversation[]>(persisted.conversations || Seed.SEED_CONVOS);
  const [activeConvoId, setActiveConvoId] = aUseState<string>(persisted.activeConvo || Seed.SEED_CONVOS[0]?.id);
  const [hasAcceptedCookies, setHasAcceptedCookies] = aUseState<boolean>(!!persisted.hasAcceptedCookies);

  const [showCookies, setShowCookies] = aUseState<boolean>(!persisted.hasAcceptedCookies);
  const [showPartners, setShowPartners] = aUseState(false);
  const [showSettings, setShowSettings] = aUseState(false);
  const [vonOpen, setVonOpen] = aUseState(false);
  const [route, setRoute] = aUseState<string>(window.location.hash.slice(1) || 'landing');

  // Persist on changes
  aUseEffect(() => {
    Util.saveState({ settings, providerCfg, conversations, activeConvo: activeConvoId, hasAcceptedCookies }, settings.storage);
  }, [settings, providerCfg, conversations, activeConvoId, hasAcceptedCookies]);

  // Hash routing
  aUseEffect(() => {
    const onHash = () => setRoute(window.location.hash.slice(1) || 'landing');
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const navigate = (r: string) => { window.location.hash = r; };

  const t = aUseMemo(() => makeT(settings.language), [settings.language]);

  const activeConvo = conversations.find((c: JCConversation) => c.id === activeConvoId) || conversations[0];

  const onUpdateConvo = (c: JCConversation) => {
    setConversations(conversations.map((x: JCConversation) => x.id === c.id ? c : x));
  };
  const onNewConvo = () => {
    const c: JCConversation = {
      id: 'c-' + Util.uid(),
      title: 'New consultation',
      messages: [],
      createdAt: Date.now(),
      status: 'awaiting_consent',
    };
    setConversations([c, ...conversations]);
    setActiveConvoId(c.id);
    navigate('chat');
  };

  const handleAcceptCookies = () => { setHasAcceptedCookies(true); setShowCookies(false); setShowPartners(false); };
  const handleRejectCookies = () => {
    alert("Acknowledged. Note that essential cookies remain set pursuant to ePrivacy Art. 5(3) carve-out for strictly necessary processing. The European Onion thanks you for your reflective participation.");
    setHasAcceptedCookies(true); setShowCookies(false); setShowPartners(false);
  };
  const handleCustomize = () => { setShowPartners(true); };

  // 404 route handling — anything we don't know is "Ukraine"
  const KNOWN_ROUTES = ['landing', 'chat', 'audit', 'compliance', 'carbon', 'subsidies', 'settings'];
  const isKnown = KNOWN_ROUTES.includes(route);

  // Render
  if (route === 'landing') {
    return (
      <>
        <Pages.LandingPage onEnter={() => navigate('chat')} t={t}/>
        {!hasAcceptedCookies && showCookies && (
          <Cookie.CookieBanner
            onAccept={handleAcceptCookies}
            onReject={handleRejectCookies}
            onCustomize={handleCustomize}
            t={t}
          />
        )}
        {showPartners && (
          <Cookie.PartnersModal
            onClose={() => setShowPartners(false)}
            onAcceptAll={handleAcceptCookies}
            onRejectAll={handleRejectCookies}
            t={t}
          />
        )}
      </>
    );
  }

  if (!isKnown) {
    return <Pages.NotFoundPage onHome={() => navigate('landing')}/>;
  }

  // Authenticated app shell
  return (
    <div className="jc-app">
      <Header settings={settings} t={t} onSettings={() => setShowSettings(true)} onLanguage={() => setShowSettings(true)}/>
      <ComplianceStrip t={t}/>

      <div className="jc-main">
        <SidebarLeft
          conversations={conversations}
          activeId={activeConvoId}
          onSelect={(id: string) => { setActiveConvoId(id); navigate('chat'); }}
          onNew={onNewConvo}
          route={route}
          onNav={navigate}
          t={t}
        />

        <div style={{ minWidth: 0, display: 'flex', flexDirection: 'column' }}>
          {route === 'chat' && activeConvo && (
            <Chat.ChatPage
              conversation={activeConvo}
              settings={settings}
              providerCfg={providerCfg}
              onUpdateConvo={onUpdateConvo}
              t={t}
            />
          )}
          {route === 'audit' && <Pages.AuditLogPage conversations={conversations} settings={settings} t={t}/>}
          {route === 'compliance' && <Pages.ComplianceCenterPage conversations={conversations} t={t}/>}
          {route === 'carbon' && <Pages.CarbonPage conversations={conversations} t={t}/>}
          {route === 'subsidies' && <Pages.SubsidiesPage t={t}/>}
          {route === 'settings' && <SettingsPage onOpen={() => setShowSettings(true)} settings={settings} providerCfg={providerCfg} onClearAll={() => { Util.clearAllState(); window.location.reload(); }}/>}
        </div>

        {route === 'chat' && (
          <SidebarRight
            settings={settings}
            providerCfg={providerCfg}
            conversation={activeConvo}
            t={t}
          />
        )}
      </div>

      <Footer t={t}/>

      {/* Floating bits */}
      {!hasAcceptedCookies && showCookies && (
        <Cookie.CookieBanner onAccept={handleAcceptCookies} onReject={handleRejectCookies} onCustomize={handleCustomize} t={t}/>
      )}
      {showPartners && (
        <Cookie.PartnersModal onClose={() => setShowPartners(false)} onAcceptAll={handleAcceptCookies} onRejectAll={handleRejectCookies} t={t}/>
      )}
      {showSettings && (
        <Settings.SettingsModal
          onClose={() => setShowSettings(false)}
          settings={settings}
          onSave={setSettings}
          providerCfg={providerCfg}
          onProviderSave={setProviderCfg}
          onClearKey={() => setProviderCfg({ ...providerCfg, apiKey: '' })}
          onClearAll={() => { Util.clearAllState(); window.location.reload(); }}
          t={t}
        />
      )}
      <VonBot.VonDerBot
        open={vonOpen}
        onOpen={() => setVonOpen(true)}
        onClose={() => setVonOpen(false)}
        providerCfg={providerCfg}
        settings={settings}
        t={t}
      />
    </div>
  );
}

// ============= Header =============
function Header({ settings, t, onSettings, onLanguage }: any) {
  const Components = (window as any).Components;
  const Util = (window as any).Util;
  return (
    <header className="jc-header">
      <div className="jc-header-logo">
        <Components.EOOnionLogo size={42}/>
        <div>
          <div className="jc-brand-name">Jean-Claude — <em style={{ fontWeight: 400, fontSize: 14 }}>{t('tagline')}</em></div>
          <span className="jc-header-pill" style={{ marginTop: 4 }}>{t('betaPhase')}</span>
        </div>
      </div>
      <div className="jc-header-spacer"/>
      <span className="jc-compliance-badge">🛡 {t('complianceBadge')}</span>
      <button className="jc-bell" onClick={() => alert('27 pending notifications. All require your prior consent before display, pursuant to GDPR Art. 6(1)(a).')}>
        🔔
        <span className="jc-bell-badge">27</span>
      </button>
      <button className="jc-lang-button" onClick={onLanguage}>
        <span style={{ fontFamily: 'monospace', fontWeight: 600 }}>{settings.language.toUpperCase()}</span> ▾
      </button>
      <button className="jc-help-btn" onClick={onSettings} title="Settings">⚙</button>
      <div className="jc-avatar-frame" title={Util.countryName(settings.citizenship)}>
        {settings.citizenship}
        <span className="jc-avatar-flag" style={{ background: '#003399' }}/>
      </div>
    </header>
  );
}

// ============= Compliance Strip =============
function ComplianceStrip({ t }: any) {
  return (
    <div className="jc-strip">
      <span className="jc-strip-item ok">{t('hosting')}</span>
      <span className="jc-strip-item ok">{t('subjectToAct')}</span>
      <span className="jc-strip-item ok">{t('gdprByDesign')}</span>
      <span className="jc-strip-item ok">{t('available24')}</span>
      <span className="jc-strip-item ok">{t('ceMarked')}</span>
      <span className="jc-strip-item ok">{t('accessibilityEN')}</span>
    </div>
  );
}

// ============= Left Sidebar =============
function SidebarLeft({ conversations, activeId, onSelect, onNew, route, onNav, t }: any) {
  const Util = (window as any).Util;
  const Components = (window as any).Components;
  const statusChip: Record<string, { cls: string; label: string }> = {
    awaiting_consent: { cls: 'jc-status-amber', label: 'Requires consent' },
    awaiting_assessment: { cls: 'jc-status-amber', label: 'Awaiting assessment' },
    pending_dpo: { cls: 'jc-status-red', label: 'High Risk (AI Act Annex III)' },
    under_consultation: { cls: 'jc-status-amber', label: 'Under consultation' },
    compliant: { cls: 'jc-status-green', label: 'Compliant' },
  };

  return (
    <aside className="jc-sidebar-left">
      <div className="jc-card" style={{ flex: '0 0 auto' }}>
        <div className="jc-convo-header">
          <span className="jc-convo-title">{t('conversations')}</span>
          <button className="jc-new-btn" onClick={onNew}>+ {t('newChat')}</button>
        </div>
        <div className="jc-convo-list">
          {conversations.map((c: JCConversation) => {
            const sc = c.status ? statusChip[c.status] : null;
            const sub = c.status === 'awaiting_consent' ? 'Awaiting moderation' :
              c.status === 'awaiting_assessment' ? `Under legal review — Day 14/30` :
              c.status === 'pending_dpo' ? 'Pending DPO approval' :
              c.status === 'under_consultation' ? 'Under consultation with EDPS' :
              c.status === 'compliant' ? 'Completed' : '';
            return (
              <div
                key={c.id}
                className={`jc-convo-item ${c.id === activeId && route === 'chat' ? 'active' : ''}`}
                onClick={() => onSelect(c.id)}
              >
                <div className="jc-convo-item-title">
                  {c.title}
                  <span className="jc-convo-item-time">{Util.fmtRelative(c.createdAt)}</span>
                </div>
                {sub && <div className="jc-convo-item-sub">{sub}</div>}
                {sc && <span className={`jc-convo-status ${sc.cls}`}>{sc.label}</span>}
              </div>
            );
          })}
        </div>

        <div className="jc-nav">
          <button className={`jc-nav-item ${route === 'chat' ? 'active' : ''}`} onClick={() => onNav('chat')}>
            <span>💬</span> {t('chat')}
          </button>
          <button className="jc-nav-item" onClick={() => alert('Projects feature is currently FROZEN pending pre-clearance by the Comité d\'éthique numérique. Estimated unfreeze: indefinite.')}>
            <span>📁</span> {t('projects')} <span className="jc-pill jc-pill-info">{t('projectsStatus')}</span>
          </button>
          <button className="jc-nav-item" onClick={() => alert('Artifact registry is fully compliant. No artifacts are presently registered.')}>
            <span>📎</span> {t('artifacts')} <span className="jc-pill jc-pill-green">{t('artifactsStatus')}</span>
          </button>
          <button className={`jc-nav-item ${route === 'compliance' ? 'active' : ''}`} onClick={() => onNav('compliance')}>
            <span>🛡</span> {t('complianceCenter')} <span className="jc-pill jc-pill-info">{t('complianceCenterBadge')}</span>
          </button>
          <button className={`jc-nav-item ${route === 'audit' ? 'active' : ''}`} onClick={() => onNav('audit')}>
            <span>📋</span> {t('auditLog')} <span className="jc-pill jc-pill-warn">{t('auditLogBadge')}</span>
          </button>
          <button className={`jc-nav-item ${route === 'carbon' ? 'active' : ''}`} onClick={() => onNav('carbon')}>
            <span>🌿</span> {t('carbonFootprint')}
          </button>
          <button className={`jc-nav-item ${route === 'subsidies' ? 'active' : ''}`} onClick={() => onNav('subsidies')}>
            <span>€</span> {t('subsidies')}
          </button>
          <button className={`jc-nav-item ${route === 'settings' ? 'active' : ''}`} onClick={() => onNav('settings')}>
            <span>⚙</span> {t('settings')}
          </button>
        </div>
      </div>

      <div className="jc-cef-banner">
        <Components.EOFlag width={28} height={19}/>
        <div>
          This service is co-financed by the Digital Europe Programme and the Connecting Europe Facility (CEF).
          <a href="#">Learn more about funding ↗</a>
        </div>
      </div>
    </aside>
  );
}

// ============= Right Sidebar =============
function SidebarRight({ settings, providerCfg, conversation, t }: any) {
  const Pages = (window as any).Pages;
  const Util = (window as any).Util;
  const totalCarbon = conversation?.messages.reduce((s: number, m: JCMessage) => s + (m.carbonGrams || 0), 0) || 0;

  return (
    <aside className="jc-sidebar-right">
      <div className="jc-card">
        <h3>{t('modelTitle')}</h3>
        <p className="jc-small jc-muted" style={{ margin: '0 0 6px' }}>{t('modelBody')}</p>
        <div className="jc-small jc-mono jc-muted">
          Provider · {providerCfg.provider}<br/>
          Model · {providerCfg.model}<br/>
          {providerCfg.apiKey ? <span style={{ color: 'var(--eo-green)' }}>● key on file</span> : <span style={{ color: 'var(--eo-red)' }}>○ no key — open Settings</span>}
        </div>
      </div>

      <div className="jc-card">
        <h3>{t('complianceScore')} ⓘ</h3>
        <Pages.ScoreRing percent={98}/>
        <div className="jc-checklist" style={{ marginTop: 8 }}>
          <div className="jc-checklist-item">GDPR Ready</div>
          <div className="jc-checklist-item">AI Act Annex IV documentation</div>
          <div className="jc-checklist-item">DSA transparency report</div>
          <div className="jc-checklist-item">Energy Efficiency<span className="jc-sub">Ecodesign 2009/125/EC</span></div>
        </div>
        <hr className="jc-hr"/>
        <div className="jc-small jc-muted">
          Digital Services Tax —<br/>
          VAT ID: <strong>EU826000184</strong>
          <br/><a href="#" onClick={(e) => { e.preventDefault(); alert('VAT invoice PDF generation requires Form 27-bis pre-clearance.'); }}>View VAT invoice ↗</a>
        </div>
      </div>

      <div className="jc-card">
        <h3>{t('rights')}</h3>
        <div className="jc-rights-list">
          <button className="jc-rights-btn" onClick={() => {
            Util.downloadBlob(`jean-claude-data-${conversation?.id}.json`, 'application/json',
              JSON.stringify({ exported: new Date().toISOString(), citizen: settings.citizenship, conversation }, null, 2));
          }}>📥 {t('exportConvos')}</button>
          <button className="jc-rights-btn" onClick={() => {
            if (confirm("Pursuant to GDPR Art. 17, are you sure you wish to be erased? You will retain audit-log presence for 7 years.")) {
              Util.clearAllState();
              window.location.reload();
            }
          }}>🗑 {t('eraseMe')}</button>
          <button className="jc-rights-btn" onClick={() => alert("Objection registered. Profiling pause activated for the next 1.6 seconds.")}>🚫 {t('objectProfiling')}</button>
        </div>
      </div>

      <div className="jc-card" style={{ background: 'var(--paper-2)' }}>
        <h3>📊 Telemetry · this conversation</h3>
        <div className="jc-small">
          Messages: <strong>{conversation?.messages.length || 0}</strong><br/>
          Cumulative CO₂: <strong className="jc-mono">{totalCarbon.toFixed(2)}μg</strong><br/>
          Reflective pauses observed: <strong>{(conversation?.messages.length || 0) * 1.6}s</strong>
        </div>
      </div>
    </aside>
  );
}

// ============= Settings standalone page =============
function SettingsPage({ onOpen, settings, providerCfg, onClearAll }: any) {
  return (
    <div className="jc-page">
      <div className="jc-page-inner" style={{ maxWidth: 720 }}>
        <h1 className="jc-page-title">Settings</h1>
        <p className="jc-page-sub">BYOK key management, citizenship declaration, language preferences.</p>

        <div className="jc-page-card">
          <h2>API key</h2>
          <p className="jc-small">
            Active provider: <strong>{providerCfg.provider}</strong> · Model: <strong>{providerCfg.model}</strong>
          </p>
          <p className="jc-small">
            Key status: {providerCfg.apiKey ? <span style={{ color: 'var(--eo-green)' }}>● configured</span> : <span style={{ color: 'var(--eo-red)' }}>○ missing — please configure</span>}
          </p>
          <button className="jc-btn primary" onClick={onOpen}>Open Settings dialog</button>
        </div>

        <div className="jc-page-card">
          <h2>Citizenship</h2>
          <p className="jc-small">Declared as: <strong>{(window as any).Util.countryName(settings.citizenship)}</strong> ({settings.citizenship})</p>
          <p className="jc-small jc-muted">Service quality may differ pursuant to Recommendation (EO) 2024/0008.</p>
        </div>

        <div className="jc-page-card" style={{ borderColor: 'var(--eo-red)' }}>
          <h2 style={{ color: 'var(--eo-red)' }}>Article 17 — Right to erasure</h2>
          <p className="jc-small">Erase all locally-stored data including your API key, conversations, and citizenship declaration.</p>
          <button className="jc-btn danger" onClick={onClearAll}>Erase ALL local data</button>
        </div>
      </div>
    </div>
  );
}

// ============= Footer =============
function Footer({ t }: any) {
  const Components = (window as any).Components;
  return (
    <footer className="jc-footer">
      <div className="jc-footer-row">
        <Components.EOFlag width={32} height={22}/>
        <span style={{ fontWeight: 600 }}>{t('footerSecure')}</span>
        <span style={{ opacity: 0.85 }}>{t('footerHost')} <span style={{ color: 'var(--eo-yellow)' }}>✓</span></span>
        <span style={{ opacity: 0.85 }}>{t('footerUptime')}</span>
        <span style={{ opacity: 0.85 }}>{t('footerStatus')} <span style={{ color: 'var(--eo-yellow)' }}>✓</span></span>
      </div>
      <div className="jc-footer-meta">
        <span>© 2026 Jean-Claude EU SA</span>
        <a href="#">Legal</a>
        <a href="#">Terms</a>
        <a href="#">Privacy</a>
        <a href="#">Cookies</a>
        <a href="#">Transparency</a>
        <a href="#">Sitemap</a>
        <a href="#">DSA Compliance Report</a>
      </div>
    </footer>
  );
}

(window as any).App = App;