import { useAuth } from "@/_core/hooks/useAuth";
import { trpc } from "@/lib/trpc";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Skeleton } from "@/components/ui/skeleton";
import { Button } from "@/components/ui/button";
import { Activity, Calendar, CheckCircle2, ChevronDown, ChevronUp, Clock, TrendingUp, Target, Sparkles } from "lucide-react";
import { formatDateTimeShanghai, formatMonthDayShanghai } from "@/lib/time";
import { useState } from "react";
import {
  ResponsiveContainer, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip,
  LineChart, Line, Legend
} from "recharts";
import { useLocation } from "wouter";

const ACTION_LABEL_MAP: Record<string, string> = {
  forehand: "正手挥拍",
  backhand: "反手挥拍",
  serve: "发球",
  volley: "截击",
  overhead: "高压",
  slice: "切削",
  lob: "挑高球",
  unknown: "未知动作",
};

function getRecordMetadata(record: any) {
  if (!record?.metadata || typeof record.metadata !== "object") {
    return null;
  }
  return record.metadata as Record<string, any>;
}

function getActionLabel(actionType: string) {
  return ACTION_LABEL_MAP[actionType] || actionType;
}

export default function Progress() {
  const { user } = useAuth();
  const { data: records, isLoading } = trpc.record.list.useQuery({ limit: 100 });
  const { data: analyses } = trpc.analysis.list.useQuery();
  const { data: stats } = trpc.profile.stats.useQuery();
  const [, setLocation] = useLocation();
  const [expandedRecordId, setExpandedRecordId] = useState<number | null>(null);

  if (isLoading) {
    return (
      <div className="space-y-4">
        {[1, 2, 3].map(i => <Skeleton key={i} className="h-32 w-full" />)}
      </div>
    );
  }

  // Aggregate data by date for charts
  const dateMap = new Map<string, { date: string; sessions: number; minutes: number; avgScore: number; scores: number[] }>();
  (records || []).forEach((r: any) => {
    const date = formatMonthDayShanghai(r.trainingDate || r.createdAt);
    const existing = dateMap.get(date) || { date, sessions: 0, minutes: 0, avgScore: 0, scores: [] };
    existing.sessions++;
    existing.minutes += r.durationMinutes || 0;
    if (r.poseScore) existing.scores.push(r.poseScore);
    dateMap.set(date, existing);
  });

  const chartData = Array.from(dateMap.values()).map(d => ({
    ...d,
    avgScore: d.scores.length > 0 ? Math.round(d.scores.reduce((a, b) => a + b, 0) / d.scores.length) : 0,
  }));

  // Analysis score trend
  const scoreTrend = (analyses || []).map((a: any) => ({
    date: formatMonthDayShanghai(a.createdAt),
    overall: Math.round(a.overallScore || 0),
    consistency: Math.round(a.strokeConsistency || 0),
    footwork: Math.round(a.footworkScore || 0),
    fluidity: Math.round(a.fluidityScore || 0),
  }));

  const completedRecords = (records || []).filter((r: any) => r.completed === 1);
  const totalMinutes = (records || []).reduce((sum: number, r: any) => sum + (r.durationMinutes || 0), 0);

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">训练进度</h1>
        <p className="text-muted-foreground text-sm mt-1">追踪您的训练历史和能力提升趋势</p>
      </div>

      {/* Summary stats */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <Card className="border-0 shadow-sm">
          <CardContent className="pt-4 pb-3">
            <div className="flex items-center gap-2 text-xs text-muted-foreground mb-1">
              <Activity className="h-3 w-3" />总训练次数
            </div>
            <p className="text-2xl font-bold">{stats?.totalSessions || 0}</p>
          </CardContent>
        </Card>
        <Card className="border-0 shadow-sm">
          <CardContent className="pt-4 pb-3">
            <div className="flex items-center gap-2 text-xs text-muted-foreground mb-1">
              <Clock className="h-3 w-3" />总训练时长
            </div>
            <p className="text-2xl font-bold">{totalMinutes}<span className="text-sm font-normal ml-1">分钟</span></p>
          </CardContent>
        </Card>
        <Card className="border-0 shadow-sm">
          <CardContent className="pt-4 pb-3">
            <div className="flex items-center gap-2 text-xs text-muted-foreground mb-1">
              <CheckCircle2 className="h-3 w-3" />已完成
            </div>
            <p className="text-2xl font-bold">{completedRecords.length}</p>
          </CardContent>
        </Card>
        <Card className="border-0 shadow-sm">
          <CardContent className="pt-4 pb-3">
            <div className="flex items-center gap-2 text-xs text-muted-foreground mb-1">
              <Target className="h-3 w-3" />视频分析
            </div>
            <p className="text-2xl font-bold">{analyses?.length || 0}<span className="text-sm font-normal ml-1">次</span></p>
          </CardContent>
        </Card>
        <Card className="border-0 shadow-sm">
          <CardContent className="pt-4 pb-3">
            <div className="flex items-center gap-2 text-xs text-muted-foreground mb-1">
              <Sparkles className="h-3 w-3" />实时分析
            </div>
            <p className="text-2xl font-bold">{stats?.recentLiveSessions?.length || 0}<span className="text-sm font-normal ml-1">条</span></p>
          </CardContent>
        </Card>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Training frequency chart */}
        <Card className="border-0 shadow-sm">
          <CardHeader className="pb-2">
            <CardTitle className="text-base flex items-center gap-2">
              <Calendar className="h-4 w-4 text-primary" />
              训练频率
            </CardTitle>
          </CardHeader>
          <CardContent>
            {chartData.length > 0 ? (
              <ResponsiveContainer width="100%" height={220}>
                <BarChart data={chartData}>
                  <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                  <XAxis dataKey="date" tick={{ fontSize: 11 }} />
                  <YAxis tick={{ fontSize: 11 }} />
                  <Tooltip />
                  <Bar dataKey="sessions" fill="oklch(0.55 0.16 145)" radius={[4, 4, 0, 0]} name="训练次数" />
                </BarChart>
              </ResponsiveContainer>
            ) : (
              <div className="h-[220px] flex items-center justify-center text-muted-foreground text-sm">
                <div className="text-center">
                  <Calendar className="h-8 w-8 mx-auto mb-2 opacity-30" />
                  <p>开始训练后将显示频率统计</p>
                </div>
              </div>
            )}
          </CardContent>
        </Card>

        {/* Score improvement trend */}
        <Card className="border-0 shadow-sm">
          <CardHeader className="pb-2">
            <CardTitle className="text-base flex items-center gap-2">
              <TrendingUp className="h-4 w-4 text-primary" />
              能力提升趋势
            </CardTitle>
          </CardHeader>
          <CardContent>
            {scoreTrend.length > 0 ? (
              <ResponsiveContainer width="100%" height={220}>
                <LineChart data={scoreTrend}>
                  <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                  <XAxis dataKey="date" tick={{ fontSize: 11 }} />
                  <YAxis domain={[0, 100]} tick={{ fontSize: 11 }} />
                  <Tooltip />
                  <Legend />
                  <Line type="monotone" dataKey="overall" stroke="oklch(0.55 0.16 145)" strokeWidth={2} name="综合" dot={{ r: 3 }} />
                  <Line type="monotone" dataKey="consistency" stroke="#3b82f6" strokeWidth={1.5} name="一致性" dot={{ r: 2 }} />
                  <Line type="monotone" dataKey="footwork" stroke="#f59e0b" strokeWidth={1.5} name="脚步" dot={{ r: 2 }} />
                </LineChart>
              </ResponsiveContainer>
            ) : (
              <div className="h-[220px] flex items-center justify-center text-muted-foreground text-sm">
                <div className="text-center">
                  <TrendingUp className="h-8 w-8 mx-auto mb-2 opacity-30" />
                  <p>完成视频分析后将显示能力趋势</p>
                </div>
              </div>
            )}
          </CardContent>
        </Card>
      </div>

      {/* Recent records */}
      <Card className="border-0 shadow-sm">
        <CardHeader className="pb-2">
          <CardTitle className="text-base">最近训练记录</CardTitle>
        </CardHeader>
        <CardContent>
          {(records?.length || 0) > 0 ? (
            <div className="space-y-2">
              {(records || []).slice(0, 20).map((record: any) => {
                const metadata = getRecordMetadata(record);
                const actionSummary = metadata?.actionSummary && typeof metadata.actionSummary === "object"
                  ? Object.entries(metadata.actionSummary as Record<string, number>).filter(([, count]) => Number(count) > 0)
                  : [];
                const topActions = actionSummary
                  .sort((left, right) => Number(right[1]) - Number(left[1]))
                  .slice(0, 3);

                return (
                <div key={record.id} className="border-b py-2 last:border-0">
                  <div className="flex items-start justify-between gap-3">
                    <div className="flex items-start gap-3">
                      <div className={`mt-0.5 h-8 w-8 rounded-lg flex items-center justify-center ${
                        record.completed ? "bg-green-50 text-green-600" : "bg-muted text-muted-foreground"
                      }`}>
                        {record.completed ? <CheckCircle2 className="h-4 w-4" /> : <Activity className="h-4 w-4" />}
                      </div>
                      <div>
                        <p className="text-sm font-medium">{record.exerciseName}</p>
                        <p className="text-xs text-muted-foreground">
                          {formatDateTimeShanghai(record.trainingDate || record.createdAt, { second: "2-digit" })}
                          {record.durationMinutes ? ` · ${record.durationMinutes}分钟` : ""}
                          {record.sourceType ? ` · ${record.sourceType}` : ""}
                        </p>
                        <div className="mt-1 flex flex-wrap items-center gap-2">
                          {record.actionCount ? (
                            <Badge variant="outline" className="text-[11px]">
                              动作数 {record.actionCount}
                            </Badge>
                          ) : null}
                          {metadata?.dominantAction ? (
                            <Badge variant="secondary" className="text-[11px]">
                              主动作 {getActionLabel(String(metadata.dominantAction))}
                            </Badge>
                          ) : null}
                          {topActions.map(([actionType, count]) => (
                            <Badge key={`${record.id}-${actionType}`} variant="secondary" className="text-[11px]">
                              {getActionLabel(actionType)} {count} 次
                            </Badge>
                          ))}
                        </div>
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      {record.poseScore && (
                        <Badge variant="secondary" className="text-xs">{Math.round(record.poseScore)}分</Badge>
                      )}
                      {record.completed ? (
                        <Badge className="bg-green-100 text-green-700 text-xs">已完成</Badge>
                      ) : (
                        <Badge variant="outline" className="text-xs">进行中</Badge>
                      )}
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => setExpandedRecordId((current) => current === record.id ? null : record.id)}
                      >
                        {expandedRecordId === record.id ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
                      </Button>
                    </div>
                  </div>

                  {expandedRecordId === record.id ? (
                    <div className="mt-3 rounded-2xl border border-border/60 bg-muted/20 p-4 text-sm">
                      <div className="grid gap-3 md:grid-cols-2">
                        <div>
                          <div className="text-xs uppercase tracking-[0.16em] text-muted-foreground">记录时间</div>
                          <div className="mt-1 font-medium">{formatDateTimeShanghai(record.trainingDate || record.createdAt, { second: "2-digit" })}</div>
                        </div>
                        <div>
                          <div className="text-xs uppercase tracking-[0.16em] text-muted-foreground">动作数据</div>
                          <div className="mt-1 font-medium">动作数 {record.actionCount || 0}</div>
                        </div>
                      </div>

                      {metadata ? (
                        <div className="mt-4 space-y-3">
                          {metadata.dominantAction ? (
                            <div>
                              <div className="text-xs uppercase tracking-[0.16em] text-muted-foreground">主动作</div>
                              <div className="mt-1 font-medium">{getActionLabel(String(metadata.dominantAction))}</div>
                            </div>
                          ) : null}

                          {metadata.actionSummary && Object.keys(metadata.actionSummary).length > 0 ? (
                            <div>
                              <div className="text-xs uppercase tracking-[0.16em] text-muted-foreground">动作明细</div>
                              <div className="mt-2 flex flex-wrap gap-2">
                                {Object.entries(metadata.actionSummary as Record<string, number>)
                                  .filter(([, count]) => Number(count) > 0)
                                  .map(([actionType, count]) => (
                                    <Badge key={actionType} variant="secondary">
                                      {getActionLabel(actionType)} {count} 次
                                    </Badge>
                                  ))}
                              </div>
                            </div>
                          ) : null}

                          {metadata.validityStatus ? (
                            <div>
                              <div className="text-xs uppercase tracking-[0.16em] text-muted-foreground">录制有效性</div>
                              <div className="mt-1 font-medium">{String(metadata.validityStatus)}</div>
                              {metadata.invalidReason ? (
                                <div className="mt-1 text-xs text-muted-foreground">{String(metadata.invalidReason)}</div>
                              ) : null}
                            </div>
                          ) : null}

                          {record.notes ? (
                            <div>
                              <div className="text-xs uppercase tracking-[0.16em] text-muted-foreground">备注</div>
                              <div className="mt-1 text-sm text-muted-foreground">{record.notes}</div>
                            </div>
                          ) : null}
                        </div>
                      ) : null}
                    </div>
                  ) : null}
                </div>
                );
              })}
            </div>
          ) : (
            <div className="py-8 text-center text-muted-foreground text-sm">
              <Activity className="h-8 w-8 mx-auto mb-2 opacity-30" />
              <p>还没有训练记录</p>
              <Button variant="link" size="sm" onClick={() => setLocation("/training")} className="mt-2">
                开始第一次训练
              </Button>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}