'use client';

import { useState } from 'react';
import { Button } from '@/components/ui/button';

export default function TestAPIPage() {
  const [result, setResult] = useState('');
  const [loading, setLoading] = useState(false);

  const testChatAPI = async () => {
    setLoading(true);
    setResult('');
    try {
      const response = await fetch('/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ message: '测试一下', history: [] }),
      });

      const text = await response.text();
      setResult(`Chat API Status: ${response.status}\nResponse:\n${text}`);
    } catch (error) {
      setResult(`Error: ${error}`);
    } finally {
      setLoading(false);
    }
  };

  const testAnalyzeAPI = async () => {
    setLoading(true);
    setResult('');
    try {
      const response = await fetch('/api/analyze-food', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ image: '' }),
      });

      const text = await response.text();
      setResult(`Analyze API Status: ${response.status}\nResponse:\n${text}`);
    } catch (error) {
      setResult(`Error: ${error}`);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen p-8">
      <h1 className="mb-4 text-2xl font-bold">API 测试页面</h1>
      <div className="space-x-4">
        <Button onClick={testChatAPI} disabled={loading}>
          测试 Chat API
        </Button>
        <Button onClick={testAnalyzeAPI} disabled={loading}>
          测试 Analyze API
        </Button>
      </div>
      {result && (
        <div className="mt-8 rounded-lg border p-4">
          <pre className="whitespace-pre-wrap text-sm">{result}</pre>
        </div>
      )}
    </div>
  );
}