"use client"

import { useState, useEffect, useMemo, useRef } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog"
import { BookOpen, Loader2, Plus, Upload, Edit, Trash2, LayoutGrid, List, Image as ImageIcon, Search, FileText } from "lucide-react"
import { toast } from "sonner"
import Link from "next/link"
import { getNovelStatusBadgeClass } from "@/lib/novel-status"

interface Novel {
    id: string
    title: string
    slug: string
    authorName: string
    status: string
    totalChapters: number
    coverUrl?: string
    series?: {
        id: string
        name: string
        slug: string
    } | null
}

interface Genre {
    id: string
    name: string
}

interface SeriesOption {
    id: string
    name: string
    slug: string
    _count?: {
        novels: number
    }
}

interface EpubPreviewData {
    fileName: string
    splitMode: "toc" | "regex"
    detectedStructureType: "standard" | "light_novel"
    hasCoverFromEpub?: boolean
    parserInfo?: {
        splitMode: "toc" | "regex"
        chapterRegexUsed?: string | null
        regexPreset?: string | null
        sourceSections: number
        chaptersDetected: number
        chaptersFinal?: number
        insertedMissingChapters?: number
        detectedMaxChapterNumber?: number
    }
    novel: {
        title: string
        authorName: string
        description: string
        totalChapters: number
    }
    chaptersPreview: {
        number: number
        title: string
        isPlaceholder?: boolean
        volumeNumber: number | null
        volumeTitle: string | null
        volumeChapterNumber: number | null
        excerpt: string
    }[]
}

const CHAPTER_REGEX_PRESETS = [
    {
        id: "vi_chuong",
        name: "VN - Chương 1: ...",
        pattern: "^(?:Chương|Ch\\.)\\s*\\d+(?:\\.\\d+)?[^\\n]*$",
    },
    {
        id: "en_chapter",
        name: "EN - Chapter 1: ...",
        pattern: "^(?:Chapter|Ch\\.)\\s*\\d+(?:\\.\\d+)?[^\\n]*$",
    },
    {
        id: "mix_chapter",
        name: "Mixed - Chương/Chapter",
        pattern: "^(?:Chương|Chapter|Ch\\.)\\s*\\d+(?:\\.\\d+)?[^\\n]*$",
    },
    {
        id: "bracket_chapter",
        name: "[Chương 01] ...",
        pattern: "^\\[?\\s*(?:Chương|Chapter)\\s*\\d+(?:\\.\\d+)?\\s*\\]?[^\\n]*$",
    },
]

export function NovelClient() {
    const [novels, setNovels] = useState<Novel[]>([])
    const [loading, setLoading] = useState(true)
    const [openAdd, setOpenAdd] = useState(false)
    const [submitting, setSubmitting] = useState(false)
    const [uploadingEpub, setUploadingEpub] = useState(false)
    const [previewingEpub, setPreviewingEpub] = useState(false)
    const [openEpubPreview, setOpenEpubPreview] = useState(false)
    const [openBulkEpubImport, setOpenBulkEpubImport] = useState(false)
    const [epubPreviewData, setEpubPreviewData] = useState<EpubPreviewData | null>(null)
    const [pendingEpubFile, setPendingEpubFile] = useState<File | null>(null)
    const [pendingEpubFiles, setPendingEpubFiles] = useState<File[]>([])
    const [epubTitle, setEpubTitle] = useState("")
    const [epubAuthorName, setEpubAuthorName] = useState("")
    const [epubDescription, setEpubDescription] = useState("")
    const [epubSeriesMode, setEpubSeriesMode] = useState<"none" | "existing" | "new">("none")
    const [epubSeriesId, setEpubSeriesId] = useState("")
    const [epubSeriesName, setEpubSeriesName] = useState("")
    const [epubSplitMode, setEpubSplitMode] = useState<"toc" | "regex">("toc")
    const [epubRegexPreset, setEpubRegexPreset] = useState<string>("vi_chuong")
    const [epubCustomRegex, setEpubCustomRegex] = useState("")
    const epubInputRef = useRef<HTMLInputElement>(null)

    // Form states
    const [title, setTitle] = useState("")
    const [originalTitle, setOriginalTitle] = useState("")
    const [authorName, setAuthorName] = useState("")
    const [originalAuthorName, setOriginalAuthorName] = useState("")
    const [description, setDescription] = useState("")
    const [coverUrl, setCoverUrl] = useState("")
    const [seriesMode, setSeriesMode] = useState<"none" | "existing" | "new">("none")
    const [selectedSeriesId, setSelectedSeriesId] = useState("")
    const [newSeriesName, setNewSeriesName] = useState("")
    const [status, setStatus] = useState("Đang ra")
    
    // View state
    const [viewMode, setViewMode] = useState<"list" | "grid">("list")
    const [uploadingCover, setUploadingCover] = useState(false)

    // Edit states
    const [openEdit, setOpenEdit] = useState(false)
    const [editingNovel, setEditingNovel] = useState<Novel | null>(null)
    const [loadingEditData, setLoadingEditData] = useState(false)

    // Genre states
    const [genres, setGenres] = useState<Genre[]>([])
    const [seriesList, setSeriesList] = useState<SeriesOption[]>([])
    const [selectedGenres, setSelectedGenres] = useState<string[]>([])
    const [newGenreName, setNewGenreName] = useState("")
    const [addingGenre, setAddingGenre] = useState(false)

    // Delete states
    const [openDelete, setOpenDelete] = useState(false)
    const [deletingNovelId, setDeletingNovelId] = useState<string | null>(null)

    // Bulk states
    const [searchKeyword, setSearchKeyword] = useState("")
    const [selectedNovelIds, setSelectedNovelIds] = useState<string[]>([])
    const [bulkSubmitting, setBulkSubmitting] = useState(false)

    const getSelectedChapterRegex = () => {
        if (epubRegexPreset === "custom") {
            return epubCustomRegex.trim()
        }

        return CHAPTER_REGEX_PRESETS.find((preset) => preset.id === epubRegexPreset)?.pattern || CHAPTER_REGEX_PRESETS[0].pattern
    }

    const fetchNovels = async () => {
        try {
            const res = await fetch("/api/mod/truyen")
            if (!res.ok) throw new Error("Lấy danh sách lỗi")
            const data = await res.json()
            setNovels(data)
            setSelectedNovelIds((prev) => prev.filter((id) => data.some((novel: Novel) => novel.id === id)))
        } catch {
            toast.error("Không thể tải danh sách truyện")
        } finally {
            setLoading(false)
        }
    }

    const fetchGenres = async () => {
        try {
            const res = await fetch("/api/mod/the-loai")
            if (res.ok) {
                const data = await res.json()
                setGenres(data)
            }
        } catch {
            console.error("Failed to fetch genres")
        }
    }

    const fetchSeries = async () => {
        try {
            const res = await fetch("/api/mod/series")
            if (res.ok) {
                const data = await res.json()
                setSeriesList(data)
            }
        } catch {
            console.error("Failed to fetch series")
        }
    }

    useEffect(() => {
        fetchNovels()
        fetchGenres()
        fetchSeries()
    }, [])

    const filteredNovels = useMemo(() => {
        const keyword = searchKeyword.trim().toLowerCase()
        if (!keyword) return novels

        return novels.filter((novel) => {
            const searchable = [novel.title, novel.authorName, novel.series?.name || ""].join(" ").toLowerCase()
            return searchable.includes(keyword)
        })
    }, [novels, searchKeyword])

    const visibleNovelIds = useMemo(() => filteredNovels.map((novel) => novel.id), [filteredNovels])
    const allVisibleSelected = visibleNovelIds.length > 0 && visibleNovelIds.every((id) => selectedNovelIds.includes(id))

    const toggleNovelSelection = (id: string) => {
        setSelectedNovelIds((prev) => prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id])
    }

    const toggleSelectAllVisible = () => {
        setSelectedNovelIds((prev) => {
            if (allVisibleSelected) {
                return prev.filter((id) => !visibleNovelIds.includes(id))
            }

            const merged = new Set([...prev, ...visibleNovelIds])
            return Array.from(merged)
        })
    }

    const handleBulkDelete = async () => {
        if (selectedNovelIds.length === 0) {
            toast.error("Vui lòng chọn truyện cần xóa")
            return
        }

        if (!confirm(`Bạn có chắc muốn xóa ${selectedNovelIds.length} truyện đã chọn?`)) return

        setBulkSubmitting(true)
        try {
            const res = await fetch("/api/mod/truyen/bulk", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ action: "delete", ids: selectedNovelIds }),
            })

            const data = await res.json()
            if (!res.ok) throw new Error(data.error || "Không thể xóa hàng loạt")

            toast.success(`Đã xóa ${data.deletedCount || selectedNovelIds.length} truyện`)
            setSelectedNovelIds([])
            fetchNovels()
            fetchSeries()
        } catch (error: any) {
            toast.error(error.message || "Lỗi khi xóa hàng loạt")
        } finally {
            setBulkSubmitting(false)
        }
    }

    const toggleGenre = (id: string) => {
        setSelectedGenres(prev =>
            prev.includes(id) ? prev.filter(gId => gId !== id) : [...prev, id]
        )
    }

    const handleAddGenre = async () => {
        if (!newGenreName.trim()) return
        setAddingGenre(true)
        try {
            const res = await fetch("/api/mod/the-loai", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ name: newGenreName, description: "" })
            })
            const data = await res.json()
            if (!res.ok) throw new Error(data.error || "Thêm lỗi")

            toast.success("Thêm thể loại thành công")
            setNewGenreName("")
            fetchGenres()
            setSelectedGenres(prev => [...prev, data.id])
        } catch (error: any) {
            toast.error(error.message)
        } finally {
            setAddingGenre(false)
        }
    }

    const handleDeleteGenre = async (id: string, name: string) => {
        if (!confirm(`Bạn có chắc muốn xóa thể loại "${name}" khỏi hệ thống?`)) return;

        try {
            const res = await fetch(`/api/mod/the-loai?id=${id}`, {
                method: "DELETE"
            })
            if (!res.ok) {
                const data = await res.json()
                throw new Error(data.error || "Xóa lỗi")
            }
            toast.success("Đã xóa thể loại thành công")
            fetchGenres()
            // Clean up from selected lists
            setSelectedGenres(prev => prev.filter(gId => gId !== id))
        } catch (error: any) {
            toast.error(error.message)
        }
    }

    const handleAddSubmit = async (e: React.FormEvent) => {
        e.preventDefault()
        if (!title || !authorName || !description) {
            toast.error("Vui lòng điền đầy đủ thông tin")
            return
        }

        const resolvedNewSeriesName = seriesMode === "new"
            ? (newSeriesName.trim() || title.trim())
            : ""

        if (seriesMode === "existing" && !selectedSeriesId) {
            toast.error("Vui lòng chọn series đã có")
            return
        }

        if (seriesMode === "new" && !resolvedNewSeriesName) {
            toast.error("Vui lòng nhập tên series mới")
            return
        }

        setSubmitting(true)
        try {
            const res = await fetch("/api/mod/truyen", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    title,
                    originalTitle,
                    authorName,
                    originalAuthorName,
                    description,
                    coverUrl,
                    genreIds: selectedGenres,
                    seriesId: seriesMode === "existing" ? selectedSeriesId : undefined,
                    seriesName: seriesMode === "new" ? resolvedNewSeriesName : undefined,
                }),
            })
            if (!res.ok) throw new Error("Thêm mới thất bại")
            toast.success("Đã thêm truyện thành công!")
            setOpenAdd(false)
            setTitle("")
            setOriginalTitle("")
            setAuthorName("")
            setOriginalAuthorName("")
            setDescription("")
            setCoverUrl("")
            setSeriesMode("none")
            setSelectedSeriesId("")
            setNewSeriesName("")
            setStatus("Đang ra")
            setSelectedGenres([])
            fetchNovels()
            fetchSeries()
        } catch {
            toast.error("Lỗi khi thêm truyện mới")
        } finally {
            setSubmitting(false)
        }
    }

    const resetEpubPreviewState = () => {
        setOpenEpubPreview(false)
        setOpenBulkEpubImport(false)
        setEpubPreviewData(null)
        setPendingEpubFile(null)
        setPendingEpubFiles([])
        setEpubTitle("")
        setEpubAuthorName("")
        setEpubDescription("")
        setEpubSeriesMode("none")
        setEpubSeriesId("")
        setEpubSeriesName("")
        setEpubSplitMode("toc")
        setEpubRegexPreset("vi_chuong")
        setEpubCustomRegex("")
        if (epubInputRef.current) {
            epubInputRef.current.value = ""
        }
    }

    const requestEpubPreview = async (
        file: File,
        options?: {
            splitMode?: "toc" | "regex"
            regexPreset?: string
            regexInput?: string
            preserveEditedMetadata?: boolean
        }
    ) => {
        const splitMode = options?.splitMode || epubSplitMode
        const regexPreset = options?.regexPreset || epubRegexPreset
        const regexInput = options?.regexInput ?? (regexPreset === "custom" ? epubCustomRegex.trim() : getSelectedChapterRegex())

        if (splitMode === "regex" && !regexInput) {
            throw new Error("Vui lòng nhập regex tách chương")
        }

        setPreviewingEpub(true)

        const formData = new FormData()
        formData.append("file", file)
        formData.append("preview", "true")
        formData.append("seriesMode", epubSeriesMode)
        if (epubSeriesMode === "existing") formData.append("seriesId", epubSeriesId)
        if (epubSeriesMode === "new") formData.append("seriesName", epubSeriesName)
        formData.append("splitMode", splitMode)

        if (splitMode === "regex") {
            formData.append("chapterRegexPreset", regexPreset)
            formData.append("chapterRegex", regexInput)
        }

        const res = await fetch("/api/mod/epub", {
            method: "POST",
            body: formData,
        })

        const data = await res.json()
        if (!res.ok) {
            throw new Error(data.error || "Không thể phân tích EPUB")
        }

        setEpubPreviewData(data)
        setEpubSplitMode(data.splitMode || splitMode)

        if (!options?.preserveEditedMetadata) {
            setEpubTitle(data.novel?.title || "")
            setEpubAuthorName(data.novel?.authorName || "")
            setEpubDescription(data.novel?.description || "")
        }

        setOpenEpubPreview(true)
    }

    const handleEpubSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
        const files = Array.from(e.target.files || [])
        if (files.length === 0) return

        if (files.some((file) => !file.name.endsWith('.epub'))) {
            toast.error("Vui lòng chọn file định dạng .epub")
            e.target.value = "" // Reset input
            return
        }

        if (files.length > 1) {
            setPendingEpubFiles(files)
            setOpenBulkEpubImport(true)
            e.target.value = ""
            return
        }

        const file = files[0]

        setPendingEpubFile(file)

        try {
            await requestEpubPreview(file, {
                splitMode: "toc",
                regexPreset: "vi_chuong",
                regexInput: CHAPTER_REGEX_PRESETS[0].pattern,
                preserveEditedMetadata: false,
            })
        } catch (err: any) {
            toast.error(err.message || "Có lỗi xảy ra khi xử lý file EPUB")
            setPendingEpubFile(null)
        } finally {
            setPreviewingEpub(false)
            e.target.value = ""
        }
    }

    const handleReparseEpub = async () => {
        if (!pendingEpubFile) {
            toast.error("Không tìm thấy file EPUB để phân tích lại")
            return
        }

        try {
            await requestEpubPreview(pendingEpubFile, {
                splitMode: epubSplitMode,
                regexPreset: epubRegexPreset,
                regexInput: epubRegexPreset === "custom" ? epubCustomRegex.trim() : getSelectedChapterRegex(),
                preserveEditedMetadata: true,
            })
        } catch (err: any) {
            toast.error(err.message || "Không thể phân tích lại EPUB")
        } finally {
            setPreviewingEpub(false)
        }
    }

    const handleConfirmEpubUpload = async () => {
        if (!pendingEpubFile) {
            toast.error("Không tìm thấy file EPUB để tải lên")
            return
        }

        if (epubSplitMode === "regex" && epubRegexPreset === "custom" && !epubCustomRegex.trim()) {
            toast.error("Vui lòng nhập regex tùy chỉnh trước khi tải lên")
            return
        }

        if (epubSeriesMode === "existing" && !epubSeriesId) {
            toast.error("Vui lòng chọn series đã có")
            return
        }

        if (epubSeriesMode === "new" && !epubSeriesName.trim()) {
            toast.error("Vui lòng nhập tên series mới")
            return
        }

        setUploadingEpub(true)
        const formData = new FormData()
        formData.append("file", pendingEpubFile)
        formData.append("title", epubTitle)
        formData.append("authorName", epubAuthorName)
        formData.append("description", epubDescription)
        formData.append("seriesMode", epubSeriesMode)
        if (epubSeriesMode === "existing") formData.append("seriesId", epubSeriesId)
        if (epubSeriesMode === "new") formData.append("seriesName", epubSeriesName.trim())
        formData.append("splitMode", epubSplitMode)

        if (epubSplitMode === "regex") {
            const selectedRegex = epubRegexPreset === "custom" ? epubCustomRegex.trim() : getSelectedChapterRegex()
            formData.append("chapterRegexPreset", epubRegexPreset)
            formData.append("chapterRegex", selectedRegex)
        }

        try {
            const res = await fetch("/api/mod/epub", {
                method: "POST",
                body: formData,
            })

            if (!res.ok) {
                const data = await res.json()
                throw new Error(data.error || "Lỗi khi tải lên EPUB")
            }

            toast.success("Đã tải lên EPUB thành công")
            resetEpubPreviewState()
            fetchNovels()
            fetchSeries()
        } catch (err: any) {
            toast.error(err.message || "Có lỗi xảy ra khi xuất bản truyện")
        } finally {
            setUploadingEpub(false)
        }
    }

    const handleBulkEpubUpload = async () => {
        if (pendingEpubFiles.length === 0) {
            toast.error("Không có file EPUB để tải lên")
            return
        }

        if (epubSeriesMode === "existing" && !epubSeriesId) {
            toast.error("Vui lòng chọn series đã có")
            return
        }

        if (epubSeriesMode === "new" && !epubSeriesName.trim()) {
            toast.error("Vui lòng nhập tên series mới")
            return
        }

        setUploadingEpub(true)
        let success = 0
        let failed = 0

        try {
            for (const file of pendingEpubFiles) {
                const formData = new FormData()
                formData.append("file", file)
                formData.append("seriesMode", epubSeriesMode)
                if (epubSeriesMode === "existing") formData.append("seriesId", epubSeriesId)
                if (epubSeriesMode === "new") formData.append("seriesName", epubSeriesName.trim())
                formData.append("splitMode", "toc")

                const res = await fetch("/api/mod/epub", {
                    method: "POST",
                    body: formData,
                })

                if (res.ok) success += 1
                else failed += 1
            }

            if (success > 0 && failed === 0) {
                toast.success(`Đã import ${success} file EPUB vào series thành công`)
            } else if (success > 0) {
                toast.warning(`Import thành công ${success} file, thất bại ${failed} file`)
            } else {
                toast.error("Import EPUB thất bại")
            }

            resetEpubPreviewState()
            fetchNovels()
            fetchSeries()
        } finally {
            setUploadingEpub(false)
        }
    }

    const handleCoverUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0]
        if (!file) return

        if (!file.type.startsWith('image/')) {
            toast.error("Vui lòng chọn file hình ảnh")
            e.target.value = ""
            return
        }

        setUploadingCover(true)
        const formData = new FormData()
        formData.append("file", file)

        try {
            const res = await fetch("/api/mod/upload-cover", {
                method: "POST",
                body: formData,
            })
            const data = await res.json()
            if (!res.ok) throw new Error(data.error || "Lỗi khi tải lên ảnh bìa")

            setCoverUrl(data.url)
            toast.success("Tải ảnh bìa thành công!")
        } catch (err: any) {
            toast.error(err.message || "Có lỗi xảy ra khi xử lý ảnh bìa")
        } finally {
            setUploadingCover(false)
            e.target.value = ""
        }
    }

    const handleOpenEdit = async (novel: Novel) => {
        setEditingNovel(novel)
        setTitle(novel.title)
        setAuthorName(novel.authorName)
        if (novel.series?.id) {
            setSeriesMode("existing")
            setSelectedSeriesId(novel.series.id)
            setNewSeriesName("")
        } else {
            setSeriesMode("none")
            setSelectedSeriesId("")
            setNewSeriesName("")
        }
        setStatus(novel.status)
        setDescription("")
        setOriginalTitle("")
        setOriginalAuthorName("")
        setCoverUrl(novel.coverUrl || "")
        setOpenEdit(true)
        setLoadingEditData(true)

        try {
            const res = await fetch(`/api/mod/truyen/${novel.id}`)
            if (res.ok) {
                const data = await res.json()
                setDescription(data.description || "")
                setOriginalTitle(data.originalTitle || "")
                setOriginalAuthorName(data.originalAuthorName || "")
                if (data.series?.id) {
                    setSeriesMode("existing")
                    setSelectedSeriesId(data.series.id)
                    setNewSeriesName("")
                }
                if (data.genres && Array.isArray(data.genres)) {
                    setSelectedGenres(data.genres.map((g: any) => g.genreId))
                } else {
                    setSelectedGenres([])
                }
            } else {
                toast.error("Không tải được chi tiết truyện")
            }
        } catch {
            toast.error("Không tải được chi tiết truyện")
        } finally {
            setLoadingEditData(false)
        }
    }

    const handleEditSubmit = async (e: React.FormEvent) => {
        e.preventDefault()
        if (!editingNovel || !title || !authorName) {
            toast.error("Vui lòng nhập tên truyện và tác giả")
            return
        }

        if (seriesMode === "existing" && !selectedSeriesId) {
            toast.error("Vui lòng chọn series đã có")
            return
        }

        if (seriesMode === "new" && !newSeriesName.trim()) {
            toast.error("Vui lòng nhập tên series mới")
            return
        }

        setSubmitting(true)
        try {
            const res = await fetch("/api/mod/truyen", {
                method: "PUT",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    id: editingNovel.id,
                    title,
                    originalTitle,
                    authorName,
                    originalAuthorName,
                    description,
                    coverUrl,
                    genreIds: selectedGenres,
                    status: status
                }),
            })

            const data = await res.json()
            if (!res.ok) throw new Error(data.error || "Lỗi cập nhật")

            toast.success("Cập nhật truyện thành công!")
            setOpenEdit(false)
            fetchNovels()
            fetchSeries()
        } catch (error: any) {
            toast.error(error.message)
        } finally {
            setSubmitting(false)
        }
    }

    const handleDeleteSubmit = async () => {
        if (!deletingNovelId) return
        setSubmitting(true)

        try {
            const res = await fetch(`/api/mod/truyen?id=${deletingNovelId}`, {
                method: "DELETE",
            })
            if (!res.ok) {
                const data = await res.json()
                throw new Error(data.error || "Xóa thất bại")
            }
            toast.success("Đã xóa truyện thành công")
            setOpenDelete(false)
            fetchNovels()
        } catch (error: any) {
            toast.error(error.message)
        } finally {
            setSubmitting(false)
        }
    }


    return (
        <div className="space-y-6">
            <div className="flex justify-between items-center bg-card p-4 rounded-xl border shadow-sm">
                <h1 className="text-2xl font-bold flex items-center gap-2">
                    <BookOpen className="h-6 w-6 text-primary" /> Quản lý truyện
                </h1>

                <div className="flex gap-3">
                    <div className="flex bg-muted rounded-md p-1">
                        <Button
                            variant="ghost"
                            size="sm"
                            className={`h-8 px-2 ${viewMode === 'list' ? 'bg-background shadow-sm' : ''}`}
                            onClick={() => setViewMode('list')}
                            title="Dạng danh sách"
                        >
                            <List className="h-4 w-4" />
                        </Button>
                        <Button
                            variant="ghost"
                            size="sm"
                            className={`h-8 px-2 ${viewMode === 'grid' ? 'bg-background shadow-sm' : ''}`}
                            onClick={() => setViewMode('grid')}
                            title="Dạng lưới"
                        >
                            <LayoutGrid className="h-4 w-4" />
                        </Button>
                    </div>

                    <input
                        type="file"
                        id="epub-upload"
                        ref={epubInputRef}
                        accept=".epub,application/epub+zip"
                        multiple
                        className="hidden"
                        onChange={handleEpubSelect}
                        disabled={previewingEpub || uploadingEpub}
                    />
                    <Button
                        variant="secondary"
                        className="gap-2"
                        disabled={previewingEpub || uploadingEpub}
                        onClick={() => document.getElementById('epub-upload')?.click()}
                    >
                        {previewingEpub || uploadingEpub ? <Loader2 className="h-4 w-4 animate-spin" /> : <Upload className="h-4 w-4" />}
                        {previewingEpub ? "Đang phân tích EPUB..." : uploadingEpub ? "Đang xuất bản..." : "Tải lên EPUB"}
                    </Button>

                    <Dialog
                        open={openEpubPreview}
                        onOpenChange={(open) => {
                            if (!open && !uploadingEpub) {
                                resetEpubPreviewState()
                            } else {
                                setOpenEpubPreview(open)
                            }
                        }}
                    >
                        <DialogContent className="sm:max-w-[700px] max-h-[85vh] overflow-y-auto">
                            <DialogHeader>
                                <DialogTitle>Xem trước truyện từ EPUB</DialogTitle>
                                <DialogDescription>
                                    Kiểm tra nội dung sẽ được import trước khi tải lên chính thức.
                                </DialogDescription>
                            </DialogHeader>

                            {epubPreviewData ? (
                                <div className="space-y-4">
                                    <div className="rounded-md border bg-muted/30 p-3 text-sm">
                                        <p><span className="font-semibold">File:</span> {epubPreviewData.fileName}</p>
                                        <p><span className="font-semibold">Số chương:</span> {epubPreviewData.novel.totalChapters}</p>
                                        <p>
                                            <span className="font-semibold">Cover từ EPUB:</span>{" "}
                                            {epubPreviewData.hasCoverFromEpub ? "Có (sẽ tự gán làm ảnh bìa)" : "Không tìm thấy cover"}
                                        </p>
                                        <p>
                                            <span className="font-semibold">Nhận diện cấu trúc:</span>{" "}
                                            {epubPreviewData.detectedStructureType === "light_novel" ? "Theo quyển" : "Chuẩn"}
                                        </p>
                                        {epubPreviewData.parserInfo && (
                                            <>
                                                <p>
                                                    <span className="font-semibold">Parser:</span>{" "}
                                                    {epubPreviewData.parserInfo.splitMode === "regex" ? "Regex" : "TOC"}
                                                </p>
                                                <p>
                                                    <span className="font-semibold">Nguồn phân tích:</span>{" "}
                                                    {epubPreviewData.parserInfo.sourceSections} mục EPUB
                                                </p>
                                                {typeof epubPreviewData.parserInfo.chaptersDetected === "number" && (
                                                    <p>
                                                        <span className="font-semibold">Chương bắt được:</span>{" "}
                                                        {epubPreviewData.parserInfo.chaptersDetected}
                                                    </p>
                                                )}
                                                {typeof epubPreviewData.parserInfo.insertedMissingChapters === "number" && (
                                                    <p>
                                                        <span className="font-semibold">Chương thiếu đã chèn:</span>{" "}
                                                        {epubPreviewData.parserInfo.insertedMissingChapters}
                                                    </p>
                                                )}
                                                {epubPreviewData.parserInfo.chapterRegexUsed && (
                                                    <p className="break-all">
                                                        <span className="font-semibold">Regex dùng:</span>{" "}
                                                        {epubPreviewData.parserInfo.chapterRegexUsed}
                                                    </p>
                                                )}
                                            </>
                                        )}
                                    </div>

                                    <div className="grid gap-3 rounded-md border p-3">
                                        <p className="text-sm font-semibold">Tùy chọn parser EPUB</p>
                                        <div className="grid gap-2 md:grid-cols-2">
                                            <div className="grid gap-2">
                                                <label className="text-xs font-medium text-muted-foreground">Chế độ tách chương</label>
                                                <select
                                                    value={epubSplitMode}
                                                    onChange={(e) => setEpubSplitMode(e.target.value as "toc" | "regex")}
                                                    className="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm"
                                                >
                                                    <option value="toc">Theo TOC trong EPUB</option>
                                                    <option value="regex">Theo Regex</option>
                                                </select>
                                            </div>

                                            {epubSplitMode === "regex" && (
                                                <div className="grid gap-2">
                                                    <label className="text-xs font-medium text-muted-foreground">Preset Regex</label>
                                                    <select
                                                        value={epubRegexPreset}
                                                        onChange={(e) => setEpubRegexPreset(e.target.value)}
                                                        className="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm"
                                                    >
                                                        {CHAPTER_REGEX_PRESETS.map((preset) => (
                                                            <option key={preset.id} value={preset.id}>{preset.name}</option>
                                                        ))}
                                                        <option value="custom">Tự nhập regex</option>
                                                    </select>
                                                </div>
                                            )}
                                        </div>

                                        {epubSplitMode === "regex" && (
                                            <>
                                                {epubRegexPreset !== "custom" ? (
                                                    <div className="rounded-md bg-muted/40 p-2 text-xs break-all">
                                                        {CHAPTER_REGEX_PRESETS.find((preset) => preset.id === epubRegexPreset)?.pattern}
                                                    </div>
                                                ) : (
                                                    <div className="grid gap-2">
                                                        <label className="text-xs font-medium text-muted-foreground">Regex tùy chỉnh</label>
                                                        <Input
                                                            value={epubCustomRegex}
                                                            onChange={(e) => setEpubCustomRegex(e.target.value)}
                                                            placeholder="Ví dụ: ^(?:Chương|Chapter)\\s*\\d+[^\\n]*$"
                                                        />
                                                    </div>
                                                )}
                                            </>
                                        )}

                                        <div className="flex justify-end">
                                            <Button
                                                type="button"
                                                variant="secondary"
                                                onClick={handleReparseEpub}
                                                disabled={previewingEpub || (epubSplitMode === "regex" && epubRegexPreset === "custom" && !epubCustomRegex.trim())}
                                            >
                                                {previewingEpub && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                                                Phân tích lại theo cấu hình
                                            </Button>
                                        </div>
                                    </div>

                                    <div className="grid gap-3 rounded-md border p-3">
                                        <p className="text-sm font-semibold">Chỉnh sửa nhanh metadata</p>
                                        <div className="grid gap-2">
                                            <label className="text-xs font-medium text-muted-foreground">Tên truyện</label>
                                            <Input value={epubTitle} onChange={(e) => setEpubTitle(e.target.value)} />
                                        </div>
                                        <div className="grid gap-2">
                                            <label className="text-xs font-medium text-muted-foreground">Tác giả</label>
                                            <Input value={epubAuthorName} onChange={(e) => setEpubAuthorName(e.target.value)} />
                                        </div>
                                        <div className="grid gap-2">
                                            <label className="text-xs font-medium text-muted-foreground">Mô tả</label>
                                            <Textarea value={epubDescription} onChange={(e) => setEpubDescription(e.target.value)} rows={3} />
                                        </div>
                                        <div className="grid gap-2">
                                            <label className="text-xs font-medium text-muted-foreground">Series (tùy chọn)</label>
                                            <select
                                                value={epubSeriesMode}
                                                onChange={(e) => {
                                                    const mode = e.target.value as "none" | "existing" | "new"
                                                    setEpubSeriesMode(mode)
                                                    if (mode !== "existing") setEpubSeriesId("")
                                                    if (mode === "new" && !epubSeriesName.trim()) {
                                                        setEpubSeriesName(epubTitle.trim())
                                                    }
                                                    if (mode !== "new") setEpubSeriesName("")
                                                }}
                                                className="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm"
                                            >
                                                <option value="none">Không gán series</option>
                                                <option value="existing">Thêm vào series có sẵn</option>
                                                <option value="new">Tạo series mới</option>
                                            </select>
                                        </div>

                                        {epubSeriesMode === "existing" && (
                                            <div className="grid gap-2">
                                                <label className="text-xs font-medium text-muted-foreground">Chọn series</label>
                                                <select
                                                    value={epubSeriesId}
                                                    onChange={(e) => setEpubSeriesId(e.target.value)}
                                                    className="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm"
                                                >
                                                    <option value="">-- Chọn series --</option>
                                                    {seriesList.map((series) => (
                                                        <option key={series.id} value={series.id}>{series.name}</option>
                                                    ))}
                                                </select>
                                            </div>
                                        )}

                                        {epubSeriesMode === "new" && (
                                            <div className="grid gap-2">
                                                <label className="text-xs font-medium text-muted-foreground">Tên series mới</label>
                                                <Input
                                                    value={epubSeriesName}
                                                    onChange={(e) => setEpubSeriesName(e.target.value)}
                                                    placeholder="Ví dụ: Harry Potter"
                                                />
                                            </div>
                                        )}
                                    </div>

                                    <div>
                                        <p className="mb-2 text-sm font-semibold">Danh sách chương (xem trước tối đa 20 chương đầu)</p>
                                        <div className="max-h-72 space-y-2 overflow-y-auto rounded-md border p-3 custom-scrollbar">
                                            {epubPreviewData.chaptersPreview.length === 0 ? (
                                                <p className="text-sm text-muted-foreground">Không tìm thấy chương hợp lệ trong file EPUB.</p>
                                            ) : (
                                                epubPreviewData.chaptersPreview.map((chapter) => (
                                                    <div key={chapter.number} className="rounded-md border bg-card p-2">
                                                        {(chapter.volumeTitle || chapter.volumeNumber) && (
                                                            <p className="mb-1 text-xs font-semibold text-primary">
                                                                {chapter.volumeTitle || `Quyển ${chapter.volumeNumber}`}
                                                            </p>
                                                        )}
                                                        <p className="text-sm font-medium">
                                                            {chapter.volumeChapterNumber
                                                                ? `Chương ${chapter.volumeChapterNumber}`
                                                                : `Chương ${chapter.number}`}
                                                            : {chapter.title}
                                                        </p>
                                                        {chapter.isPlaceholder && (
                                                            <p className="mt-1 text-[11px] font-semibold text-amber-600">
                                                                Placeholder chương thiếu - cần bổ sung nội dung sau
                                                            </p>
                                                        )}
                                                        <p className="text-xs text-muted-foreground line-clamp-2">
                                                            {chapter.excerpt || "(Không có nội dung xem trước)"}
                                                        </p>
                                                    </div>
                                                ))
                                            )}
                                        </div>
                                    </div>
                                </div>
                            ) : (
                                <div className="flex items-center justify-center py-6">
                                    <Loader2 className="h-6 w-6 animate-spin text-primary" />
                                </div>
                            )}

                            <DialogFooter>
                                <Button variant="outline" onClick={resetEpubPreviewState} disabled={uploadingEpub}>Huỷ</Button>
                                <Button
                                    onClick={handleConfirmEpubUpload}
                                    disabled={
                                        uploadingEpub ||
                                        !epubPreviewData ||
                                        !epubTitle.trim() ||
                                        !epubAuthorName.trim() ||
                                        (epubSeriesMode === "existing" && !epubSeriesId) ||
                                        (epubSeriesMode === "new" && !epubSeriesName.trim()) ||
                                        (epubSplitMode === "regex" && epubRegexPreset === "custom" && !epubCustomRegex.trim())
                                    }
                                >
                                    {uploadingEpub && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                                    Xác nhận tải lên
                                </Button>
                            </DialogFooter>
                        </DialogContent>
                    </Dialog>

                    <Dialog
                        open={openBulkEpubImport}
                        onOpenChange={(open) => {
                            if (!open && !uploadingEpub) {
                                resetEpubPreviewState()
                            } else {
                                setOpenBulkEpubImport(open)
                            }
                        }}
                    >
                        <DialogContent className="sm:max-w-[560px]">
                            <DialogHeader>
                                <DialogTitle>Import nhiều EPUB vào series</DialogTitle>
                                <DialogDescription>
                                    Đã chọn {pendingEpubFiles.length} file EPUB. Mỗi file sẽ tạo thành một truyện và được gán vào cùng series.
                                </DialogDescription>
                            </DialogHeader>

                            <div className="space-y-3">
                                <div className="grid gap-2">
                                    <label className="text-sm font-medium">Series</label>
                                    <select
                                        value={epubSeriesMode}
                                        onChange={(e) => {
                                            const mode = e.target.value as "none" | "existing" | "new"
                                            setEpubSeriesMode(mode)
                                            if (mode !== "existing") setEpubSeriesId("")
                                            if (mode === "new" && !epubSeriesName.trim()) {
                                                const fallbackTitle = pendingEpubFiles[0]?.name?.replace(/\.epub$/i, "") || ""
                                                setEpubSeriesName(fallbackTitle)
                                            }
                                            if (mode !== "new") setEpubSeriesName("")
                                        }}
                                        className="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm"
                                    >
                                        <option value="none">Không gán series</option>
                                        <option value="existing">Thêm vào series có sẵn</option>
                                        <option value="new">Tạo series mới</option>
                                    </select>
                                </div>

                                {epubSeriesMode === "existing" && (
                                    <div className="grid gap-2">
                                        <label className="text-sm font-medium">Chọn series</label>
                                        <select
                                            value={epubSeriesId}
                                            onChange={(e) => setEpubSeriesId(e.target.value)}
                                            className="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm"
                                        >
                                            <option value="">-- Chọn series --</option>
                                            {seriesList.map((series) => (
                                                <option key={series.id} value={series.id}>{series.name}</option>
                                            ))}
                                        </select>
                                    </div>
                                )}

                                {epubSeriesMode === "new" && (
                                    <div className="grid gap-2">
                                        <label className="text-sm font-medium">Tên series mới</label>
                                        <Input
                                            value={epubSeriesName}
                                            onChange={(e) => setEpubSeriesName(e.target.value)}
                                            placeholder="Ví dụ: Chronicles of Narnia"
                                        />
                                    </div>
                                )}
                            </div>

                            <DialogFooter>
                                <Button variant="outline" onClick={resetEpubPreviewState} disabled={uploadingEpub}>Huỷ</Button>
                                <Button
                                    onClick={handleBulkEpubUpload}
                                    disabled={
                                        uploadingEpub ||
                                        pendingEpubFiles.length === 0 ||
                                        (epubSeriesMode === "existing" && !epubSeriesId) ||
                                        (epubSeriesMode === "new" && !epubSeriesName.trim())
                                    }
                                >
                                    {uploadingEpub && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                                    Import hàng loạt
                                </Button>
                            </DialogFooter>
                        </DialogContent>
                    </Dialog>

                    <Dialog open={openAdd} onOpenChange={(val) => {
                        setOpenAdd(val);
                        if (val) {
                                setTitle(""); setOriginalTitle(""); setAuthorName(""); setOriginalAuthorName(""); setDescription(""); setCoverUrl(""); setSeriesMode("none"); setSelectedSeriesId(""); setNewSeriesName(""); setSelectedGenres([]); setNewGenreName("");
                        }
                    }}>
                        <DialogTrigger asChild>
                            <Button className="gap-2">
                                <Plus className="h-4 w-4" /> Thêm truyện
                            </Button>
                        </DialogTrigger>
                        <DialogContent className="sm:max-w-[425px] max-h-[90vh] overflow-y-auto">
                            <DialogHeader>
                                <DialogTitle>Thêm Truyện Mới</DialogTitle>
                                <DialogDescription>
                                    Nhập thông tin cơ bản cho đầu truyện mới của bạn.
                                </DialogDescription>
                            </DialogHeader>
                            <form onSubmit={handleAddSubmit} className="space-y-4 pt-4">
                                <div className="space-y-2">
                                    <label className="text-sm font-medium">Tên truyện</label>
                                    <Input
                                        value={title}
                                        onChange={(e) => {
                                            const nextTitle = e.target.value
                                            const shouldSyncSeriesName = seriesMode === "new" && (!newSeriesName.trim() || newSeriesName === title)
                                            setTitle(nextTitle)
                                            if (shouldSyncSeriesName) {
                                                setNewSeriesName(nextTitle)
                                            }
                                        }}
                                        placeholder="Ví dụ: Phàm Nhân Tu Tiên"
                                        autoFocus
                                    />
                                </div>
                                <div className="space-y-2">
                                    <label className="text-sm font-medium">Tên gốc (Tùy chọn)</label>
                                    <Input value={originalTitle} onChange={(e) => setOriginalTitle(e.target.value)} placeholder="Ví dụ: 凡人修仙传" />
                                </div>
                                <div className="space-y-2">
                                    <label className="text-sm font-medium">Tác giả</label>
                                    <Input value={authorName} onChange={(e) => setAuthorName(e.target.value)} placeholder="Ví dụ: Vong Ngữ" />
                                </div>
                                <div className="space-y-2">
                                    <label className="text-sm font-medium">Tác giả gốc (Tùy chọn)</label>
                                    <Input value={originalAuthorName} onChange={(e) => setOriginalAuthorName(e.target.value)} placeholder="Ví dụ: 忘语" />
                                </div>
                                <div className="space-y-2">
                                    <label className="text-sm font-medium">Series</label>
                                    <select
                                        value={seriesMode}
                                        onChange={(e) => {
                                            const mode = e.target.value as "none" | "existing" | "new"
                                            setSeriesMode(mode)
                                            if (mode !== "existing") setSelectedSeriesId("")
                                            if (mode === "new" && !newSeriesName.trim()) {
                                                setNewSeriesName(title.trim())
                                            }
                                            if (mode !== "new") setNewSeriesName("")
                                        }}
                                        className="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm"
                                    >
                                        <option value="none">Không gán series</option>
                                        <option value="existing">Chọn series có sẵn</option>
                                        <option value="new">Tạo series mới</option>
                                    </select>
                                </div>
                                {seriesMode === "existing" && (
                                    <div className="space-y-2">
                                        <label className="text-sm font-medium">Chọn series</label>
                                        <select
                                            value={selectedSeriesId}
                                            onChange={(e) => setSelectedSeriesId(e.target.value)}
                                            className="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm"
                                        >
                                            <option value="">-- Chọn series --</option>
                                            {seriesList.map((series) => (
                                                <option key={series.id} value={series.id}>{series.name}</option>
                                            ))}
                                        </select>
                                    </div>
                                )}
                                {seriesMode === "new" && (
                                    <div className="space-y-2">
                                        <label className="text-sm font-medium">Tên series mới</label>
                                        <Input
                                            value={newSeriesName}
                                            onChange={(e) => setNewSeriesName(e.target.value)}
                                            placeholder="Ví dụ: Chronicles of Narnia"
                                        />
                                    </div>
                                )}
                                <div className="space-y-2">
                                    <label className="text-sm font-medium">Ảnh bìa (Tùy chọn)</label>
                                    <div className="flex gap-2">
                                        <Input value={coverUrl} onChange={(e) => setCoverUrl(e.target.value)} placeholder="URL ảnh..." className="flex-1" />
                                        <input type="file" id="cover-upload-add" className="hidden" accept="image/*" onChange={handleCoverUpload} />
                                        <Button type="button" variant="secondary" onClick={() => document.getElementById('cover-upload-add')?.click()} disabled={uploadingCover}>
                                            {uploadingCover ? <Loader2 className="w-4 h-4 animate-spin" /> : <ImageIcon className="w-4 h-4" />}
                                        </Button>
                                    </div>
                                    {coverUrl && (
                                        <div className="mt-2 w-24 h-32 rounded border overflow-hidden">
                                            <img src={coverUrl} alt="Preview" className="w-full h-full object-cover" />
                                        </div>
                                    )}
                                </div>
                                <div className="space-y-2">
                                    <label className="text-sm font-medium">Thêm thể loại</label>
                                    <div className="flex gap-2">
                                        <Input
                                            placeholder="Tên thể loại mới..."
                                            value={newGenreName}
                                            onChange={(e) => setNewGenreName(e.target.value)}
                                            className="flex-1"
                                            onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); handleAddGenre(); } }}
                                        />
                                        <Button type="button" variant="secondary" onClick={handleAddGenre} disabled={addingGenre || !newGenreName.trim()}>
                                            {addingGenre ? <Loader2 className="w-4 h-4 animate-spin" /> : "Tạo"}
                                        </Button>
                                    </div>
                                    <div className="flex flex-wrap gap-2 mt-2 max-h-32 overflow-y-auto p-2 border rounded-md custom-scrollbar bg-card">
                                        {genres.map(genre => (
                                            <div
                                                key={genre.id}
                                                className={`flex items-center gap-1.5 px-3 py-1 rounded-full text-xs border transition-colors select-none ${selectedGenres.includes(genre.id) ? 'bg-primary text-primary-foreground border-primary shadow-sm' : 'bg-muted/50 text-muted-foreground'}`}
                                            >
                                                <span className="cursor-pointer" onClick={() => toggleGenre(genre.id)}>{genre.name}</span>
                                                <div
                                                    className="cursor-pointer hover:bg-destructive hover:text-destructive-foreground rounded-full p-0.5 ml-1 inline-flex items-center justify-center transition-colors"
                                                    onClick={(e) => { e.stopPropagation(); handleDeleteGenre(genre.id, genre.name); }}
                                                >
                                                    <Trash2 className="w-3 h-3" />
                                                </div>
                                            </div>
                                        ))}
                                        {genres.length === 0 && <span className="text-xs text-muted-foreground p-1">Chưa có thể loại nào</span>}
                                    </div>
                                </div>
                                <div className="space-y-2">
                                    <label className="text-sm font-medium">Giới thiệu ngắn (Mô tả)</label>
                                    <Textarea value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Tóm tắt về câu chuyện..." rows={4} />
                                </div>
                                <DialogFooter>
                                    <Button type="submit" disabled={submitting}>
                                        {submitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                                        Hoàn thành
                                    </Button>
                                </DialogFooter>
                            </form>
                        </DialogContent>
                    </Dialog>

                    <Dialog open={openEdit} onOpenChange={setOpenEdit}>
                        <DialogContent className="sm:max-w-[425px] max-h-[90vh] overflow-y-auto">
                            <DialogHeader>
                                <DialogTitle>Chỉnh Sửa Truyện</DialogTitle>
                                <DialogDescription>
                                    Cập nhật thông tin cho tác phẩm của bạn.
                                </DialogDescription>
                            </DialogHeader>
                            {loadingEditData ? (
                                <div className="flex-1 flex justify-center items-center py-8">
                                    <Loader2 className="w-8 h-8 animate-spin text-primary" />
                                </div>
                            ) : (
                                <form onSubmit={handleEditSubmit} className="space-y-4 pt-4">
                                    <div className="space-y-2">
                                        <label className="text-sm font-medium">Tên truyện</label>
                                        <Input value={title} onChange={(e) => setTitle(e.target.value)} required />
                                    </div>
                                    <div className="space-y-2">
                                        <label className="text-sm font-medium">Tên gốc (Tùy chọn)</label>
                                        <Input value={originalTitle} onChange={(e) => setOriginalTitle(e.target.value)} />
                                    </div>
                                    <div className="space-y-2">
                                        <label className="text-sm font-medium">Tác giả</label>
                                        <Input value={authorName} onChange={(e) => setAuthorName(e.target.value)} required />
                                    </div>
                                    <div className="space-y-2">
                                        <label className="text-sm font-medium">Tác giả gốc (Tùy chọn)</label>
                                        <Input value={originalAuthorName} onChange={(e) => setOriginalAuthorName(e.target.value)} />
                                    </div>
                                    <div className="space-y-2">
                                        <label className="text-sm font-medium">Series</label>
                                        <Input
                                            value={editingNovel?.series?.name || "Độc lập"}
                                            disabled
                                            className="bg-muted"
                                        />
                                        <p className="text-xs text-muted-foreground">
                                            Không thể chỉnh sửa series tại màn hình sửa truyện.
                                        </p>
                                    </div>
                                    <div className="space-y-2">
                                        <label className="text-sm font-medium">Ảnh bìa (Tùy chọn)</label>
                                        <div className="flex gap-2">
                                            <Input value={coverUrl} onChange={(e) => setCoverUrl(e.target.value)} placeholder="URL ảnh..." className="flex-1" />
                                            <input type="file" id="cover-upload-edit" className="hidden" accept="image/*" onChange={handleCoverUpload} />
                                            <Button type="button" variant="secondary" onClick={() => document.getElementById('cover-upload-edit')?.click()} disabled={uploadingCover}>
                                                {uploadingCover ? <Loader2 className="w-4 h-4 animate-spin" /> : <ImageIcon className="w-4 h-4" />}
                                            </Button>
                                        </div>
                                        {coverUrl && (
                                            <div className="mt-2 w-24 h-32 rounded border overflow-hidden">
                                                <img src={coverUrl} alt="Preview" className="w-full h-full object-cover" />
                                            </div>
                                        )}
                                    </div>
                                    <div className="space-y-2">
                                        <label className="text-sm font-medium">Cập nhật thể loại</label>
                                        <div className="flex gap-2">
                                            <Input
                                                placeholder="Tên thể loại mới..."
                                                value={newGenreName}
                                                onChange={(e) => setNewGenreName(e.target.value)}
                                                className="flex-1"
                                                onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); handleAddGenre(); } }}
                                            />
                                            <Button type="button" variant="secondary" onClick={handleAddGenre} disabled={addingGenre || !newGenreName.trim()}>
                                                {addingGenre ? <Loader2 className="w-4 h-4 animate-spin" /> : "Tạo"}
                                            </Button>
                                        </div>
                                        <div className="flex flex-wrap gap-2 mt-2 max-h-32 overflow-y-auto p-2 border rounded-md custom-scrollbar bg-card">
                                            {genres.map(genre => (
                                                <div
                                                    key={genre.id}
                                                    className={`flex items-center gap-1.5 px-3 py-1 rounded-full text-xs border transition-colors select-none ${selectedGenres.includes(genre.id) ? 'bg-primary text-primary-foreground border-primary shadow-sm' : 'bg-muted/50 text-muted-foreground'}`}
                                                >
                                                    <span className="cursor-pointer" onClick={() => toggleGenre(genre.id)}>{genre.name}</span>
                                                    <div
                                                        className="cursor-pointer hover:bg-destructive hover:text-destructive-foreground rounded-full p-0.5 ml-1 inline-flex items-center justify-center transition-colors"
                                                        onClick={(e) => { e.stopPropagation(); handleDeleteGenre(genre.id, genre.name); }}
                                                    >
                                                        <Trash2 className="w-3 h-3" />
                                                    </div>
                                                </div>
                                            ))}
                                        </div>
                                    </div>
                                    <div className="space-y-2">
                                        <label className="text-sm font-medium">Trạng thái</label>
                                        <select
                                            value={status}
                                            onChange={(e) => setStatus(e.target.value)}
                                            className="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background disabled:cursor-not-allowed disabled:opacity-50"
                                        >
                                            <option value="Đang ra">Đang ra</option>
                                            <option value="Hoàn thành">Hoàn thành</option>
                                            <option value="Tạm dừng">Tạm dừng</option>
                                        </select>
                                    </div>
                                    <div className="space-y-2">
                                        <label className="text-sm font-medium">Giới thiệu ngắn (Mô tả mới)</label>
                                        <Textarea
                                            value={description}
                                            onChange={(e) => setDescription(e.target.value)}
                                            placeholder="Để trống nếu không muốn thay đổi..."
                                            rows={4}
                                        />
                                    </div>
                                    <DialogFooter>
                                        <Button type="button" variant="outline" onClick={() => setOpenEdit(false)}>Hủy</Button>
                                        <Button type="submit" disabled={submitting}>
                                            {submitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                                            Lưu Thay Đổi
                                        </Button>
                                    </DialogFooter>
                                </form>
                            )}
                        </DialogContent>
                    </Dialog>

                    <Dialog
                        open={openDelete}
                        onOpenChange={setOpenDelete}
                    >
                        <DialogContent>
                            <DialogHeader>
                                <DialogTitle className="text-destructive">Cảnh báo xóa vĩnh viễn truyện</DialogTitle>
                                <DialogDescription>
                                    Hành động này sẽ xóa vĩnh viễn truyện khỏi hệ thống và xóa toàn bộ chương liên quan.
                                    Bình luận, bookmark liên quan cũng sẽ mất theo. Không thể hoàn tác.
                                </DialogDescription>
                            </DialogHeader>
                            <DialogFooter className="mt-4">
                                <Button variant="outline" onClick={() => setOpenDelete(false)}>Hủy bỏ</Button>
                                <Button variant="destructive" onClick={handleDeleteSubmit} disabled={submitting}>
                                    {submitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                                    Xóa vĩnh viễn
                                </Button>
                            </DialogFooter>
                        </DialogContent>
                    </Dialog>
                </div>
            </div>

            <div className="rounded-xl border bg-card p-4 shadow-sm space-y-4">
                <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
                    <div className="relative w-full md:max-w-md">
                        <Search className="absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                        <Input
                            value={searchKeyword}
                            onChange={(e) => setSearchKeyword(e.target.value)}
                            placeholder="Tìm theo tên truyện, tác giả, series..."
                            className="pl-8"
                        />
                    </div>

                    <Button type="button" variant="outline" onClick={toggleSelectAllVisible}>
                        {allVisibleSelected ? "Bỏ chọn danh sách đang lọc" : "Chọn danh sách đang lọc"}
                    </Button>
                </div>

                {selectedNovelIds.length > 0 && (
                    <div className="rounded-lg border bg-muted/30 p-3 space-y-3">
                        <p className="text-sm font-medium text-foreground">Đã chọn {selectedNovelIds.length} truyện</p>

                        <div className="flex flex-wrap items-center justify-end gap-2">
                            <Button type="button" variant="outline" onClick={() => setSelectedNovelIds([])} disabled={bulkSubmitting}>
                                Bỏ chọn
                            </Button>
                            <Button type="button" variant="destructive" onClick={handleBulkDelete} disabled={bulkSubmitting}>
                                {bulkSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                                Xóa hàng loạt
                            </Button>
                        </div>
                    </div>
                )}
            </div>

            <div className="rounded-xl border bg-card overflow-hidden shadow-sm">
                {viewMode === 'list' ? (
                    <div className="overflow-x-auto">
                        <table className="w-full text-sm text-left">
                            <thead className="text-xs uppercase bg-muted/50 text-muted-foreground border-b border-border">
                                <tr>
                                    <th scope="col" className="px-4 py-4 font-semibold text-center w-12">
                                        <input
                                            type="checkbox"
                                            checked={allVisibleSelected}
                                            onChange={toggleSelectAllVisible}
                                            className="h-4 w-4 rounded border-input"
                                        />
                                    </th>
                                    <th scope="col" className="px-5 py-4 font-semibold">Tên truyện</th>
                                    <th scope="col" className="px-5 py-4 font-semibold">Tác giả</th>
                                    <th scope="col" className="px-5 py-4 font-semibold">Series</th>
                                    <th scope="col" className="px-5 py-4 font-semibold">Số chương</th>
                                    <th scope="col" className="px-5 py-4 font-semibold">Trạng thái</th>
                                    <th scope="col" className="px-5 py-4 text-right font-semibold">Thao tác</th>
                                </tr>
                            </thead>
                            <tbody>
                                {loading ? (
                                    <tr><td colSpan={7} className="p-8 text-center text-muted-foreground"><Loader2 className="h-6 w-6 animate-spin mx-auto" /></td></tr>
                                ) : filteredNovels.length === 0 ? (
                                    <tr><td colSpan={7} className="p-8 text-center text-muted-foreground">Không có truyện phù hợp với từ khóa tìm kiếm.</td></tr>
                                ) : (
                                    filteredNovels.map((novel) => (
                                        <tr key={novel.id} className="border-b border-border hover:bg-muted/30 transition-colors last:border-0">
                                            <td className="px-4 py-4 text-center">
                                                <input
                                                    type="checkbox"
                                                    checked={selectedNovelIds.includes(novel.id)}
                                                    onChange={() => toggleNovelSelection(novel.id)}
                                                    className="h-4 w-4 rounded border-input"
                                                />
                                            </td>
                                            <td className="px-5 py-4 font-medium text-foreground flex items-center gap-3">
                                                {novel.coverUrl ? (
                                                    <img src={novel.coverUrl} alt={novel.title} className="w-8 h-10 rounded bg-muted object-contain shadow-sm hidden sm:block" />
                                                ) : (
                                                    <div className="w-8 h-10 bg-muted rounded shadow-sm hidden sm:flex items-center justify-center text-muted-foreground"><BookOpen className="w-4 h-4" /></div>
                                                )}
                                                {novel.title}
                                            </td>
                                            <td className="px-5 py-4 text-muted-foreground">{novel.authorName}</td>
                                            <td className="px-5 py-4">
                                                <span className={`inline-flex items-center justify-center rounded-full px-2.5 py-0.5 text-xs font-semibold ${novel.series ? "bg-sky-100 text-sky-700 dark:bg-sky-900/40 dark:text-sky-300" : "bg-muted text-muted-foreground"}`}>
                                                    {novel.series?.name || "Độc lập"}
                                                </span>
                                            </td>
                                            <td className="px-5 py-4">
                                                <span className="inline-flex items-center justify-center rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-semibold text-primary">
                                                    {novel.totalChapters}
                                                </span>
                                            </td>
                                            <td className="px-5 py-4">
                                                <span className={`text-xs font-medium px-2.5 py-1 rounded-md ${getNovelStatusBadgeClass(novel.status)}`}>
                                                    {novel.status}
                                                </span>
                                            </td>
                                            <td className="px-5 py-4 text-right">
                                                <div className="flex items-center justify-end gap-2">
                                                    <Button size="icon" variant="outline" className="h-8 w-8 text-emerald-600 border-emerald-200 hover:bg-emerald-50" asChild>
                                                        <Link href={`/mod/chuong?novelId=${novel.id}`}>
                                                            <FileText className="h-4 w-4" />
                                                        </Link>
                                                    </Button>
                                                    <Button size="icon" variant="outline" className="h-8 w-8 text-blue-600 border-blue-200 hover:bg-blue-50" onClick={() => handleOpenEdit(novel)}>
                                                        <Edit className="h-4 w-4" />
                                                    </Button>
                                                    <Button size="icon" variant="outline" className="h-8 w-8 text-red-600 border-red-200 hover:bg-red-50" onClick={() => {
                                                        setDeletingNovelId(novel.id)
                                                        setOpenDelete(true)
                                                    }}>
                                                        <Trash2 className="h-4 w-4" />
                                                    </Button>
                                                </div>
                                            </td>
                                        </tr>
                                    ))
                                )}
                            </tbody>
                        </table>
                    </div>
                ) : (
                    <div className="p-4 sm:p-6 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 sm:gap-6">
                        {loading ? (
                            <div className="col-span-full py-12 flex justify-center"><Loader2 className="h-6 w-6 animate-spin text-muted-foreground" /></div>
                        ) : filteredNovels.length === 0 ? (
                            <div className="col-span-full py-12 text-center text-muted-foreground">Không có truyện phù hợp với từ khóa tìm kiếm.</div>
                        ) : (
                            filteredNovels.map((novel) => (
                                <div key={novel.id} className="group relative flex flex-col rounded-xl overflow-hidden border shadow-sm transition-all hover:-translate-y-1 hover:shadow-md bg-card">
                                    <div className="aspect-[2/3] w-full bg-muted relative border-b">
                                        <div className="absolute left-2 top-2 z-10">
                                            <input
                                                type="checkbox"
                                                checked={selectedNovelIds.includes(novel.id)}
                                                onChange={() => toggleNovelSelection(novel.id)}
                                                className="h-4 w-4 rounded border-input"
                                            />
                                        </div>
                                        {novel.coverUrl ? (
                                            <img src={novel.coverUrl} alt={novel.title} className="w-full h-full object-contain" />
                                        ) : (
                                            <div className="w-full h-full flex flex-col items-center justify-center text-muted-foreground gap-2">
                                                <BookOpen className="w-8 h-8 opacity-20" />
                                                <span className="text-xs opacity-50 font-medium">No Cover</span>
                                            </div>
                                        )}
                                        <div className="absolute top-2 right-2">
                                            <span className="bg-emerald-100 text-emerald-800 text-[10px] font-bold px-1.5 py-0.5 rounded shadow-sm dark:bg-emerald-900 dark:text-emerald-300">
                                                {novel.totalChapters} Chương
                                            </span>
                                        </div>
                                        <div className="absolute left-2 top-8">
                                            <span className={`text-[10px] font-semibold px-1.5 py-0.5 rounded shadow-sm ${getNovelStatusBadgeClass(novel.status)}`}>
                                                {novel.status}
                                            </span>
                                        </div>
                                    </div>
                                    <div className="p-3 flex flex-col flex-1">
                                        <h3 className="font-semibold text-sm line-clamp-2 leading-tight mb-1" title={novel.title}>{novel.title}</h3>
                                        <p className="text-xs text-muted-foreground mb-3">{novel.authorName}</p>
                                        <p className="text-[11px] mb-3">
                                            <span className={`inline-flex items-center rounded-full px-2 py-0.5 font-semibold ${novel.series ? "bg-sky-100 text-sky-700 dark:bg-sky-900/40 dark:text-sky-300" : "bg-muted text-muted-foreground"}`}>
                                                {novel.series?.name || "Độc lập"}
                                            </span>
                                        </p>
                                        
                                        <div className="mt-auto grid grid-cols-3 gap-1.5">
                                            <Button size="sm" variant="outline" className="w-full h-7 text-xs px-0 text-emerald-600 hover:text-emerald-700 hover:bg-emerald-50" asChild>
                                                <Link href={`/mod/chuong?novelId=${novel.id}`}>
                                                    <FileText className="h-3 w-3 mr-1" /> Chương
                                                </Link>
                                            </Button>
                                            <Button size="sm" variant="outline" className="w-full h-7 text-xs px-0" onClick={() => handleOpenEdit(novel)}>
                                                <Edit className="h-3 w-3 mr-1" /> Sửa
                                            </Button>
                                            <Button size="sm" variant="outline" className="w-full h-7 text-xs px-0 text-red-600 hover:text-red-700 hover:bg-red-50" onClick={() => {
                                                setDeletingNovelId(novel.id)
                                                setOpenDelete(true)
                                            }}>
                                                <Trash2 className="h-3 w-3 mr-1" /> Xóa
                                            </Button>
                                        </div>
                                    </div>
                                </div>
                            ))
                        )}
                    </div>
                )}
            </div>
        </div>
    )
}