"use client"

import { useTranslation } from "@/hooks/useTranslation";
import { GenreModel, PostModel } from "@/models";
import { DefaultGenre } from "@/models/genre";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useMemo, useState } from "react";
import Breadcrumbs from "../components/Breadcrumbs";
import Genres from "./components/Genres";
import AnimatedSection from "@/components/ui/AnimatedSection";
import NovelCard from "./NovelCard";

interface Subtitle {
    title: string;
    href: string;
    order?: number;
}

interface NovelPageState {
    posts: PostModel[];
    genres: GenreModel[];
}

export default function HistoryPage({ posts, genres }: NovelPageState) {
    const router = useRouter();
    const pathname = usePathname();
    const searchParams = useSearchParams();

    const { t } = useTranslation();

    const urlSearch = searchParams.get("search") || "";

    const [selectedGenre, setSelectedGenre] = useState<GenreModel>(DefaultGenre);
    const [showAllGenres, setShowAllGenres] = useState(false);
    const [searchText, setSearchText] = useState(urlSearch);
    const [openSidebar, setOpenSidebar] = useState(false);

    const subtitle: Subtitle[] = [
        {
            title: "Daftar Riwayat Anda",
            href: "/user/history"
        }
    ];

    const changeGenre = (genre: GenreModel) => {
        const params = new URLSearchParams(searchParams.toString());

        if (genre.id === "semua") params.delete("genre");
        else params.set("genre", genre.id);

        router.push(`${pathname}?${params.toString()}`);
        setOpenSidebar(false);
    };

    const filteredGenres = useMemo(() => {
        return genres.filter((g) =>
            g.title.toLowerCase()
        );
    }, [genres, searchText]);

    const displayedGenres = useMemo(() => {
        return showAllGenres ? filteredGenres : filteredGenres.slice(0, 5);
    }, [filteredGenres, showAllGenres]);

    return (
        <div className="flex flex-col gap-6 w-full">
            <Breadcrumbs title="Dashboard" subtitle={subtitle} href="/user" />
            <main className="w-full bg-white p-4 rounded-lg shadow-md flex gap-4">
                <aside className={`fixed md:static top-0 left-0 h-full md:h-auto w-70 bg-white md:bg-transparent p-6 md:p-0 transition-transform duration-300 ${openSidebar ? "translate-x-0" : "-translate-x-full"} md:translate-x-0 flex flex-col gap-6`}>
                    <h1 className="font-bold text-3xl capitalize">{t("select genre")}</h1>

                    <Genres
                        items={displayedGenres}
                        selected={selectedGenre}
                        onSelect={changeGenre}
                    />

                    {filteredGenres.length > 5 && (
                        <button
                            className="text-sm text-primary-500 hover:underline"
                            onClick={() => setShowAllGenres((prev) => !prev)}
                        >
                            {t(showAllGenres ? "show less" : "show more")}
                        </button>
                    )}
                </aside>

                <AnimatedSection className="flex flex-col flex-wrap w-full gap-6">
                    {posts.length > 0 ? posts.map((data, index) => (
                        <NovelCard key={index} novel={data}/>
                    )) : (
                        <div className="w-full h-full flex justify-center items-center">
                            <p>Belum ada koleksi apapun</p>
                        </div>
                    )}
                </AnimatedSection>
            </main>
        </div>
    )
}