// app.jsx — Main Apportoo application

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "density": "regular",
  "accent": "#ff715b",
  "palette": ["#ff715b","#1ea896","#523f38"],
  "homeLayout": "stacked",
  "captureBannerVisible": true,
  "agentTone": "cordial"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState('home');
  const [selectedLead, setSelectedLead] = React.useState(null);
  const [agentOpen, setAgentOpen] = React.useState(false);
  const [agentLead, setAgentLead] = React.useState(null);
  const [agentSupervisor, setAgentSupervisor] = React.useState(false);
  const [cmdkOpen, setCmdkOpen] = React.useState(false);
  const [fullscreenOpen, setFullscreenOpen] = React.useState(false);
  const [fullscreenQuery, setFullscreenQuery] = React.useState('');
  const [captureOn, setCaptureOn] = React.useState(true);
  const [bannerVisible, setBannerVisible] = React.useState(true);
  const [toasts, setToasts] = React.useState([]);

  const allLeads = window.APPORTOO.allLeads();

  // Theming
  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', t.theme);
    document.documentElement.setAttribute('data-density', t.density);
    document.documentElement.style.setProperty('--coral', t.accent);
    if (Array.isArray(t.palette)) {
      document.documentElement.style.setProperty('--coral', t.palette[0]);
      document.documentElement.style.setProperty('--turq', t.palette[1]);
      document.documentElement.style.setProperty('--brown', t.palette[2]);
    }
  }, [t.theme, t.density, t.accent, t.palette]);

  // Keyboard shortcuts
  React.useEffect(() => {
    let gPressed = false;
    let gTimer = null;
    const h = (e) => {
      const inField = /input|textarea/i.test(e.target.tagName);
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
        e.preventDefault(); setCmdkOpen(o => !o); return;
      }
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'j') {
        e.preventDefault(); openSupervisor(); return;
      }
      if (e.key === 'Escape') {
        if (cmdkOpen) setCmdkOpen(false);
        else if (agentOpen) setAgentOpen(false);
      }
      if (inField) return;
      if (e.key.toLowerCase() === 'g') {
        gPressed = true;
        clearTimeout(gTimer);
        gTimer = setTimeout(() => { gPressed = false; }, 800);
        return;
      }
      if (gPressed) {
        const map = { h: 'home', p: 'presta', c: 'client', m: 'match', i: 'conv', s: 'settings', e: 'me', a: 'calendar' };
        const target = map[e.key.toLowerCase()];
        if (target) { e.preventDefault(); setRoute(target); gPressed = false; clearTimeout(gTimer); }
        return;
      }
      if (e.key === '?') {
        e.preventDefault(); setRoute('settings');
      }
    };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [cmdkOpen, agentOpen]);

  const openLead = (id) => {
    setSelectedLead(id);
    const lead = window.APPORTOO.byId(id);
    if (lead) {
      if (lead.type === 'presta') setRoute('presta');
      else setRoute('client');
    }
  };
  const askAgent = (lead) => {
    setAgentLead(lead);
    setAgentSupervisor(false);
    setAgentOpen(true);
  };
  const openSupervisor = () => {
    setAgentLead(null);
    setAgentSupervisor(true);
    setAgentOpen(true);
  };
  const openFullscreen = (query = '') => {
    setFullscreenQuery(query);
    setFullscreenOpen(true);
  };
  const showToast = (msg) => {
    const id = Math.random();
    setToasts(t => [...t, { id, msg }]);
    setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 2800);
  };
  const onQualify = (newLead) => {
    showToast(`${newLead.name} qualifié comme ${newLead.suggestedTag} ✓`);
  };

  const counts = {
    home: window.APPORTOO.NEW_LEADS.length + allLeads.filter(l => l.unread).length,
    me: window.APPORTOO.MY_MISSIONS.filter(m => m.status !== 'won').length,
    presta: allLeads.filter(l => l.type === 'presta').length,
    client: allLeads.filter(l => l.type === 'client').length,
    match: 12,
    conv: allLeads.filter(l => l.unread).length,
    calendar: window.APPORTOO.CALENDAR_EVENTS.filter(e => e.day === window.APPORTOO.CALENDAR_TODAY).length,
  };

  const counters = {
    qualif: window.APPORTOO.NEW_LEADS.length,
    dm: allLeads.filter(l => l.unread || l.statusKey === 'hot' || l.statusKey === 'warm').length,
  };

  const titles = {
    home: { title: 'Accueil', sub: 'Ta vue du matin' },
    me: { title: 'Mes missions', sub: 'Ton propre pipeline d’apport à toi-même' },
    presta: { title: 'Prestataires', sub: `${counts.presta} freelances dans le pipe` },
    client: { title: 'Clients', sub: `${counts.client} clients et missions actives` },
    match: { title: 'Mise en relation', sub: 'Suivi des placements actifs par mission' },
    conv: { title: 'Conversations', sub: `${counts.conv} non lues sur LinkedIn` },
    calendar: { title: 'Calendrier', sub: 'Sync Google · liens de prise de RDV' },
    settings: { title: 'Réglages', sub: 'Extension, agents, scoring' },
  };
  const tt = titles[route] || titles.home;

  return (
    <div className="app" data-screen-label={`Apportoo · ${tt.title}`}>
      <window.Sidebar
        route={route}
        onRoute={setRoute}
        counts={counts}
        captureOn={captureOn}
        onToggleCapture={() => setCaptureOn(c => !c)}
      />
      <div className="main">
        {bannerVisible && t.captureBannerVisible && captureOn && (
          <window.CaptureBanner
            data={window.APPORTOO.TOPBAR_NOTIF}
            onDismiss={() => setBannerVisible(false)}
            onView={() => { setRoute('home'); setBannerVisible(false); }}
          />
        )}
        <window.Topbar
          title={tt.title}
          sub={tt.sub}
          counters={route === 'home' ? counters : null}
          onCommandPalette={() => setCmdkOpen(true)}
          route={route}
        />
        <div className="main-scroll" data-screen-label={`${tt.title}`}>
          {route === 'home' && (
            <window.HomeView
              onOpenLead={openLead}
              onQualify={onQualify}
              leads={allLeads}
              newLeads={window.APPORTOO.NEW_LEADS}
              onAskAgent={(q) => {
                if (q && q.fullscreen) { openFullscreen(q.query || ''); return; }
                if (q && q.query) showToast('Question envoyée à l’agent — réponse en cours…');
                openSupervisor();
              }}
              agentTone={t.agentTone}
            />
          )}
          {(route === 'presta' || route === 'client') && (
            <window.LeadsListView
              kind={route}
              allLeads={allLeads}
              selectedId={selectedLead}
              onSelect={setSelectedLead}
              onOpenLead={openLead}
              onAskAgent={askAgent}
            />
          )}
          {route === 'match' && (
            <window.MatchingsView
              allLeads={allLeads}
              onOpenLead={openLead}
              onToast={showToast}
            />
          )}
          {route === 'conv' && (
            <window.ConversationsView
              allLeads={allLeads}
              selectedId={selectedLead}
              onSelect={setSelectedLead}
              onAskAgent={askAgent}
            />
          )}
          {route === 'me' && (
            <window.MeView
              onOpenLead={openLead}
              onAskAgent={(q) => { if (q && q.query) showToast('Question envoyée à l’agent'); openSupervisor(); }}
            />
          )}
          {route === 'calendar' && (
            <window.CalendarView
              onOpenLead={openLead}
              onToast={showToast}
            />
          )}
          {route === 'settings' && <window.SettingsView />}
        </div>
      </div>

      {route !== 'home' && <window.AgentFAB onClick={openSupervisor} />}
      <window.AgentPanel
        open={agentOpen}
        lead={agentLead}
        supervisor={agentSupervisor}
        onClose={() => setAgentOpen(false)}
        onExpand={() => { setAgentOpen(false); openFullscreen(); }}
      />
      <window.AgentFullscreen
        open={fullscreenOpen}
        onClose={() => setFullscreenOpen(false)}
        onOpenLead={openLead}
        allLeads={allLeads}
        initialQuery={fullscreenQuery}
      />
      <window.CommandPalette
        open={cmdkOpen}
        onClose={() => setCmdkOpen(false)}
        onRoute={setRoute}
        onOpenLead={openLead}
        allLeads={allLeads}
      />

      {/* Toasts */}
      <div className="toast-wrap">
        {toasts.map(t => (
          <div key={t.id} className="toast">
            <window.Icon.check size={14} style={{ color: 'var(--turq)' }} />
            <span>{t.msg}</span>
          </div>
        ))}
      </div>

      {/* Tweaks panel */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Thème">
          <TweakRadio label="Apparence" value={t.theme}
                      options={['light', 'dark']}
                      onChange={(v) => setTweak('theme', v)} />
          <TweakRadio label="Densité" value={t.density}
                      options={['compact', 'regular', 'comfy']}
                      onChange={(v) => setTweak('density', v)} />
          <TweakColor label="Palette" value={t.palette}
                      options={[
                        ['#ff715b','#1ea896','#523f38'],
                        ['#d8543f','#157a6e','#2b302f'],
                        ['#e8a76e','#74548c','#3a607a'],
                        ['#1ea896','#ff715b','#523f38'],
                      ]}
                      onChange={(v) => setTweak('palette', v)} />
        </TweakSection>
        <TweakSection label="Expérience">
          <TweakToggle label="Bannière capture"
                       value={t.captureBannerVisible}
                       onChange={(v) => { setTweak('captureBannerVisible', v); setBannerVisible(v); }} />
          <TweakToggle label="Synchro auto"
                       value={captureOn}
                       onChange={setCaptureOn} />
        </TweakSection>
        <TweakSection label="Agent IA">
          <TweakSelect label="Tonalité" value={t.agentTone}
                       options={[
                         { value: 'cordial', label: 'Cordial · tutoiement' },
                         { value: 'pro', label: 'Pro · vouvoiement' },
                         { value: 'direct', label: 'Direct · sans formules' },
                       ]}
                       onChange={(v) => setTweak('agentTone', v)} />
          <TweakButton label="Ouvrir l'agent superviseur" onClick={openSupervisor} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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