'use client'

import { useState, useEffect } from 'react'
import { CompetitionProvider } from '@/contexts/competition-context'

export default function TestManualScoringPage() {
  const [competition, setCompetition] = useState<any>(null)
  const [teams, setTeams] = useState<any[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    loadCompetitionData()
  }, [])

  const loadCompetitionData = async () => {
    try {
      
      // 載入競賽信息
      const competitionResponse = await fetch('/api/competitions/be4b0a71-91f1-11f0-bb38-4adff2d0e33e')
      const competitionData = await competitionResponse.json()
      
      if (competitionData.success) {
        setCompetition(competitionData.data.competition)
      }

      // 載入團隊數據
      const teamsResponse = await fetch('/api/competitions/be4b0a71-91f1-11f0-bb38-4adff2d0e33e/teams')
      const teamsData = await teamsResponse.json()
      
      if (teamsData.success) {
        setTeams(teamsData.data.teams)
      }
      
    } catch (error) {
      console.error('❌ 載入數據失敗:', error)
    } finally {
      setLoading(false)
    }
  }

  if (loading) {
    return <div className="p-8">載入中...</div>
  }

  return (
    <CompetitionProvider>
      <div className="p-8">
        <h1 className="text-2xl font-bold mb-4">測試手動評分數據載入</h1>
        
        <div className="mb-6">
          <h2 className="text-lg font-semibold mb-2">競賽信息</h2>
          {competition ? (
            <div className="bg-gray-100 p-4 rounded">
              <p><strong>名稱:</strong> {competition.name}</p>
              <p><strong>類型:</strong> {competition.type}</p>
              <p><strong>狀態:</strong> {competition.status}</p>
            </div>
          ) : (
            <p className="text-red-500">競賽數據載入失敗</p>
          )}
        </div>

        <div className="mb-6">
          <h2 className="text-lg font-semibold mb-2">團隊數據</h2>
          {teams.length > 0 ? (
            <div className="space-y-4">
              {teams.map((team) => (
                <div key={team.id} className="bg-gray-100 p-4 rounded">
                  <h3 className="font-semibold">{team.name}</h3>
                  <p><strong>ID:</strong> {team.id}</p>
                  <p><strong>APP數量:</strong> {team.apps?.length || 0}</p>
                  {team.apps && team.apps.length > 0 && (
                    <div className="mt-2">
                      <h4 className="font-medium">APP列表:</h4>
                      <ul className="ml-4">
                        {team.apps.map((app: any) => (
                          <li key={app.id} className="text-sm">
                            • {app.name} ({app.id})
                          </li>
                        ))}
                      </ul>
                    </div>
                  )}
                </div>
              ))}
            </div>
          ) : (
            <p className="text-red-500">團隊數據載入失敗</p>
          )}
        </div>

        <div className="mb-6">
          <h2 className="text-lg font-semibold mb-2">手動評分測試</h2>
          <p className="text-gray-600">
            請檢查瀏覽器控制台的日誌，查看數據載入情況。
          </p>
        </div>
      </div>
    </CompetitionProvider>
  )
}