import MostRead from "@/components/shared/most-read";
import { Camera } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import PostTag from "@/components/shared/post-tag";
import { Separator } from "@/components/ui/separator";
import PostSocials from "@/components/shared/post-socials";
import { Article, ArticleList } from "@/features/posts/_lib/transformers";
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 PostContentRenderer from "@/components/tip-tap/tiptap-renderer/post-content-renderer";
import { collectMediaFromContent } from "@/helpers/post.helpers";
import GoogleAnalyticsStat from "@/components/shared/google-analytics/google-analytics-stat";

export default async function PostGrid({ post, mostRead }: { post: Article; mostRead?: ArticleList }) {
    const contentMedia = collectMediaFromContent(post.content);
    const collectedMedia = [...contentMedia, ...(post?.preview ? [post.preview] : [])];

    return (
        <section>
            <div className="top-content">
                <div className="bg-client-light-sky border-b">
                    <div className="bg-client-dark-sky before:bg-client-light-sky xl:border-x-client-light-sky relative mx-auto w-full max-w-[1362px] px-3 py-7.5 before:absolute before:top-0 before:left-75 before:-z-0 before:hidden before:h-full before:w-px md:px-8 xl:border-x xl:before:block">
                        <div className="flex items-center gap-1 xl:pl-75">
                            <div className="flex grow justify-between">
                                <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-dark-sky inline size-3">
                                            <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>
                                {post.city.name && (
                                    <Link
                                        className="relative font-light tracking-[2px] text-white uppercase"
                                        href={post.city.url}
                                    >
                                        <svg
                                            id="map-pin"
                                            className="mr-1 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="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline">
                                            {post.city.name}
                                        </span>
                                    </Link>
                                )}
                            </div>
                        </div>

                        <div className="xl:pl-75">
                            <div className="relative mt-4 mb-8 text-white before:absolute before:top-0 before:-left-8 before:hidden before:h-full before:w-px before:bg-white md:mb-12 xl:before:block">
                                <h1
                                    className="text-[46px] leading-none font-semibold lg:text-[62px]"
                                    dangerouslySetInnerHTML={{ __html: post.title }}
                                />
                            </div>
                            <p className="text-xl text-white">{post.description.replaceAll("&shy;", "\u00AD")}</p>
                            <GoogleAnalyticsStat value={post.stats.gaViews} />
                        </div>
                    </div>
                </div>

                <div className="relative mx-auto flex w-full max-w-[1362px] grow flex-col-reverse 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-dark-sky fill-client-dark-sky 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="font-lg 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="withImage"
                            themeColor="gray"
                        />
                    </div>
                    {/* <div className='border border-red-500 bg-white lg:sticky lg:top-50 xl:top-60'>
            <p>sidebar sticky widget</p>
            <Image
              src='https://placehold.co/100x100'
              alt='placeholder'
              unoptimized
              width={100}
              height={600}
              className='size-full'
            />
          </div> */}
                </aside>
            </div>
        </section>
    );
}