import PostSocials from "@/components/shared/post-socials";
import { Separator } from "@/components/ui/separator";
import { Camera } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { Article } from "@/features/posts/_lib/transformers";
import ImagePreview from "@/components/shared/image-preview";
import PostAuthor from "@/components/shared/post-author";
import PostNewsletterForm from "@/components/shared/post-newsletter-form";
import SponsoredBanner from "@/components/shared/sponsored-banner";
import { ImageQuality } from "@/config/enums/image-quality";
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 function PostGrid({ post }: { post: Article }) {
    const contentMedia = collectMediaFromContent(post.content);
    const collectedMedia = [
        ...contentMedia,
        ...(post?.preview ? [post.preview] : []),
        ...(post?.postMedia?.flatMap((item) => item.media ?? []) ?? [])
    ];

    return (
        <section className="relative w-full grow bg-neutral-700">
            <div className="relative mx-auto w-full max-w-[1362px] bg-neutral-900 p-3 text-white before:absolute before:top-0 before:left-75 before:z-0 before:hidden before:h-full before:w-px before:bg-neutral-700 md:p-[30px] xl:border-x xl:border-x-neutral-900 xl:before:block">
                <div className="top-content">
                    <div className="flex flex-col gap-y-2 xl:flex-row-reverse xl:items-center">
                        <div className="flex grow justify-between">
                            <div className="flex items-center gap-2 xl:pl-75">
                                <span className="bg-client-orange mb-0.5 flex size-4 items-center justify-center rounded-full p-1">
                                    <svg viewBox="0 0 512 512" className="inline size-3 fill-neutral-900">
                                        <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="fill-client-orange mr-1 mb-1 inline size-4"
                                        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="bg-[linear-gradient(transparent_calc(100%-0.05em),#fff_0.05em)] bg-size-[0_100%] bg-no-repeat uppercase no-underline transition-all duration-300 ease-[ease-in-out] hover:bg-size-[100%_100%]">
                                        {post.city.name}
                                    </span>
                                </Link>
                            )}
                        </div>
                    </div>

                    <div className="xl:pl-75">
                        <div className="elative mt-4 mb-8 md:mb-12">
                            <h1
                                className="text-[46px] leading-none font-semibold lg:text-[62px]"
                                dangerouslySetInnerHTML={{ __html: post.title }}
                            />
                        </div>
                        <p className="text-xl text-neutral-200">{post.description.replaceAll("&shy;", "\u00AD")}</p>
                        <GoogleAnalyticsStat value={post.stats.gaViews} />
                    </div>

                    <div className="my-7 flex flex-col-reverse gap-y-2 xl:flex-row xl:pr-75">
                        <div className="shrink-0 font-serif text-neutral-500 xl:w-75 xl:pr-15 xl:text-right">
                            {post.preview?.caption && (
                                <p className="text-sm leading-[1.3]">
                                    <Camera className="fill-client-orange stroke-client-orange mr-1 inline-block size-3.5 align-middle [&>circle]:stroke-black [&>circle]:stroke-1" />
                                    {post.preview.caption.replaceAll("&shy;", "\u00AD")}
                                </p>
                            )}
                            {post.preview?.author && (
                                <span className="mt-2 text-xs italic xl:mt-5">{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?.alt || "Artikle image"}
                                        width={1000}
                                        height={600}
                                        className="w-full"
                                        quality={ImageQuality.MEDIUM}
                                    />
                                </ImagePreview>
                            </div>
                        )}
                    </div>
                </div>

                <div className="main-content relative lg:flex">
                    <div className="grow xl:pr-75 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} />

                        {post.postMedia?.map((item, index) => (
                            <div className="relative xl:-mr-75" key={index}>
                                <div className="my-4 flex flex-col gap-y-2 lg:flex-row">
                                    {item.mediaId && (
                                        <div className="grow lg:max-w-200">
                                            <ImagePreview media={collectedMedia} currentImgId={item.media.id}>
                                                <Image
                                                    src={item.media.url}
                                                    alt={item.media?.alt || "Artikle image"}
                                                    width={1000}
                                                    height={600}
                                                    className="w-full"
                                                />
                                            </ImagePreview>
                                        </div>
                                    )}
                                    <div className="shrink-0 font-serif text-neutral-500 lg:w-75 lg:pl-15">
                                        <Separator className="mb-2" />
                                        {item.media?.caption && (
                                            <p className="text-sm leading-[1.3]">
                                                <Camera className="fill-client-orange stroke-client-orange mr-1 inline-block size-3.5 align-middle [&>circle]:stroke-black [&>circle]:stroke-1" />
                                                {item.media.caption}
                                            </p>
                                        )}
                                        {item.media?.author && (
                                            <span className="mt-2 text-xs italic lg:mt-5">{item.media.author}</span>
                                        )}
                                        <PostSocials data={post} type="links" />
                                    </div>
                                </div>
                            </div>
                        ))}
                        <div className="w-full xl:absolute xl:left-0 xl:w-60 xl:-translate-y-full">
                            <div className="border-t-client-orange my-4 border-t bg-orange-200/90 p-4">
                                <h6 className="mb-3 text-xl leading-none font-bold text-neutral-700">
                                    Har du taget gode billeder af København?
                                </h6>
                                <p className="mb-3 text-lg leading-none font-bold">
                                    Har du en billedserie fra et sted i byen eller med et bestemt tema, som du gerne vil
                                    vise?
                                </p>
                                <p className="mb-6 text-lg leading-none font-bold">
                                    Send os et link til en Dropbox eller lignende, så kan det være, vi viser dine
                                    billeder her.
                                </p>
                                <div className="flex justify-end">
                                    <Link
                                        href="mailto:foto@magasinetkbh.dk"
                                        rel="noreferrer"
                                        className="relative flex items-center gap-2 tracking-wide"
                                    >
                                        <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">
                                            send mail
                                        </span>
                                    </Link>
                                </div>
                            </div>
                        </div>
                        <div>
                            <Separator className="mt-12 mb-3" />
                            <div>
                                <SponsoredBanner isSponsored={post.isSponsored} />
                                <PostSocials data={post} type="inline" />
                                <PostNewsletterForm />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}