"use client"

import { PlusCircle, Pencil, Trash2, Tag } from "lucide-react"
import { useTranslations } from "next-intl"

import type { KnowledgePoint } from "../types"
import { cn } from "@/shared/lib/utils"
import { ScrollArea } from "@/shared/components/ui/scroll-area"
import { Badge } from "@/shared/components/ui/badge"
import { Button } from "@/shared/components/ui/button"
import { EmptyState } from "@/shared/components/ui/empty-state"

interface KnowledgePointListProps {
  knowledgePoints: KnowledgePoint[]
  canEdit: boolean
  /** 是否有创建题目权限（控制"创建相关题目"按钮可见性） */
  canCreateQuestion?: boolean
  highlightedKpId: string | null
  onHighlight: (id: string) => void
  onEdit: (kp: KnowledgePoint) => void
  onDelete: (kpId: string, e: React.MouseEvent) => void
  onCreateQuestion: (kp: KnowledgePoint) => void
}

export function KnowledgePointList({
  knowledgePoints,
  canEdit,
  canCreateQuestion = false,
  highlightedKpId,
  onHighlight,
  onEdit,
  onDelete,
  onCreateQuestion,
}: KnowledgePointListProps) {
  const t = useTranslations("textbooks")

  if (knowledgePoints.length === 0) {
    return (
      <EmptyState
        icon={Tag}
        title={t("reader.emptyKnowledge")}
        description={t("reader.emptyKnowledgeDesc")}
        className="h-full border-none shadow-none bg-transparent"
      />
    )
  }

  return (
    <ScrollArea className="flex-1 h-full px-2">
      <div className="space-y-2 pb-4">
        {knowledgePoints.map((kp) => (
          <button
            key={kp.id}
            type="button"
            className={cn(
              "w-full text-left p-3 rounded-lg border bg-card hover:bg-accent/50 transition-colors cursor-pointer",
              highlightedKpId === kp.id && "border-primary bg-primary/5"
            )}
            onClick={() => onHighlight(kp.id)}
          >
            <div className="flex items-start justify-between gap-2">
              <h4 className="text-sm font-medium leading-none">{kp.name}</h4>
              <div className="flex items-center gap-1">
                {/* 任意值 text-[10px]：紧凑徽章，text-xs(12px) 在列表项中过大 */}
                <Badge variant="outline" className="text-[10px] h-5 px-1">
                  {t("panel.level")}
                  {kp.level}
                </Badge>
                {canEdit && (
                  <div className="flex items-center gap-1 ml-1">
                    {canCreateQuestion && (
                      <Button
                        variant="ghost"
                        size="icon"
                        className="h-5 w-5 text-muted-foreground hover:text-foreground"
                        onClick={(e) => {
                          e.stopPropagation()
                          onCreateQuestion(kp)
                        }}
                        title={t("dialog.knowledge.createQuestion")}
                        aria-label={t("dialog.knowledge.createQuestion")}
                      >
                        <PlusCircle className="h-3 w-3" />
                      </Button>
                    )}
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-5 w-5 text-muted-foreground hover:text-foreground"
                      onClick={(e) => {
                        e.stopPropagation()
                        onEdit(kp)
                      }}
                      title={t("dialog.knowledge.editKp")}
                      aria-label={t("dialog.knowledge.editKp")}
                    >
                      <Pencil className="h-3 w-3" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-5 w-5 text-muted-foreground hover:text-destructive"
                      onClick={(e) => onDelete(kp.id, e)}
                      title={t("dialog.knowledge.deleteKp")}
                      aria-label={t("dialog.knowledge.deleteKp")}
                    >
                      <Trash2 className="h-3 w-3" />
                    </Button>
                  </div>
                )}
              </div>
            </div>
            {kp.description && (
              <p className="mt-2 text-xs text-muted-foreground line-clamp-2">
                {kp.description}
              </p>
            )}
          </button>
        ))}
      </div>
    </ScrollArea>
  )
}