"use client"

import type { JSX } from "react"
import { BookX } from "lucide-react"
import { useTranslations } from "next-intl"

import { EmptyState } from "@/shared/components/ui/empty-state"
import { Button } from "@/shared/components/ui/button"
import { ErrorBookItemCard } from "./error-book-item-card"
import { ErrorBookDetailDialog } from "./error-book-detail-dialog"
import type { ErrorBookItem } from "../types"

interface ErrorBookListProps {
  items: ErrorBookItem[]
  /** AI 分析区域插槽（由父组件注入，传递给每个 ErrorBookDetailDialog） */
  aiAnalysisSlot?: (item: ErrorBookItem) => React.ReactNode
  /** 发起变式练习回调（由父组件注入） */
  onStartVariantPractice?: (item: ErrorBookItem) => void
}

export function ErrorBookList({
  items,
  aiAnalysisSlot,
  onStartVariantPractice,
}: ErrorBookListProps): JSX.Element {
  const t = useTranslations("errorBook")

  if (items.length === 0) {
    return (
      <EmptyState
        icon={BookX}
        title={t("empty.title")}
        description={t("empty.description")}
        className="h-[360px] bg-card"
      />
    )
  }

  return (
    <div className="grid gap-3 md:grid-cols-2">
      {items.map((item) => (
        <ErrorBookItemCard key={item.id} item={item}>
          <ErrorBookDetailDialog
            item={item}
            aiAnalysisSlot={aiAnalysisSlot?.(item)}
            onStartVariantPractice={onStartVariantPractice ? () => onStartVariantPractice(item) : undefined}
            trigger={
              <Button variant="outline" size="sm">
                {t("actions.viewDetail")}
              </Button>
            }
          />
        </ErrorBookItemCard>
      ))}
    </div>
  )
}
