import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { useGalleryDoc } from "../hook/useGalleryDoc.ts";
import TagBadge from "@/components/gallery/TagBadge";
import StyledLink from "@/components/gallery/StyledLink";
import { Link } from "wouter";
import { classifyTags } from "../lib/classifyTags.tsx";
import { DescTagItem, DescItem } from "../components/gallery/DescItem.tsx";

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

export function ContentInfoPage({ params }: ContentInfoPageProps) {
    const { data, error, isLoading } = useGalleryDoc(params.id);

    if (isLoading) {
        return <div className="p-4">Loading...</div>
    }

    if (error) {
        return <div className="p-4">Error: {String(error)}</div>
    }

    if (!data) {
        return <div className="p-4">Not found</div>
    }

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

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

    return (
        <div className="p-4 h-dvh overflow-auto">
            <Link to={contentLocation}>
                <div className="m-auto h-[400px] mb-4 flex justify-center items-center flex-none bg-[#272733]
            rounded-xl shadow-lg overflow-hidden">
                    <img
                        className="max-w-full max-h-full object-cover object-center"
                        src={`/api/doc/${data.id}/comic/thumbnail`}
                        alt={data.title} />
                </div>
            </Link>
            <Card className="flex-1">
                <CardHeader>
                    <CardTitle>
                        <StyledLink to={contentLocation}>
                            {data.title}
                        </StyledLink>
                    </CardTitle>
                    <CardDescription>
                        <StyledLink to={`/search?allow_tag=type:${classifiedTags.type[0] ?? ""}`} className="text-sm">
                            {classifiedTags.type[0] ?? "N/A"}
                        </StyledLink>
                    </CardDescription>
                </CardHeader>
                <CardContent>
                    <div className="grid gap-4 grid-cols-[repeat(auto_fill_300px)]">
                        <DescTagItem name="Artist" items={classifiedTags.artist} />
                        <DescTagItem name="Group" items={classifiedTags.group} />
                        <DescTagItem name="Series" items={classifiedTags.series} />
                        <DescTagItem name="Character" items={classifiedTags.character} />
                        <DescItem name="Created At / Modified At">{new Date(data.created_at).toLocaleString()} / {new Date(data.modified_at).toLocaleString()}</DescItem>
                        <DescItem name="Filehash">{data.content_hash}</DescItem>
                        <DescItem name="Path">{`${data.basepath}/${data.filename}`}</DescItem>
                        <DescItem name="Page Count">{data.pagenum}</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>
        </div>
    );
}

export default ContentInfoPage;