NextEdu/src/modules/textbooks/components/graph-node-detail-panel.tsx

"use client"

import { useTranslations } from "next-intl"
import Link from "next/link"
import { X, ExternalLink, Plus, Trash2 } from "lucide-react"
import { Button } from "@/shared/components/ui/button"
import { Badge } from "@/shared/components/ui/badge"
import { ScrollArea } from "@/shared/components/ui/scroll-area"
import { Separator } from "@/shared/components/ui/separator"
import type { KpWithRelations, MasteryInfo } from "../types"

interface GraphNodeDetailPanelProps {
  kp: KpWithRelations
  mastery: MasteryInfo | null
  prerequisites: { id: string; name: string; description: string | null }[]
  successors: { id: string; name: string; description: string | null }[]
  canEdit: boolean
  textbookId: string
  onClose: () => void
  onJumpToKp: (kpId: string) => void
  onAddPrerequisite: () => void
  onRemovePrerequisite: (prereqId: string) => void
}

export function GraphNodeDetailPanel({
  kp,
  mastery,
  prerequisites,
  successors,
  canEdit,
  onClose,
  onJumpToKp,
  onAddPrerequisite,
  onRemovePrerequisite,
}: GraphNodeDetailPanelProps) {
  const t = useTranslations("textbooks")

  const correctRate = mastery && mastery.totalQuestions > 0
    ? Math.round((mastery.correctQuestions / mastery.totalQuestions) * 100)
    : null

  return (
    <div className="flex flex-col h-full border-l bg-background">
      <div className="flex items-center justify-between p-3 border-b shrink-0">
        <h3 className="text-sm font-semibold truncate">{t("graph.detail.title")}</h3>
        <Button variant="ghost" size="sm" className="h-7 w-7 p-0" onClick={onClose}>
          <X className="h-4 w-4" />
        </Button>
      </div>

      <ScrollArea className="flex-1 min-h-0">
        <div className="p-3 space-y-4">
          {/* 知识点名称 */}
          <div>
            <h4 className="text-base font-medium">{kp.name}</h4>
            {kp.chapterTitle && (
              <p className="text-xs text-muted-foreground mt-1">{kp.chapterTitle}</p>
            )}
          </div>

          {/* 描述 */}
          <div>
            <h5 className="text-xs font-medium text-muted-foreground mb-1">
              {t("graph.detail.title")}
            </h5>
            <p className="text-sm">
              {kp.description || t("graph.detail.noDescription")}
            </p>
          </div>

          {/* 掌握度 */}
          {mastery && (
            <>
              <Separator />
              <div>
                <h5 className="text-xs font-medium text-muted-foreground mb-2">
                  {t("graph.node.mastery")}
                </h5>
                <div className="space-y-1 text-sm">
                  <div className="flex justify-between">
                    <span>{t("graph.detail.correctRate")}</span>
                    <span>{correctRate !== null ? `${correctRate}%` : t("graph.detail.masteryNotAssessed")}</span>
                  </div>
                  <div className="flex justify-between">
                    <span>{t("graph.detail.totalQuestions")}</span>
                    <span>{mastery.totalQuestions}</span>
                  </div>
                </div>
              </div>
            </>
          )}

          {/* 关联题目 */}
          <Separator />
          <div>
            <div className="flex items-center justify-between mb-2">
              <h5 className="text-xs font-medium text-muted-foreground">
                {t("graph.node.questions")} ({kp.questionCount})
              </h5>
              {kp.questionCount > 0 && (
                <Button asChild variant="ghost" size="sm" className="h-7 text-xs">
                  <Link href={`/teacher/questions?kp=${kp.id}`}>
                    <ExternalLink className="h-3 w-3 mr-1" />
                    {t("graph.detail.viewAllQuestions")}
                  </Link>
                </Button>
              )}
            </div>
          </div>

          {/* 前置知识点 */}
          <Separator />
          <div>
            <div className="flex items-center justify-between mb-2">
              <h5 className="text-xs font-medium text-muted-foreground">
                {t("graph.node.prerequisite")} ({prerequisites.length})
              </h5>
              {canEdit && (
                <Button variant="ghost" size="sm" className="h-7 text-xs" onClick={onAddPrerequisite}>
                  <Plus className="h-3 w-3 mr-1" />
                  {t("graph.detail.addPrerequisite")}
                </Button>
              )}
            </div>
            {prerequisites.length === 0 ? (
              <p className="text-xs text-muted-foreground">{t("graph.detail.noPrerequisites")}</p>
            ) : (
              <div className="space-y-1">
                {prerequisites.map((p) => (
                  <div key={p.id} className="flex items-center justify-between gap-2">
                    <Button
                      variant="ghost"
                      size="sm"
                      className="h-7 text-xs justify-start flex-1"
                      onClick={() => onJumpToKp(p.id)}
                    >
                      {p.name}
                    </Button>
                    {canEdit && (
                      <Button
                        variant="ghost"
                        size="sm"
                        className="h-7 w-7 p-0 text-muted-foreground hover:text-destructive"
                        onClick={() => onRemovePrerequisite(p.id)}
                      >
                        <Trash2 className="h-3 w-3" />
                      </Button>
                    )}
                  </div>
                ))}
              </div>
            )}
          </div>

          {/* 后置知识点 */}
          <Separator />
          <div>
            <h5 className="text-xs font-medium text-muted-foreground mb-2">
              {t("graph.node.successor")} ({successors.length})
            </h5>
            {successors.length === 0 ? (
              <p className="text-xs text-muted-foreground">{t("graph.detail.noSuccessors")}</p>
            ) : (
              <div className="flex flex-wrap gap-1">
                {successors.map((s) => (
                  <Badge
                    key={s.id}
                    variant="outline"
                    className="cursor-pointer hover:bg-accent text-xs"
                    onClick={() => onJumpToKp(s.id)}
                  >
                    {s.name}
                  </Badge>
                ))}
              </div>
            )}
          </div>
        </div>
      </ScrollArea>
    </div>
  )
}