'use client';
import { useState, useRef, useEffect } from 'react';
import { useChat } from 'ai/react';

export default function Practice() {
  const { messages, append } = useChat();
  const [inputValue, setInputValue] = useState('');
  console.log("当前的消息记录是：", messages);
  // ==========================================
  // 📝 进阶练习：自动滚屏与画中画 (Artifacts)
  //
  // 【要求】：补全任务 7 到 10。完成后你的页面将拥有“天气卡片”和自动滚屏功能！
  // ==========================================

  // 💡 任务 7：创建一个“锚点”，用来指向聊天列表的最底部
  const messagesEndRef = useRef<HTMLDivElement>(null);


  // 💡 任务 8：写一个 useEffect 监听器，只要 messages 变化，就让页面平滑滚动到上面创建的锚点
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  // 💡 任务 9：从 messages 里找出最后一次使用的工具（Tool）
  // 提示：这行代码可以直接参考最终答案，主要是理解它在干嘛
  const lastMessageWithTool = messages.slice().reverse().find(m => m.toolInvocations && m.toolInvocations.length > 0);
  const activeTool = lastMessageWithTool?.toolInvocations?.[lastMessageWithTool.toolInvocations.length - 1];

  const handleSend = (e: React.FormEvent) => {
    e.preventDefault();
    if (!inputValue.trim()) return;
    append({ role: 'user', content: inputValue });
    setInputValue('');
  };

  return (
    <div style={{ display: 'flex', gap: '20px', padding: '50px', maxWidth: '1000px', margin: '0 auto', height: '80vh' }}>
      
      {/* ================= 左侧：聊天区 ================= */}
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', border: '1px solid #ccc', borderRadius: '8px', padding: '20px' }}>
        <h3>💬 聊天区</h3>
        
        <div style={{ flex: 1, overflowY: 'auto', marginBottom: '20px', border: '1px dashed #eee', padding: '10px' }}>
          {messages.length === 0 && <p style={{ color: '#999' }}>暂无消息...</p>}
          
          {messages.map(m => (
            <div key={m.id} style={{ marginBottom: '15px' }}>
              <strong style={{ color: m.role === 'user' ? 'blue' : 'green' }}>
                {m.role === 'user' ? '你：' : 'AI：'}
              </strong>
              
              {/* 这里加了一个小判断，如果是工具调用，就在左边显示一行提示，不再显示一大坨代码 */}
              {m.toolInvocations ? (
                <span style={{ color: '#888', fontSize: '12px', marginLeft: '10px' }}>[生成了一个组件，请看右侧画布]</span>
              ) : (
                <span style={{ whiteSpace: 'pre-wrap' }}>{m.content}</span>
              )}
            </div>
          ))}
          
          {/* 💡 任务 7 的搭档：在这里把那个看不见的锚点埋下 */}
          {/* <div ref={...} /> */}
          <div ref={messagesEndRef} />
        </div>

        <form onSubmit={handleSend} style={{ display: 'flex', gap: '10px' }}>
          <input 
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            style={{ flex: 1, padding: '10px', borderRadius: '4px', border: '1px solid #ccc' }}
            placeholder="试试问：“北京天气怎么样？”"
          />
          <button type="submit" style={{ padding: '10px 20px', background: 'blue', color: 'white', borderRadius: '4px', border: 'none', cursor: 'pointer' }}>发送</button>
        </form>
      </div>

      {/* ================= 右侧：画布区 (Artifacts) ================= */}
      <div style={{ flex: 1, background: '#f9f9f9', border: '1px solid #ddd', borderRadius: '8px', padding: '20px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        
        {/* 💡 任务 10：完成条件渲染逻辑 */}
        {/* 
            如果 activeTool 不存在，显示一段提示文字："等待 AI 召唤画布..." 
            如果 activeTool 存在，并且 activeTool.toolName === 'getWeather'，并且 activeTool.state === 'result'，
            就用一个好看的 div 把 activeTool.args.location 和 activeTool.result.temperature 显示出来！
        */}
        {!activeTool ? (
          <div style={{ textAlign: 'center', color: '#999' }}>
            <p>等待 AI 召唤画布...</p>
          </div>
        ) : (
          <div>
            {activeTool.state === 'result' && activeTool.toolName === 'getWeather' && (
              <div style={{ padding: '30px', background: 'white', borderRadius: '10px', boxShadow: '0 4px 12px rgba(0,0,0,0.1)', textAlign: 'center' }}>
                <h2 style={{ margin: 0, fontSize: '24px', color: '#333' }}>{activeTool.args.location}</h2>
                <div style={{ fontSize: '48px', fontWeight: 'bold', color: '#0070f3', margin: '20px 0' }}>
                  {activeTool.result.temperature}°C
                </div>
                <p style={{ color: '#666', margin: 0 }}>天气状况：{activeTool.result.condition}</p>
              </div>
            )}
          </div>
        )}



      </div>

      {/* 答案区域在下面 */}
      <div style={{ position: 'absolute', bottom: 10, right: 10 }}>
        <details style={{ background: '#f5f5f5', padding: '10px', borderRadius: '8px', border: '1px solid #ccc' }}>
          <summary style={{ cursor: 'pointer', fontWeight: 'bold', color: 'green' }}>👉 点击查看答案</summary>
          <pre style={{ whiteSpace: 'pre-wrap', fontSize: '12px', marginTop: '10px', maxWidth: '500px', maxHeight: '400px', overflow: 'auto' }}>
{`// 答案代码：
'use client';
import { useState, useRef, useEffect } from 'react';
import { useChat } from 'ai/react';

export default function Practice() {
  const { messages, append } = useChat();
  const [inputValue, setInputValue] = useState('');

  // 任务 7：创建锚点
  const messagesEndRef = useRef<HTMLDivElement>(null);

  // 任务 8：监听 messages 并滚动
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  // 任务 9：提取最后一个工具
  const lastMessageWithTool = messages.slice().reverse().find(m => m.toolInvocations && m.toolInvocations.length > 0);
  const activeTool = lastMessageWithTool?.toolInvocations?.[lastMessageWithTool.toolInvocations.length - 1];

  const handleSend = (e: React.FormEvent) => {
    e.preventDefault();
    if (!inputValue.trim()) return;
    append({ role: 'user', content: inputValue });
    setInputValue('');
  };

  return (
    <div style={{ display: 'flex', gap: '20px', padding: '50px', maxWidth: '1000px', margin: '0 auto', height: '80vh' }}>
      
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', border: '1px solid #ccc', borderRadius: '8px', padding: '20px' }}>
        <h3>💬 聊天区</h3>
        
        <div style={{ flex: 1, overflowY: 'auto', marginBottom: '20px', border: '1px dashed #eee', padding: '10px' }}>
          {messages.length === 0 && <p style={{ color: '#999' }}>暂无消息...</p>}
          
          {messages.map(m => (
            <div key={m.id} style={{ marginBottom: '15px' }}>
              <strong style={{ color: m.role === 'user' ? 'blue' : 'green' }}>
                {m.role === 'user' ? '你：' : 'AI：'}
              </strong>
              
              {m.toolInvocations ? (
                <span style={{ color: '#888', fontSize: '12px', marginLeft: '10px' }}>[生成了一个组件，请看右侧画布]</span>
              ) : (
                <span style={{ whiteSpace: 'pre-wrap' }}>{m.content}</span>
              )}
            </div>
          ))}
          
          {/* 任务 7：埋下锚点 */}
          <div ref={messagesEndRef} />
        </div>

        <form onSubmit={handleSend} style={{ display: 'flex', gap: '10px' }}>
          <input 
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            style={{ flex: 1, padding: '10px', borderRadius: '4px', border: '1px solid #ccc' }}
            placeholder="试试问：“北京天气怎么样？”"
          />
          <button type="submit" style={{ padding: '10px 20px', background: 'blue', color: 'white', borderRadius: '4px', border: 'none', cursor: 'pointer' }}>发送</button>
        </form>
      </div>

      <div style={{ flex: 1, background: '#f9f9f9', border: '1px solid #ddd', borderRadius: '8px', padding: '20px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        
        {/* 任务 10：条件渲染画布 */}
        {!activeTool ? (
          <div style={{ textAlign: 'center', color: '#999' }}>
            <p>等待 AI 召唤画布...</p>
          </div>
        ) : (
          <div>
            {activeTool.state === 'result' && activeTool.toolName === 'getWeather' && (
              <div style={{ padding: '30px', background: 'white', borderRadius: '10px', boxShadow: '0 4px 12px rgba(0,0,0,0.1)', textAlign: 'center' }}>
                <h2 style={{ margin: 0, fontSize: '24px', color: '#333' }}>{activeTool.args.location}</h2>
                <div style={{ fontSize: '48px', fontWeight: 'bold', color: '#0070f3', margin: '20px 0' }}>
                  {activeTool.result.temperature}°C
                </div>
                <p style={{ color: '#666', margin: 0 }}>天气状况：{activeTool.result.condition}</p>
              </div>
            )}
          </div>
        )}

      </div>
    </div>
  );
}`}
          </pre>
        </details>
      </div>
    </div>
  );
}
