// Other screens — ChatsScreen (sohbet listesi), Chat, Team, Meetings, News, Tasks

// ChatsScreen — sol sidebar'da "Sohbet" tıklanınca açılır.
// Tüm sohbetlerin son güncellemeye göre listesi + arama + yeni sohbet CTA.
const ChatsScreen = ({ conversations = [], onPickConversation, onNewChat, unreadCount = 0 }) => {
  const [query, setQuery] = React.useState('');
  const list = conversations || [];
  const filtered = query.trim()
    ? list.filter(c => (c.title || '').toLowerCase().includes(query.trim().toLowerCase()))
    : list;

  return (
    <div className="fade-in">
      <div className="greeting" style={{ paddingTop: 8 }}>
        <h1 style={{ fontSize: 36 }}>Sohbetler</h1>
        <div className="greeting-meta">
          <span>{list.length} sohbet</span>
          {unreadCount > 0 && <><span className="dot-sep"></span><span style={{ color: 'var(--kw-red)' }}>{unreadCount} okunmamış</span></>}
        </div>
      </div>

      <div style={{ display: 'flex', gap: 12, alignItems: 'center', margin: '20px 0 16px' }}>
        <div className="sidebar-search" style={{ flex: 1, margin: 0, maxWidth: 480 }}>
          <Icon name="search" size={14} />
          <input
            placeholder="Sohbetlerde ara…"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
          />
          {query && (
            <button className="icon-btn" onClick={() => setQuery('')} title="Temizle" style={{ width: 24, height: 24 }}>
              <Icon name="x" size={12} />
            </button>
          )}
        </div>
        <button
          className="btn-primary"
          onClick={onNewChat}
          style={{ padding: '8px 16px' }}
        >
          <Icon name="plus" size={14} /> Yeni sohbet
        </button>
      </div>

      {list.length === 0 ? (
        <div className="panel" style={{ padding: 48, textAlign: 'center', color: 'var(--text-secondary)' }}>
          <div style={{ fontSize: 36, marginBottom: 8 }}>💬</div>
          <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 4 }}>Henüz sohbet yok</div>
          <div style={{ fontSize: 13 }}>Ana sayfadan ekibinize bir soru sorarak ilk sohbeti başlatın.</div>
          <button
            className="btn-primary"
            onClick={onNewChat}
            style={{ marginTop: 16, padding: '8px 16px' }}
          >
            Yeni sohbet başlat
          </button>
        </div>
      ) : filtered.length === 0 ? (
        <div className="panel" style={{ padding: 32, textAlign: 'center', color: 'var(--text-secondary)' }}>
          <div style={{ fontSize: 24, marginBottom: 8 }}>🔍</div>
          <div>"{query}" ile eşleşen sohbet bulunamadı.</div>
        </div>
      ) : (
        <div className="panel" style={{ padding: 0, overflow: 'hidden' }}>
          {filtered.map((c, i) => (
            <div
              key={c.id}
              onClick={() => onPickConversation && onPickConversation(c.id)}
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: 14,
                padding: '14px 18px',
                cursor: 'pointer',
                borderBottom: i < filtered.length - 1 ? '1px solid var(--separator)' : 'none',
                transition: 'background 160ms',
              }}
              onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg-tinted)'}
              onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
            >
              <span
                className="avatar-circle"
                style={{
                  width: 36,
                  height: 36,
                  fontSize: 13,
                  flexShrink: 0,
                  background: c.unread
                    ? 'linear-gradient(135deg, var(--kw-red), #FF4D6D)'
                    : 'linear-gradient(135deg, #8E8E93, #48484A)',
                  color: 'white',
                }}
              >
                💬
              </span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div
                  style={{
                    fontSize: 14,
                    fontWeight: c.unread ? 600 : 500,
                    color: 'var(--text-primary)',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap',
                  }}
                  title={c.title}
                >
                  {c.title || 'Yeni sohbet'}
                </div>
                {c.unread && c.unreadCount > 0 && (
                  <div style={{ fontSize: 11.5, color: 'var(--kw-red)', marginTop: 2 }}>
                    {c.unreadCount} yeni mesaj
                  </div>
                )}
              </div>
              <span style={{ fontSize: 11.5, color: 'var(--text-tertiary)', flexShrink: 0 }}>
                {c.when || '—'}
              </span>
              {c.unread && (
                <span
                  style={{
                    width: 8,
                    height: 8,
                    borderRadius: '50%',
                    background: 'var(--kw-red)',
                    flexShrink: 0,
                  }}
                />
              )}
              <span style={{ color: 'var(--text-tertiary)', flexShrink: 0 }}>
                <Icon name="arrow-up" size={12} />
              </span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

window.ChatsScreen = ChatsScreen;

// Markdown body — ekip cevaplarını okunaklı render eder
const Markdown = ({ text }) => {
  if (!text) return null;
  if (window.marked && window.DOMPurify) {
    const html = window.DOMPurify.sanitize(window.marked.parse(text, { breaks: true }));
    return <div className="md-body" dangerouslySetInnerHTML={{ __html: html }} />;
  }
  return <div style={{ whiteSpace: 'pre-wrap' }}>{text}</div>;
};

const ChatScreen = ({
  thread, onSend, busy,
  agentTitle, agentSubtitle, agents,
  onOpenMeeting, onBack,
}) => {
  const [msg, setMsg] = React.useState('');
  const threadEnd = React.useRef(null);
  React.useEffect(() => {
    threadEnd.current?.scrollTo?.({ top: 999999, behavior: 'smooth' });
  }, [thread]);

  const send = () => {
    if (!msg.trim() || busy) return;
    onSend(msg.trim());
    setMsg('');
  };

  const agentList = agents && agents.length ? agents : (window.AGENTS || []);

  return (
    <div className="chat-page fade-in">
      <div className="chat-topbar">
        <div>
          <div className="chat-topbar-title">{agentTitle || 'Sohbet'}</div>
          <div className="chat-topbar-sub">{agentSubtitle || 'Chief of Staff triage ediyor'}</div>
        </div>
        <button className="btn-ghost"><Icon name="settings" size={14}/>Model</button>
      </div>

      <div className="chat-thread" ref={threadEnd}>
        {thread.length === 0 && !busy && (
          <div className="chat-empty">
            <div className="chat-empty-icon">💬</div>
            <div className="chat-empty-title">Sohbet başlamadı</div>
            <div className="chat-empty-sub">Aşağıdan ilk mesajınızı yazın — Chief of Staff sorunuzu uygun ekibe yönlendirecek.</div>
          </div>
        )}

        {thread.map((m, i) => {
          if (m.role === 'triage') {
            return (
              <div key={i} className="triage-line">
                <span className="triage-dots"><span></span><span></span><span></span></span>
                {m.text}
              </div>
            );
          }
          const agent = m.agent ? agentList.find(a => a.id === m.agent) : null;
          const initials = m.role === 'user' ? 'NB' : (agent?.avatar || (m.agent || 'AI').toUpperCase().slice(0, 2));
          const bg = m.role === 'user'
            ? 'linear-gradient(135deg, #C8102E, #FF4D6D)'
            : (agent?.color || 'linear-gradient(135deg, #8E8E93, #48484A)');

          return (
            <div key={i} className={`msg ${m.role}`}>
              <div className="msg-avatar" style={{ background: bg }}>
                {initials}
              </div>
              <div className="msg-body-wrap">
                {m.role === 'agent' && (
                  <div className="msg-name">
                    {m.name || agent?.name || m.agent}
                    {agent?.role && <span className="msg-role-tag"> · {agent.role}</span>}
                  </div>
                )}
                <div className="msg-bubble">
                  {m.role === 'user'
                    ? <div style={{ whiteSpace: 'pre-wrap' }}>{m.text}</div>
                    : <Markdown text={m.text} />}
                </div>

                {m.suggestions && m.suggestions.length > 0 && (
                  <div className="msg-suggestions">
                    <div className="msg-suggestions-label">İhtimaller — birini seçin veya kendi cevabınızı yazın:</div>
                    {m.suggestions.map((s, idx) => (
                      <button
                        key={idx}
                        className="suggestion-chip"
                        onClick={() => onSend(s)}
                        disabled={busy}
                      >
                        {s}
                      </button>
                    ))}
                  </div>
                )}

                {m.meetingId && onOpenMeeting && (
                  <button
                    className="btn-ghost meeting-open-btn"
                    onClick={() => onOpenMeeting(m.meetingId)}
                  >
                    <Icon name="meetings" size={12}/>
                    Toplantı detayını aç
                  </button>
                )}
              </div>
            </div>
          );
        })}

        {busy && thread.length > 0 && thread[thread.length - 1].role !== 'triage' && (
          <div className="triage-line">
            <span className="triage-dots"><span></span><span></span><span></span></span>
            Cevap hazırlanıyor…
          </div>
        )}
      </div>

      <div className="chat-composer">
        <div className="chat-composer-inner">
          <textarea
            placeholder={busy ? "Ekip cevap hazırlıyor…" : "Bir mesaj yazın..."}
            value={msg}
            disabled={busy}
            onChange={(e) => { setMsg(e.target.value); e.target.style.height = 'auto'; e.target.style.height = Math.min(e.target.scrollHeight, 140) + 'px'; }}
            onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); } }}
            rows={1}
          />
          <button
            className={`chat-hero-send ${msg.trim() && !busy ? 'visible' : ''}`}
            onClick={send}
            disabled={!msg.trim() || busy}
            style={{ opacity: (msg.trim() && !busy) ? 1 : 0.4, pointerEvents: (msg.trim() && !busy) ? 'auto' : 'none' }}
          >
            <Icon name="arrow-up" size={16}/>
          </button>
        </div>
      </div>
    </div>
  );
};

// TeamScreen v3 lives in team.jsx (window.TeamScreen)

const MeetingsScreen = ({ meetings, onOpenMeeting, agents }) => {
  // Backend meetings → UI shape (mock fallback)
  const list = (meetings && meetings.length) ? meetings : (window.MEETINGS || []);
  const agentList = (agents && agents.length) ? agents : (window.AGENTS || []);
  const [filter, setFilter] = React.useState('all');

  const filtered = filter === 'all' ? list : list.filter(m => {
    if (filter === 'today') {
      const today = new Date().toISOString().slice(0, 10);
      return (m.when || '').includes('şimdi') || (m.created_at || '').slice(0, 10) === today;
    }
    if (filter === 'week') {
      const weekAgo = Date.now() - 7 * 86400000;
      return new Date(m.created_at || 0).getTime() > weekAgo;
    }
    return true;
  });

  return (
    <div className="fade-in">
      <div className="greeting" style={{ paddingTop: 8 }}>
        <h1 style={{ fontSize: 36 }}>Toplantılar & Notlar</h1>
        <div className="greeting-meta">
          <span>{list.length} toplantı kayıtlı</span>
          <span className="dot-sep"></span>
          <span>otomatik task + decision çıkarımı aktif</span>
        </div>
      </div>

      <div className="news-cat-tabs" style={{ marginTop: 18 }}>
        <button className={`news-cat-tab ${filter === 'all' ? 'active' : ''}`} onClick={() => setFilter('all')}>Tümü <span className="news-cat-count">{list.length}</span></button>
        <button className={`news-cat-tab ${filter === 'today' ? 'active' : ''}`} onClick={() => setFilter('today')}>Bugün</button>
        <button className={`news-cat-tab ${filter === 'week' ? 'active' : ''}`} onClick={() => setFilter('week')}>Bu hafta</button>
      </div>

      {filtered.length === 0 && (
        <div className="panel" style={{ marginTop: 20, padding: 48, textAlign: 'center', color: 'var(--text-secondary)' }}>
          <div style={{ fontSize: 36, marginBottom: 12 }}>📋</div>
          {list.length === 0
            ? 'Henüz toplantı yok. Sohbetten "Toplantı Yap" butonuyla ilk ekip toplantınızı başlatın.'
            : 'Bu filtrede toplantı yok.'}
        </div>
      )}

      <div style={{ marginTop: 16 }}>
        {filtered.map(m => {
          const agentIds = Array.isArray(m.agents) ? m.agents : (m.agents || '').split(',').filter(Boolean);
          const ags = agentIds.map(id => agentList.find(a => a.id === id)).filter(Boolean);
          const summary = m.summary || m.short_note || (m.full_synthesis || '').slice(0, 200);
          const when = m.when || (m.created_at ? new Date(m.created_at).toLocaleString('tr-TR') : '');
          return (
            <div key={m.id} className="meeting-list-item" onClick={() => onOpenMeeting(m)}>
              <div className="meeting-list-head">
                <div className="meeting-list-topic">{m.topic}</div>
                <div className="meeting-list-date">{when}</div>
              </div>
              <div className="meeting-list-meta">
                <span className="avatar-stack">
                  {ags.map(a => <span key={a.id} className="avatar-mini" style={{ background: a.color }}>{a.avatar}</span>)}
                </span>
                <span>{ags.map(a => a.name).join(' · ') || agentIds.join(', ')}</span>
              </div>
              {summary && (
                <div style={{ fontSize: 13, color: 'var(--text-secondary)', marginTop: 10, lineHeight: 1.5 }}>{summary}</div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
};

// NewsScreen v2 lives in news.jsx (window.NewsScreen, window.LikedNewsScreen)

const PRIORITY_LABEL = { 0: 'Kritik', 1: 'Önemli', 2: 'Normal' };
const PRIORITY_CLASS = { 0: 'p0', 1: 'p1', 2: 'p2' };
const CATEGORY_LABEL = {
  finance: '💰 Finans', operations: '⚙️ Operasyon', strategy: '🎯 Strateji',
  talent: '👥 İnsan', marketing: '📣 Pazarlama', legal: '⚖️ Hukuk',
  personal: '🙋 Kişisel', other: '📌 Genel',
};

const SOURCE_BADGE = {
  manual: { icon: '✍️', label: 'manuel' },
  meeting: { icon: '👥', label: 'toplantı' },
  chat: { icon: '💬', label: 'sohbet' },
};

const TasksScreen = ({ tasks, onToggleTask, onPickConversation, onOpenMeeting, onReprioritize, onTaskAction }) => {
  const [busy, setBusy] = React.useState(false);
  const [reprioReport, setReprioReport] = React.useState(null);

  const groups = React.useMemo(() => {
    const today = new Date().toISOString().slice(0, 10);
    const dayMs = 86400000;
    const out = { pinned: [], overdue: [], today: [], thisWeek: [], later: [], done: [] };
    for (const t of tasks) {
      if (t.done) { out.done.push(t); continue; }
      if (t.pinned) { out.pinned.push(t); continue; }
      const due = t.dueDate ? new Date(t.dueDate).getTime() : null;
      if (due && due < new Date(today).getTime()) { out.overdue.push(t); continue; }
      if (t.dueDate === today) { out.today.push(t); continue; }
      if (due && due - Date.now() < 7 * dayMs) { out.thisWeek.push(t); continue; }
      out.later.push(t);
    }
    return out;
  }, [tasks]);

  const handleReprio = async () => {
    if (busy) return;
    setBusy(true);
    try {
      const result = await onReprioritize();
      setReprioReport(result);
    } catch (e) {
      alert('Yeniden önceliklendirme başarısız: ' + e.message);
    } finally { setBusy(false); }
  };

  const renderTask = (t) => {
    const src = SOURCE_BADGE[t.sourceType] || SOURCE_BADGE.manual;
    return (
      <div key={t.id} className={`task-row v2 ${t.done ? 'done' : ''} ${t.pinned ? 'pinned' : ''} pri-${PRIORITY_CLASS[t.priority] || 'p1'}`}>
        <div className={`task-checkbox ${t.done ? 'checked' : ''}`} onClick={() => onToggleTask(t.id)}>
          <Icon name="check" size={11}/>
        </div>
        <div className="task-body">
          <div className="task-title-row">
            {t.pinned && <span className="task-pin">📌</span>}
            <span className={`task-priority-pill pri-${PRIORITY_CLASS[t.priority] || 'p1'}`}>P{t.priority ?? 1} · {PRIORITY_LABEL[t.priority ?? 1]}</span>
            <span className="task-category-pill">{CATEGORY_LABEL[t.category] || CATEGORY_LABEL.other}</span>
            <span className={`task-due ${t.urgent && !t.done ? 'urgent' : ''}`}>{t.due}</span>
          </div>
          <div className="task-title">{t.title}</div>
          {t.rationale && <div className="task-rationale">{t.rationale}</div>}
          <div className="task-source">
            <span title={src.label}>{src.icon}</span>
            {t.sourceType === 'meeting' && t.sourceMeetingId && onOpenMeeting && (
              <button className="task-source-link" onClick={() => onOpenMeeting(t.sourceMeetingId)}>Toplantıyı aç →</button>
            )}
            {t.sourceType === 'chat' && t.sourceId && onPickConversation && (
              <button className="task-source-link" onClick={() => onPickConversation(t.sourceId)}>Sohbeti aç →</button>
            )}
            <button className="task-action-btn" title={t.pinned ? 'Pin kaldır' : 'Pin yap'}
              onClick={() => onTaskAction && onTaskAction(t.id, { pinned: t.pinned ? 0 : 1 })}>
              {t.pinned ? '📌' : '📍'}
            </button>
            <button className="task-action-btn" title="Sil"
              onClick={() => { if (confirm('Bu görev silinsin mi?')) onTaskAction && onTaskAction(t.id, { delete: true }); }}>
              🗑️
            </button>
          </div>
        </div>
      </div>
    );
  };

  const renderGroup = (key, label, items, icon) => {
    if (!items || !items.length) return null;
    return (
      <div className="task-group" key={key}>
        <div className="task-group-h">
          <span className="task-group-line"></span>
          <span className="task-group-label">{icon} {label}</span>
          <span className="task-group-count">{items.length}</span>
          <span className="task-group-line"></span>
        </div>
        {items.map(renderTask)}
      </div>
    );
  };

  const openCount = tasks.filter(t => !t.done).length;
  const doneCount = tasks.filter(t => t.done).length;

  return (
    <div className="fade-in">
      <div className="greeting" style={{ paddingTop: 8 }}>
        <h1 style={{ fontSize: 36 }}>Görevler</h1>
        <div className="greeting-meta">
          <span>{openCount} açık · {doneCount} tamamlandı</span>
          {groups.overdue.length > 0 && <><span className="dot-sep"></span><span style={{ color: 'var(--kw-red)' }}>⚠️ {groups.overdue.length} geçmiş</span></>}
        </div>
      </div>

      <div style={{ display: 'flex', gap: 12, alignItems: 'center', margin: '20px 0 8px', flexWrap: 'wrap' }}>
        <button
          className="btn-primary"
          disabled={busy || openCount === 0}
          onClick={handleReprio}
          style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '8px 14px', borderRadius: 10, fontSize: 13 }}
        >
          ✨ {busy ? 'CoS düşünüyor…' : 'Bu hafta neye odaklanmalıyım?'}
        </button>
        <span style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>
          CoS açık görevleri gözden geçirip top-3 önceliği işaretler.
        </span>
      </div>

      {reprioReport && reprioReport.topPicks?.length > 0 && (
        <div className="reprio-report">
          <div className="reprio-h">📌 Bu hafta top {reprioReport.topPicks.length} odak — CoS önerisi</div>
          {reprioReport.topPicks.map((p, i) => (
            <div key={i} className="reprio-item">
              <div className="reprio-num">{i + 1}</div>
              <div>
                <div className="reprio-title">{p.title}</div>
                <div className="reprio-reason">{p.reason}</div>
              </div>
            </div>
          ))}
          {reprioReport.rationale && <div className="reprio-rationale">{reprioReport.rationale}</div>}
          <button className="reprio-close" onClick={() => setReprioReport(null)}>Anladım, kapat</button>
        </div>
      )}

      {tasks.length === 0 && (
        <div className="panel" style={{ marginTop: 24, padding: 48, textAlign: 'center', color: 'var(--text-secondary)' }}>
          <div style={{ fontSize: 36, marginBottom: 12 }}>✅</div>
          Henüz görev yok. Toplantı yapın veya sohbet başlatın — Chief of Staff sizin için aksiyonları otomatik çıkartır.
        </div>
      )}

      <div className="task-groups">
        {renderGroup('pinned', 'Sabitlenmiş', groups.pinned, '📌')}
        {renderGroup('overdue', 'Geçmiş', groups.overdue, '⚠️')}
        {renderGroup('today', 'Bugün', groups.today, '🔥')}
        {renderGroup('thisWeek', 'Bu hafta', groups.thisWeek, '📅')}
        {renderGroup('later', 'Sonra', groups.later, '🗓️')}
        {renderGroup('done', 'Tamamlananlar', groups.done, '✅')}
      </div>
    </div>
  );
};

const Inspector = ({ meeting, onClose, agents, onCreateTask, onOpenTaskList }) => {
  const [extracting, setExtracting] = React.useState(false);
  const [meetingTasks, setMeetingTasks] = React.useState([]);

  React.useEffect(() => {
    if (!meeting?.id) { setMeetingTasks([]); return; }
    if (window.KW?.online && window.KW?.getTasksByMeeting) {
      window.KW.getTasksByMeeting(meeting.id).then(setMeetingTasks).catch(() => {});
    } else {
      setMeetingTasks([]);
    }
  }, [meeting?.id]);

  if (!meeting) return null;
  const agentList = (agents && agents.length) ? agents : (window.AGENTS || []);
  const agentIds = Array.isArray(meeting.agents) ? meeting.agents : (meeting.agents || '').split(',').filter(Boolean);
  const ags = agentIds.map(id => agentList.find(a => a.id === id)).filter(Boolean);
  const summary = meeting.summary || meeting.short_note || '';
  const fullSynthesis = meeting.fullSynthesis || meeting.full_synthesis || '';
  const decisions = meeting.decisions || [];
  const when = meeting.when || (meeting.created_at ? new Date(meeting.created_at).toLocaleString('tr-TR') : '');

  const handleExtract = async () => {
    if (extracting || !window.KW?.extractTasksFromMeeting) return;
    setExtracting(true);
    try {
      const result = await window.KW.extractTasksFromMeeting(meeting.id);
      const fresh = await window.KW.getTasksByMeeting(meeting.id);
      setMeetingTasks(fresh);
      if (onCreateTask) onCreateTask();   // outer state refresh
      alert(`${result.tasks?.length || 0} görev + ${result.decisions?.length || 0} karar çıkarıldı`);
    } catch (err) {
      alert('Çıkarım başarısız: ' + err.message);
    } finally { setExtracting(false); }
  };

  return (
    <>
      <div className={`inspector-overlay ${meeting ? 'open' : ''}`} onClick={onClose}></div>
      <div className={`inspector ${meeting ? 'open' : ''}`}>
        <div className="inspector-head">
          <div>
            <div style={{ fontSize: 11, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.04em', fontWeight: 600, marginBottom: 6 }}>Toplantı • {when}</div>
            <div className="inspector-title">{meeting.topic}</div>
          </div>
          <button className="icon-btn" onClick={onClose}><Icon name="x" size={16}/></button>
        </div>
        <div className="inspector-body">
          <div className="inspector-section">
            <div className="inspector-section-label">Katılımcılar</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {ags.map(a => (
                <div key={a.id} style={{ display: 'flex', alignItems: 'center', gap: 6, background: 'var(--bg-tinted)', padding: '4px 10px 4px 4px', borderRadius: 999, fontSize: 12 }}>
                  <span className="avatar-mini" style={{ background: a.color, margin: 0 }}>{a.avatar}</span>
                  {a.name}
                </div>
              ))}
              {ags.length === 0 && agentIds.map(id => (
                <span key={id} style={{ background: 'var(--bg-tinted)', padding: '4px 10px', borderRadius: 999, fontSize: 12 }}>{id}</span>
              ))}
            </div>
          </div>

          {summary && (
            <div className="inspector-section">
              <div className="inspector-section-label">Chief of Staff özeti</div>
              <div className="inspector-text" style={{ whiteSpace: 'pre-wrap' }}>{summary}</div>
            </div>
          )}

          {fullSynthesis && (
            <div className="inspector-section">
              <div className="inspector-section-label">Managing Partner sentezi</div>
              <div className="md-body" style={{ fontSize: 13 }}>
                {window.marked && window.DOMPurify
                  ? <div dangerouslySetInnerHTML={{ __html: window.DOMPurify.sanitize(window.marked.parse(fullSynthesis, { breaks: true })) }}/>
                  : <div style={{ whiteSpace: 'pre-wrap' }}>{fullSynthesis}</div>}
              </div>
            </div>
          )}

          {meetingTasks.length > 0 && (
            <div className="inspector-section">
              <div className="inspector-section-label">📌 Bu toplantıdan çıkan görevler ({meetingTasks.length})</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {meetingTasks.map(t => (
                  <div key={t.id} style={{ background: 'var(--bg-tinted)', padding: '10px 12px', borderRadius: 10, fontSize: 12.5, lineHeight: 1.5 }}>
                    <div style={{ display: 'flex', gap: 6, alignItems: 'center', marginBottom: 4, flexWrap: 'wrap' }}>
                      <span className={`task-priority-pill pri-p${t.priority ?? 1}`}>P{t.priority ?? 1}</span>
                      <span style={{ color: 'var(--text-tertiary)', fontSize: 11 }}>{t.due_date || '—'}</span>
                      {t.status === 'done' && <span style={{ color: '#34C759' }}>✓</span>}
                    </div>
                    <div style={{ color: 'var(--text-primary)' }}>{t.title}</div>
                    {t.rationale && <div style={{ color: 'var(--text-secondary)', fontSize: 11.5, fontStyle: 'italic', marginTop: 4 }}>{t.rationale}</div>}
                  </div>
                ))}
              </div>
              {onOpenTaskList && (
                <button className="btn-ghost" style={{ marginTop: 8, fontSize: 12 }} onClick={onOpenTaskList}>
                  Görevler ekranında görüntüle →
                </button>
              )}
            </div>
          )}

          {decisions.length > 0 && (
            <div className="inspector-section">
              <div className="inspector-section-label">Karar / Aksiyonlar</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {decisions.map((d, i) => (
                  <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', background: 'var(--bg-tinted)', padding: '10px 12px', borderRadius: 10, fontSize: 13.5, lineHeight: 1.45 }}>
                    <span style={{ width: 18, height: 18, borderRadius: 4, background: 'var(--kw-red)', color: 'white', fontSize: 11, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1 }}>{i+1}</span>
                    <span>{d}</span>
                  </div>
                ))}
              </div>
            </div>
          )}

          <div className="inspector-section">
            <button
              className="btn-primary"
              style={{ width: '100%', justifyContent: 'center' }}
              onClick={handleExtract}
              disabled={extracting}
            >
              {extracting ? 'CoS çıkarıyor…' : meetingTasks.length > 0 ? 'Görevleri yeniden çıkar' : '📌 Bu toplantıdan görev üret'}
            </button>
          </div>
        </div>
      </div>
    </>
  );
};

window.ChatScreen = ChatScreen;
window.MeetingsScreen = MeetingsScreen;
window.TasksScreen = TasksScreen;
window.Inspector = Inspector;