import { cn } from "@/lib/utils/cn";
import { Separator } from "@/components/ui/separator";
import { Share2 } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import MostRead from "@/components/shared/most-read";
import CityMainItem from "./city-main-item";
import PostTag from "@/components/shared/post-tag";
import { ArticleList } from "@/features/posts/_lib/transformers";
import { ImageQuality } from "@/config/enums/image-quality";
import { TopicsEnum } from "@/config/enums";

export type CityItemsProps = {
    variant?: "default" | "large" | "small";
    items: ArticleList;
    mostRead?: ArticleList;
};

export default function CityMainBlock({ variant = "default", items, mostRead }: CityItemsProps) {
    const firstItem = items[0];
    const isCityLife = firstItem?.topic === TopicsEnum.CITY_LIFE;
    if (!firstItem) return;

    if (variant === "small") {
        return (
            <section className="mx-auto w-full max-w-[1362px] grow p-3 md:p-[30px] xl:border-x">
                <div className="flex flex-col xl:flex-row">
                    <div className="w-68 shrink-0">
                        <h2 className="mb-4 text-xl leading-none font-bold text-[#CBCBCB] md:text-3xl">
                            byens rum <br /> & byens liv
                        </h2>
                    </div>
                    <div className="w-full">
                        <div className="grid grid-cols-1 gap-x-10 gap-y-5 lg:grid-cols-4">
                            {items.slice(0, 3).map((item, index) => (
                                <div key={index} className="border-style">
                                    <CityMainItem article={item} titleClass={"lg:mb-12"} hideShares hideDesc />
                                </div>
                            ))}
                            <div className="relative border-t pt-5 lg:border-0 lg:pt-0">
                                {items.slice(3).map((item, index) => (
                                    <div className="relative mb-4 pb-4 not-last:border-b" key={index}>
                                        <PostTag data={item.primaryTag} />
                                        <h3 className="text-xl leading-none font-semibold">
                                            <Link
                                                href={item.url}
                                                className="hover:underline"
                                                dangerouslySetInnerHTML={{ __html: item.title }}
                                            />
                                        </h3>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        );
    }

    if (variant === "large") {
        return (
            <section className="mx-auto w-full max-w-[1362px] grow p-3 md:p-[30px] xl:border-x">
                <div className="flex flex-col xl:flex-row">
                    <div className="w-68 shrink-0">
                        <h2 className="mb-4 text-xl leading-none font-bold text-[#CBCBCB] md:text-3xl">
                            byens rum <br /> & byens liv
                        </h2>
                    </div>
                    <div className="w-full">
                        <div className="relative gap-5 sm:flex">
                            {firstItem.preview?.url && (
                                <Image
                                    src={firstItem.preview?.url}
                                    alt={firstItem.preview?.caption || "Article image"}
                                    width={1000}
                                    height={600}
                                    className="w-full shrink-0 object-cover sm:aspect-3/2 sm:w-[60%] lg:w-[66%]"
                                    quality={ImageQuality.MEDIUM}
                                />
                            )}
                            <div>
                                <div className="flex justify-between gap-x-2">
                                    {firstItem.city.name && (
                                        <Link
                                            className="label-text relative z-10 mb-5 text-neutral-500 uppercase"
                                            href={firstItem.city.url}
                                        >
                                            <svg
                                                id="map-pin"
                                                className={cn(
                                                    "fill-client-red mr-0.5 mb-0.5 inline size-3",
                                                    isCityLife && "fill-client-orange"
                                                )}
                                                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">
                                                {firstItem.city.name}
                                            </span>
                                        </Link>
                                    )}

                                    <div className="ml-auto flex h-fit min-w-10 flex-col items-center gap-1.5 bg-neutral-300 px-1 pt-2 pb-1">
                                        <Share2 className="fill-client-red stroke-client-red size-4" />
                                        <span className="font-serif text-sm text-white">{firstItem.stats.shares}</span>
                                    </div>
                                </div>
                                <PostTag data={firstItem.primaryTag} />
                                <h3 className="mb-5 text-[26px] leading-none font-semibold lg:text-4xl">
                                    <Link
                                        href={firstItem.url}
                                        className="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline"
                                        dangerouslySetInnerHTML={{ __html: firstItem.title }}
                                    />
                                </h3>
                                {!!firstItem.description && (
                                    <p className="text-neutral-600">
                                        {firstItem.description.replaceAll("&shy;", "\u00AD")}
                                    </p>
                                )}
                            </div>
                        </div>
                        <Separator className="my-5" />
                        <div className="grid gap-x-10 sm:grid-cols-1 sm:gap-y-5 lg:grid-cols-[4fr_7fr]">
                            {items.slice(1, 3).map((item, index) => (
                                <div key={index} className="border-style">
                                    <CityMainItem article={item} titleClass={!!index && "lg:text-4xl"} />
                                </div>
                            ))}
                        </div>
                        <div className="grid w-full gap-x-10 overflow-hidden sm:grid-cols-1 lg:grid-cols-[auto_228px]">
                            <div>
                                <Separator className="my-5" />
                                <div className="grid gap-x-10 gap-y-5 lg:grid-cols-[auto_228px]">
                                    {items.slice(3).map((item, index) => (
                                        <div key={index} className="border-style">
                                            <CityMainItem article={item} key={index} hideDesc />
                                        </div>
                                    ))}
                                </div>
                            </div>
                            <div>
                                <Separator className="mt-5 mb-3" />
                                <MostRead topics={mostRead} listType="small" articleType="small" />
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        );
    }
    return (
        <section className="mx-auto w-full max-w-[1362px] grow p-3 md:p-[30px] xl:border-x">
            <div className="flex flex-col xl:flex-row">
                <div className="w-68 shrink-0">
                    <h2 className="mb-4 text-xl leading-none font-bold text-[#CBCBCB] md:text-3xl">
                        byens rum <br /> & byens liv
                    </h2>
                </div>
                <div className="w-full">
                    <div className="grid gap-x-10 sm:grid-cols-1 sm:gap-y-5 lg:grid-cols-[7fr_4fr]">
                        {items.slice(0, 2).map((item, index) => (
                            <div key={index} className="border-style">
                                <CityMainItem article={item} titleClass={`lg:mb-6 ${!index && "lg:text-4xl"}`} />
                            </div>
                        ))}
                    </div>
                    <Separator className="my-5 border-b" />
                    <div className="grid gap-x-10 sm:grid-cols-1 sm:gap-y-5 lg:grid-cols-[48%_1fr_1fr]">
                        {items.slice(2).map((item, index) => (
                            <div key={index} className="border-style nth-3:before:hidden">
                                <CityMainItem article={item} hideDesc />
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    );
}