"use client"

import { useState } from "react"
import { ChevronRight, FileText, Folder, Plus, Trash2, GripVertical } from "lucide-react"
import { toast } from "sonner"
import { useTranslations } from "next-intl"
import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, DragEndEvent } from "@dnd-kit/core"
import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, useSortable } from "@dnd-kit/sortable"
import { CSS } from "@dnd-kit/utilities"
import { Chapter } from "../types"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/shared/components/ui/collapsible"
import { Button } from "@/shared/components/ui/button"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/shared/components/ui/alert-dialog"
import { cn } from "@/shared/lib/utils"
import { CreateChapterDialog } from "./create-chapter-dialog"
import { deleteChapterAction, reorderChaptersAction } from "../actions"
import { findChapterParent } from "../utils"

interface SortableChapterItemProps {
  chapter: Chapter
  level: number
  selectedId?: string
  onSelect: (chapter: Chapter) => void
  textbookId: string
  onDelete: (chapter: Chapter) => void
  onCreateSub: (parentId: string) => void
  canEdit?: boolean
}

function SortableChapterItem({ chapter, level, selectedId, onSelect, textbookId, onDelete, onCreateSub, canEdit = false }: SortableChapterItemProps) {
  const t = useTranslations("textbooks")
  const [isOpen, setIsOpen] = useState(level === 0)
  const hasChildren = chapter.children && chapter.children.length > 0
  const isSelected = chapter.id === selectedId

  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id: chapter.id, disabled: !canEdit })

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    zIndex: isDragging ? 10 : 1,
    position: "relative" as const,
  }

  return (
    <div ref={setNodeRef} style={style} className={cn(level > 0 && "ml-2 border-l border-muted/30 pl-2")}>
      <Collapsible open={isOpen} onOpenChange={setIsOpen}>
        <div className={cn(
            "flex items-center group py-1.5 px-2 rounded-md transition-colors cursor-pointer select-none",
            isSelected ? "bg-accent text-accent-foreground font-medium" : "hover:bg-muted/50 text-muted-foreground hover:text-foreground",
            isDragging && "opacity-50"
        )}>
          {canEdit && (
            <div {...attributes} {...listeners} className="mr-1 cursor-grab opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-muted rounded" aria-label={t("dialog.chapter.dragHandle")}>
               <GripVertical className="h-3.5 w-3.5 text-muted-foreground/50" />
            </div>
          )}

          {hasChildren ? (
            <CollapsibleTrigger asChild>
              <Button
                variant="ghost"
                size="icon"
                className="h-5 w-5 shrink-0 p-0 mr-1 hover:bg-transparent text-muted-foreground/70"
                onClick={(e) => e.stopPropagation()} 
              >
                <ChevronRight
                  className={cn(
                    "h-3.5 w-3.5 transition-transform duration-200",
                    isOpen && "rotate-90"
                  )}
                />
                <span className="sr-only">{t("dialog.chapter.toggle")}</span>
              </Button>
            </CollapsibleTrigger>
          ) : (
            <div className="w-5 shrink-0 mr-1" />
          )}
          
          <div
            className="flex-1 min-w-0 flex items-center gap-2 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm"
            role="button"
            tabIndex={0}
            onClick={() => onSelect(chapter)}
            onKeyDown={(e) => {
              if (e.key === "Enter" || e.key === " ") {
                e.preventDefault()
                onSelect(chapter)
              }
            }}
          >
            {hasChildren ? (
              <Folder className={cn("h-4 w-4 shrink-0 transition-colors", isOpen || isSelected ? "text-blue-500/80" : "text-muted-foreground/50")} />
            ) : (
              <FileText className={cn("h-4 w-4 shrink-0 transition-colors", isSelected ? "text-blue-500/80" : "text-muted-foreground/50")} />
            )}
            <span className="truncate text-sm">{chapter.title}</span>
          </div>

          <div className={cn("flex items-center opacity-0 group-hover:opacity-100 transition-opacity ml-2", !canEdit && "hidden")}>
              <Button
                variant="ghost"
                size="icon"
                className="h-6 w-6 text-muted-foreground hover:text-foreground"
                onClick={(e) => {
                  e.stopPropagation()
                  onCreateSub(chapter.id)
                }}
                aria-label={t("dialog.chapter.addSubchapter")}
              >
                <Plus className="h-3.5 w-3.5" />
              </Button>
              <Button
                variant="ghost"
                size="icon"
                className="h-6 w-6 text-muted-foreground hover:text-destructive"
                onClick={(e) => {
                  e.stopPropagation()
                  onDelete(chapter)
                }}
                aria-label={t("dialog.chapter.delete")}
              >
                <Trash2 className="h-3.5 w-3.5" />
              </Button>
          </div>
        </div>
        
        <CollapsibleContent>
          <div className="pt-1">
             {hasChildren && chapter.children && (
                <RecursiveSortableList
                    items={chapter.children}
                    level={level + 1}
                    selectedId={selectedId}
                    onSelect={onSelect}
                    textbookId={textbookId}
                    onDelete={onDelete}
                    onCreateSub={onCreateSub}
                    canEdit={canEdit}
                />
             )}
          </div>
        </CollapsibleContent>
      </Collapsible>
    </div>
  )
}

function RecursiveSortableList({ items, level, selectedId, onSelect, textbookId, onDelete, onCreateSub, canEdit = false }: {
    items: Chapter[], 
    level: number, 
    selectedId?: string, 
    onSelect: (c: Chapter) => void,
    textbookId: string,
    onDelete: (c: Chapter) => void,
    onCreateSub: (pid: string) => void,
    canEdit?: boolean
}) {
    return (
        <SortableContext items={items.map(i => i.id)} strategy={verticalListSortingStrategy}>
            {items.map((chapter) => (
                <SortableChapterItem 
                    key={chapter.id} 
                    chapter={chapter} 
                    level={level}
                    selectedId={selectedId}
                    onSelect={onSelect}
                    textbookId={textbookId}
                    onDelete={onDelete}
                    onCreateSub={onCreateSub}
                    canEdit={canEdit}
                />
            ))}
        </SortableContext>
    )
}

interface ChapterSidebarListProps {
  chapters: Chapter[]
  selectedChapterId?: string
  onSelectChapter: (chapter: Chapter) => void
  textbookId: string
  canEdit?: boolean
}

export function ChapterSidebarList({ chapters, selectedChapterId, onSelectChapter, textbookId, canEdit = false }: ChapterSidebarListProps) {
  const t = useTranslations("textbooks")
  const [showCreateDialog, setShowCreateDialog] = useState(false)
  const [createParentId, setCreateParentId] = useState<string | undefined>(undefined)

  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
  const [deleteTarget, setDeleteTarget] = useState<Chapter | null>(null)
  const [isDeleting, setIsDeleting] = useState(false)

  const sensors = useSensors(
      useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
      useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
  )

  const handleDragEnd = async (event: DragEndEvent) => {
      const { active, over } = event
      if (!over || active.id === over.id) return

      // v2-P2: 复用 utils.ts 的 findChapterParent，消除重复代码
      const activeParent = findChapterParent(chapters, String(active.id))

      let activeList: Chapter[] = chapters
      let activeParentId: string | null = null

      if (activeParent) {
          activeList = activeParent.children || []
          activeParentId = activeParent.id
      } else {
           // Check if active is in root
           if (!chapters.some(c => c.id === active.id)) {
               // Should not happen if tree is consistent
               return
           }
      }

      // Check if over is in the same list
      if (activeList.some(c => c.id === over.id)) {
          const newIndex = activeList.findIndex((item) => item.id === over.id)

          try {
              const result = await reorderChaptersAction(String(active.id), newIndex, activeParentId, textbookId)
              if (result.success) {
                  toast.success(t("dialog.chapter.orderUpdated"))
              } else {
                  toast.error(result.message || t("dialog.chapter.orderUpdateFailed"))
              }
          } catch (e) {
              console.error("Failed to reorder chapters", e)
              toast.error(t("dialog.chapter.orderUpdateFailed"))
          }
      }
  }

  const handleDelete = async () => {
    if (!deleteTarget) return
    setIsDeleting(true)
    try {
      const res = await deleteChapterAction(deleteTarget.id, textbookId)
      if (res.success) {
        toast.success(res.message)
        setShowDeleteDialog(false)
        setDeleteTarget(null)
      } else {
        toast.error(res.message)
      }
    } catch (e) {
      console.error("Failed to delete chapter", e)
      toast.error(t("reader.deleteFailed"))
    } finally {
      setIsDeleting(false)
    }
  }

  const handleDeleteRequest = (chapter: Chapter) => {
      if (chapter.children && chapter.children.length > 0) {
          toast.error(t("dialog.chapter.cannotDeleteWithSubchapters"))
          return
      }
      setDeleteTarget(chapter)
      setShowDeleteDialog(true)
  }

  const handleCreateSubRequest = (parentId: string) => {
      setCreateParentId(parentId)
      setShowCreateDialog(true)
  }

  // If not editable, we can skip dnd logic
  if (!canEdit) {
     return (
        <RecursiveSortableList 
            items={chapters} 
            level={0} 
            selectedId={selectedChapterId}
            onSelect={onSelectChapter}
            textbookId={textbookId}
            onDelete={handleDeleteRequest}
            onCreateSub={handleCreateSubRequest}
            canEdit={false}
        />
     )
  }

  return (
    <DndContext id="chapter-sidebar-dnd" sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
        <RecursiveSortableList 
            items={chapters} 
            level={0} 
            selectedId={selectedChapterId}
            onSelect={onSelectChapter}
            textbookId={textbookId}
            onDelete={handleDeleteRequest}
            onCreateSub={handleCreateSubRequest}
            canEdit={canEdit}
        />

        <CreateChapterDialog 
            textbookId={textbookId} 
            parentId={createParentId}
            open={showCreateDialog}
            onOpenChange={(open) => {
                setShowCreateDialog(open)
                if (!open) setCreateParentId(undefined)
            }}
        />
        
        <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
            <AlertDialogContent>
            <AlertDialogHeader>
                <AlertDialogTitle>{t("dialog.chapter.deleteTitle")}</AlertDialogTitle>
                <AlertDialogDescription>
                {t("dialog.chapter.deleteDesc", { title: deleteTarget?.title ?? "" })}
                </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
                <AlertDialogCancel>{t("dialog.chapter.cancel")}</AlertDialogCancel>
                <AlertDialogAction onClick={handleDelete} className="bg-destructive text-destructive-foreground hover:bg-destructive/90" disabled={isDeleting}>
                {isDeleting ? t("dialog.chapter.deleting") : t("dialog.chapter.delete")}
                </AlertDialogAction>
            </AlertDialogFooter>
            </AlertDialogContent>
        </AlertDialog>
    </DndContext>
  )
}
