"use client"

import { useTranslations } from "next-intl"
import Link from "next/link"
import { Target, Clock, CheckCircle2, XCircle } from "lucide-react"

import { Card, CardContent } from "@/shared/components/ui/card"
import { Badge } from "@/shared/components/ui/badge"
import { Progress } from "@/shared/components/ui/progress"
import { formatDate } from "@/shared/lib/utils"

import type { PracticeSessionSummary, PracticeStatus } from "../types"

interface PracticeHistoryProps {
  sessions: PracticeSessionSummary[]
  /**
   * 点击某条练习记录跳转的路由前缀。
   * - 学生端传 `/student/practice`，将跳转到 `/student/practice/{sessionId}`
   * - 家长端不传（无会话详情页），仅渲染为只读卡片
   */
  routePrefix?: string
}

const STATUS_VARIANTS: Record<PracticeStatus, "default" | "secondary" | "outline"> = {
  in_progress: "default",
  completed: "secondary",
  abandoned: "outline",
}

/**
 * 专项练习历史列表
 */
export function PracticeHistory({
  sessions,
  routePrefix,
}: PracticeHistoryProps): React.ReactNode {
  const t = useTranslations("practice")

  if (sessions.length === 0) {
    return (
      <Card>
        <CardContent className="py-12 text-center text-muted-foreground">
          <Target className="mx-auto mb-2 h-8 w-8 opacity-50" />
          {t("history.empty")}
        </CardContent>
      </Card>
    )
  }

  return (
    <div className="space-y-3">
      {sessions.map((session) => {
        const accuracy = session.answeredQuestions > 0
          ? Math.round((session.correctCount / session.answeredQuestions) * 100)
          : 0
        const progress = session.totalQuestions > 0
          ? (session.answeredQuestions / session.totalQuestions) * 100
          : 0

        const content = (
          <Card className="transition-colors hover:bg-muted/30">
            <CardContent className="p-4">
              <div className="flex items-center justify-between gap-3">
                <div className="flex-1 space-y-1">
                  <div className="flex items-center gap-2">
                    <Badge variant={STATUS_VARIANTS[session.status]}>
                      {t(`status.${session.status}`)}
                    </Badge>
                    <Badge variant="outline">
                      {t(`types.${session.practiceType}`)}
                    </Badge>
                  </div>
                  <div className="flex items-center gap-3 text-xs text-muted-foreground">
                    <span className="flex items-center gap-1">
                      <Clock className="h-3 w-3" />
                      {formatDate(session.startedAt)}
                    </span>
                    <span className="flex items-center gap-1">
                      <CheckCircle2 className="h-3 w-3 text-emerald-500" />
                      {session.correctCount}
                    </span>
                    <span className="flex items-center gap-1">
                      <XCircle className="h-3 w-3 text-rose-500" />
                      {session.answeredQuestions - session.correctCount}
                    </span>
                  </div>
                </div>
                <div className="text-right">
                  <div className="text-lg font-bold">{accuracy}%</div>
                  <div className="text-xs text-muted-foreground">
                    {session.answeredQuestions}/{session.totalQuestions}
                  </div>
                </div>
              </div>
              <Progress value={progress} className="mt-2 h-1" />
            </CardContent>
          </Card>
        )

        if (routePrefix) {
          return (
            <Link key={session.id} href={`${routePrefix}/${session.id}`}>
              {content}
            </Link>
          )
        }

        return <div key={session.id}>{content}</div>
      })}
    </div>
  )
}
