import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { useDeleteDoc, useGalleryDoc, useGalleryDocSimilar, useRehashDoc, useRescanDoc } from "../hook/useGalleryDoc.ts";
import TagBadge from "@/components/gallery/TagBadge";
import StyledLink from "@/components/gallery/StyledLink";
import { Link, useLocation } from "wouter";
import { classifyTags } from "../lib/classifyTags.tsx";
import { DescTagItem, DescItem } from "../components/gallery/DescItem.tsx";
import { Button } from "@/components/ui/button.tsx";
import { GalleryCard } from "@/components/gallery/GalleryCard.tsx";
import { useEffect } from "react";
import { useLogin } from "@/state/user.ts";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu.tsx";
import { EllipsisVerticalIcon, FileIcon } from "lucide-react";
import {
    RefreshCw, ScanSearch, Trash2,
    Paintbrush
    , Users, BookOpen, User, Clock, FileCheck, FileText, Layers, Tag, Loader2, AlertCircle, FileQuestion
} from "lucide-react";

export interface ContentInfoPageProps {
    params: {
        id: string;
    };
}

function Wrapper({ children }: { children: React.ReactNode }) {
    const [pathname] = useLocation();
    useEffect(() => {
        document.scrollingElement?.scrollTo({
            top: 0,
        });
    }, [pathname]);

    return <div className="p-4">
        {children}
    </div>;
}

export function ContentInfoPage({ params }: ContentInfoPageProps) {
    const { data, error, isLoading } = useGalleryDoc(params.id);
    const rehashDoc = useRehashDoc();
    const rescanDoc = useRescanDoc();
    const deleteDoc = useDeleteDoc();
    const user = useLogin();
    const username = user?.username;
    const isAdmin = username === "admin";

    if (isLoading) {
        return <div className="p-8 flex flex-col items-center justify-center h-full">
            <Loader2 className="w-16 h-16 animate-spin text-primary mb-4" />
            <span className="text-xl font-medium text-muted-foreground">
                콘텐츠 정보 로드 중...
            </span>
        </div>
    }

    if (error) {
        return <div className="p-8 flex flex-col items-center justify-center h-full text-destructive">
            <AlertCircle className="w-16 h-16 mb-4" />
            <div className="text-xl font-medium mb-2">오류가 발생했습니다</div>
            <div className="text-destructive/80 bg-destructive/10 p-3 rounded-md">{String(error)}</div>
        </div>
    }

    if (!data) {
        return <div className="p-8 flex flex-col items-center justify-center h-full text-muted-foreground">
            <FileQuestion className="w-16 h-16 mb-4" />
            <div className="text-xl font-medium">콘텐츠를 찾을 수 없습니다</div>
            <Button variant="outline" className="mt-4">
                <Link href="/search">검색 페이지로 이동</Link>
            </Button>
        </div>
    }

    const tags = data?.tags ?? [];
    const classifiedTags = classifyTags(tags);

    const contentLocation = `/doc/${params.id}/reader`;

    return (
        <Wrapper>
            <Link to={contentLocation}>
                <div className="m-auto h-[400px] mb-6 flex justify-center items-center flex-none bg-gradient-to-b from-[#1d1d25] to-[#272733]
            rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 group">
                    <img
                        className="max-w-full max-h-full object-cover object-center group-hover:scale-[1.02] transition-transform duration-300"
                        src={`/api/doc/${data.id}/comic/thumbnail`}
                        alt={data.title} />
                </div>
            </Link>
            <Card className="flex-1 relative">
                <div className="flex justify-between items-start p-6">
                    <CardHeader className="p-0">
                        <CardTitle className="font-bold bg-clip-text">
                            <StyledLink to={contentLocation} className="hover:no-underline">
                                {data.title}
                            </StyledLink>
                        </CardTitle>
                        <CardDescription className="mt-1">
                            <StyledLink to={`/search?allow_tag=type:${classifiedTags.type[0] ?? ""}`}
                                className="text-sm px-2 py-0.5 rounded-md inline-flex items-center gap-1">
                                <Tag className="w-3.5 h-3.5" />
                                {classifiedTags.type[0] ?? "N/A"}
                            </StyledLink>
                        </CardDescription>
                    </CardHeader>
                    {isAdmin &&
                        <div className="z-10">
                            <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                    <Button variant="ghost" className="hover:bg-secondary/50 flex items-center gap-1.5 rounded-full px-3">
                                        <EllipsisVerticalIcon className="w-4 h-4" />
                                        <span className="font-medium">Actions</span>
                                    </Button>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent align="end" className="animate-in fade-in-50 zoom-in-95 duration-100">
                                    <DropdownMenuItem
                                        onClick={async () => {
                                            await rehashDoc(params.id);
                                        }}
                                        className="flex items-center gap-2 cursor-pointer"
                                    >
                                        <RefreshCw className="w-4 h-4" />
                                        Rehash
                                    </DropdownMenuItem>
                                    <DropdownMenuItem
                                        onClick={async () => {
                                            if (!window.confirm("Are you sure?")) {
                                                return;
                                            }
                                            await rescanDoc(params.id);
                                        }}
                                        className="flex items-center gap-2 cursor-pointer"
                                    >
                                        <ScanSearch className="w-4 h-4" />
                                        Rescan
                                    </DropdownMenuItem>
                                    <DropdownMenuItem
                                        onClick={async () => {
                                            if (!window.confirm("Are you sure?")) {
                                                return;
                                            }
                                            await deleteDoc(params.id);
                                        }}
                                        className="flex items-center gap-2 cursor-pointer text-destructive hover:text-destructive"
                                    >
                                        <Trash2 className="w-4 h-4" />
                                        Delete
                                    </DropdownMenuItem>
                                </DropdownMenuContent>
                            </DropdownMenu>
                        </div>
                    }
                </div>
                <CardContent>
                    <div className="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
                        <DescTagItem name="Artist" items={classifiedTags.artist}
                            icon={<Paintbrush className="w-4 h-4" />} />

                        <DescTagItem name="Group" items={classifiedTags.group}
                            icon={<Users className="w-4 h-4" />} />

                        <DescTagItem name="Series" items={classifiedTags.series}
                            icon={<BookOpen className="w-4 h-4" />} />

                        <DescTagItem name="Character" items={classifiedTags.character}
                            icon={<User className="w-4 h-4" />} />

                        <DescItem name="Created At / Modified At"
                            icon={<Clock className="w-4 h-4" />}
                            className="md:col-span-2">
                            <div className="flex flex-wrap gap-x-2">
                                <span className="bg-muted/50 px-1.5 py-0.5 rounded text-sm">{new Date(data.created_at).toLocaleString()}</span> /
                                <span className="bg-muted/50 px-1.5 py-0.5 rounded text-sm">{new Date(data.modified_at).toLocaleString()}</span>
                            </div>
                        </DescItem>

                        <DescItem name="Filehash"
                            icon={<FileCheck className="w-4 h-4" />}>
                            <span className="font-mono text-sm bg-muted/50 px-1.5 py-0.5 rounded overflow-x-auto block whitespace-nowrap max-w-full">{data.content_hash}</span>
                        </DescItem>

                        <DescItem name="Page Count"
                            icon={<Layers className="w-4 h-4" />}>
                            <span className="text-sm bg-primary/20 px-2 py-0.5 rounded-full font-medium">{data.pagenum} 페이지</span>
                        </DescItem>

                        <DescItem name="Path"
                            className="md:col-span-2"
                            icon={<FileText className="w-4 h-4" />}>
                            <span className="font-mono text-sm bg-muted/50 px-1.5 py-0.5 rounded overflow-x-auto text-wrap block whitespace-nowrap max-w-full">
                                {`${data.basepath}/${data.filename}`}
                                <ExplorerFindLink path={`${data.basepath}`} />
                            </span>
                        </DescItem>

                    </div>
                    <div className="grid mt-4">
                        <span className="text-muted-foreground text-sm">Tags</span>
                        <ul className="mt-2 flex flex-wrap gap-1">
                            {classifiedTags.rest.map((tag) => <TagBadge key={tag} tagname={tag} />)}
                        </ul>
                    </div>
                </CardContent>
            </Card>
            <SimilarContentCard id={params.id} />
        </Wrapper>
    );
}

function ExplorerFindLink({ path }: { path: string }) {
    // remove F:\ from the path
    if (path.startsWith("/data/sss/f/")) {
        path = path.slice("/data/sss/f/".length);
    }
    return (
        <a
            title="Open in explorer find"
            href={`ionian-find://${path}`}
            className="text-muted-foreground hover:text-primary transition-colors">
            <FileIcon className="inline-block w-4 h-4 ml-2" />
        </a>
    );
}

function SimilarContentCard({
    id,
}: {
    id: string;
}) {
    const { data, error, isLoading } = useGalleryDocSimilar(id);

    if (isLoading) {
        return <div className="p-4 mt-6 text-center animate-pulse bg-muted/20 rounded-lg">
            <Loader2 className="w-6 h-6 mx-auto mb-2 animate-spin opacity-50" />
            <span className="text-muted-foreground">유사 콘텐츠 불러오는 중...</span>
        </div>
    }

    if (error) {
        return <div className="p-4 mt-6 text-destructive/70 bg-destructive/10 border border-destructive/20 rounded-lg">
            <div className="flex items-center gap-2">
                <AlertCircle className="w-4 h-4" />
                오류: {String(error)}
            </div>
        </div>
    }

    if (!data || data.length === 0) {
        return <div className="p-6 mt-6 text-center bg-muted/10 rounded-lg border border-border/50">
            <FileQuestion className="w-9 h-9 mx-auto mb-3 opacity-30" />
            <span className="text-muted-foreground">유사한 콘텐츠가 없습니다.</span>
        </div>
    }

    return (
        <div className="space-y-4 mt-4 mx-2">
            <div className="flex items-center mb-4 gap-2">
                <h2 className="text-2xl font-bold bg-gradient-to-r from-primary to-primary/70 bg-clip-text text-transparent">유사한 콘텐츠</h2>
                <div className="h-[2px] flex-1 bg-gradient-to-r from-border to-transparent"></div>
                <span className="text-sm text-muted-foreground bg-secondary/20 px-2 py-0.5 rounded-full">
                    {data.length}개 항목
                </span>
            </div>
            <div className="grid gap-4 grid-cols-[repeat(auto_fill_300px)]">
                {data.map((doc) => (
                    <GalleryCard key={doc.id} doc={doc} />
                ))}
            </div>
        </div>
    )
}

export default ContentInfoPage;