// brain-inspector.jsx — Panneau droit : détails agent + chat Claude API + prompt réel

const { useState: useStateInspector, useEffect: useEffectInspector } = React;

function Inspector({ agent }) {
  const [tab, setTab] = useStateInspector('chat');
  const [draft, setDraft] = useStateInspector('');
  const [sending, setSending] = useStateInspector(false);
  const [localChats, setLocalChats] = useStateInspector({});
  const [prompt, setPrompt] = useStateInspector(agent.prompt);
  const [editing, setEditing] = useStateInspector(false);

  // Re-sync quand on change d'agent
  useEffectInspector(() => {
    setPrompt(agent.prompt);
    setEditing(false);
    setTab('chat');
  }, [agent.id]);

  // Merge les chats du store avec les chats locaux
  const storeChats = window.BrainStore ? window.BrainStore.getChats() : {};
  const conv = localChats[agent.id] || storeChats[agent.id] || [];

  const send = () => {
    if (!draft.trim() || sending) return;
    const msg = draft;
    const newConv = [...conv, { who: 'me', text: msg }];
    setLocalChats(prev => ({ ...prev, [agent.id]: newConv }));
    setDraft('');
    setSending(true);

    const history = newConv.slice(-10).map(m => ({
      role: m.who === 'me' ? 'user' : 'assistant',
      content: m.text,
    }));

    fetch('/api/chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ agent: agent.id, message: msg, history }),
    })
      .then(r => r.json())
      .then(data => {
        const reply = data.reply || data.error || 'Pas de réponse.';
        const meta = data.toolCalls > 0 ? `\n\n[${data.toolCalls} action${data.toolCalls > 1 ? 's' : ''} · ${data.tokens?.input || 0}→${data.tokens?.output || 0} tokens]` : '';
        setLocalChats(prev => ({
          ...prev,
          [agent.id]: [...(prev[agent.id] || []), { who: 'agent', text: reply + meta }],
        }));
      })
      .catch(() => {
        setLocalChats(prev => ({
          ...prev,
          [agent.id]: [...(prev[agent.id] || []), { who: 'agent', text: 'Erreur de connexion.' }],
        }));
      })
      .finally(() => setSending(false));
  };

  const onKey = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); }
  };

  const color = `oklch(0.62 0.08 ${agent.hue})`;

  return (
    <aside className="inspector">
      <div className="ins-head">
        <div className="ins-head-mark" style={{ background: `oklch(0.62 0.08 ${agent.hue} / 0.18)`, borderColor: color }}>
          {agent.id === 'brain' ? <span className="ins-brain-mark"/> : <span style={{ color, fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic', fontSize: 18 }}>{agent.name[0]}</span>}
        </div>
        <div className="ins-head-body">
          <div className="ins-name serif italic">{agent.name}</div>
          <div className="ins-role mono">{agent.role}</div>
        </div>
        <StatusPill status={agent.status} />
      </div>

      <div className="ins-blurb">{agent.blurb}</div>

      <div className="ins-stats">
        <div className="ins-stat"><div className="ins-stat-label">Autonomie</div><div className="ins-stat-bar"><div className="ins-stat-fill" style={{ width: `${agent.autonomy * 100}%`, background: color }}/></div><div className="ins-stat-val mono">{Math.round(agent.autonomy * 100)}%</div></div>
        <div className="ins-stat-row">
          <div><div className="ins-stat-label">Tokens 24h</div><div className="ins-stat-num serif">{agent.tokens24h > 0 ? (agent.tokens24h / 1000).toFixed(0) : '—'}<span className="mono"> k</span></div></div>
          <div><div className="ins-stat-label">Coût</div><div className="ins-stat-num serif">{agent.cost24h > 0 ? agent.cost24h.toFixed(2) : '—'}<span className="mono"> €</span></div></div>
          <div><div className="ins-stat-label">Actions</div><div className="ins-stat-num serif">{agent.actions24h || '—'}</div></div>
        </div>
      </div>

      <div className="ins-tabs">
        {['chat', 'prompt', 'tâches', 'intégrations'].map((k) => (
          <button key={k} className={`ins-tab ${tab === k ? 'active' : ''}`} onClick={() => setTab(k)}>{k}</button>
        ))}
      </div>

      <div className="ins-body">
        {tab === 'chat' && (
          <div className="ins-chat">
            <div className="ins-chat-msgs">
              {conv.length === 0 && (
                <div className="ins-msg them" style={{opacity: 0.5}}>
                  <div>Envoie un message pour démarrer. {agent.name} a accès aux données live et peut agir.</div>
                </div>
              )}
              {conv.map((m, i) => (
                <div key={i} className={`ins-msg ${m.who === 'me' ? 'me' : 'them'}`}>
                  {m.text.split('\n').map((l, j) => <div key={j}>{l || '\u00a0'}</div>)}
                </div>
              ))}
              {sending && (
                <div className="ins-msg them" style={{opacity: 0.6}}>
                  <div className="ins-typing">
                    <span className="ins-typing-dot"/>
                    <span className="ins-typing-dot"/>
                    <span className="ins-typing-dot"/>
                    <span style={{marginLeft: 8, fontSize: 11}}>{agent.name} réfléchit…</span>
                  </div>
                </div>
              )}
            </div>
            <div className="ins-input-wrap">
              <textarea
                className="ins-input"
                value={draft}
                onChange={(e) => setDraft(e.target.value)}
                onKeyDown={onKey}
                placeholder={`Donne un ordre à ${agent.name}…`}
                rows={2}
                disabled={sending}
              />
              <div className="ins-input-actions">
                <button className="btn-mini primary" onClick={send} disabled={sending}>
                  {sending ? '…' : '↵'}
                </button>
              </div>
            </div>
          </div>
        )}

        {tab === 'prompt' && (
          <div className="ins-prompt">
            <div className="ins-prompt-head">
              <span className="mono ins-prompt-label">SYSTEM PROMPT</span>
              <button className="btn-mini" onClick={() => setEditing(!editing)}>{editing ? 'fermer' : 'éditer'}</button>
            </div>
            <textarea
              className={`ins-prompt-text ${editing ? 'editing' : ''}`}
              value={prompt}
              readOnly={!editing}
              onChange={(e) => setPrompt(e.target.value)}
              style={{minHeight: 200}}
            />
            {editing && (
              <div className="ins-prompt-actions">
                <button className="btn-mini" onClick={() => { setPrompt(agent.prompt); setEditing(false); }}>annuler</button>
                <button className="btn-mini primary">enregistrer</button>
              </div>
            )}
          </div>
        )}

        {tab === 'tâches' && (
          <ul className="ins-tasks">
            {agent.tasks.length === 0 && (
              <li className="ins-task t-pending" style={{opacity:0.5}}>
                <span className="ins-task-state">○</span>
                <span className="ins-task-text">Aucune tâche — données en chargement…</span>
                <span className="ins-task-at mono">—</span>
              </li>
            )}
            {agent.tasks.map((t, i) => (
              <li key={i} className={`ins-task t-${t.state}`}>
                <span className="ins-task-state">{taskGlyph(t.state)}</span>
                <span className="ins-task-text">{t.t}</span>
                <span className="ins-task-at mono">{t.at}</span>
              </li>
            ))}
          </ul>
        )}

        {tab === 'intégrations' && (
          <div className="ins-integrations">
            {agent.integrations.map((i) => (
              <span key={i} className="ins-int-pill">{i}</span>
            ))}
            <div className="ins-int-note mono">
              {window.BrainStore?.getLastRefresh()
                ? `Connecté · dernière sync ${new Date(window.BrainStore.getLastRefresh()).toLocaleTimeString('fr-FR', {hour:'2-digit',minute:'2-digit'})}`
                : 'Connexion en cours…'}
            </div>
          </div>
        )}
      </div>
    </aside>
  );
}

function taskGlyph(s) {
  return { done: '✓', doing: '◉', pending: '○', review: '◐', blocked: '✕' }[s] || '○';
}

function StatusPill({ status }) {
  const map = {
    active: ['Actif', 'success'], idle: ['Idle', 'muted'], pending: ['En attente', 'warning'],
    error: ['Erreur', 'danger'], off: ['Off', 'muted'], cron: ['Cron', 'info'], sandbox: ['Sandbox', 'gold'],
  };
  const [label, kind] = map[status] || map.idle;
  return <span className={`status-pill ${kind}`}>{label}</span>;
}

window.Inspector = Inspector;
window.StatusPill = StatusPill;