import MostRead from "@/components/shared/most-read";
import PostSocials from "@/components/shared/post-socials";
import PostTag from "@/components/shared/post-tag";
import PostContentRenderer from "@/components/tip-tap/tiptap-renderer/post-content-renderer";
import { Separator } from "@/components/ui/separator";
import { Camera, Video } from "lucide-react";
import Image from "next/image";
import formatDate from "@/lib/utils/format-date";
import StarRating from "@/components/shared/star-rating";
import { Article, ArticleList } from "@/features/posts/_lib/transformers";
import { ReviewTypeEnum } from "@/config/enums";
import PostAuthor from "@/components/shared/post-author";
import PostNewsletterForm from "@/components/shared/post-newsletter-form";
import ImagePreview from "@/components/shared/image-preview";
import SponsoredBanner from "@/components/shared/sponsored-banner";
import { collectMediaFromContent } from "@/helpers/post.helpers";
import GoogleAnalyticsStat from "@/components/shared/google-analytics/google-analytics-stat";

export default function ReviewGrid({ post, mostRead }: { post: Article; mostRead?: ArticleList }) {
    const contentMedia = collectMediaFromContent(post.content);
    const collectedMedia = [...contentMedia, ...(post?.preview ? [post.preview] : [])];
    return (
        <section className="">
            <div className="top-content">
                <div className="bg-client-light-red">
                    <div className="before:bg-client-red/20 bg-client-rose xl:border-x-client-rose relative mx-auto w-full max-w-[1362px] px-3 py-[30px] before:absolute before:top-0 before:left-75 before:-z-0 before:hidden before:h-full before:w-px md:px-[30px] xl:border-x xl:before:block">
                        <div className="flex items-center justify-between gap-1 xl:pl-75">
                            <div className="flex items-center gap-2">
                                <span className="mb-0.5 flex size-4 items-center justify-center rounded-full bg-white p-1">
                                    <svg viewBox="0 0 512 512" className="fill-client-red inline size-3 stroke-1">
                                        <path d="M494.56,55.774l-38.344-38.328c-23.253-23.262-60.965-23.253-84.226,0l-35.878,35.878l122.563,122.563l35.886-35.878C517.814,116.747,517.814,79.044,494.56,55.774z" />
                                        <polygon points="0,389.435 0,511.998 122.571,511.998 425.246,209.314 302.691,86.751" />
                                    </svg>
                                </span>
                                <span className="leading-none font-light tracking-[2px] text-white uppercase">
                                    {post.isSponsored ? "Sponsoreret" : post.topic.replace("-", " ")}
                                </span>
                            </div>
                            <div className="flex items-center gap-1">
                                {post.review?.type === ReviewTypeEnum.FILM ? (
                                    <Video className="mb-0.5 size-5 fill-white stroke-white" />
                                ) : (
                                    <svg
                                        id="map-pin"
                                        className="mb-1 inline size-4 fill-white"
                                        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="leading-none font-light tracking-[2px] text-white uppercase">
                                    {post.review?.type || ReviewTypeEnum.SCENE}
                                </span>
                            </div>
                        </div>

                        <div className="xl:pl-75">
                            <div className="relative mt-4 mb-6 text-white before:absolute before:top-0 before:-left-[30px] before:hidden before:h-full before:w-px before:bg-white xl:before:block">
                                <h1
                                    className="text-[46px] leading-none font-semibold lg:text-[62px]"
                                    dangerouslySetInnerHTML={{ __html: post.title }}
                                />
                            </div>
                            <div className="flex flex-wrap items-center justify-between gap-x-4">
                                {post.review?.premiereAt && (
                                    <p className="font-serif text-xl text-white">
                                        Premiere {formatDate(post.review.premiereAt)}
                                    </p>
                                )}

                                <p className="font-serif text-xl text-white">
                                    {post.review?.type === ReviewTypeEnum.FILM ? (
                                        <svg
                                            className="mr-1 mb-1 inline-block size-6 shrink-0 fill-white stroke-white"
                                            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>
                                    ) : (
                                        <svg
                                            id="map-pin"
                                            className="mr-1 mb-1 inline size-5 fill-white"
                                            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>
                                    )}
                                    {post.review?.actor}
                                </p>
                            </div>
                            <GoogleAnalyticsStat value={post.stats.gaViews} />
                        </div>

                        <div className="mt-6 text-white xl:pl-75">
                            <StarRating
                                initialValue={post.rating}
                                SVGclassName="inline size-7 lg:size-9"
                                SVGstrokeColor="var(--color-white)"
                                fillColor="var(--color-white)"
                            />
                        </div>
                    </div>
                </div>

                <div className="relative mx-auto flex w-full max-w-[1362px] grow flex-col-reverse justify-end gap-y-2 px-3 pt-[30px] before:absolute before:top-0 before:left-75 before:z-0 before:hidden before:h-full before:w-px before:bg-gray-200 md:px-[30px] lg:flex xl:flex-row xl:border-x xl:before:block">
                    <div className="shrink-0 font-serif text-neutral-500 xl:w-75 xl:pr-15 xl:text-right">
                        {post.preview?.caption && (
                            <p className="leading-[1.3]">
                                <Camera className="stroke-client-red fill-client-red mr-1 inline-block size-3.5 align-middle [&>circle]:stroke-white [&>circle]:stroke-1" />
                                {post.preview?.caption.replaceAll("&shy;", "\u00AD")}
                            </p>
                        )}
                        {post.preview?.author && (
                            <span className="mt-2 inline-block text-xs italic xl:mt-4">{post.preview?.author}</span>
                        )}
                    </div>
                    {post.preview?.url && (
                        <div className="grow xl:max-w-250">
                            <ImagePreview media={collectedMedia} currentImgId={post.preview?.id}>
                                <Image
                                    src={post.preview?.url}
                                    alt={post.preview?.caption || "Artikle image"}
                                    width={1000}
                                    height={600}
                                    className="w-full"
                                />
                            </ImagePreview>
                        </div>
                    )}
                </div>
            </div>

            <div className="main-content relative mx-auto w-full max-w-[1362px] grow px-3 py-[30px] before:absolute before:top-0 before:left-75 before:z-0 before:hidden before:h-full before:w-px before:bg-gray-200 md:px-[30px] lg:flex xl:border-x xl:before:block">
                <div className="relative grow xl:pl-75">
                    <div className="clear-left w-full pb-4 xl:float-left xl:-ml-75 xl:w-75 xl:pr-15">
                        <PostAuthor data={post} />
                        <PostSocials data={post} />
                    </div>

                    <PostContentRenderer post={post} nodeContent={post.content} />
                    <div className="clear-both">
                        <div className="my-10">
                            <SponsoredBanner isSponsored={post.isSponsored} />
                            <PostTag data={post.tags} />
                        </div>
                        <Separator className="mt-12 mb-3" />
                        <div>
                            <PostSocials data={post} type="inline" />
                            <PostNewsletterForm />
                        </div>
                    </div>
                </div>
                <aside className="hidden shrink-0 lg:block lg:w-75 lg:pl-4 xl:w-86 xl:pl-15">
                    <div>
                        <MostRead
                            topics={mostRead}
                            title="mest læst"
                            listType="aside"
                            articleType="withRating"
                            themeColor="gray"
                        />
                    </div>
                </aside>
            </div>
        </section>
    );
}