// ================================================================
// Chat screen
// ================================================================

// Configure marked for safe rendering
if (window.marked) {
  window.marked.setOptions({ breaks: true, gfm: true });
}

const renderMarkdown = (text) => {
  if (!text) return '';
  try { return window.marked ? window.marked.parse(text) : text; }
  catch { return text; }
};

const ChatScreen = ({ messages, onSendMessage, agents, isThinking, onNewChat }) => {
  const [draft, setDraft] = React.useState('');
  const scrollRef = React.useRef(null);

  React.useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
  }, [messages, isThinking]);

  const handleSend = () => {
    if (!draft.trim()) return;
    onSendMessage(draft, null);
    setDraft('');
  };


  return (
    <div className="chat-screen">
      <div className="chat-pane">
        <div className="chat-scroll" ref={scrollRef}>
          {messages.length === 0 && !isThinking && (
            <div className="chat-empty">
              <div className="chat-empty-title">Ask me anything.</div>
              <div className="chat-empty-sub">MuleSoft, Salesforce, AI, projects — or just say hi.</div>
            </div>
          )}
          <div className="chat-inner">
            {messages.map((msg, i) => {
              if (msg.type === 'handoff') {
                const from = agents.find(a => a.id === msg.from);
                const to = agents.find(a => a.id === msg.to);
                return (
                  <div key={i} className="handoff">
                    <div className="agent-avatar" style={{ background: from.color, width: 18, height: 18, fontSize: 9, borderRadius: 6 }}>{from.initial}</div>
                    <span>{from.name}</span>
                    <span className="arrow">→</span>
                    <div className="agent-avatar" style={{ background: to.color, width: 18, height: 18, fontSize: 9, borderRadius: 6 }}>{to.initial}</div>
                    <span>{to.name}</span>
                    <span style={{ color: 'var(--ink-mute)' }}>· {msg.reason}</span>
                  </div>
                );
              }
              if (msg.type === 'tool') {
                return (
                  <div key={i} className="tool-card">
                    <Icon name={msg.icon || 'zap'} />
                    <span className="tool-card-name">{msg.name}</span>
                    <span className="tool-card-desc">{msg.desc}</span>
                  </div>
                );
              }
              if (msg.role === 'user') {
                return (
                  <div key={i} className="msg user">
                    <div className="msg-head">
                      {msg.mentioned && (
                        <span style={{ fontSize: 11.5, color: 'var(--accent-ink)', fontWeight: 500 }}>@{msg.mentioned.name}</span>
                      )}
                      <div className="msg-time">{msg.time}</div>
                      <div className="msg-author">You</div>
                    </div>
                    <div className="msg-bubble">{msg.content}</div>
                  </div>
                );
              }
              const agent = agents.find(a => a.id === msg.agent) || agents[0];
              return (
                <div key={i} className="msg agent">
                  <div className="msg-head">
                    <div className="user-avatar" style={{ width: 24, height: 24, fontSize: 10, flexShrink: 0 }}>SK</div>
                    <div className="msg-author">Sai Krishna</div>
                    <div className="msg-time" style={{ color: 'var(--ink-mute)' }}>{agent.role}</div>
                    <div className="msg-time" style={{ marginLeft: 'auto' }}>{msg.streaming ? 'typing…' : msg.time}</div>
                  </div>
                  <div
                    className="msg-bubble markdown-body"
                    dangerouslySetInnerHTML={{
                      __html: renderMarkdown(msg.content) + (msg.streaming ? '<span class="stream-cursor"></span>' : '')
                    }}
                  />
                  {!msg.streaming && (
                    <div className="msg-actions">
                      <div className="msg-action" title="Copy" onClick={() => navigator.clipboard?.writeText(msg.content)}><Icon name="copy" /></div>
                      <div className="msg-action" title="Good response"><Icon name="thumbs-up" /></div>
                      <div className="msg-action" title="Bad response"><Icon name="thumbs-down" /></div>
                    </div>
                  )}
                </div>
              );
            })}

            {isThinking && (
              <div className="msg agent">
                <div className="msg-head">
                  <div className="user-avatar" style={{ width: 24, height: 24, fontSize: 10, flexShrink: 0 }}>SK</div>
                  <div className="msg-author">Sai Krishna</div>
                  <div className="msg-time" style={{ color: 'var(--ink-mute)' }}>thinking…</div>
                </div>
                <div className="msg-bubble">
                  <div className="typing"><span /><span /><span /></div>
                </div>
              </div>
            )}
          </div>
        </div>

        <div className="chat-composer-wrap">
          <Composer
            value={draft}
            onChange={setDraft}
            onSend={handleSend}
            disabled={!!isThinking}
            autoFocus
          />
        </div>
      </div>
    </div>
  );
};

window.ChatScreen = ChatScreen;