import { cn } from "@/lib/utils/cn";
import Image from "next/image";
import Link from "next/link";
import StarRating from "./star-rating";
import { ArticleList } from "@/features/posts/_lib/transformers";
import { ImageQuality } from "@/config/enums/image-quality";

export type MostReadProps = {
    topics?: ArticleList;
    title?: string;
    themeColor?: "red" | "blue" | "green" | "gray" | "orange";
    listType?: "default" | "small" | "aside";
    articleType?: "default" | "small" | "withImage" | "withRating";
};

export default function MostRead({
    topics,
    title,
    themeColor = "red",
    listType = "default",
    articleType = "default"
}: MostReadProps) {
    const colors = {
        red: {
            title: "text-[var(--color-client-light-red)]",
            border: "border-b-[var(--color-client-light-red)]"
        },
        blue: {
            title: "text-[var(--color-client-blue)]",
            border: "border-b-[var(--color-client-blue)]"
        },
        green: {
            title: "text-[var(--color-client-light-green)]",
            border: "border-b-[var(--color-client-light-green)]"
        },
        gray: {
            title: "text-neutral-300",
            border: "border-b-neutral-200"
        },
        orange: {
            title: "text-orange-300",
            border: "border-b-orange-300"
        }
    };

    if (!topics?.length) {
        return (
            <div className="my-6">
                <p className="text-lg font-medium">Artikler ikke fundet</p>
            </div>
        );
    }

    return (
        <div className="row-span-6 grid w-full grid-rows-subgrid">
            <h5
                className={cn(
                    "mb-4 border-b border-neutral-400 pb-3 text-3xl leading-none font-bold",
                    colors[themeColor].title,
                    listType === "default" && "px-3",
                    listType === "small" && "pb-2 text-[22px]",
                    listType === "aside" && "mt-2 border-t border-b-0 py-3"
                )}
            >
                {title || "mest læst"}
            </h5>
            <ul className="row-span-5 grid grid-rows-subgrid">
                {topics.map((item, index) => (
                    <li
                        key={index}
                        className={cn(
                            "mb-4 flex gap-4 px-3 not-last:border-b not-last:pb-4",
                            colors[themeColor].border,
                            listType === "small" && "mb-2.5 gap-2 px-0 not-last:pb-2.5",
                            listType === "aside" && "mb-5 gap-2 px-0 not-last:pb-5"
                        )}
                    >
                        <Article index={index} data={item} type={articleType} />
                    </li>
                ))}
            </ul>
        </div>
    );
}

const Article = ({
    data,
    index,
    type
}: {
    data: ArticleList[number];
    index: number;
    type?: MostReadProps["articleType"];
}) => {
    if (type === "small") {
        return (
            <article className="relative flex gap-2 leading-none font-semibold text-neutral-900">
                <span className="font-serif">{index + 1}</span>
                <div>
                    <span className="text-base leading-[1.1] font-semibold">
                        <Link
                            href={data.url}
                            className="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline"
                            dangerouslySetInnerHTML={{ __html: data.title }}
                        />
                    </span>
                </div>
            </article>
        );
    }

    if (type === "withImage") {
        return (
            <article className="relative flex gap-3 leading-none font-semibold text-neutral-900">
                {data.preview?.url && (
                    <Image
                        src={data.preview?.url}
                        alt={data.title || "Most read image"}
                        width={200}
                        height={200}
                        className="size-20 object-cover"
                        quality={ImageQuality.LOW}
                    />
                )}
                <div>
                    <span className="leading-[1.1] font-semibold">
                        <Link
                            href={data.url}
                            className="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline"
                            dangerouslySetInnerHTML={{ __html: data.title }}
                        />
                    </span>
                </div>
            </article>
        );
    }

    if (type === "withRating") {
        return (
            <article className="relative flex gap-3 leading-none font-semibold text-neutral-900">
                {data.preview?.url && (
                    <Image
                        src={data.preview?.url}
                        alt={data.title || "Most read image"}
                        width={200}
                        height={200}
                        className="size-20 object-cover"
                        quality={ImageQuality.LOW}
                    />
                )}
                <div>
                    <span className="leading-[1.1] font-semibold">
                        <Link
                            href={data.url}
                            className="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline"
                            dangerouslySetInnerHTML={{ __html: data.title }}
                        />
                    </span>
                    {!!data.rating && (
                        <div className="my-2">
                            <StarRating
                                initialValue={data.rating}
                                SVGclassName="inline size-5"
                                SVGstrokeColor="var(--color-client-red)"
                                fillColor="var(--color-client-red)"
                            />
                        </div>
                    )}
                </div>
            </article>
        );
    }

    return (
        <article className="relative flex gap-4 leading-none font-semibold text-neutral-900">
            <span className="-mt-2 font-serif text-5xl leading-none">{index + 1}</span>
            <div>
                <span className="text-xl leading-[1.1] font-semibold">
                    <Link
                        href={data.url}
                        className="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline"
                        dangerouslySetInnerHTML={{ __html: data.title }}
                    />
                </span>
            </div>
        </article>
    );
};