"use client";
import { useCallback, useState } from "react";
import ReviewItem from "@/components/shared/articles/review-item";
import { Loader2 } from "lucide-react";
import { cn } from "@/lib/utils/cn";
import { api } from "@/lib/trpc/client";
import { TopicsEnum, ReviewTypeEnum } from "@/config/enums";
import { transformPostsToArticleList } from "@/features/posts/_lib/transformers";

export default function ReviewsList({ type = ReviewTypeEnum.FILM }: { type?: ReviewTypeEnum }) {
    const [limit, setLimit] = useState(7);
    const { data, isFetching } = api.posts.list.useQuery(
        {
            with: ["review"],
            reviewType: type,
            topic: TopicsEnum.REVIEWS,
            limit
        },
        {
            select: transformPostsToArticleList,
            placeholderData: (data) => data
        }
    );
    const { data: total = 0 } = api.posts.count.useQuery({
        reviewType: type,
        topic: TopicsEnum.REVIEWS
    });

    const firstRow = data ? data[0] : null;
    const secondRow = data ? data.slice(1, 3) : [];
    const list = data ? data.slice(3) : [];
    const hasMore = data ? data.length < total : false;

    const onLoadMoreClick = useCallback(() => {
        setLimit((prev) => prev + 4);
    }, []);

    if (!data?.length) {
        return (
            <div>
                <h2 className="mb-2 text-3xl font-bold text-neutral-800">{type}</h2>
                <p className="text-lg font-medium">Artikler ikke fundet</p>
            </div>
        );
    }

    return (
        <div className="row-span-4 grid grid-rows-subgrid">
            <h2 className="mb-2 text-3xl font-bold text-neutral-800">{type}</h2>
            {!!firstRow && (
                <div className="mb-5 border-b pb-5">
                    <ReviewItem data={firstRow} variant="large" />
                </div>
            )}

            {!!secondRow.length && (
                <ul className="mb-5 grid gap-[40px] border-b pb-5 lg:grid-cols-2">
                    {secondRow?.map((item, index) => {
                        return (
                            <li key={index} className="border-style">
                                <ReviewItem data={item} />
                            </li>
                        );
                    })}
                </ul>
            )}
            {!!list.length && (
                <div>
                    <ul className="relative grid gap-x-[40px] gap-y-4 before:absolute before:top-0 before:right-[50%] before:h-full before:w-0 before:bg-gray-200 lg:grid-cols-2 lg:before:w-px">
                        {list.map((item, index) => {
                            const isEven = list.length % 2 === 0;
                            return (
                                <li
                                    key={index}
                                    className={cn(
                                        "border-b last:border-b-0",
                                        isEven && "lg:[&:nth-last-child(-n+2)]:border-b-0"
                                    )}
                                >
                                    <ReviewItem data={item} variant="small" />
                                </li>
                            );
                        })}
                    </ul>
                    {hasMore && (
                        <button
                            className="text-client-red relative mt-4 flex w-fit items-center gap-1 text-sm"
                            disabled={isFetching}
                            onClick={onLoadMoreClick}
                        >
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 512 512"
                                className="size-3 shrink-0"
                                fill="currentColor"
                            >
                                <path d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zm-28.9 143.6l75.5 72.4H120c-13.3 0-24 10.7-24 24v16c0 13.3 10.7 24 24 24h182.6l-75.5 72.4c-9.7 9.3-9.9 24.8-.4 34.3l11 10.9c9.4 9.4 24.6 9.4 33.9 0L404.3 273c9.4-9.4 9.4-24.6 0-33.9L271.6 106.3c-9.4-9.4-24.6-9.4-33.9 0l-11 10.9c-9.5 9.6-9.3 25.1.4 34.4z" />
                            </svg>
                            <span className="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline">
                                {type === "film" ? "flere film" : "mere scene"}
                            </span>
                            {isFetching && <Loader2 className="size-5 animate-spin" />}
                        </button>
                    )}
                </div>
            )}
        </div>
    );
}