"use client"

import { Calendar, FileText, BookMarked } from "lucide-react"
import { useTranslations } from "next-intl"

import { Card, CardContent, CardHeader } from "@/shared/components/ui/card"
import { Badge } from "@/shared/components/ui/badge"
import { StatusBadge } from "@/shared/components/ui/status-badge"
import { cn } from "@/shared/lib/utils"
import { formatDate } from "@/shared/lib/utils"
import { extractQuestionPreview } from "@/shared/lib/question-content"

import {
  ERROR_BOOK_SOURCE_LABEL,
  ERROR_BOOK_SOURCE_VARIANT,
  ERROR_BOOK_STATUS_LABEL,
  ERROR_BOOK_STATUS_VARIANT,
  type ErrorBookItem,
} from "../types"

interface ErrorBookItemCardProps {
  item: ErrorBookItem
  children?: React.ReactNode
}

export function ErrorBookItemCard({ item, children }: ErrorBookItemCardProps) {
  const t = useTranslations("errorBook")
  const preview = item.question
    ? extractQuestionPreview(item.question.content, t("itemCard.questionContent"))
    : t("itemCard.questionDeleted")
  const isDue = item.nextReviewAt ? item.nextReviewAt <= new Date() : false
  const isMastered = item.status === "mastered"

  const masteryLabel =
    item.masteryLevel >= 0 && item.masteryLevel <= 5
      ? t(`masteryLevel.${item.masteryLevel}`)
      : String(item.masteryLevel)

  return (
    <Card
      className={cn(
        "transition-colors hover:bg-accent/50",
        isDue && !isMastered && "border-rose-200 bg-rose-50/30 dark:border-rose-900 dark:bg-rose-950/10"
      )}
    >
      <CardHeader className="flex flex-row items-start justify-between gap-2 space-y-0 pb-3">
        <div className="flex flex-wrap items-center gap-2">
          <StatusBadge
            status={item.status}
            variantMap={ERROR_BOOK_STATUS_VARIANT}
            labelMap={ERROR_BOOK_STATUS_LABEL}
            capitalize={false}
          />
          <StatusBadge
            status={item.sourceType}
            variantMap={ERROR_BOOK_SOURCE_VARIANT}
            labelMap={ERROR_BOOK_SOURCE_LABEL}
            capitalize={false}
          />
          {item.subjectName ? (
            <Badge variant="outline" className="gap-1">
              <BookMarked className="h-3 w-3" />
              {item.subjectName}
            </Badge>
          ) : null}
          {item.question?.difficulty ? (
            <Badge variant="secondary">
              {t("itemCard.difficulty", { level: item.question.difficulty })}
            </Badge>
          ) : null}
        </div>
        <div className="flex items-center gap-1 text-xs text-muted-foreground">
          <Calendar className="h-3 w-3" />
          {formatDate(item.createdAt)}
        </div>
      </CardHeader>
      <CardContent className="space-y-3">
        <div className="line-clamp-2 text-sm">
          {preview}
        </div>

        {item.errorTags && item.errorTags.length > 0 ? (
          <div className="flex flex-wrap gap-1">
            {item.errorTags.map((tag) => (
              <Badge key={tag} variant="outline" className="text-xs">
                {tag}
              </Badge>
            ))}
          </div>
        ) : null}

        {item.note ? (
          <div className="flex items-start gap-2 rounded-md bg-muted/50 p-2 text-xs text-muted-foreground">
            <FileText className="mt-0.5 h-3 w-3 shrink-0" />
            <span className="line-clamp-2">{item.note}</span>
          </div>
        ) : null}

        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3 text-xs text-muted-foreground">
            <span>{t("itemCard.mastery", { level: masteryLabel })}</span>
            <span>{t("itemCard.reviewTimes", { count: item.reviewCount })}</span>
            {item.nextReviewAt && !isMastered ? (
              <span className={cn(isDue && "font-medium text-rose-600 dark:text-rose-400")}>
                {isDue
                  ? t("itemCard.needReview")
                  : t("itemCard.nextReview", { date: formatDate(item.nextReviewAt) })}
              </span>
            ) : null}
          </div>
          {children}
        </div>
      </CardContent>
    </Card>
  )
}
