"use client";
import StarRating from "@/components/shared/star-rating";
import { ReviewTypeEnum } from "@/config/enums";
import { ImageQuality } from "@/config/enums/image-quality";
import { ArticleList } from "@/features/posts/_lib/transformers";
import formatDate from "@/lib/utils/format-date";
import Image from "next/image";
import Link from "next/link";

export default function ReviewItem({
    data,
    variant = "default"
}: {
    data: ArticleList[number];
    variant?: "default" | "large" | "small" | "medium-inline";
}) {
    if (variant === "large") {
        return (
            <article className="relative">
                {data.preview?.url && (
                    <Image
                        src={data.preview?.url}
                        alt={data.title || "Review Image"}
                        width={1000}
                        height={600}
                        className="size-full object-cover sm:aspect-3/2"
                        quality={ImageQuality.MEDIUM}
                    />
                )}
                <div>
                    <span className="label-text my-2 block uppercase">{formatDate(data.createdAt)}</span>
                    <h5 className="my-2 text-[26px] leading-[1.2] font-bold lg:text-4xl">
                        <Link
                            href={data.url}
                            className="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline"
                        >
                            {data.title}
                        </Link>
                    </h5>
                    {data.review && (
                        <div className="flex gap-1">
                            {renderIcon(data.review.type)}
                            <span className="font-serif text-lg leading-[1.4] text-neutral-500">
                                {data.review.actor}
                            </span>
                        </div>
                    )}
                    {!!data.rating && (
                        <div className="mt-4 mb-8">
                            <StarRating
                                initialValue={data.rating}
                                SVGclassName="inline size-7 lg:size-9"
                                SVGstrokeColor="var(--color-client-red)"
                                fillColor="var(--color-client-red)"
                            />
                        </div>
                    )}
                </div>
            </article>
        );
    }

    if (variant === "medium-inline") {
        return (
            <article className="relative lg:flex lg:gap-5">
                {data.preview?.url && (
                    <Image
                        src={data.preview?.url}
                        alt={data.title || "Review Image"}
                        width={1000}
                        height={600}
                        className="mb-2 size-full object-cover sm:aspect-3/2 lg:mb-0 lg:max-w-[calc(50%-20px)]"
                        quality={ImageQuality.MEDIUM}
                    />
                )}
                <div>
                    {!!data.rating && (
                        <div className="mb-4">
                            <StarRating
                                initialValue={data.rating}
                                SVGclassName="inline size-7"
                                SVGstrokeColor="var(--color-client-red)"
                                fillColor="var(--color-client-red)"
                            />
                        </div>
                    )}

                    <h5 className="my-2 text-[26px] leading-[1.2] 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>
                    {data.review && (
                        <div className="flex gap-1">
                            {renderIcon(data.review.type)}
                            <span className="font-serif text-lg leading-[1.4] text-neutral-500">
                                {data.review.actor}
                            </span>
                        </div>
                    )}
                </div>
            </article>
        );
    }

    if (variant === "small") {
        return (
            <article className="relative">
                <div>
                    <h5 className="mb-2 text-[26px] leading-[1.2] 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>
                    {data.review && (
                        <div className="flex gap-1">
                            {renderIcon(data.review.type)}
                            <span className="font-serif text-lg leading-[1.4] text-neutral-500">
                                {data.review.actor}
                            </span>
                        </div>
                    )}
                    {!!data.rating && (
                        <div className="mt-3 mb-8">
                            <StarRating
                                initialValue={data.rating}
                                SVGclassName="inline size-7"
                                SVGstrokeColor="var(--color-client-red)"
                                fillColor="var(--color-client-red)"
                            />
                        </div>
                    )}
                </div>
            </article>
        );
    }

    return (
        <article className="relative">
            {data.preview?.url && (
                <Image
                    src={data.preview?.url}
                    alt={data.title || "Review Image"}
                    width={1000}
                    height={600}
                    className="size-full object-cover sm:aspect-3/2"
                />
            )}
            <div>
                <h5 className="my-2 text-[26px] leading-[1.2] 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>
                {data.review && (
                    <div className="flex gap-1">
                        {renderIcon(data.review.type)}
                        <span className="font-serif text-lg leading-[1.4] text-neutral-500">{data.review.actor}</span>
                    </div>
                )}
                {!!data.rating && (
                    <div className="mt-4 mb-8">
                        <StarRating
                            initialValue={data.rating}
                            SVGclassName="inline size-7"
                            SVGstrokeColor="var(--color-client-red)"
                            fillColor="var(--color-client-red)"
                        />
                    </div>
                )}
            </div>
        </article>
    );
}

const renderIcon = (type: ReviewTypeEnum) => {
    if (type === "film") {
        return (
            <svg
                className="size-6 shrink-0 fill-neutral-800 stroke-neutral-800"
                xmlns="http://www.w3.org/2000/svg"
                width="800px"
                height="800px"
                viewBox="0 0 48 48"
            >
                <path d="M19.0977 18.4573L16.4082 26.4079C16.0985 27.3234 15.1052 27.8145 14.1897 27.5048C13.2742 27.1951 12.7831 26.2019 13.0928 25.2863L16.2785 15.8688C16.6564 14.7518 17.7043 14 18.8835 14H20.4019H22.9713H28.945C30.1081 14 31.1454 14.7317 31.5356 15.8274L34.8961 25.264C35.2203 26.1744 34.7451 27.1754 33.8346 27.4996C32.9241 27.8239 31.9231 27.3486 31.5989 26.4381L28.8994 18.8578V20.8066V30.6052V42.3515C28.8994 43.2578 28.1436 43.9993 27.2197 43.9993C26.2959 43.9993 25.5401 43.2578 25.5401 42.3515V30.6052H22.4571V42.3515C22.4571 43.2578 21.7012 43.9993 20.7774 43.9993C19.8536 43.9993 19.0977 43.2578 19.0977 42.3515V30.6052V20.8066V18.4573Z" />
                <path d="M28.0002 8.00181C28.0002 10.2119 26.2093 12.0036 24.0001 12.0036C21.7909 12.0036 20 10.2119 20 8.00181C20 5.79167 21.7909 4 24.0001 4C26.2093 4 28.0002 5.79167 28.0002 8.00181Z" />
            </svg>
        );
    }
    return (
        <svg
            id="map-pin"
            className="inline size-5 shrink-0 fill-neutral-800"
            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>
    );
};