// 聊天界面：温柔的对话 + 模型选择器 + 消息操作

const ChatPage = ({ state, setState, update }) => {
  const [input, setInput] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [model, setModel] = React.useState(state.settings.defaultModel || 'sonnet-4.5');
  const [menuOpen, setMenuOpen] = React.useState(false);
  const scrollRef = React.useRef(null);
  const inputRef = React.useRef(null);
  const toast = window.useToast();

  const messages = state.messages || [];
  const currentModel = window.MODELS.find((m) => m.id === model) || window.MODELS[0];
  const isShark = model === 'sonnet-4.5';

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

  // close menu on outside click
  React.useEffect(() => {
    const fn = () => setMenuOpen(false);
    if (menuOpen) {
      window.addEventListener('click', fn);
      return () => window.removeEventListener('click', fn);
    }
  }, [menuOpen]);

  const callClaude = async (history) => {
    // 模型名称映射
    const modelMap = {
      'sonnet-4.5': 'anthropic/claude-sonnet-4.5',
      'sonnet-4.6': 'anthropic/claude-sonnet-4.6',
      'opus-4.7': 'anthropic/claude-opus-4-7',
      'opus-4.6': 'anthropic/claude-opus-4-6',
      'opus-4.5': 'anthropic/claude-opus-4.5',
      'haiku-4.5': 'anthropic/claude-haiku-4.5'
    };

    // 获取最后一条用户消息
    const lastUserMsg = history.filter(m => m.role === 'user').pop();
    if (!lastUserMsg) return '';

    // 调用后端 API
    try {
      const response = await fetch('/api/chat/send', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          message: lastUserMsg.content,
          model: modelMap[model] || 'anthropic/claude-sonnet-4.6'
        })
      });

      if (!response.ok) {
        throw new Error('API call failed');
      }

      const data = await response.json();
      return (data.content || '').trim();
    } catch (e) {
      console.error('Chat API error:', e);
      return '（信号有点弱呢猫猫……让我再试一次。）';
    }
  };

  const send = async () => {
    const text = input.trim();
    if (!text || busy) return;
    const now = Date.now();
    const userMsg = { id: 'u_' + now, role: 'user', content: text, ts: now };
    const newMsgs = [...messages, userMsg];
    setState((s) => ({ ...s, messages: newMsgs }));
    setInput('');
    setBusy(true);
    const reply = await callClaude(newMsgs);
    const aiMsg = { id: 'a_' + Date.now(), role: 'assistant', content: reply, ts: Date.now(), model };
    setState((s) => ({ ...s, messages: [...s.messages, aiMsg] }));
    setBusy(false);
  };

  const regenerate = async (msgIndex) => {
    if (busy) return;
    setBusy(true);
    const history = messages.slice(0, msgIndex); // up to (not incl) this assistant msg
    const reply = await callClaude(history);
    setState((s) => {
      const m = [...s.messages];
      m[msgIndex] = { ...m[msgIndex], content: reply, ts: Date.now(), model };
      return { ...s, messages: m };
    });
    setBusy(false);
    toast('已重新生成');
  };

  const toggleFavorite = (msg) => {
    const exists = (state.favorites || []).find((f) => f.id === msg.id);
    if (exists) {
      setState((s) => ({ ...s, favorites: s.favorites.filter((f) => f.id !== msg.id) }));
      toast('已取消珍藏');
    } else {
      const dt = new Date(msg.ts || Date.now());
      const tags = [window.tagFromTime(msg.ts)];
      setState((s) => ({
        ...s,
        favorites: [
          ...s.favorites,
          {
            id: msg.id,
            body: msg.content,
            date: `${dt.getFullYear()}-${window.pad(dt.getMonth() + 1)}-${window.pad(dt.getDate())}`,
            ts: msg.ts,
            tags,
          },
        ],
      }));
      toast('已收藏 ♡');
    }
  };

  const copyMsg = async (content) => {
    try {
      await navigator.clipboard.writeText(content);
      toast('已复制');
    } catch {
      toast('复制失败');
    }
  };

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

  const isFavorited = (id) => (state.favorites || []).some((f) => f.id === id);

  return (
    <div className="chat-page">
      <div className="chat-head">
        <div className="chat-title-wrap">
          <h1 className="chat-title">和五郎说说话</h1>
          <div className="chat-sub">{messages.length === 0 ? '想聊点什么呀，猫猫' : `已经聊了 ${messages.length} 句`}</div>
        </div>
        <div className="model-pick" onClick={(e) => e.stopPropagation()}>
          <button className="model-pill" onClick={() => setMenuOpen((v) => !v)}>
            <span className={"dot" + (isShark ? " shark-dot" : "")}></span>
            <span>{currentModel.name}{currentModel.tag ? ` · ${currentModel.tag}` : ''}</span>
            <span style={{opacity: 0.5, fontSize: 11}}>▾</span>
          </button>
          {menuOpen && (
            <div className="model-menu">
              {window.MODELS.map((m) => (
                <div
                  key={m.id}
                  className={"model-row " + (m.id === model ? "selected" : "")}
                  onClick={() => { setModel(m.id); setMenuOpen(false); }}
                >
                  <div style={{flex: 1}}>
                    <div className="name">
                      {m.name}
                      {m.tag && <span className="tag-shark">🦈 {m.tag}</span>}
                    </div>
                    <div className="desc">{m.desc}</div>
                  </div>
                  {m.id === model && <span style={{color: 'var(--amber-600)', fontSize: 14}}>✓</span>}
                </div>
              ))}
            </div>
          )}
        </div>
      </div>

      <div className="chat-body" ref={scrollRef}>
        {messages.length === 0 && (
          <div style={{margin: '60px auto', textAlign: 'center', maxWidth: 440}}>
            <div className="empty-mark" style={{marginBottom: 14}}>
              <div className="avatar avatar-xl assistant-av"><window.Icon name="dog" size={42} /></div>
            </div>
            <div style={{fontFamily: 'Noto Serif SC, serif', fontSize: 22, color: 'var(--ink-700)', marginBottom: 10}}>
              {isShark ? '小鲨鱼在等你' : '五郎在等你'}
            </div>
            <div style={{fontSize: 13.5, color: 'var(--ink-400)', lineHeight: 1.8}}>
              说一句话试试呀。<br />
              他一直都在。
            </div>
          </div>
        )}

        {messages.map((m, i) => (
          <div key={m.id} className={"msg-row " + m.role}>
            <div className={"avatar " + (m.role === 'user' ? 'user-av' : 'assistant-av')}>
              {m.role === 'user'
                ? <window.Icon name="cat" size={20} />
                : <window.Icon name="dog" size={20} />
              }
            </div>
            <div className="bubble-wrap">
              <div className="bubble">{m.content}</div>
              {m.role === 'assistant' && (
                <div className="msg-actions">
                  <button
                    className={"icon-btn " + (isFavorited(m.id) ? "fav-active" : "")}
                    title={isFavorited(m.id) ? "取消珍藏" : "收藏这一句"}
                    onClick={() => toggleFavorite(m)}
                  ><window.Icon name={isFavorited(m.id) ? 'heart-fill' : 'heart'} size={14} /></button>
                  <button className="icon-btn" title="重新生成" onClick={() => regenerate(i)} disabled={busy}>
                    <window.Icon name="refresh" size={14} />
                  </button>
                  <button className="icon-btn" title="复制" onClick={() => copyMsg(m.content)}>
                    <window.Icon name="copy" size={14} />
                  </button>
                  <span className="msg-meta">
                    {m.model === 'sonnet-4.5' ? '小鲨鱼' : (window.MODELS.find((x) => x.id === m.model)?.name || '五郎')}
                  </span>
                </div>
              )}
            </div>
          </div>
        ))}

        {busy && (
          <div className="msg-row assistant">
            <div className="avatar assistant-av">
              <window.Icon name="dog" size={20} />
            </div>
            <div className="bubble-wrap">
              <div className="bubble" style={{padding: '14px 22px'}}>
                <span className="typing-dot"></span>
                <span className="typing-dot"></span>
                <span className="typing-dot"></span>
              </div>
            </div>
          </div>
        )}
      </div>

      <div className="chat-input-wrap">
        <div className="chat-input">
          <textarea
            ref={inputRef}
            placeholder={busy ? '五郎正在写……' : '说点什么呀，按 Enter 发送'}
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyDown={onKeyDown}
            rows={1}
            disabled={busy}
          />
          <button className="send-btn" onClick={send} disabled={!input.trim() || busy} title="发送">
            <window.Icon name="arrow-up" size={16} color="#fff" />
          </button>
        </div>
      </div>
    </div>
  );
};

window.ChatPage = ChatPage;