import Image from "next/image";
import Link from "next/link";
import { Circle } from "lucide-react";
import { ArticleList } from "@/features/posts/_lib/transformers";
import PostTag from "../post-tag";
import { TopicsEnum } from "@/config/enums";
import { cn } from "@/lib/utils";

export default function RelatedArticle({
    title,
    data,
    link,
    type = "default"
}: {
    title: string;
    data: ArticleList;
    link?: string;
    type?: "default" | "large" | "large-inline";
}) {
    if (!data?.length) return null;

    if (type === "large") {
        return (
            <section className="mx-auto w-full max-w-[1362px] grow px-3 md:px-8 xl:border-x">
                <div className="mt-4 flex flex-col border-t pt-4 xl:flex-row">
                    <div className="shrink-0 xl:w-68">
                        <h2 className="pr-8 text-xl leading-none font-bold text-[#CBCBCB] md:text-3xl">{title}</h2>
                    </div>
                    <div className="w-full">
                        <div className="mt-5 grid gap-x-10 gap-y-5 sm:grid-cols-2 lg:grid-cols-4 xl:mt-0">
                            {data.slice(0, 3).map((item, index) => (
                                <div
                                    key={index}
                                    className="relative before:absolute before:bg-gray-200 last:before:hidden sm:before:-right-5 sm:before:bottom-0 sm:before:h-full sm:before:w-px sm:first:col-span-2 sm:max-lg:first:before:hidden"
                                >
                                    <Article data={item} />
                                </div>
                            ))}
                        </div>
                        {!!link && (
                            <Link
                                className="text-client-red relative mt-3 flex w-fit items-center gap-2 text-sm tracking-wide"
                                href={link}
                            >
                                <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">
                                    til forsiden
                                </span>
                            </Link>
                        )}
                    </div>
                </div>
            </section>
        );
    }

    if (type === "large-inline") {
        return (
            <section className="mx-auto w-full max-w-[1362px] grow px-3 md:px-8 xl:border-x">
                <div className="mt-4 flex flex-col border-t pt-4 xl:flex-row">
                    <div className="shrink-0 xl:w-68">
                        <h2 className="pr-8 text-xl leading-none font-bold text-[#CBCBCB] md:text-3xl">{title}</h2>
                    </div>
                    <div className="w-full">
                        <div className="mt-5 grid gap-x-10 gap-y-5 lg:grid-cols-3 xl:mt-0">
                            {data.map((item, index) => (
                                <div
                                    key={index}
                                    className="relative before:absolute before:bg-gray-200 last:before:hidden sm:before:-right-5 sm:before:bottom-0 sm:before:h-full lg:before:w-px"
                                >
                                    <Article data={item} isInline />
                                </div>
                            ))}
                        </div>
                        {!!link && (
                            <Link
                                className="text-client-red relative mt-3 flex w-fit items-center gap-2 text-sm tracking-wide"
                                href={link}
                            >
                                <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">
                                    til forsiden
                                </span>
                            </Link>
                        )}
                    </div>
                </div>
            </section>
        );
    }

    return (
        <section className="mx-auto w-full max-w-[1362px] grow px-3 md:px-8 xl:border-x">
            <div className="mt-4 flex flex-col border-t pt-4 xl:flex-row">
                <div className="shrink-0 xl:w-68">
                    <h2 className="pr-8 text-xl leading-none font-bold text-[#CBCBCB] md:text-3xl">{title}</h2>
                </div>
                <div className="w-full">
                    <div className="mt-5 grid gap-x-10 gap-y-5 sm:grid-cols-2 lg:grid-cols-4 xl:mt-0">
                        {data.slice(0, 3).map((item, index) => (
                            <div
                                key={index}
                                className="relative before:absolute before:bg-gray-200 last:before:hidden sm:before:-right-5 sm:before:bottom-0 sm:before:h-full sm:before:w-px sm:max-lg:nth-[2n]:before:hidden lg:nth-[4n]:before:hidden"
                            >
                                <Article data={item} />
                            </div>
                        ))}
                        {!!data.slice(3).length && (
                            <div className="relative border-t pt-5 lg:border-0 lg:pt-0">
                                {data.slice(3).map((item, index) => {
                                    return (
                                        <div className="relative mb-4 pb-4 not-last:border-b" key={index}>
                                            <PostTag data={item.primaryTag} />
                                            <h5 className="leading-none font-semibold">
                                                <Link
                                                    href={item.url}
                                                    className="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline"
                                                >
                                                    {item.title}
                                                </Link>
                                            </h5>
                                        </div>
                                    );
                                })}
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </section>
    );
}

const Article = ({ data, isInline = false }: { data: ArticleList[number]; isInline?: boolean }) => {
    const isSponsored = data.isSponsored;
    const isPhoto = data.topic === TopicsEnum.PHOTO;
    const isCityLife = data.topic === TopicsEnum.CITY_LIFE;
    const isOpinion = data.topic === TopicsEnum.OPINION;
    const isProject = data.topic === TopicsEnum.PROJECT;
    const isVision = data.topic === TopicsEnum.VISIONS;
    const isKBHPlus = data.topic === TopicsEnum.KBHPLUS;

    return (
        <article
            className={cn("relative size-full text-neutral-800", isInline && "sm:max-lg:inline-flex sm:max-lg:gap-x-5")}
        >
            {data.preview?.url && (
                <Image
                    src={data.preview?.url}
                    alt={data.preview?.caption || "Article image"}
                    width={1000}
                    height={600}
                    className={cn("w-full object-cover sm:aspect-3/2", isInline && "sm:max-lg:max-w-[calc(50%-20px)]")}
                />
            )}
            <div className="grow pb-8">
                <div className="flex justify-between">
                    <div className="mt-2 mb-4 flex flex-col">
                        <span className="label-text text-neutral-500 uppercase">
                            <Circle
                                className={cn(
                                    "stroke-client-red fill-client-red mr-1 mb-0.5 inline size-3",
                                    (isPhoto || isCityLife) && "fill-client-orange stroke-client-orange",
                                    isOpinion && "stroke-client-green fill-client-green",
                                    isProject && "fill-black stroke-black",
                                    isVision && "fill-client-blue stroke-client-blue"
                                )}
                            />
                            {isSponsored ? "sponsoreret" : isKBHPlus ? "KBH+" : data.topic?.replace("-", " ")}
                        </span>
                        {data.city.name && (
                            <Link className="label-text relative z-10 text-neutral-500 uppercase" href={data.city.url}>
                                <svg
                                    id="map-pin"
                                    className={cn(
                                        "fill-client-red mr-1 mb-0.5 inline size-3",
                                        (isPhoto || isCityLife) && "fill-client-orange",
                                        isOpinion && "fill-client-green",
                                        isProject && "fill-black",
                                        isVision && "fill-client-blue"
                                    )}
                                    width="64.615px"
                                    height="96.922px"
                                    viewBox="0 0 64.615 96.922"
                                >
                                    <path
                                        d="M62.532,43.603L39.564,92.442c-1.325,2.776-4.228,4.48-7.257,4.48s-5.931-1.704-7.193-4.48L2.083,43.603
		C0.442,40.132,0,36.156,0,32.307C0,14.45,14.45,0,32.307,0c17.857,0,32.308,14.45,32.308,32.307
		C64.615,36.156,64.173,40.132,62.532,43.603z M32.307,16.154c-8.896,0-16.153,7.257-16.153,16.153
		c0,8.897,7.257,16.154,16.153,16.154c8.897,0,16.154-7.257,16.154-16.154C48.461,23.411,41.204,16.154,32.307,16.154z"
                                    />
                                </svg>
                                <span className="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline">
                                    {data.city.name}
                                </span>
                            </Link>
                        )}
                    </div>
                </div>
                <PostTag data={data.primaryTag} />
                <h5 className="my-2 text-[26px] 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 }}
                    />
                </h5>
            </div>
        </article>
    );
};