// Meetings v3 — main screen with 4 views (List, Timeline, Topics, Decisions)
// Inspector + Compare + Rerun also in this file for now.

const { useState, useEffect, useMemo, useRef, useCallback } = React;

/* ============================================================
   HELPERS
============================================================ */

const fmtDate = (ts) => {
  const d = new Date(ts);
  const days = ['Pazar','Pazartesi','Salı','Çarşamba','Perşembe','Cuma','Cumartesi'];
  const months = ['Ocak','Şubat','Mart','Nisan','Mayıs','Haziran','Temmuz','Ağustos','Eylül','Ekim','Kasım','Aralık'];
  return `${d.getDate()} ${months[d.getMonth()]} ${days[d.getDay()]}`;
};
const fmtTime = (ts) => {
  const d = new Date(ts);
  return `${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`;
};
const fmtRel = (ts) => {
  const diffMin = Math.floor((Date.now() - ts) / 60000);
  if (diffMin < 1) return 'şimdi';
  if (diffMin < 60) return `${diffMin} dk önce`;
  const diffH = Math.floor(diffMin / 60);
  if (diffH < 24) return `${diffH} sa önce`;
  const diffD = Math.floor(diffH / 24);
  if (diffD === 1) return 'dün';
  if (diffD < 7) return `${diffD} gün önce`;
  if (diffD < 30) return `${Math.floor(diffD / 7)} hf önce`;
  return `${Math.floor(diffD / 30)} ay önce`;
};
const fmtDur = (s) => {
  const m = Math.floor(s / 60);
  const sec = s % 60;
  return `${m}:${String(sec).padStart(2,'0')}`;
};
const dayKey = (ts) => {
  const d = new Date(ts);
  return `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
};

const renderMd = (text) => {
  // Tiny markdown for synthesis: **bold** + paragraphs + 1. lists
  const lines = text.split('\n');
  const out = [];
  let buf = [];
  let listBuf = [];
  let inList = false;

  const flushBuf = () => {
    if (buf.length) {
      out.push(<p key={'p'+out.length} dangerouslySetInnerHTML={{__html: buf.join(' ').replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')}}/>);
      buf = [];
    }
  };
  const flushList = () => {
    if (listBuf.length) {
      out.push(
        <ol key={'ol'+out.length}>
          {listBuf.map((li, i) => <li key={i} dangerouslySetInnerHTML={{__html: li.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')}}/>)}
        </ol>
      );
      listBuf = [];
    }
  };

  lines.forEach(l => {
    const trimmed = l.trim();
    if (!trimmed) { flushBuf(); flushList(); inList = false; return; }
    const m = trimmed.match(/^(\d+)\.\s+(.+)$/);
    if (m) {
      flushBuf();
      listBuf.push(m[2]);
      inList = true;
    } else {
      if (inList) { flushList(); inList = false; }
      buf.push(trimmed);
    }
  });
  flushBuf();
  flushList();
  return out;
};

const findAgent = (id) => AGENTS.find(a => a.id === id) || { id, name: id, avatar: id.slice(0,2).toUpperCase(), color: '#888' };

/* ============================================================
   HEADER + INSIGHT + CONTROLS
============================================================ */

const MV3Header = ({ count, last7, avgMin, mpPct, onOpenStats }) => (
  <div className="mv3-header">
    <h1 className="mv3-h1">Toplantılar</h1>
    <div className="mv3-meta">
      <span><b>{count}</b> toplantı</span>
      <span>son 7 günde <b>{last7}</b></span>
      <span>ortalama <b>{avgMin}</b></span>
      <span>MP <b>%{mpPct}</b> katılım</span>
      <span style={{flex:1}}/>
      <span style={{cursor:'pointer', color:'var(--kw-red)'}} onClick={onOpenStats}>📊 Agent İstatistikleri →</span>
    </div>
  </div>
);

const MV3Insight = ({ insight, onOpenCluster, onAsk }) => {
  if (!insight) return null;
  return (
    <div className="mv3-insight mv3-fade">
      <div className="mv3-insight-icon">💡</div>
      <div className="mv3-insight-text" dangerouslySetInnerHTML={{__html: insight.text.replace(/\*\*(.+?)\*\*/g, '<b>$1</b>')}}/>
      <div className="mv3-insight-actions">
        <button className="mv3-insight-btn" onClick={() => onOpenCluster(insight.cluster)}>Topic'i aç</button>
        <button className="mv3-insight-btn primary" onClick={() => onAsk(`Bu konudaki son 3 toplantıdan ne çıkar?`)}>CoS'a sor</button>
      </div>
    </div>
  );
};

const MV3ViewSwitch = ({ value, onChange, search, setSearch, onNewMeeting }) => (
  <div className="mv3-controls">
    <div className="mv3-switch" role="tablist">
      {[
        { id: 'list',      label: 'Liste',     icon: '📋' },
        { id: 'timeline',  label: 'Timeline',  icon: '🪡' },
        { id: 'topics',    label: 'Topics',    icon: '🧬' },
        { id: 'decisions', label: 'Kararlar',  icon: '⚖️' },
      ].map(v => (
        <button key={v.id}
          className={`mv3-switch-btn ${value === v.id ? 'active' : ''}`}
          onClick={() => onChange(v.id)}
        >
          <span style={{fontSize:13}}>{v.icon}</span> {v.label}
        </button>
      ))}
    </div>
    <div className="mv3-spacer"/>
    <div className="mv3-search">
      <Icon name="search" size={13}/>
      <input
        placeholder="Toplantı ara..."
        value={search}
        onChange={e => setSearch(e.target.value)}
      />
    </div>
    <button className="mv3-ctrl-btn primary" onClick={onNewMeeting}>+ Yeni  ⌘N</button>
  </div>
);

/* ============================================================
   LIST VIEW — meeting cards
============================================================ */

const MV3MeetingCard = ({ m, onOpen, onTogglePin, onRerun, onCompare, onSendChat }) => {
  const cat = MEETING_CATS[m.category] || { label: m.category, emoji: '📁' };
  const cluster = m.topic_cluster ? TOPIC_CLUSTERS[m.topic_cluster] : null;
  const ags = m.agents.map(findAgent);
  const tasks = MEETING_TASKS[m.id] || [];
  const related = RELATED_MEETINGS[m.id]?.same_cluster?.length || 0;
  const firstDecision = m.decisions[0];
  const moreDecisions = m.decisions.length - 1;
  const [menuOpen, setMenuOpen] = useState(false);
  const menuRef = useRef(null);

  useEffect(() => {
    if (!menuOpen) return;
    const handler = (e) => {
      if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(false);
    };
    setTimeout(() => document.addEventListener('click', handler), 0);
    return () => document.removeEventListener('click', handler);
  }, [menuOpen]);

  return (
    <div className={`mv3-card mv3-fade ${m.pinned ? 'pinned' : ''}`} onClick={() => onOpen(m)}>
      <div className="mv3-card-h">
        <div className="mv3-card-title">{m.topic}</div>
        <button className={`mv3-iconbtn ${m.pinned ? 'pin-active' : ''}`}
          onClick={(e) => { e.stopPropagation(); onTogglePin(m.id); }}
          title={m.pinned ? 'Sabiti kaldır' : 'Sabitle'}
        >📌</button>
        <div style={{ position: 'relative' }} ref={menuRef}>
          <button
            className="mv3-iconbtn"
            onClick={(e) => { e.stopPropagation(); setMenuOpen(o => !o); }}
            title="Daha fazla"
          >⋯</button>
          {menuOpen && (
            <div className="kebab-menu" onClick={e => e.stopPropagation()} style={{ position: 'absolute', right: 0, top: '100%', marginTop: 6, zIndex: 30 }}>
              <button className="kebab-item" onClick={() => { setMenuOpen(false); onOpen(m); }}>
                <span className="kebab-item-emoji">📂</span> Toplantıyı aç
              </button>
              <button className="kebab-item" onClick={() => { setMenuOpen(false); onRerun(m); }}>
                <span className="kebab-item-emoji">↻</span> Yeniden aç (Re-run)
              </button>
              <button className="kebab-item" onClick={() => { setMenuOpen(false); onTogglePin(m.id); }}>
                <span className="kebab-item-emoji">📌</span> {m.pinned ? 'Sabitten Çıkar' : 'Sabitle'}
              </button>
              {related > 0 && (
                <button className="kebab-item" onClick={() => { setMenuOpen(false); onCompare(m); }}>
                  <span className="kebab-item-emoji">⇆</span> İlişkili ile karşılaştır
                </button>
              )}
              <button
                className="kebab-item"
                onClick={async () => {
                  setMenuOpen(false);
                  if (window.KW?.online) {
                    try {
                      const res = await window.KW.extractTasksFromMeeting(m.id);
                      const n = res?.tasks?.length ?? res?.count ?? 0;
                      onSendChat && onSendChat(`📋 "${m.topic}" toplantısından ${n} yeni görev çıkardım. Görevler ekranından bakabilirsin.`);
                    } catch (e) { alert('Görev çıkarılamadı: ' + e.message); }
                  }
                }}
              >
                <span className="kebab-item-emoji">📋</span> Görev çıkar
              </button>
              <button className="kebab-item" onClick={() => { setMenuOpen(false); onSendChat && onSendChat(`"${m.topic}" toplantısı hakkında daha derin analiz yap.`); }}>
                <span className="kebab-item-emoji">💬</span> CoS'a sor
              </button>
            </div>
          )}
        </div>
      </div>

      <div className="mv3-card-meta">
        <span className="mv3-pill">{cat.emoji} {cat.label}</span>
        {cluster && <span className="mv3-pill cluster">{cluster.emoji} {cluster.label}</span>}
        <span>· {fmtRel(m.created_at)}</span>
        <span>· {fmtDur(m.duration_seconds)}</span>
      </div>

      <div className="mv3-stack">
        {ags.slice(0, 5).map(a => (
          <span key={a.id} className="agent-bubble" style={{background: a.color}}>{a.avatar}</span>
        ))}
        <span className="mv3-stack-count">{ags.length} üye</span>
      </div>

      {firstDecision && (
        <div className="mv3-tldr">
          <span className="mv3-tldr-icon">✦ Karar:</span>
          "{firstDecision.statement}"
          {moreDecisions > 0 && <span className="mv3-tldr-more">[+{moreDecisions} karar daha]</span>}
        </div>
      )}

      <div className="mv3-artifacts">
        <span>📋 {tasks.length} görev çıktı</span>
        <span>⚖️ {m.decisions.length} karar</span>
        {m.open_questions.length > 0 && <span>❓ {m.open_questions.length} açık soru</span>}
      </div>

      <div className="mv3-actions" onClick={e => e.stopPropagation()}>
        <button className="mv3-action primary" onClick={() => onOpen(m)}>Aç</button>
        <button className="mv3-action" onClick={() => onRerun(m)}>↻ Re-run</button>
        {related > 0 && <button className="mv3-action" onClick={() => onCompare(m)}>İlişkili ({related})</button>}
      </div>
    </div>
  );
};

const MV3ListView = ({ meetings, onOpen, onTogglePin, onRerun, onCompare, onSendChat, filter, setFilter }) => {
  const cats = Object.entries(MEETING_CATS);
  return (
    <div>
      <div className="mv3-subfilter">
        <button className={`mv3-chip ${!filter.cat ? 'active' : ''}`} onClick={() => setFilter({...filter, cat: null})}>Tümü</button>
        {cats.map(([id, c]) => (
          <button key={id}
            className={`mv3-chip ${filter.cat === id ? 'active' : ''}`}
            onClick={() => setFilter({...filter, cat: filter.cat === id ? null : id})}
          >{c.emoji} {c.label}</button>
        ))}
        <span style={{flex:1}}/>
        <button className={`mv3-chip ${filter.pinned ? 'active' : ''}`}
          onClick={() => setFilter({...filter, pinned: !filter.pinned})}
        >📌 Sabit</button>
      </div>
      {meetings.length === 0 ? (
        <div className="mv3-empty">
          <div className="icon">🔎</div>
          <div className="title">Filtreyle eşleşen toplantı yok</div>
          <div className="sub">Filtreyi değiştir ya da temizle.</div>
        </div>
      ) : meetings.map(m => (
        <MV3MeetingCard key={m.id} m={m} onOpen={onOpen} onTogglePin={onTogglePin} onRerun={onRerun} onCompare={onCompare} onSendChat={onSendChat}/>
      ))}
    </div>
  );
};

/* ============================================================
   TIMELINE VIEW
============================================================ */

const MV3TimelineView = ({ meetings, onOpen }) => {
  // Group by day
  const days = {};
  meetings.forEach(m => {
    const k = dayKey(m.created_at);
    (days[k] = days[k] || []).push(m);
  });
  const sortedKeys = Object.keys(days).sort((a,b) => new Date(days[b][0].created_at) - new Date(days[a][0].created_at));

  return (
    <div className="mv3-fade">
      {sortedKeys.map(k => {
        const dayMeetings = days[k].sort((a,b) => b.created_at - a.created_at);
        const firstTs = dayMeetings[0].created_at;
        const today = dayKey(Date.now());
        const yest  = dayKey(Date.now() - 86400000);
        let label = fmtDate(firstTs);
        if (k === today) label += ' — Bugün';
        else if (k === yest) label += ' — Dün';
        return (
          <div key={k}>
            <div className="mv3-day-h">
              <span>{label}</span>
              <span className="mv3-day-count">{dayMeetings.length} toplantı</span>
            </div>
            <div className="mv3-track">
              {dayMeetings.map(m => {
                const ags = m.agents.map(findAgent);
                const firstDecision = m.decisions[0];
                return (
                  <div key={m.id} className="mv3-node" onClick={() => onOpen(m)}>
                    <div className="mv3-time">{fmtTime(m.created_at)}</div>
                    <div className="mv3-dot"/>
                    <div className="mv3-node-title">{m.topic}</div>
                    <div className="mv3-node-meta">
                      <span>{ags.map(a => a.name.split(' ')[0]).slice(0,5).join(' · ')}</span>
                      <span>· {fmtDur(m.duration_seconds)}</span>
                    </div>
                    {firstDecision && (
                      <div className="mv3-node-tldr">"{firstDecision.statement}"</div>
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        );
      })}
    </div>
  );
};

/* ============================================================
   TOPICS VIEW
============================================================ */

const MV3TopicsView = ({ meetings, onOpenCluster, onSendChat }) => {
  // count per cluster, find first/last meeting
  const clusters = {};
  meetings.forEach(m => {
    if (!m.topic_cluster) return;
    const c = clusters[m.topic_cluster] = clusters[m.topic_cluster] || { meetings: [], agents: new Set(), decisions: [], questions: [] };
    c.meetings.push(m);
    m.agents.forEach(a => c.agents.add(a));
    m.decisions.forEach(d => c.decisions.push(d));
    (m.open_questions || []).forEach(q => c.questions.push(q));
  });

  const entries = Object.entries(clusters).sort((a,b) => b[1].meetings.length - a[1].meetings.length);

  return (
    <div className="mv3-fade">
      <div className="mv3-section-h">🔥 Aktif Konular</div>
      {entries.map(([id, c]) => {
        const def = TOPIC_CLUSTERS[id];
        if (!def) return null;
        const sorted = c.meetings.sort((a,b) => a.created_at - b.created_at);
        const first = sorted[0], last = sorted[sorted.length-1];
        const lastDecision = c.decisions[c.decisions.length-1];
        const inProgress = c.decisions.filter(d => d.status === 'in_progress').length;
        const done       = c.decisions.filter(d => d.status === 'done').length;

        return (
          <div key={id} className="mv3-cluster" onClick={() => onOpenCluster(id)}>
            <div className="mv3-cluster-h">
              <span className="mv3-cluster-emoji">{def.emoji}</span>
              <div className="mv3-cluster-title">{def.label}</div>
              <span className="mv3-cluster-count">{c.meetings.length} toplantı</span>
            </div>
            <div className="mv3-cluster-desc">"{def.desc}"</div>
            <div className="mv3-cluster-meta">
              <span>İlk: {fmtDate(first.created_at)}</span>
              <span>·</span>
              <span>Son: {fmtRel(last.created_at)}</span>
              <span>·</span>
              <span>Katılım: {[...c.agents].slice(0,6).map(a => findAgent(a).name.split(' ')[0]).join(', ')}</span>
            </div>
            {lastDecision && (
              <div className="mv3-cluster-stats">
                <span>✦ Son karar: <b>"{lastDecision.statement}"</b></span>
              </div>
            )}
            <div className="mv3-cluster-stats">
              <span>Açık sorular: <b>{c.questions.length}</b></span>
              <span>Tamamlanan: <b>{done}</b></span>
              <span>Devam: <b>{inProgress}</b></span>
            </div>
            <div className="mv3-cluster-actions">
              <button className="mv3-action primary" onClick={(e) => { e.stopPropagation(); onOpenCluster(id); }}>Cluster'ı Aç →</button>
              <button className="mv3-action" onClick={(e) => {
                e.stopPropagation();
                onSendChat && onSendChat(`"${def.label}" konusundaki son ${c.meetings.length} toplantıdan ne çıkar? Açık soruları, kararları ve sıradaki adımları özetle.`);
              }}>CoS ile konuş</button>
            </div>
          </div>
        );
      })}
    </div>
  );
};

const MV3ClusterDetail = ({ clusterId, meetings, onBack, onOpen, onSendChat }) => {
  const def = TOPIC_CLUSTERS[clusterId];
  const filtered = meetings.filter(m => m.topic_cluster === clusterId).sort((a,b) => a.created_at - b.created_at);
  const summary = CLUSTER_SUMMARIES[clusterId];
  const allDecisions = filtered.flatMap(m => m.decisions);
  const allQuestions = filtered.flatMap(m => m.open_questions || []);
  const allTasks = filtered.flatMap(m => MEETING_TASKS[m.id] || []);

  return (
    <div className="mv3-fade">
      <div className="mv3-breadcrumb" onClick={onBack}>
        ← Toplantılar / {def.emoji} {def.label}
      </div>
      <h1 className="mv3-h1">{def.emoji} {def.label}</h1>
      <div className="mv3-meta">
        <span><b>{filtered.length}</b> toplantı</span>
        <span>· {fmtDate(filtered[0].created_at)}'dan beri</span>
      </div>

      <div className="mv3-cluster-summary">
        <div className="mv3-insp-section-label">💡 Cluster Özeti — Chief of Staff</div>
        <div>{renderMd(summary || '')}</div>
        <div className="mv3-cluster-summary-actions">
          <button
            className="mv3-action primary"
            onClick={() => onSendChat && onSendChat(`"${def.label}" konusunda yeni bir toplantı başlat — son durumu güncelleyelim.`)}
          >Bu konuda toplantı yap →</button>
          <button
            className="mv3-action"
            onClick={() => {
              if (allQuestions.length === 0) {
                alert('Bu cluster\'da açık soru kalmamış 👏');
                return;
              }
              onSendChat && onSendChat(`Şu açık soruları görev olarak çıkar:\n\n${allQuestions.map((q,i) => `${i+1}. ${q}`).join('\n')}`);
            }}
          >Açık soruları görevlendir</button>
        </div>
      </div>

      <div className="mv3-cluster-section">
        <h3>📅 Toplantı Akışı</h3>
        {filtered.map(m => (
          <div key={m.id} className="mv3-related-card" onClick={() => onOpen(m)}>
            <div style={{flex:1}}>
              <div style={{fontWeight:600, fontSize:13}}>{m.topic}</div>
              <div style={{fontSize:11, color:'var(--text-tertiary)'}}>{m.agents.map(a => findAgent(a).name.split(' ')[0]).join(' · ')}</div>
            </div>
            <span className="when">{fmtDate(m.created_at)}</span>
          </div>
        ))}
      </div>

      {allTasks.length > 0 && (
        <div className="mv3-cluster-section">
          <h3>📋 Bu Cluster'dan Çıkan Görevler ({allTasks.length})</h3>
          {allTasks.map((t,i) => (
            <div key={i} className="mv3-cluster-task">
              <span style={{color: t.status === 'done' ? '#34C759' : 'var(--text-tertiary)'}}>{t.status === 'done' ? '✓' : '○'}</span>
              <span>{t.title}</span>
              <span className="meta">{findAgent(t.owner).name.split(' ')[0]} · {t.due}</span>
            </div>
          ))}
        </div>
      )}

      {allDecisions.length > 0 && (
        <div className="mv3-cluster-section">
          <h3>⚖️ Verilen Kararlar ({allDecisions.length})</h3>
          {allDecisions.map((d,i) => (
            <div key={i} className="mv3-cluster-decision">
              <span className="check">{d.status === 'done' ? '✓' : d.status === 'reversed' ? '↺' : '◐'}</span>
              <span style={{textDecoration: d.status === 'reversed' ? 'line-through' : 'none', opacity: d.status === 'reversed' ? 0.6 : 1}}>{d.statement}</span>
            </div>
          ))}
        </div>
      )}

      {allQuestions.length > 0 && (
        <div className="mv3-cluster-section">
          <h3>❓ Açık Sorular ({allQuestions.length})</h3>
          {allQuestions.map((q,i) => (
            <div key={i} className="mv3-cluster-question">• {q}</div>
          ))}
        </div>
      )}
    </div>
  );
};

/* ============================================================
   DECISIONS VIEW
============================================================ */

const MV3DecisionsView = ({ meetings, onOpen, onReverse }) => {
  const [statusFilter, setStatusFilter] = useState('all');

  // collect all decisions with meeting reference
  let allDecs = [];
  meetings.forEach(m => {
    m.decisions.forEach(d => allDecs.push({ ...d, meeting: m }));
  });
  allDecs = allDecs.sort((a,b) => b.meeting.created_at - a.meeting.created_at);
  if (statusFilter !== 'all') allDecs = allDecs.filter(d => d.status === statusFilter);

  const counts = {
    all: meetings.flatMap(m => m.decisions).length,
    in_progress: meetings.flatMap(m => m.decisions).filter(d => d.status === 'in_progress').length,
    done: meetings.flatMap(m => m.decisions).filter(d => d.status === 'done').length,
    reversed: meetings.flatMap(m => m.decisions).filter(d => d.status === 'reversed').length,
  };

  const statusLabel = {
    in_progress: 'Devam Ediyor',
    done: 'Tamamlandı',
    pending: 'Beklemede',
    reversed: 'Tersine Çevrildi',
  };

  return (
    <div className="mv3-fade">
      <div className="mv3-meta" style={{marginBottom:16}}>
        <span><b>{counts.all}</b> karar</span>
        <span>· <b>{counts.in_progress}</b> devam ediyor</span>
        <span>· <b>{counts.done}</b> tamamlandı</span>
        <span>· <b>{counts.reversed}</b> tersine çevrildi</span>
      </div>

      <div className="mv3-subfilter">
        {[
          ['all','Tümü'], ['in_progress','Devam Eden'], ['done','Tamamlanan'], ['reversed','Tersine Çevrilen']
        ].map(([id, label]) => (
          <button key={id}
            className={`mv3-chip ${statusFilter === id ? 'active' : ''}`}
            onClick={() => setStatusFilter(id)}
          >{label} ({counts[id] || 0})</button>
        ))}
      </div>

      {allDecs.map(d => (
        <div key={d.id} className={`mv3-dec-card ${d.status}`}>
          <div className={`mv3-dec-status ${d.status}`}>
            {d.status === 'done' ? '✓' : d.status === 'in_progress' ? '◐' : d.status === 'reversed' ? '↺' : '○'} {statusLabel[d.status]}
          </div>
          <div className="mv3-dec-statement">{d.statement}</div>
          <div className="mv3-dec-rationale">"{d.rationale}"</div>
          <div className="mv3-dec-meta">
            <span>📅 Verildi: <b>{fmtRel(d.meeting.created_at)}</b></span>
            <span>👤 Sorumlu: <b>{findAgent(d.owner).name}</b></span>
            <span>📂 <span style={{cursor:'pointer', color:'var(--kw-red)'}} onClick={() => onOpen(d.meeting)}>Toplantı: {d.meeting.topic} ↗</span></span>
            {d.due_at && <span>⏰ Hedef: <b>{fmtDate(d.due_at)}</b></span>}
          </div>
          <div className="mv3-dec-actions">
            <button className="mv3-action" onClick={() => onOpen(d.meeting)}>Toplantıya git</button>
            {d.status !== 'reversed' && <button className="mv3-action" onClick={() => onReverse(d)}>Tersine çevir</button>}
          </div>
        </div>
      ))}
    </div>
  );
};

/* ============================================================
   AGENT STATS PANEL
============================================================ */

const MV3StatsPanel = ({ open, onClose, stats }) => {
  const data = (stats && stats.length ? stats : AGENT_MEETING_STATS) || [];
  const sorted = data.length
    ? [...data].sort((a,b) => {
        const ra = b.totalEligible > 0 ? b.totalParticipated / b.totalEligible : 0;
        const rb = a.totalEligible > 0 ? a.totalParticipated / a.totalEligible : 0;
        return ra - rb;
      })
    : [];
  return (
    <>
      <div className={`mv3-insp-overlay ${open ? 'open' : ''}`} onClick={onClose}/>
      <div className={`mv3-stats-panel ${open ? 'open' : ''}`}>
        <div className="mv3-stats-head">
          <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
            <h3>📊 Agent Performansı</h3>
            <button className="mv3-iconbtn" onClick={onClose}><Icon name="x" size={14}/></button>
          </div>
          <div className="sub">Son 30 gün</div>
        </div>
        <div className="mv3-stats-body">
          {sorted.map(s => {
            const a = findAgent(s.agentId);
            const pct = Math.round((s.totalParticipated / s.totalEligible) * 100);
            return (
              <div key={s.agentId} className="mv3-stats-row">
                <div className="mv3-stats-row-h">
                  <span className="agent-bubble" style={{background: a.color}}>{a.avatar}</span>
                  <span className="mv3-stats-name">{a.name}</span>
                  <span className="mv3-stats-pct">%{pct}</span>
                </div>
                <div className="mv3-stats-sub">{s.totalParticipated}/{s.totalEligible} · ort brief {fmtDur(s.avgBriefSeconds)} · {s.avgBriefWords} kelime</div>
                <div className="mv3-stats-bar">
                  <div className="mv3-stats-bar-fill" style={{'--pct': pct + '%'}}/>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </>
  );
};

/* ============================================================
   INSPECTOR v3 — 4 tabs
============================================================ */

const MV3Inspector = ({ meeting, onClose, onRerun, onCompare, onSendChat, onExtractTasks }) => {
  const [tab, setTab] = useState('synthesis');
  const [openBrief, setOpenBrief] = useState(null);
  const [extracting, setExtracting] = useState(false);

  useEffect(() => {
    if (meeting) { setTab('synthesis'); setOpenBrief(null); }
  }, [meeting?.id]);

  useEffect(() => {
    const onKey = (e) => {
      if (!meeting) return;
      if (e.key === 'Escape') onClose();
      if (e.key === 'r' || e.key === 'R') onRerun(meeting);
      if (e.key === 't' || e.key === 'T') {
        const tabs = ['synthesis','briefs','tasks','related'];
        setTab(t => tabs[(tabs.indexOf(t) + 1) % tabs.length]);
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [meeting, onClose, onRerun]);

  if (!meeting) return null;
  const ags = meeting.agents.map(findAgent);
  const briefs = MEETING_BRIEFS[meeting.id] || [];
  const tasks  = MEETING_TASKS[meeting.id]  || [];
  const related = RELATED_MEETINGS[meeting.id] || { same_cluster: [], same_agents: [], semantic: [] };

  return (
    <>
      <div className={`mv3-insp-overlay open`} onClick={onClose}/>
      <div className={`mv3-insp open`}>
        <div className="mv3-insp-head">
          <div className="mv3-insp-head-row">
            <div className="mv3-insp-title">{meeting.topic}</div>
            <button className="mv3-iconbtn">📌</button>
            <button className="mv3-iconbtn">⋯</button>
            <button className="mv3-iconbtn" onClick={onClose}><Icon name="x" size={14}/></button>
          </div>
          <div className="mv3-insp-meta">
            <span>{fmtDate(meeting.created_at)}</span>
            <span>· {fmtTime(meeting.created_at)}</span>
            <span>· {fmtDur(meeting.duration_seconds)}</span>
            <span>· {ags.length} üye</span>
          </div>
          <div className="mv3-insp-stack">
            {ags.map(a => <span key={a.id} className="agent-bubble" style={{background: a.color}} title={a.name}>{a.avatar}</span>)}
          </div>
        </div>

        <div className="mv3-insp-tabs">
          {[
            ['synthesis', 'Sentez'],
            ['briefs',    `Brief'ler (${briefs.length})`],
            ['tasks',     `Görevler (${tasks.length})`],
            ['related',   `İlişkili (${related.same_cluster.length})`],
          ].map(([id, label]) => (
            <button key={id}
              className={`mv3-insp-tab ${tab === id ? 'active' : ''}`}
              onClick={() => setTab(id)}
            >{label}</button>
          ))}
        </div>

        <div className="mv3-insp-body">
          {tab === 'synthesis' && (
            <>
              <div className="mv3-insp-section">
                <div className="mv3-insp-section-label">⚡ Managing Partner Sentezi</div>
                <div className="mv3-insp-synth">{renderMd(meeting.synthesis)}</div>
              </div>
              {meeting.cosNote && (
                <div className="mv3-insp-section">
                  <div className="mv3-insp-section-label">📝 Chief of Staff Notu</div>
                  <div className="mv3-insp-cosnote">"{meeting.cosNote}"</div>
                </div>
              )}
              {meeting.decisions.length > 0 && (
                <div className="mv3-insp-section">
                  <div className="mv3-insp-section-label">⚖️ Karar ({meeting.decisions.length})</div>
                  {meeting.decisions.map(d => (
                    <div key={d.id} className="mv3-insp-decision">
                      <span className="check">✓</span>
                      <div className="text">
                        <b>{d.statement}</b>
                        <small>"{d.rationale}"</small>
                      </div>
                    </div>
                  ))}
                </div>
              )}
              {meeting.open_questions.length > 0 && (
                <div className="mv3-insp-section">
                  <div className="mv3-insp-section-label">❓ Açık Sorular</div>
                  {meeting.open_questions.map((q, i) => (
                    <div key={i} className="mv3-insp-decision">
                      <span style={{color: 'var(--text-tertiary)'}}>•</span>
                      <div className="text"><b style={{fontWeight: 500}}>{q}</b></div>
                    </div>
                  ))}
                </div>
              )}
            </>
          )}

          {tab === 'briefs' && (
            <div className="mv3-insp-section">
              <div className="mv3-insp-section-label">Her agent'ın katkısı</div>
              {briefs.length === 0 ? (
                <div className="mv3-empty"><div className="icon">📭</div><div className="sub">Brief detayları henüz yüklenmedi.</div></div>
              ) : briefs.map(b => {
                const a = findAgent(b.agentId);
                const isOpen = openBrief === b.agentId;
                return (
                  <div key={b.agentId} className={`mv3-brief-row ${isOpen ? 'open' : ''}`}>
                    <div className="mv3-brief-h" onClick={() => setOpenBrief(isOpen ? null : b.agentId)}>
                      <span className="agent-bubble" style={{background: a.color}}>{a.avatar}</span>
                      <span className="mv3-brief-name">{a.name}</span>
                      <span className="mv3-brief-time">{fmtDur(b.brief_seconds)}</span>
                      <span className="mv3-brief-chev">›</span>
                    </div>
                    {isOpen && (
                      <div className="mv3-brief-body" dangerouslySetInnerHTML={{__html: b.content.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')}}/>
                    )}
                  </div>
                );
              })}
            </div>
          )}

          {tab === 'tasks' && (
            <div className="mv3-insp-section">
              <div className="mv3-insp-section-label">Bu toplantıdan çıkan görevler</div>
              {tasks.length === 0 ? (
                <div className="mv3-empty"><div className="icon">📋</div><div className="title">Görev çıkmadı</div><div className="sub">Görevleri yeniden çıkarmak için aşağıdaki butona tıkla.</div></div>
              ) : tasks.map(t => (
                <div key={t.id} className={`mv3-insp-task ${t.status === 'done' ? 'done' : ''}`}>
                  <span style={{color: t.status === 'done' ? '#34C759' : 'var(--text-tertiary)'}}>{t.status === 'done' ? '✓' : '○'}</span>
                  <span className="title">{t.title}</span>
                  <span className="owner">{findAgent(t.owner).name.split(' ')[0]}</span>
                  <span className="due">{t.due}</span>
                </div>
              ))}
              <button
                className="mv3-insp-cta-secondary"
                style={{marginTop: 12, width: '100%'}}
                disabled={extracting}
                onClick={async () => {
                  if (!meeting?.id || extracting) return;
                  setExtracting(true);
                  try {
                    if (window.KW?.online) {
                      const res = await window.KW.extractTasksFromMeeting(meeting.id);
                      const n = res?.tasks?.length ?? res?.count ?? 0;
                      onExtractTasks?.(meeting, res);
                      alert(n > 0 ? `${n} görev oluşturuldu.` : 'Bu sentezden çıkarılacak görev bulunamadı.');
                    } else {
                      alert('Backend offline — görev çıkarılamadı.');
                    }
                  } catch (e) {
                    alert('Görev çıkarılamadı: ' + e.message);
                  } finally {
                    setExtracting(false);
                  }
                }}
              >{extracting ? '⏳ AI görevleri çıkarıyor…' : '📋 Görevleri yeniden çıkar'}</button>
            </div>
          )}

          {tab === 'related' && (
            <>
              {[
                ['Aynı topic cluster', related.same_cluster],
                ['Aynı agent grubu',   related.same_agents],
                ['Semantik benzer',    related.semantic],
              ].map(([label, ids]) => ids.length > 0 && (
                <div key={label} className="mv3-related-group">
                  <h4>{label}</h4>
                  {ids.map(id => {
                    const r = MEETINGS_V3.find(m => m.id === id);
                    if (!r) return null;
                    return (
                      <div key={id} className="mv3-related-card">
                        <div style={{flex:1, cursor:'pointer'}} onClick={() => onCompare(meeting, r)}>
                          <div style={{fontWeight: 600, fontSize: 13}}>{r.topic}</div>
                          <div style={{fontSize: 11, color: 'var(--text-tertiary)'}}>{r.agents.map(a => findAgent(a).name.split(' ')[0]).join(' · ')}</div>
                        </div>
                        <span className="mv3-related-compare" onClick={() => onCompare(meeting, r)}>⇆ Karşılaştır</span>
                        <span className="when">{fmtRel(r.created_at)}</span>
                      </div>
                    );
                  })}
                </div>
              ))}
              {related.same_cluster.length === 0 && related.same_agents.length === 0 && related.semantic.length === 0 && (
                <div className="mv3-empty"><div className="icon">🧬</div><div className="title">İlişkili toplantı yok</div><div className="sub">Bu toplantı yeni bir konu açtı — devamı geldikçe burada görünecek.</div></div>
              )}
            </>
          )}

          <div className="mv3-insp-cta-row">
            <button className="mv3-insp-cta-primary" onClick={() => onRerun(meeting)}>
              💬 Bu Toplantıda Soru Sor (Re-run) →
            </button>
            <div className="row2">
              <button
                className="mv3-insp-cta-secondary"
                disabled={extracting}
                onClick={async () => {
                  if (!meeting?.id || extracting) return;
                  setExtracting(true);
                  try {
                    if (window.KW?.online) {
                      const res = await window.KW.extractTasksFromMeeting(meeting.id);
                      const n = res?.tasks?.length ?? res?.count ?? 0;
                      onExtractTasks?.(meeting, res);
                      alert(n > 0 ? `${n} görev oluşturuldu.` : 'Bu sentezden çıkarılacak görev bulunamadı.');
                    } else {
                      alert('Backend offline — görev çıkarılamadı.');
                    }
                  } catch (e) {
                    alert('Görev çıkarılamadı: ' + e.message);
                  } finally {
                    setExtracting(false);
                  }
                }}
              >{extracting ? '⏳' : '📋 Görev çıkar'}</button>
              <button className="mv3-insp-cta-secondary" onClick={() => onSendChat && onSendChat(`${meeting.topic} hakkında daha derin analiz yap`)}>💬 CoS'a sor</button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

/* ============================================================
   COMPARE MODAL
============================================================ */

const MV3Compare = ({ pair, onClose }) => {
  if (!pair) return null;
  const [a, b] = pair;
  const renderSide = (m) => (
    <div className="mv3-compare-side">
      <div className="when">{fmtDate(m.created_at)} · {fmtTime(m.created_at)}</div>
      <h4>{m.topic}</h4>
      <div className="agents-line">{m.agents.map(id => findAgent(id).name.split(' ')[0]).join(' · ')}</div>
      <div className="mv3-compare-section-h">⚡ Sentez</div>
      <div>{renderMd(m.synthesis.split('\n\n')[0])}</div>
      <div className="mv3-compare-section-h">⚖️ Karar</div>
      {m.decisions.length > 0 ? (
        <ul>{m.decisions.map(d => <li key={d.id}>{d.status === 'reversed' ? '↺ ' : '✓ '}{d.statement}</li>)}</ul>
      ) : <p>—</p>}
      <div className="mv3-compare-section-h">📋 Görevler</div>
      {(MEETING_TASKS[m.id] || []).length > 0 ? (
        <ul>{(MEETING_TASKS[m.id] || []).map(t => <li key={t.id}>{t.title}</li>)}</ul>
      ) : <p>—</p>}
    </div>
  );

  const daysBetween = Math.abs(Math.floor((a.created_at - b.created_at) / 86400000));

  return (
    <div className="mv3-compare-overlay open" onClick={onClose}>
      <div className="mv3-compare-modal" onClick={e => e.stopPropagation()}>
        <div className="mv3-compare-head">
          <h3>⇆ Side-by-Side Compare</h3>
          <button className="mv3-iconbtn" onClick={onClose}><Icon name="x" size={14}/></button>
        </div>
        <div className="mv3-compare-pane">
          {renderSide(a)}
          {renderSide(b)}
        </div>
        <div className="mv3-compare-cos">
          <b>💡 CoS Notu:</b> Bu iki toplantı arasında <b>{daysBetween} gün</b> geçti. Konunun evrimini takip etmek için her iki sentezi yan yana koyduk — kararların nasıl olgunlaştığı görünüyor.
        </div>
      </div>
    </div>
  );
};

/* ============================================================
   RE-RUN MODAL
============================================================ */

const MV3Rerun = ({ meeting, onClose, onSubmit }) => {
  const [q, setQ] = useState('');
  const ref = useRef(null);
  useEffect(() => {
    if (meeting) setTimeout(() => ref.current?.focus(), 80);
  }, [meeting]);
  if (!meeting) return null;
  const ags = meeting.agents.map(findAgent);

  return (
    <div className="mv3-compare-overlay open" onClick={onClose}>
      <div className="mv3-rerun-modal" onClick={e => e.stopPropagation()}>
        <h3>↻ Bu toplantıyı yeniden aç</h3>
        <div className="sub">
          Aynı <b>{ags.length} üyeyle</b> ({ags.map(a => a.avatar).join(', ')}) yeni bir soru tartışın.
        </div>
        <textarea
          ref={ref}
          placeholder='örn: "Geçen toplantıda Delaware C-Corp dedik. Vergi danışmanı seçimi için 3 öneri ver."'
          value={q}
          onChange={e => setQ(e.target.value)}
        />
        <div className="actions">
          <button className="mv3-action" onClick={onClose}>İptal</button>
          <button className="mv3-action primary" disabled={!q.trim()} onClick={() => { onSubmit(q); onClose(); }}>Yeniden Aç →</button>
        </div>
      </div>
    </div>
  );
};

/* ============================================================
   ROOT MEETINGS SCREEN
============================================================ */

// Backend response → meetings.jsx native shape
function adaptMeetingV3(m) {
  return {
    id: m.id,
    topic: m.topic,
    agents: Array.isArray(m.agents) ? m.agents : (m.agents || '').split(',').filter(Boolean),
    category: m.category || 'operations',
    topic_cluster: m.topic_cluster || null,
    pinned: !!m.pinned,
    duration_seconds: m.duration_seconds || 180,
    created_at: m.created_at ? new Date(m.created_at).getTime() : Date.now(),
    synthesis: m.full_synthesis || m.summary || '',
    cosNote: m.cos_note || m.short_note || '',
    decisions: m.decisions || [],
    open_questions: m.open_questions
      ? (typeof m.open_questions === 'string' ? (() => { try { return JSON.parse(m.open_questions); } catch { return []; } })() : m.open_questions)
      : [],
  };
}

const MeetingsScreenV3 = ({ onSendChat }) => {
  const [view, setView]                 = useState('list'); // list | timeline | topics | decisions
  const [search, setSearch]             = useState('');
  const [filter, setFilter]             = useState({ cat: null, pinned: false });
  const [meetings, setMeetings]         = useState(MEETINGS_V3 || []);
  const [agentStats, setAgentStats]     = useState(AGENT_MEETING_STATS || []);
  const [inspectorMeeting, setInspectorMeeting] = useState(null);
  const [activeCluster, setActiveCluster]       = useState(null);
  const [comparePair, setComparePair]           = useState(null);
  const [rerunMeeting, setRerunMeeting]         = useState(null);
  const [statsOpen, setStatsOpen]               = useState(false);

  // Mount: backend'den meetings + agent stats çek
  useEffect(() => {
    if (!window.KW?.online) return;
    (async () => {
      try {
        const [list, stats] = await Promise.all([
          window.KW.listMeetings(),
          window.KW.getAgentMeetingStats(30),
        ]);
        if (list?.length) setMeetings(list.map(adaptMeetingV3));
        if (stats?.length) setAgentStats(stats);
      } catch (e) { console.warn('[meetings] mount fetch fail', e); }
    })();
  }, []);

  // Filtered meetings
  const filtered = useMemo(() => {
    let m = meetings;
    if (filter.cat)    m = m.filter(x => x.category === filter.cat);
    if (filter.pinned) m = m.filter(x => x.pinned);
    if (search.trim()) {
      const q = search.toLowerCase();
      m = m.filter(x => x.topic.toLowerCase().includes(q) || (x.synthesis || '').toLowerCase().includes(q));
    }
    return [...m].sort((a,b) => (b.pinned?1:0) - (a.pinned?1:0) || b.created_at - a.created_at);
  }, [meetings, filter, search]);

  const togglePin = useCallback((id) => {
    let newPinned = false;
    setMeetings(ms => ms.map(m => {
      if (m.id !== id) return m;
      newPinned = !m.pinned;
      return { ...m, pinned: newPinned };
    }));
    if (window.KW?.online) window.KW.updateMeeting(id, { pinned: newPinned ? 1 : 0 }).catch(() => {});
  }, []);

  // Meta calculations (boş listede NaN olmasın)
  const last7 = meetings.filter(m => Date.now() - m.created_at < 7*86400000).length;
  const avgSec = meetings.length > 0
    ? Math.round(meetings.reduce((s, m) => s + (m.duration_seconds || 0), 0) / meetings.length)
    : 0;
  const avgMin = avgSec > 0 ? `${Math.floor(avgSec/60)}:${String(avgSec%60).padStart(2,'0')} dk` : '—';
  const mpStat = (agentStats || []).find(s => s.agentId === 'mp');
  const mpPct  = mpStat && mpStat.totalEligible > 0
    ? Math.round((mpStat.totalParticipated / mpStat.totalEligible) * 100)
    : 0;

  // Keyboard
  useEffect(() => {
    const onKey = (e) => {
      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
      if ((e.metaKey || e.ctrlKey) && e.key === '1') { e.preventDefault(); setView('list'); }
      if ((e.metaKey || e.ctrlKey) && e.key === '2') { e.preventDefault(); setView('timeline'); }
      if ((e.metaKey || e.ctrlKey) && e.key === '3') { e.preventDefault(); setView('topics'); }
      if ((e.metaKey || e.ctrlKey) && e.key === '4') { e.preventDefault(); setView('decisions'); }
      if ((e.metaKey || e.ctrlKey) && e.key === 'n') { e.preventDefault(); onSendChat && onSendChat('Yeni toplantı başlat'); }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onSendChat]);

  return (
    <div className="mv3-screen mv3-fade">
      <MV3Header
        count={meetings.length} last7={last7} avgMin={avgMin} mpPct={mpPct}
        onOpenStats={() => setStatsOpen(true)}
      />
      <MV3Insight insight={TOPIC_INSIGHT}
        onOpenCluster={(id) => { setView('topics'); setActiveCluster(id); }}
        onAsk={(q) => onSendChat && onSendChat(q)}
      />
      <MV3ViewSwitch
        value={view} onChange={(v) => { setView(v); setActiveCluster(null); }}
        search={search} setSearch={setSearch}
        onNewMeeting={() => onSendChat && onSendChat('Yeni toplantı başlat')}
      />

      {view === 'list' && (
        <MV3ListView
          meetings={filtered}
          onOpen={setInspectorMeeting}
          onTogglePin={togglePin}
          onRerun={setRerunMeeting}
          onSendChat={onSendChat}
          onCompare={async (m) => {
            // Backend'den related meeting fetch
            if (window.KW?.online) {
              try {
                const rel = await window.KW.getRelatedMeetings(m.id);
                const otherId = rel?.same_cluster?.[0] || rel?.same_agents?.[0];
                if (otherId) {
                  const otherMeeting = meetings.find(x => x.id === otherId);
                  if (otherMeeting) setComparePair([m, otherMeeting]);
                  else alert('İlişkili toplantı bulundu ama detayı yüklenemedi.');
                  return;
                }
              } catch (e) { /* fallback */ }
            }
            // Fallback: local mock RELATED_MEETINGS
            const rel = RELATED_MEETINGS?.[m.id]?.same_cluster?.[0];
            const other = (meetings || []).find(x => x.id === rel);
            if (other) setComparePair([m, other]);
            else alert('Karşılaştıracak ilişkili toplantı yok.');
          }}
          filter={filter} setFilter={setFilter}
        />
      )}
      {view === 'timeline'  && <MV3TimelineView meetings={filtered} onOpen={setInspectorMeeting}/>}
      {view === 'topics' && !activeCluster && <MV3TopicsView meetings={meetings} onOpenCluster={setActiveCluster} onSendChat={onSendChat}/>}
      {view === 'topics' &&  activeCluster && <MV3ClusterDetail clusterId={activeCluster} meetings={meetings} onBack={() => setActiveCluster(null)} onOpen={setInspectorMeeting} onSendChat={onSendChat}/>}
      {view === 'decisions' && <MV3DecisionsView meetings={meetings} onOpen={setInspectorMeeting} onReverse={async (d) => {
        const reason = prompt(`"${d.statement}" kararı tersine çevriliyor.\n\nGerekçe (en az 5 karakter):`, '');
        if (!reason || reason.trim().length < 5) return;
        if (window.KW?.online) {
          try {
            await window.KW.reverseDecision(d.id, reason.trim());
            setMeetings(ms => ms.map(m => ({
              ...m,
              decisions: (m.decisions || []).map(x => x.id === d.id ? { ...x, status: 'reversed', reversed_reason: reason.trim() } : x),
            })));
          } catch (e) { alert('Karar tersine çevrilemedi: ' + e.message); }
        }
      }}/>}

      <MV3Inspector
        meeting={inspectorMeeting}
        onClose={() => setInspectorMeeting(null)}
        onRerun={setRerunMeeting}
        onCompare={(a, b) => { setInspectorMeeting(null); setComparePair([a, b]); }}
        onSendChat={onSendChat}
        onExtractTasks={(m, res) => {
          // Babam'a bilgi: AI x görev çıkardı; Tasks ekranına bakmasını öner
          if (res?.tasks?.length || res?.count) {
            onSendChat && onSendChat(`📋 "${m.topic}" toplantısından ${res.tasks?.length ?? res.count} yeni görev çıkardım. Görevler ekranından bakabilirsin.`);
          }
        }}
      />
      <MV3Compare pair={comparePair} onClose={() => setComparePair(null)}/>
      <MV3Rerun
        meeting={rerunMeeting}
        onClose={() => setRerunMeeting(null)}
        onSubmit={async (q) => {
          if (!rerunMeeting) return;
          if (window.KW?.online) {
            try {
              const res = await window.KW.rerunMeeting(rerunMeeting.id, q);
              const list = await window.KW.listMeetings();
              if (list?.length) setMeetings(list.map(adaptMeetingV3));
              onSendChat && onSendChat(`📅 Toplantı yeniden açıldı: ${rerunMeeting.topic}\n\nSoru: ${q}\n\n${res?.synthesis || res?.reply || ''}`);
            } catch (e) {
              alert('Re-run başarısız: ' + e.message);
            }
          } else {
            onSendChat && onSendChat(`Re-run: ${rerunMeeting.topic} → ${q}`);
          }
        }}
      />
      <MV3StatsPanel open={statsOpen} onClose={() => setStatsOpen(false)} stats={agentStats}/>
    </div>
  );
};

window.MeetingsScreenV3 = MeetingsScreenV3;