"use client"

import { Card, CardContent } from "@/shared/components/ui/card"
import { Badge } from "@/shared/components/ui/badge"
import { Button } from "@/shared/components/ui/button"
import { Tag, Trash2 } from "lucide-react"
import { KnowledgePoint } from "../types"
import { CreateKnowledgePointDialog } from "./create-knowledge-point-dialog"
import { deleteKnowledgePointAction } from "../actions"
import { toast } from "sonner"
import { ScrollArea } from "@/shared/components/ui/scroll-area"

interface KnowledgePointPanelProps {
  knowledgePoints: KnowledgePoint[]
  selectedChapterId: string | null
  textbookId: string
}

export function KnowledgePointPanel({ 
  knowledgePoints, 
  selectedChapterId, 
  textbookId 
}: KnowledgePointPanelProps) {
  
  const handleDelete = async (id: string) => {
    if (!confirm("Are you sure you want to delete this knowledge point?")) return
    
    const result = await deleteKnowledgePointAction(id, textbookId)
    if (result.success) {
      toast.success(result.message)
    } else {
      toast.error(result.message)
    }
  }

  // Filter KPs for the selected chapter
  const chapterKPs = selectedChapterId 
    ? knowledgePoints.filter(kp => kp.chapterId === selectedChapterId)
    : []

  return (
    <div className="h-full flex flex-col space-y-4">
      <div className="flex items-center justify-between px-2">
        <h3 className="font-semibold flex items-center gap-2">
            <Tag className="h-4 w-4" />
            Knowledge Points
        </h3>
        {selectedChapterId && (
            <CreateKnowledgePointDialog 
                chapterId={selectedChapterId} 
                textbookId={textbookId} 
            />
        )}
      </div>

      <ScrollArea className="flex-1 -mx-2 px-2">
        {selectedChapterId ? (
            chapterKPs.length > 0 ? (
                <div className="space-y-3">
                    {chapterKPs.map((kp) => (
                        <Card key={kp.id} className="relative group">
                            <CardContent className="p-3">
                                <div className="flex justify-between items-start gap-2">
                                    <div className="space-y-1">
                                        <div className="font-medium text-sm leading-tight">
                                            {kp.name}
                                        </div>
                                        {kp.description && (
                                            <p className="text-xs text-muted-foreground line-clamp-2">
                                                {kp.description}
                                            </p>
                                        )}
                                    </div>
                                    <Button
                                        variant="ghost"
                                        size="icon"
                                        className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity text-destructive hover:text-destructive hover:bg-destructive/10 -mt-1 -mr-1"
                                        onClick={() => handleDelete(kp.id)}
                                    >
                                        <Trash2 className="h-3.5 w-3.5" />
                                    </Button>
                                </div>
                            </CardContent>
                        </Card>
                    ))}
                </div>
            ) : (
                <div className="text-sm text-muted-foreground text-center py-8 border rounded-md border-dashed bg-muted/30">
                    No knowledge points linked to this chapter yet.
                </div>
            )
        ) : (
            <div className="text-sm text-muted-foreground text-center py-8">
                Select a chapter to manage its knowledge points.
            </div>
        )}
      </ScrollArea>
    </div>
  )
}