// brain-feed.jsx — Sidebar agents + feed temps réel + barre de commande globale

const { useState: useStateFeed, useEffect: useEffectFeed } = React;

function AgentSidebar({ agents, activeId, setActiveId, filter, setFilter }) {
  const filtered = filter === 'all' ? agents : agents.filter(a => a.status === filter);
  const counts = {
    all: agents.length,
    active: agents.filter(a => a.status === 'active').length,
    pending: agents.filter(a => a.status === 'pending').length,
    idle: agents.filter(a => a.status === 'idle').length,
  };

  return (
    <aside className="agent-side">
      <div className="agent-side-head">
        <div>
          <div className="agent-side-title serif italic">Équipe</div>
          <div className="agent-side-sub mono">7 AGENTS · 1 ORCHESTRATEUR</div>
        </div>
      </div>

      <div className="agent-filter">
        {[['all', 'tous'], ['active', 'actifs'], ['pending', 'attente'], ['idle', 'idle']].map(([k, l]) => (
          <button key={k} className={filter === k ? 'active' : ''} onClick={() => setFilter(k)}>
            {l} <span className="agent-filter-c">{counts[k]}</span>
          </button>
        ))}
      </div>

      <ul className="agent-list">
        {filtered.map((a) => {
          const color = `oklch(0.62 0.08 ${a.hue})`;
          const tint = `oklch(0.62 0.08 ${a.hue} / 0.15)`;
          return (
            <li key={a.id}
                className={`agent-row ${activeId === a.id ? 'active' : ''} status-${a.status}`}
                onClick={() => setActiveId(a.id)}>
              <div className="agent-row-glyph" style={{ background: tint, borderColor: color, color }}>
                {a.id === 'brain' ? <span className="brain-mark"/> : <span style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic' }}>{a.name[0]}</span>}
                {a.status === 'active' && <span className="agent-row-pulse" style={{ background: color }}/>}
              </div>
              <div className="agent-row-body">
                <div className="agent-row-name serif italic">{a.name}</div>
                <div className="agent-row-role">{a.role}</div>
              </div>
              <div className="agent-row-meta">
                {a.status === 'pending' && <span className="agent-row-badge warn">!</span>}
                <span className="mono agent-row-cost">{a.cost24h.toFixed(1)}€</span>
              </div>
            </li>
          );
        })}
      </ul>

      <div className="agent-side-foot">
        <div className="agent-side-tot">
          <div><span className="mono">∑ TOKENS 24H</span></div>
          <div className="serif italic">{(agents.reduce((s, a) => s + a.tokens24h, 0) / 1000).toFixed(0)}<span className="mono"> k</span></div>
        </div>
        <div className="agent-side-tot">
          <div><span className="mono">∑ COÛT 24H</span></div>
          <div className="serif italic">{agents.reduce((s, a) => s + a.cost24h, 0).toFixed(2)}<span className="mono"> €</span></div>
        </div>
      </div>
    </aside>
  );
}

function ActivityFeed({ activeId, setActiveId, mode }) {
  // Forcer re-render quand le store change
  const [, forceRender] = useStateFeed(0);
  useEffectFeed(() => {
    if (!window.BrainStore) return;
    return window.BrainStore.subscribe(() => forceRender(n => n + 1));
  }, []);
  const items = window.BrainStore ? window.BrainStore.getFeed() : window.FEED;

  if (mode === 'chat') {
    // Conversation style — bubbles between agents
    return (
      <div className="feed-chat">
        {items.slice().reverse().map((f) => {
          const a = AGENTS.find(x => x.id === f.agent);
          if (!a) return null;
          const color = `oklch(0.62 0.08 ${a.hue})`;
          return (
            <div key={f.id} className={`feed-bubble feed-${f.kind}`}>
              <div className="feed-bubble-glyph" style={{ background: `oklch(0.62 0.08 ${a.hue} / 0.18)`, borderColor: color, color }}>
                {a.id === 'brain' ? <span className="brain-mark-sm"/> : a.name[0]}
              </div>
              <div className="feed-bubble-body">
                <div className="feed-bubble-meta">
                  <span className="serif italic">{a.name}</span>
                  <span className="mono feed-bubble-time">· {f.at}</span>
                  <KindTag kind={f.kind} />
                </div>
                <div className="feed-bubble-text">{f.text}</div>
              </div>
            </div>
          );
        })}
      </div>
    );
  }

  // Timeline (default)
  return (
    <div className="feed-timeline">
      {items.map((f) => {
        const a = AGENTS.find(x => x.id === f.agent);
        if (!a) return null;
        const color = `oklch(0.62 0.08 ${a.hue})`;
        return (
          <div key={f.id} className={`feed-row feed-${f.kind} ${activeId === a.id ? 'highlight' : ''}`} onClick={() => setActiveId(a.id)}>
            <span className="feed-time mono">{f.at}</span>
            <span className="feed-dot" style={{ background: color }}/>
            <span className="feed-agent serif italic">{a.name}</span>
            <KindTag kind={f.kind} />
            <span className="feed-text">{f.text}</span>
          </div>
        );
      })}
    </div>
  );
}

function KindTag({ kind }) {
  const map = {
    action: ['action', 'action'],
    decision: ['→ décision', 'decision'],
    request: ['? demande', 'request'],
    alert: ['! alerte', 'alert'],
  };
  const [label, cls] = map[kind] || map.action;
  return <span className={`kind-tag kind-${cls}`}>{label}</span>;
}

function CmdK({ open, setOpen, onCommand }) {
  const [q, setQ] = useStateFeed('');
  const [sending, setSending] = useStateFeed(false);
  const [result, setResult] = useStateFeed(null);

  useEffectFeed(() => {
    const h = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); setOpen(o => !o); setResult(null); }
      if (e.key === 'Escape') { setOpen(false); setResult(null); }
    };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, []);

  if (!open) return null;

  // Parse "Sami, fais le récap" → agent=sami, message="fais le récap"
  function parseCommand(text) {
    const agentNames = { brain: 'brain', léo: 'leo', leo: 'leo', mira: 'mira', sami: 'sami', inès: 'ines', ines: 'ines', théo: 'theo', theo: 'theo', yasmine: 'yasmine' };
    const lower = text.toLowerCase().trim();
    for (const [name, id] of Object.entries(agentNames)) {
      if (lower.startsWith(name + ',') || lower.startsWith(name + ' ') || lower.startsWith(name + ':') || lower.startsWith(name + '.')) {
        const msg = text.slice(name.length).replace(/^[\s,:.]+/, '').trim();
        return { agent: id, message: msg || text };
      }
    }
    return { agent: 'brain', message: text };
  }

  function executeCommand() {
    if (!q.trim() || sending) return;
    const { agent, message } = parseCommand(q);
    setSending(true);
    setResult(null);

    // Switch vers l'agent + envoyer dans son chat
    onCommand({ a: agent });

    fetch('/api/chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ agent, message, history: [] }),
    })
      .then(r => r.json())
      .then(data => {
        const reply = data.reply || data.error || 'Pas de réponse.';
        setResult({ agent, reply, toolCalls: data.toolCalls, tokens: data.tokens });
        // Aussi injecter dans le chat de l'agent
        if (window.BrainStore) {
          window.BrainStore.addChat(agent, { who: 'me', text: message });
          window.BrainStore.addChat(agent, { who: 'agent', text: reply });
        }
      })
      .catch(() => setResult({ agent, reply: 'Erreur de connexion.', toolCalls: 0 }))
      .finally(() => setSending(false));
  }

  const quickCommands = [
    { label: 'Brain · Récap complet de la journée', a: 'brain', msg: 'Récap complet de ce qui a été fait aujourd\'hui sur Claude. Regarde le git log et le CHANGELOG.' },
    { label: 'Mira · Status check-ins du jour', a: 'mira', msg: 'Status check-ins du jour — quelles arrivées ?' },
    { label: 'Sami · Récap CA semaine par ville', a: 'sami', msg: 'Récap CA de la semaine par ville' },
    { label: 'Yasmine · Messages non lus', a: 'yasmine', msg: 'Y a des messages voyageurs non lus ?' },
    { label: 'Léo · Planning contenu de la semaine', a: 'leo', msg: 'Montre moi le planning contenu de cette semaine' },
    { label: 'Brain · Workflows en erreur', a: 'brain', msg: 'Quels workflows n8n sont en erreur ? Donne les détails.' },
    { label: 'Brain · Tâches urgentes ouvertes', a: 'brain', msg: 'Liste les tâches urgentes ouvertes dans Notion' },
    { label: 'Théo · Status SEO', a: 'theo', msg: 'Status SEO — articles récents et positions' },
  ].filter(s => !q || s.label.toLowerCase().includes(q.toLowerCase()));

  return (
    <div className="cmdk-backdrop" onClick={() => { if (!sending) { setOpen(false); setResult(null); } }}>
      <div className="cmdk" onClick={(e) => e.stopPropagation()} style={result ? {maxHeight: '80vh'} : {}}>
        <div className="cmdk-input-wrap">
          <span className="mono cmdk-prefix">⌘K</span>
          <input
            autoFocus
            className="cmdk-input"
            placeholder="Ex: Sami, récap CA de la semaine — ou tape un ordre libre"
            value={q}
            onChange={(e) => { setQ(e.target.value); setResult(null); }}
            onKeyDown={(e) => {
              if (e.key === 'Enter') {
                e.preventDefault();
                if (q.trim()) {
                  executeCommand();
                } else if (quickCommands[0]) {
                  setQ(quickCommands[0].msg);
                  // Auto-fill et exécuter au prochain Enter
                }
              }
            }}
            disabled={sending}
          />
          {sending && <span className="cmdk-mic" style={{opacity:0.6}}>⏳</span>}
        </div>

        {sending && (
          <div style={{padding: '16px 20px', display: 'flex', alignItems: 'center', gap: 8}}>
            <span className="ins-typing-dot" style={{width:6,height:6,borderRadius:'50%',background:'var(--accent)',animation:'typing-pulse 1.2s ease-in-out infinite'}}/>
            <span className="ins-typing-dot" style={{width:6,height:6,borderRadius:'50%',background:'var(--accent)',animation:'typing-pulse 1.2s ease-in-out infinite',animationDelay:'0.2s'}}/>
            <span className="ins-typing-dot" style={{width:6,height:6,borderRadius:'50%',background:'var(--accent)',animation:'typing-pulse 1.2s ease-in-out infinite',animationDelay:'0.4s'}}/>
            <span className="mono" style={{fontSize:11,marginLeft:8,opacity:0.6}}>Exécution en cours…</span>
          </div>
        )}

        {result && (
          <div style={{padding: '12px 20px', maxHeight: '50vh', overflow: 'auto', borderTop: '1px solid var(--border)'}}>
            <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:8}}>
              <span className="serif italic" style={{fontSize:14}}>{(window.AGENTS||[]).find(a=>a.id===result.agent)?.name || result.agent}</span>
              {result.toolCalls > 0 && <span className="mono" style={{fontSize:10,opacity:0.5}}>{result.toolCalls} action{result.toolCalls>1?'s':''}</span>}
            </div>
            <div style={{fontSize:13,lineHeight:1.6,whiteSpace:'pre-wrap'}}>{result.reply}</div>
          </div>
        )}

        {!sending && !result && (
          <ul className="cmdk-list">
            {quickCommands.map((s, i) => (
              <li key={i} className="cmdk-item" onClick={() => {
                setQ(s.msg);
                onCommand({ a: s.a });
                // Exécuter directement
                setSending(true);
                fetch('/api/chat', {
                  method: 'POST',
                  headers: { 'Content-Type': 'application/json' },
                  body: JSON.stringify({ agent: s.a, message: s.msg, history: [] }),
                })
                  .then(r => r.json())
                  .then(data => {
                    setResult({ agent: s.a, reply: data.reply || data.error, toolCalls: data.toolCalls, tokens: data.tokens });
                    if (window.BrainStore) {
                      window.BrainStore.addChat(s.a, { who: 'me', text: s.msg });
                      window.BrainStore.addChat(s.a, { who: 'agent', text: data.reply || data.error });
                    }
                  })
                  .catch(() => setResult({ agent: s.a, reply: 'Erreur de connexion.' }))
                  .finally(() => setSending(false));
              }}>
                <span className="serif italic">{s.label.split(' · ')[0]}</span>
                <span className="cmdk-item-text"> · {s.label.split(' · ').slice(1).join(' · ')}</span>
              </li>
            ))}
          </ul>
        )}

        <div className="cmdk-foot mono">
          {result ? '⌘K nouvelle commande · esc fermer' : '↵ exécuter · clic sur un raccourci · esc fermer'}
        </div>
      </div>
    </div>
  );
}

window.AgentSidebar = AgentSidebar;
window.ActivityFeed = ActivityFeed;
window.CmdK = CmdK;
window.KindTag = KindTag;