'use client'

import { useState } from 'react'

export default function TestSimplePage() {
  const [result, setResult] = useState('')

  const testApi = async () => {
    try {
      setResult('正在測試...')

      const response = await fetch('http://localhost:5000/api/ai/analyze-sentence', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          inputText: 'Test sentence for debugging',
          analysisMode: 'full'
        })
      })

      if (response.ok) {
        const data = await response.json()
        setResult(`✅ API 成功: ${JSON.stringify(data, null, 2)}`)
      } else {
        setResult(`❌ API 錯誤: ${response.status} ${response.statusText}`)
      }
    } catch (error) {
      setResult(`💥 連接錯誤: ${error}`)
    }
  }

  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold mb-4">API 連接簡單測試</h1>

      <button
        onClick={testApi}
        className="bg-blue-600 text-white px-4 py-2 rounded mb-4"
      >
        測試 API 連接
      </button>

      <pre className="bg-gray-100 p-4 rounded text-sm overflow-auto max-h-96">
        {result || '點擊按鈕測試 API 連接'}
      </pre>

      <div className="mt-4 p-4 bg-yellow-50 border border-yellow-200 rounded">
        <h3 className="font-bold mb-2">手動測試指令：</h3>
        <code className="text-sm">
          curl -s http://localhost:5000/api/ai/analyze-sentence -X POST -H "Content-Type: application/json" -d '{"inputText":"test"}'
        </code>
      </div>
    </div>
  )
}