// Chat v2 — ChatsScreen (list) + ChatScreen (active conversation)

// === Markdown renderer (lightweight) ===
const renderMd = (text) => {
  if (!text) return null;
  // bold + italic + code inline
  const parts = [];
  let rest = text;
  let key = 0;
  const re = /(\*\*[^*]+\*\*|\*[^*]+\*|`[^`]+`)/;
  while (rest.length) {
    const m = rest.match(re);
    if (!m) { parts.push(rest); break; }
    if (m.index > 0) parts.push(rest.slice(0, m.index));
    const tok = m[0];
    if (tok.startsWith('**')) parts.push(<strong key={`md${key++}`}>{tok.slice(2, -2)}</strong>);
    else if (tok.startsWith('`')) parts.push(<code key={`md${key++}`} className="md-code">{tok.slice(1, -1)}</code>);
    else parts.push(<em key={`md${key++}`}>{tok.slice(1, -1)}</em>);
    rest = rest.slice(m.index + tok.length);
  }
  return parts;
};

const RenderContent = ({ content }) => {
  if (!content) return null;
  return (
    <div className="md-body">
      {content.map((node, i) => {
        if (node.type === 'h2') return <h2 key={i} className="md-h2">{node.text}</h2>;
        if (node.type === 'h3') return <h3 key={i} className="md-h3">{node.text}</h3>;
        if (node.type === 'p')  return <p key={i} className="md-p">{renderMd(node.text)}</p>;
        if (node.type === 'ul') return <ul key={i} className="md-ul">{node.items.map((it, j) => <li key={j}>{renderMd(it)}</li>)}</ul>;
        if (node.type === 'ol') return <ol key={i} className="md-ol">{node.items.map((it, j) => <li key={j}>{renderMd(it)}</li>)}</ol>;
        if (node.type === 'quote') return <blockquote key={i} className="md-quote">{renderMd(node.text)}</blockquote>;
        return null;
      })}
    </div>
  );
};

// === ChatsScreen — full conversation list ===
const ChatsScreenV2 = ({ conversations, onOpen, onNewChat, onGoHome }) => {
  const [search, setSearch] = React.useState('');
  const [filter, setFilter] = React.useState('all'); // all | solution | unread

  const filtered = React.useMemo(() => {
    let list = conversations;
    if (filter === 'solution') list = list.filter(c => c.chat_type === 'solution_session');
    if (filter === 'unread')   list = list.filter(c => c.unread_count > 0);
    if (search.trim()) {
      const q = search.toLowerCase();
      list = list.filter(c => c.title.toLowerCase().includes(q) || c.last_message.toLowerCase().includes(q));
    }
    return list;
  }, [conversations, search, filter]);

  // Group by time
  const grouped = React.useMemo(() => {
    const out = {};
    filtered.forEach(c => {
      const g = chatTimeGroup(c.updated_minutes_ago);
      (out[g] = out[g] || []).push(c);
    });
    return out;
  }, [filtered]);

  const totalUnread = conversations.reduce((s, c) => s + (c.unread_count || 0), 0);
  const solutionCount = conversations.filter(c => c.chat_type === 'solution_session').length;

  return (
    <div className="chats-screen fade-in">
      <header className="chats-head">
        <h1 className="chats-title">Sohbetler</h1>
        <div className="chats-meta">
          <span>{conversations.length} sohbet</span>
          {totalUnread > 0 && <><span className="dot-sep"></span><span className="chats-unread">{totalUnread} okunmamış</span></>}
        </div>
      </header>

      <div className="chats-toolbar">
        <div className="chats-search">
          <Icon name="search" size={14} />
          <input
            type="text"
            placeholder="Sohbetlerde ara…"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            autoFocus
          />
          {search && <button className="chats-search-clear" onClick={() => setSearch('')}><Icon name="x" size={12} /></button>}
        </div>
        <button className="chats-new-btn" onClick={onNewChat}>
          <Icon name="plus" size={13} />
          Yeni sohbet
          <kbd>⌘N</kbd>
        </button>
      </div>

      <div className="chats-segmented">
        <button className={`seg ${filter === 'all' ? 'active' : ''}`} onClick={() => setFilter('all')}>
          Tümü <span className="seg-count">{conversations.length}</span>
        </button>
        <button className={`seg ${filter === 'solution' ? 'active' : ''}`} onClick={() => setFilter('solution')}>
          Çözüm Sohbetleri <span className="seg-count">{solutionCount}</span>
        </button>
        <button className={`seg ${filter === 'unread' ? 'active' : ''}`} onClick={() => setFilter('unread')}>
          Okunmamış <span className="seg-count">{totalUnread}</span>
        </button>
      </div>

      {filtered.length === 0 && search && (
        <div className="chats-empty">
          <div className="chats-empty-glyph"><Icon name="search" size={28} /></div>
          <div className="chats-empty-title">"{search}" için sonuç yok</div>
          <div className="chats-empty-sub">Başka bir kelime dene veya filtreyi temizle.</div>
        </div>
      )}

      {filtered.length === 0 && !search && filter !== 'all' && (
        <div className="chats-empty">
          <div className="chats-empty-glyph"><Icon name="chat" size={28} /></div>
          <div className="chats-empty-title">Bu filtrede sohbet yok</div>
          <div className="chats-empty-sub">Tümü'ne dönerek diğer sohbetleri gör.</div>
          <button className="btn-ghost" onClick={() => setFilter('all')}>Tümünü göster</button>
        </div>
      )}

      {conversations.length === 0 && (
        <div className="chats-empty">
          <div className="chats-empty-glyph"><Icon name="chat" size={28} /></div>
          <div className="chats-empty-title">Henüz sohbet yok</div>
          <div className="chats-empty-sub">Ana sayfadan ekibinize bir soru sorarak ilk sohbeti başlatın.</div>
          <button className="btn-primary" onClick={onGoHome}>Ana sayfaya git</button>
        </div>
      )}

      <div className="chats-list">
        {CHAT_TIME_GROUPS.map(g => {
          const items = grouped[g.key];
          if (!items || items.length === 0) return null;
          return (
            <section key={g.key} className="chats-group">
              <div className="chats-group-head">
                <span className="chats-group-rule"></span>
                <span className="chats-group-label">{g.label}</span>
                <span className="chats-group-rule"></span>
              </div>
              {items.map(c => {
                const ags = (c.agents || []).map(id => AGENTS.find(a => a.id === id)).filter(Boolean);
                const isSolution = c.chat_type === 'solution_session';
                return (
                  <div
                    key={c.id}
                    className={`conv-row ${isSolution ? 'is-solution' : ''} ${c.unread_count > 0 ? 'is-unread' : ''}`}
                    onClick={() => onOpen(c)}
                  >
                    <div className="conv-icon">
                      {isSolution ? <Icon name="sparkle" size={15} /> : <Icon name="chat" size={15} />}
                    </div>
                    <div className="conv-body">
                      <div className="conv-row-head">
                        <h3 className="conv-title">{c.title}</h3>
                        <span className="conv-time">{chatRelativeTime(c.updated_minutes_ago)}</span>
                      </div>
                      <div className="conv-sub">
                        <span className="conv-agents">
                          {ags.map(a => a.id.toUpperCase()).join('+')}
                        </span>
                        <span className="dot-sep"></span>
                        <span>{c.message_count} mesaj</span>
                        {isSolution && <><span className="dot-sep"></span><span className="conv-solution-tag">solution_session</span></>}
                      </div>
                      <div className="conv-preview">{c.last_message}</div>
                    </div>
                    {c.unread_count > 0 && <div className="conv-unread-dot" title={`${c.unread_count} okunmamış`}></div>}
                  </div>
                );
              })}
            </section>
          );
        })}
      </div>
    </div>
  );
};

// === Triage Indicator (CoS thinking) ===
const TriageIndicator = ({ stages, fanOut }) => {
  const [stageIdx, setStageIdx] = React.useState(0);
  React.useEffect(() => {
    if (!stages || stages.length <= 1) return;
    const t = setInterval(() => setStageIdx(i => (i + 1) % stages.length), 2400);
    return () => clearInterval(t);
  }, [stages]);

  return (
    <div className="msg-triage">
      <div className="triage-pill">
        <Icon name="sparkle" size={11} className="triage-spark" />
        <span className="triage-label">Chief of Staff</span>
        <span className="triage-text">{stages?.[stageIdx] || 'düşünüyor…'}</span>
        <span className="triage-pulse-dots"><span></span><span></span><span></span></span>
      </div>
      {fanOut && fanOut.length > 0 && (
        <div className="triage-fanout">
          {fanOut.map((f, i) => {
            const ag = AGENTS.find(a => a.id === f.agent);
            return (
              <div key={i} className={`fanout-card ${f.status}`}>
                <span className="fanout-avatar" style={{ background: ag?.color }}>{ag?.avatar}</span>
                <div className="fanout-mid">
                  <div className="fanout-name">{ag?.name}</div>
                  <div className="fanout-status">
                    {f.status === 'done' ? `cevap hazır · ${f.tokens} token` : 'düşünüyor…'}
                  </div>
                </div>
                <span className={`fanout-status-dot ${f.status}`}></span>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
};

// === Tool Call Indicator ===
const ToolCalls = ({ tools, consult }) => {
  const [open, setOpen] = React.useState(false);
  if (!tools || tools.length === 0) return null;
  const total = tools.length + (consult?.length || 0);
  return (
    <div className={`msg-tools ${open ? 'open' : ''}`} onClick={() => setOpen(o => !o)}>
      <div className="msg-tools-bar">
        <Icon name="settings" size={11} />
        <span>{total} araç kullanıldı</span>
        <span className="msg-tools-list">{tools.slice(0, 3).join(' · ')}{tools.length > 3 ? ` · +${tools.length - 3}` : ''}</span>
        {consult && consult.length > 0 && (
          <span className="msg-tools-consult">
            <Icon name="sparkle" size={9} /> consult: {consult.join(', ')}
          </span>
        )}
        <Icon name="chevron-d" size={11} className="msg-tools-caret" />
      </div>
      {open && (
        <div className="msg-tools-detail">
          {tools.map((t, i) => (
            <div key={i} className="msg-tools-row"><code className="md-code">{t}</code></div>
          ))}
          {consult && consult.map((c, i) => {
            const ag = AGENTS.find(a => a.id === c);
            return (
              <div key={`c${i}`} className="msg-tools-row consult">
                <span className="fanout-avatar" style={{ background: ag?.color, width: 18, height: 18, fontSize: 9 }}>{ag?.avatar}</span>
                consult_agent → <strong>{ag?.name || c}</strong>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
};

// === Single message render ===
const Message = ({ m, onOpenMeeting, onSuggestion }) => {
  // User
  if (m.role === 'user') {
    return (
      <div className="msg msg-user fade-in">
        <div className="msg-meta">You · {m.time}</div>
        <div className="msg-user-bubble">{m.text}</div>
      </div>
    );
  }

  // Triage
  if (m.mode === 'triage') {
    return <TriageIndicator stages={m.stages} fanOut={m.fanOut} />;
  }

  // Resolve agent
  const isSolution = m.mode === 'solution_session';
  const isMeeting  = m.mode === 'team-meeting';
  const agent = AGENTS.find(a => a.id === (m.agents?.[0] || m.role)) || AGENTS.find(a => a.id === 'cos');
  const displayName = m.name || agent?.name;

  const className = [
    'msg',
    'msg-assistant',
    isSolution ? 'msg-solution' : '',
    isMeeting  ? 'msg-meeting'  : '',
    'fade-in',
  ].join(' ').trim();

  return (
    <div className={className}>
      <div className="msg-head">
        <span className="msg-pill" style={{ '--pill-color': agent?.color }}>
          {isSolution ? <Icon name="sparkle" size={11} /> : null}
          <span className="msg-pill-name">{displayName}</span>
          {m.agents && m.agents.length > 1 && (
            <span className="msg-pill-agents">
              ({m.agents.map(id => AGENTS.find(a => a.id === id)?.avatar || id).join('+')})
            </span>
          )}
        </span>
        <span className="msg-time">{m.time}</span>
        {isMeeting && m.meetingId && (
          <button className="msg-meeting-badge" onClick={() => onOpenMeeting?.(m.meetingId)}>
            <Icon name="group" size={10} /> {m.meetingTitle || 'Toplantı'}
            <Icon name="external" size={10} />
          </button>
        )}
      </div>

      {m.content && <RenderContent content={m.content} />}
      {m.text && !m.content && <p className="md-p">{renderMd(m.text)}</p>}

      {(m.tools_used || m.consult_targets) && (
        <ToolCalls tools={m.tools_used} consult={m.consult_targets} />
      )}

      {m.suggestions && m.suggestions.length > 0 && (
        <div className="msg-suggestions">
          {m.suggestions.map((s, i) => (
            <button key={i} className="suggestion-chip" onClick={() => onSuggestion?.(s)}>{s}</button>
          ))}
        </div>
      )}

      {isMeeting && (
        <div className="msg-actions">
          <button className="btn-ghost btn-sm" onClick={() => onOpenMeeting?.(m.meetingId)}>
            <Icon name="external" size={12} /> Toplantı detayı
          </button>
          <button className="btn-ghost btn-sm">
            <Icon name="check" size={12} /> Karar log'a ekle
          </button>
        </div>
      )}
    </div>
  );
};

// === Solution Session Phase Progress (skill: impossible-market-architect) ===
// 4 fazlı süreç: Discovery → ICP → 3 Yol → Sezgi Testi
const inferSolutionPhase = (thread) => {
  if (!thread || thread.length === 0) return 1;
  const txt = thread
    .filter(m => m.role !== 'user')
    .map(m => (m.text || '') + ' ' + (m.content ? JSON.stringify(m.content) : ''))
    .join(' ')
    .toLowerCase();
  if (/sezgi|hangisi.+olmaz|patron.+seçim/i.test(txt)) return 4;
  if (/3 yol|yol 1|pragmatik|provokatif|mahall|yalıkavak/i.test(txt)) return 3;
  if (/icp|alıcı profil|istanbullu|gurbetçi|yabancı/i.test(txt)) return 2;
  return 1;
};

const PHASES_LABELS = [
  { n: 1, label: 'Discovery', short: 'Sorular' },
  { n: 2, label: 'ICP Analizi', short: 'Profil' },
  { n: 3, label: '3 Yol', short: 'Çözüm' },
  { n: 4, label: 'Sezgi Testi', short: 'Karar' },
];

const SolutionPhaseProgress = ({ thread }) => {
  const current = inferSolutionPhase(thread);
  return (
    <div className="ss-phase-progress">
      {PHASES_LABELS.map((p, i) => {
        const status = p.n < current ? 'done' : p.n === current ? 'current' : 'upcoming';
        return (
          <React.Fragment key={p.n}>
            <div className={`ssp-step ssp-${status}`}>
              <div className="ssp-step-num">{p.n < current ? '✓' : p.n}</div>
              <div className="ssp-step-label">
                <span className="ssp-step-short">{p.short}</span>
                <span className="ssp-step-full">{p.label}</span>
              </div>
            </div>
            {i < PHASES_LABELS.length - 1 && (
              <div className={`ssp-connector ${p.n < current ? 'ssp-done' : ''}`} />
            )}
          </React.Fragment>
        );
      })}
    </div>
  );
};

// === ChatScreen v2 — active conversation ===
const ChatScreenV2 = ({ conversation, thread, onSend, onBack, onOpenMeeting, busy }) => {
  const [msg, setMsg] = React.useState('');
  const [menuOpen, setMenuOpen] = React.useState(false);
  const threadRef = React.useRef(null);

  React.useEffect(() => {
    if (threadRef.current) {
      threadRef.current.scrollTop = threadRef.current.scrollHeight;
    }
  }, [thread]);

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

  if (!conversation) {
    return (
      <div className="chat-v2-empty fade-in">
        <div className="chat-v2-empty-glyph"><Icon name="chat" size={32} /></div>
        <h2>Sohbet seçilmedi</h2>
        <p>Soldaki listeden bir sohbet seç ya da yeni başlat.</p>
        <button className="btn-primary" onClick={onBack}>Sohbet listesine dön</button>
      </div>
    );
  }

  const ags = (conversation.agents || []).map(id => AGENTS.find(a => a.id === id)).filter(Boolean);
  const isSolution = conversation.chat_type === 'solution_session';
  const placeholder = isSolution ? 'Cevabını gir…' : 'Yanıtla…';

  return (
    <div className={`chat-v2 ${isSolution ? 'is-solution' : ''} fade-in`}>
      <header className="chat-v2-header">
        <button className="chat-v2-back" onClick={onBack} title="Sohbet listesi">
          <Icon name="chevron-l" size={16} />
        </button>
        <div className="chat-v2-title-block">
          <div className="chat-v2-title-row">
            {isSolution && <Icon name="sparkle" size={14} className="chat-v2-title-icon" />}
            <h1 className="chat-v2-title">{conversation.title}</h1>
          </div>
          <div className="chat-v2-sub">
            <span className="chat-v2-agents">
              {ags.map(a => a.id.toUpperCase()).join('+')}
            </span>
            <span className="dot-sep"></span>
            <span>{conversation.message_count} mesaj</span>
            <span className="dot-sep"></span>
            <span className={isSolution ? 'chat-v2-type-tag solution' : 'chat-v2-type-tag'}>
              {isSolution ? 'solution_session' : 'regular'}
            </span>
          </div>
          {isSolution && <SolutionPhaseProgress thread={thread} />}
        </div>
        <div className="chat-v2-actions">
          <div className="chat-v2-menu-wrap">
            <button className="icon-btn" onClick={() => setMenuOpen(o => !o)} title="Daha fazla">
              <Icon name="more-h" size={16} />
            </button>
            {menuOpen && (
              <div className="chat-v2-menu" onClick={() => setMenuOpen(false)}>
                <button><Icon name="edit" size={12} /> Yeniden adlandır</button>
                <button><Icon name="download" size={12} /> Dışa aktar</button>
                <button className="danger"><Icon name="trash" size={12} /> Sohbeti sil</button>
              </div>
            )}
          </div>
        </div>
      </header>

      <div className="chat-v2-thread" ref={threadRef}>
        {thread && thread.length > 0 ? (
          thread.map((m, i) => (
            <Message key={i} m={m} onOpenMeeting={onOpenMeeting} onSuggestion={(s) => setMsg(s.replace(/[→↑]/g, '').trim())} />
          ))
        ) : (
          <div className="chat-v2-greeting">
            <Icon name="sparkle" size={20} />
            <h3>Mesajını yaz, ekip dinliyor.</h3>
            <p>{isSolution ? 'Çözüm Mimarı 4 fazda ilerliyor: Discovery · Risk · Senaryo · Karar.' : 'Chief of Staff sorunu yönlendirip uygun ekibi toplayacak.'}</p>
          </div>
        )}

        {busy && <TriageIndicator stages={['Chief of Staff düşünüyor…', 'Ekibi topluyor…', 'MP sentez yapıyor…']} />}
      </div>

      <div className="chat-v2-input">
        <div className="chat-v2-input-inner">
          <textarea
            placeholder={placeholder}
            value={msg}
            onChange={(e) => {
              setMsg(e.target.value);
              e.target.style.height = 'auto';
              e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
            }}
            onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); } }}
            rows={1}
          />
          <button
            className={`chat-v2-send ${msg.trim() ? 'visible' : ''}`}
            onClick={send}
            disabled={!msg.trim()}
            title="Gönder ↵"
          >
            <Icon name="arrow-up" size={15} />
          </button>
        </div>
      </div>
    </div>
  );
};

window.ChatsScreenV2 = ChatsScreenV2;
window.ChatScreenV2 = ChatScreenV2;