import { useState } from 'react';
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
import Image from "next/image";
import nhpaLogo from "/mnt/data/NHPA-Logo-Final.ai";

export default function PickleballStatsApp() {
  const [matchInfo, setMatchInfo] = useState({
    date: '',
    tournament: '',
    player: '',
    matchType: 'singles',
    partner: '',
    opponents: ['', '']
  });
  const [score, setScore] = useState({ me: 0, opponent: 0 });
  const [stats, setStats] = useState({
    points: { active: 0, passive: 0 },
    errors: { forced: 0, unforced: 0 },
    actions: {
      serve: [0, 0], drive: [0, 0], deepDink: [0, 0], volley: [0, 0],
      shortDink: [0, 0], smash: [0, 0], lob: [0, 0], erne: [0, 0],
      atp: [0, 0], reset: [0, 0]
    }
  });
  const [showSummary, setShowSummary] = useState(false);

  const addPoint = (type) => {
    const newScore = { ...score };
    newScore.me++;
    setScore(newScore);
    setStats(prev => ({ ...prev, points: { ...prev.points, [type]: prev.points[type] + 1 } }));
  };

  const addError = (type) => {
    const newScore = { ...score };
    newScore.opponent++;
    setScore(newScore);
    setStats(prev => ({ ...prev, errors: { ...prev.errors, [type]: prev.errors[type] + 1 } }));
  };

  const updateAction = (action, index) => {
    setStats(prev => {
      const updated = { ...prev.actions };
      updated[action] = [...updated[action]];
      updated[action][index]++;
      return { ...prev, actions: updated };
    });
  };

  const renderActionButtons = () => (
    Object.entries(stats.actions).map(([key, [success, fail]]) => (
      <div key={key} className="flex justify-between items-center py-1">
        <span className="capitalize w-32">{key}</span>
        <div className="flex items-center gap-2">
          <Button onClick={() => updateAction(key, 0)} className="bg-green-500 text-white">成功</Button>
          <span>{success}</span>
        </div>
        <div className="flex items-center gap-2">
          <Button onClick={() => updateAction(key, 1)} className="bg-red-500 text-white">失误</Button>
          <span>{fail}</span>
        </div>
      </div>
    ))
  );

  const totalSuccess = Object.values(stats.actions).reduce((sum, [succ]) => sum + succ, 0);
  const totalFail = Object.values(stats.actions).reduce((sum, [, fail]) => sum + fail, 0);

  const renderSummary = () => (
    <div className="space-y-2 text-sm text-gray-800 mt-4">
      <div className="font-bold text-green-700">南海匹克球协会</div>
      <div>比赛：{matchInfo.tournament}（{matchInfo.date}）</div>
      <div>类型：{matchInfo.matchType === 'singles' ? '单打' : `双打（拍档：${matchInfo.partner}）`}</div>
      <div>本人：{matchInfo.player}</div>
      <div>对手：{matchInfo.opponents.filter(Boolean).join('、')}</div>
      <div>比分：{score.me} - {score.opponent}</div>
      <div>主动得分：{stats.points.active}，被动得分：{stats.points.passive}</div>
      <div>受迫失分：{stats.errors.forced}，非受迫失分：{stats.errors.unforced}</div>
      <div>技术动作：成功 {totalSuccess} 项，失误 {totalFail} 项</div>
    </div>
  );

  return (
    <div className="p-4 max-w-2xl mx-auto space-y-4">
      <div className="flex justify-center items-center gap-2">
        <div className="text-xl font-bold text-green-800">南海匹克球协会技术统计专用</div>
      </div>

      <Card>
        <CardContent className="space-y-2">
          <Input placeholder="比赛日期" onChange={e => setMatchInfo({ ...matchInfo, date: e.target.value })} />
          <Input placeholder="比赛名称" onChange={e => setMatchInfo({ ...matchInfo, tournament: e.target.value })} />
          <Input placeholder="本人姓名" onChange={e => setMatchInfo({ ...matchInfo, player: e.target.value })} />
          <Tabs defaultValue="singles" onValueChange={v => setMatchInfo({ ...matchInfo, matchType: v })}>
            <TabsList>
              <TabsTrigger value="singles">单打</TabsTrigger>
              <TabsTrigger value="doubles">双打</TabsTrigger>
            </TabsList>
            <TabsContent value="doubles">
              <Input placeholder="拍档姓名" onChange={e => setMatchInfo({ ...matchInfo, partner: e.target.value })} />
            </TabsContent>
          </Tabs>
          <Input placeholder="对手1姓名" onChange={e => setMatchInfo({ ...matchInfo, opponents: [e.target.value, matchInfo.opponents[1]] })} />
          <Input placeholder="对手2姓名（如有）" onChange={e => setMatchInfo({ ...matchInfo, opponents: [matchInfo.opponents[0], e.target.value] })} />
        </CardContent>
      </Card>

      <Card>
        <CardContent className="space-y-2">
          <h2 className="text-lg font-bold">比分：{score.me} - {score.opponent}</h2>
          <div className="flex gap-2 flex-wrap">
            <Button onClick={() => addPoint('active')}>主动得分</Button>
            <Button onClick={() => addPoint('passive')}>被动得分</Button>
            <Button onClick={() => addError('forced')}>受迫失分</Button>
            <Button onClick={() => addError('unforced')}>非受迫失分</Button>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardContent>
          <h3 className="font-semibold text-md mb-2">技术动作统计</h3>
          <div className="space-y-2">
            {renderActionButtons()}
          </div>
          <div className="mt-4 text-sm text-gray-700">总成功数：{totalSuccess}，总失误数：{totalFail}</div>
        </CardContent>
      </Card>

      <Card>
        <CardContent>
          <h3 className="font-semibold text-md mb-2">图表预览（主动/被动 vs 失误）</h3>
          <ResponsiveContainer width="100%" height={200}>
            <BarChart data={[
              { name: '主动得分', value: stats.points.active },
              { name: '被动得分', value: stats.points.passive },
              { name: '受迫失分', value: stats.errors.forced },
              { name: '非受迫失分', value: stats.errors.unforced }
            ]}>
              <XAxis dataKey="name" />
              <YAxis />
              <Tooltip />
              <Bar dataKey="value" fill="#82ca9d" />
            </BarChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>

      <div className="text-center">
        <Button onClick={() => setShowSummary(true)} className="bg-blue-600 text-white">比赛结束，生成统计</Button>
      </div>

      {showSummary && (
        <Card>
          <CardContent>
            <h3 className="text-md font-semibold mb-2">比赛统计结果</h3>
            {renderSummary()}
          </CardContent>
        </Card>
      )}
    </div>
  );
}