import { Separator } from "@/components/ui/separator";
import { Camera, Building } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { Routes } from "@/config/routes";
import { DistrictsEnum, DistrictsHelpers, ProjectTypeHelpers } from "@/config/enums";
import MapWrapper from "@/components/shared/map/map-wrapper";
import RelatedPosts from "./related-posts";
import PostSocials from "@/components/shared/post-socials";
import { Article } from "@/features/posts/_lib/transformers";
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";
import PostContentRenderer from "@/components/tip-tap/tiptap-renderer/post-content-renderer";

type Project = NonNullable<Article["project"]>;

export default function ProjectGrid({ post }: { post: Article }) {
    const project: Partial<Project> = post.project || {};
    const projectStartDate = new Date(project.buildStartAt || "")?.getFullYear();
    const projectEndDate = new Date(project.buildEndAt || "")?.getFullYear();
    const contentMedia = collectMediaFromContent(post.content);
    const collectedMedia = [...contentMedia, ...(post?.preview ? [post.preview] : [])];
    return (
        <section>
            <div className="top-content">
                <div className="bg-[#C2C2C2]">
                    <div className="relative mx-auto w-full max-w-[1362px] bg-[#707070] 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-neutral-400 md:px-[30px] xl:border-x xl:border-x-neutral-500 xl:before:block">
                        <div className="flex items-center gap-1 xl:pl-75">
                            <span className="mb-0.5 flex size-4 items-center justify-center rounded-full bg-white p-[3px]">
                                <Building className="inline size-3 stroke-neutral-700 [&_path]:fill-white [&_path]:stroke-white [&>rect]:fill-neutral-700" />
                            </span>
                            <span className="leading-none font-light tracking-[2px] text-white uppercase">
                                {post.isSponsored ? "Sponsoreret" : "Projekt"}
                            </span>
                        </div>

                        <div className="xl:pl-75">
                            <div className="relative mt-4 mb-8 text-white before:absolute before:top-0 before:-left-[30px] 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>
                            <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-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 || post.title}
                                    width={1000}
                                    height={600}
                                    className="w-full"
                                />
                            </ImagePreview>
                        </div>
                    )}
                </div>
                <div className="relative mx-auto flex w-full max-w-[1362px] grow flex-col-reverse gap-y-8 px-3 pt-8 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="hidden shrink-0 text-neutral-500 xl:block xl:w-75 xl:pr-15">
                        <Separator className="mb-2" />
                        <PostSocials data={post} type="inline" />
                        <Separator className="mt-2" />
                    </div>
                    <div className="grow">
                        <div className="relative border-t border-b border-t-black border-b-[#999] bg-[#fbfaf8] before:absolute before:-bottom-10 before:left-1/2 before:hidden before:h-10 before:w-1 before:-translate-x-1/2 before:border-r before:border-r-[#999] md:flex xl:before:block">
                            <div className="p-3 md:w-3/12">
                                {post.location && (
                                    <div className="mb-2 flex gap-3 tracking-wider">
                                        <span className="mt-1 flex h-fit w-20 shrink-0 items-center gap-2 text-xs text-neutral-400 uppercase">
                                            <svg
                                                id="map-pin"
                                                className="fill-client-red inline-block size-3 align-middle"
                                                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>
                                            Bydel
                                        </span>
                                        <span className="text-sm font-semibold text-neutral-600">
                                            {DistrictsHelpers.getLabel(post.location as DistrictsEnum)}
                                        </span>
                                    </div>
                                )}
                                {ProjectTypeHelpers.isValid(project.type) && (
                                    <div className="mb-2 flex gap-3 tracking-wider">
                                        <span className="mt-1 flex h-fit w-20 shrink-0 items-center gap-2 text-xs text-neutral-400 uppercase">
                                            <svg
                                                width="128"
                                                viewBox="0 0 1408 1792"
                                                xmlns="http://www.w3.org/2000/svg"
                                                xmlnsXlink="http://www.w3.org/1999/xlink"
                                                className="fill-client-red inline-block size-3 align-middle"
                                            >
                                                <path d="M1344 0q26 0 45 19t19 45v1664q0 26-19 45t-45 19H64q-26 0-45-19t-19-45V64q0-26 19-45T64 0h1280zM512 288v64q0 14 9 23t23 9h64q14 0 23-9t9-23v-64q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23zm0 256v64q0 14 9 23t23 9h64q14 0 23-9t9-23v-64q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23zm0 256v64q0 14 9 23t23 9h64q14 0 23-9t9-23v-64q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23zm0 256v64q0 14 9 23t23 9h64q14 0 23-9t9-23v-64q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23zm-128 320v-64q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v64q0 14 9 23t23 9h64q14 0 23-9t9-23zm0-256v-64q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v64q0 14 9 23t23 9h64q14 0 23-9t9-23zm0-256v-64q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v64q0 14 9 23t23 9h64q14 0 23-9t9-23zm0-256v-64q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v64q0 14 9 23t23 9h64q14 0 23-9t9-23zm0-256v-64q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v64q0 14 9 23t23 9h64q14 0 23-9t9-23zm512 1280v-192q0-14-9-23t-23-9H544q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm0-512v-64q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v64q0 14 9 23t23 9h64q14 0 23-9t9-23zm0-256v-64q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v64q0 14 9 23t23 9h64q14 0 23-9t9-23zm0-256v-64q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v64q0 14 9 23t23 9h64q14 0 23-9t9-23zm0-256v-64q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v64q0 14 9 23t23 9h64q14 0 23-9t9-23zm256 1024v-64q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v64q0 14 9 23t23 9h64q14 0 23-9t9-23zm0-256v-64q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v64q0 14 9 23t23 9h64q14 0 23-9t9-23zm0-256v-64q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v64q0 14 9 23t23 9h64q14 0 23-9t9-23zm0-256v-64q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v64q0 14 9 23t23 9h64q14 0 23-9t9-23zm0-256v-64q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v64q0 14 9 23t23 9h64q14 0 23-9t9-23z" />
                                            </svg>
                                            Type
                                        </span>
                                        <span className="text-sm font-semibold text-neutral-600">
                                            {ProjectTypeHelpers.getLabel(project.type)}
                                        </span>
                                    </div>
                                )}
                                {project.status && (
                                    <div className="mb-2 flex gap-3 tracking-wider">
                                        <span className="mt-1 flex h-fit w-20 shrink-0 items-center gap-2 text-xs text-neutral-400 uppercase">
                                            <svg
                                                width="36"
                                                viewBox="0 0 1536 1536"
                                                xmlns="http://www.w3.org/2000/svg"
                                                className="fill-client-red inline-block size-3 align-middle"
                                            >
                                                <path d="M1284 606q0-28-18-46l-91-90q-19-19-45-19t-45 19L677 877L451 651q-19-19-45-19t-45 19l-91 90q-18 18-18 46q0 27 18 45l362 362q19 19 45 19q27 0 46-19l543-543q18-18 18-45zm252 162q0 209-103 385.5T1153.5 1433T768 1536t-385.5-103T103 1153.5T0 768t103-385.5T382.5 103T768 0t385.5 103T1433 382.5T1536 768z" />
                                            </svg>
                                            Status
                                        </span>
                                        <span className="text-sm font-semibold text-neutral-600">{project.status}</span>
                                    </div>
                                )}
                            </div>
                            <div className="p-3 md:w-5/12 md:border-x md:border-x-[#ccc]">
                                {project.address && (
                                    <div className="mb-2 flex gap-3 tracking-wider">
                                        <span className="mt-1 w-20 shrink-0 text-xs text-neutral-400 uppercase">
                                            Adresse
                                        </span>
                                        <span className="text-sm font-semibold text-neutral-600">
                                            {project.address}
                                        </span>
                                    </div>
                                )}
                                {project.function && (
                                    <div className="mb-2 flex gap-3 tracking-wider">
                                        <span className="mt-1 w-20 shrink-0 text-xs text-neutral-400 uppercase">
                                            Funktion
                                        </span>
                                        <span className="text-sm font-semibold text-neutral-600">
                                            {project.function}
                                        </span>
                                    </div>
                                )}
                                {(!!project.buildStartAt || !!project.buildEndAt) && (
                                    <div className="mb-2 flex gap-3 tracking-wider">
                                        <span className="mt-1 w-20 shrink-0 text-xs text-neutral-400 uppercase">
                                            Byggeår
                                        </span>
                                        <span className="text-sm font-semibold text-neutral-600">
                                            {projectStartDate || "N/A"} - {projectEndDate || "N/A"}
                                        </span>
                                    </div>
                                )}
                                {project.architect && (
                                    <div className="mb-2 flex gap-3 tracking-wider">
                                        <span className="mt-1 w-20 shrink-0 text-xs text-neutral-400 uppercase">
                                            Arkitekt
                                        </span>
                                        <span className="text-sm font-semibold text-neutral-600">
                                            {project.architect}
                                        </span>
                                    </div>
                                )}
                                {project.developer && (
                                    <div className="mb-2 flex gap-3 tracking-wider">
                                        <span className="mt-1 w-20 shrink-0 text-xs text-neutral-400 uppercase">
                                            Bygherre
                                        </span>
                                        <span className="text-sm font-semibold text-neutral-600">
                                            {project.developer}
                                        </span>
                                    </div>
                                )}
                            </div>
                            <div className="p-3 md:w-4/12">
                                <div className="h-44">
                                    {post.lat && post.lng && (
                                        <MapWrapper
                                            data={[
                                                {
                                                    id: post.id,
                                                    lat: post.lat,
                                                    lng: post.lng,
                                                    topic: post.topic
                                                }
                                            ]}
                                            disableMarkerClick
                                        />
                                    )}
                                </div>

                                <Link
                                    href={Routes.MAP}
                                    className="text-client-red relative mt-3 flex w-fit items-center gap-2 text-sm tracking-widest"
                                >
                                    <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">
                                        stort kort
                                    </span>
                                </Link>
                            </div>
                        </div>
                    </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] xl:border-x xl:before:block">
                <div className="relative flex flex-col gap-8 lg:flex-row xl:pl-75">
                    <div className="flex-1">
                        <h2 className="mb-4 font-sans text-3xl font-bold text-neutral-300">hvad er det?</h2>
                        <PostContentRenderer post={post} nodeContent={post.content} />
                    </div>
                    <div className="flex-1">
                        <h2 className="mb-4 text-3xl font-bold text-neutral-300">seneste om projektet</h2>
                        <RelatedPosts />
                    </div>
                </div>
                <div className="xl:pl-75">
                    <SponsoredBanner isSponsored={post.isSponsored} />
                    <PostNewsletterForm type="button" />
                    <div className="text-neutral-500 xl:hidden">
                        <Separator className="mb-2" />
                        <PostSocials data={post} type="inline" />
                        <Separator className="mt-2" />
                    </div>
                </div>
            </div>
        </section>
    );
}