import Image from "next/image";
import Link from "next/link";
import { PageContainer } from "@/components/layout/page-container";
import { BlogCard } from "@/components/ui/blog-card";
import { detonexFigmaAssets } from "@/lib/detonex-figma";
import { formatBlogDate } from "@/lib/format-blog-date";
import type { StorefrontBlogPost } from "@/types/storefront";

function buildCategoryHref(slug?: string) {
  if (!slug) {
    return "/blog";
  }

  return `/blog?category=${encodeURIComponent(slug)}`;
}

export function BlogPostSection({ post }: { post: StorefrontBlogPost }) {
  return (
    <article>
      <section className="bg-[#202621]">
        <div className="mx-auto grid min-h-[600px] w-full max-w-[1440px] md:grid-cols-2">
          <div className="flex items-center px-5 py-14 md:px-10 xl:px-[84px]">
            <div className="flex w-full max-w-[552px] flex-col gap-9">
              <div className="space-y-[7px]">
                <div className="flex flex-wrap items-center gap-2 text-[12px] font-medium uppercase tracking-[-0.02em] text-white/60">
                  <Link href="/blog" className="transition-opacity hover:opacity-100">
                    Blog
                  </Link>
                  <Image
                    src={detonexFigmaAssets.icons.chevronDown}
                    alt=""
                    width={14}
                    height={14}
                    className="size-[14px] -rotate-90 brightness-0 invert"
                  />
                  <Link
                    href={buildCategoryHref(post.category?.slug)}
                    className="text-white transition-opacity hover:opacity-80"
                  >
                    {post.category?.name || "Objava"}
                  </Link>
                </div>

                <div className="space-y-[14px]">
                  <h1 className="text-[38px] font-bold leading-[1.2] tracking-[-0.03em] text-white">
                    {post.title}
                  </h1>
                  {post.excerpt ? (
                    <p className="text-[16px] font-medium leading-6 tracking-[-0.02em] text-white/70">
                      {post.excerpt}
                    </p>
                  ) : null}
                </div>
              </div>

              <div className="flex items-center gap-4">
                <div className="rounded-full bg-white/30 p-1">
                  <div className="relative size-10 overflow-hidden rounded-full bg-white/20">
                    {post.authorAvatar ? (
                      <Image
                        src={post.authorAvatar.src}
                        alt={post.authorAvatar.alt || post.authorName || post.title}
                        fill
                        sizes="40px"
                        className="object-cover"
                      />
                    ) : null}
                  </div>
                </div>
                <div className="flex flex-col gap-0.5 text-[14px] uppercase tracking-[-0.02em] text-white">
                  <span className="font-medium text-white/60">
                    {post.publishedAt ? formatBlogDate(post.publishedAt) : ""}
                  </span>
                  <span className="font-bold">{post.authorName || "Detonex"}</span>
                </div>
              </div>
            </div>
          </div>

          <div className="relative min-h-[320px] md:min-h-[600px]">
            {post.image ? (
              <Image
                src={post.image.src}
                alt={post.image.alt || post.title}
                fill
                priority
                sizes="(max-width: 1023px) 100vw, 50vw"
                className="object-cover"
              />
            ) : (
              <div className="absolute inset-0 bg-white/10" />
            )}
          </div>
        </div>
      </section>

      <section className="bg-muted-surface">
        <PageContainer className="py-20">
          <div className="mx-auto flex max-w-[820px] flex-col gap-[42px]">
            <div
              className="
                [&_h2]:mb-[14px] [&_h2]:text-[32px] [&_h2]:font-bold [&_h2]:leading-[1.2] [&_h2]:tracking-[-0.03em] [&_h2]:text-primary
                [&_h3]:mb-4 [&_h3]:text-[28px] [&_h3]:font-bold [&_h3]:leading-[1.2] [&_h3]:tracking-[-0.03em] [&_h3]:text-primary
                [&_p]:text-[18px] [&_p]:font-medium [&_p]:leading-[1.5] [&_p]:tracking-[-0.02em] [&_p]:text-primary/70
                [&_p+*]:mt-[14px]
                [&_ul]:list-disc [&_ul]:pl-7 [&_ul]:text-[18px] [&_ul]:font-medium [&_ul]:leading-8 [&_ul]:tracking-[-0.02em] [&_ul]:text-primary/70
                [&_li]:pl-1
                [&_img]:my-[42px] [&_img]:w-full [&_img]:rounded-[12px]
              "
              dangerouslySetInnerHTML={{ __html: post.contentHtml }}
            />
          </div>
        </PageContainer>
      </section>

      {post.relatedPosts.length > 0 ? (
        <section className="bg-white">
          <PageContainer className="pt-20 pb-20">
            <div className="space-y-8">
              <h2 className="text-[38px] font-bold leading-[1.2] tracking-[-0.03em] text-primary">
                Savjeti i novosti
              </h2>
              <div className="grid gap-x-5 gap-y-8 lg:grid-cols-3">
                {post.relatedPosts.map((relatedPost) => (
                  <BlogCard key={relatedPost.id} post={relatedPost} />
                ))}
              </div>
            </div>
          </PageContainer>
        </section>
      ) : null}
    </article>
  );
}