import Link from "next/link";
import Image from "next/image";
import { notFound } from "next/navigation";
import type { BlogCategory } from "@/lib/blog";
import {
  CATEGORIES,
  formatDate,
  getPost,
  getRelatedPosts,
} from "@/lib/blog";
import { ArticleFeedback } from "./article-feedback";
import { BlogCard } from "./blog-card";
import { Button } from "./button";
import { ArrowRight, Sparkle } from "./icons";
import "@/app/resources/blog-content.css";

/** Shared article page for /resources/[category]/[slug]. */
export async function ArticlePage({
  category,
  slug,
}: {
  category: BlogCategory;
  slug: string;
}) {
  const post = await getPost(category, slug);
  if (!post) notFound();

  const meta = CATEGORIES[category];
  const related = await getRelatedPosts(category, slug);
  // The AI Insight box is an Insights-only feature. Impact Stories carry the
  // same Strapi field (one Post type), so gate on category here, not in the CMS.
  const aiInsight = category === "insights" ? post.aiInsight : undefined;
  const testimonial =
    category === "impact-stories" ? post.testimonial : undefined;

  return (
    <article>
      {/* Header */}
      <header className="relative overflow-hidden wash-aurora">
        <div className="mx-auto max-w-3xl px-6 pb-10 pt-36 text-center sm:pt-44 lg:px-10">
          <nav className="mb-6 flex items-center justify-center gap-2 text-xs font-semibold uppercase tracking-wide">
            {/* Pale pill with gradient text — same gradient that was
                previously the pill's background, now on the text instead
                (text-gradient util, already used elsewhere on the site). */}
            <Link
              href={`/resources/${category}`}
              className="btn-pill border border-line bg-paper px-4 py-2 text-sm font-bold text-gradient shadow-soft"
            >
              {meta.label}
            </Link>
          </nav>
          {/* <h1 className="font-display text-3xl font-bold leading-tight tracking-tight text-ink sm:text-5xl">
            {post.title}
          </h1> */}
          <p className="mt-4 text-md text-muted">
            {formatDate(post.date)}
          </p>
        </div>
      </header>

      {/* Cover */}
      <div className="mx-auto max-w-5xl px-6 lg:px-10">
        <div className="relative flex min-h-[220px] flex-col justify-end overflow-hidden rounded-[1.75rem] shadow-lift sm:aspect-[16/7] sm:min-h-0">
          {post.image ? (
            <Image
              src={post.image}
              alt={post.title}
              fill
              priority
              sizes="(min-width: 1024px) 896px, 100vw"
              className="object-cover"
            />
          ) : (
            <div className={`absolute inset-0 bg-gradient-to-br ${post.cover}`} />
          )}
          <div className="absolute inset-0 bg-gradient-to-t from-black/55 via-black/10 to-transparent" />
          <div className="relative p-8">
            <h2 className="max-w-2xl font-display text-xl font-bold leading-tight text-white drop-shadow sm:text-3xl">
              {post.title}
            </h2>
          </div>
        </div>
      </div>

      {/* AI Insight — editor-written takeaway, Insights category only */}
      {aiInsight && (
        <aside
          aria-labelledby="ai-insight-heading"
          className="mx-auto mt-14 max-w-5xl px-6 lg:px-10"
        >
          <div className="callout-gradient callout-gradient-wash rounded-[1.25rem] p-6 sm:p-8">
            <div className="flex items-center gap-2">
              <Sparkle className="h-5 w-5 text-leaf-deep" />
              <h2
                id="ai-insight-heading"
                className="font-display text-xs font-semibold uppercase tracking-[0.22em] text-gradient"
              >
                AI Insight
              </h2>
            </div>
            {/* Sized just under the 20px/15px blog-content paragraphs so it reads
                as part of the article, not a footnote. */}
            <p className="mt-3 whitespace-pre-line text-[15px] leading-relaxed tracking-[-0.02em] text-ink sm:text-lg">
              {aiInsight}
            </p>
          </div>
        </aside>
      )}

      {/* Body */}
      <div className="mx-auto max-w-5xl px-6 py-14 lg:px-10">
        <div
          className="blog-content"
          dangerouslySetInnerHTML={{ __html: post.body }}
        />
      </div>

      {/* Testimonial — client quote, Impact Stories only. Same quote grammar as
          the homepage founder note (oversized teal mark, italic quote, small
          portrait beside the name) inside the callout frame, so it reads as
          the site's own voice rather than a generic review card. */}
      {testimonial && (
        <aside
          aria-labelledby="testimonial-heading"
          className="mx-auto max-w-5xl px-6 pb-14 lg:px-10"
        >
          <figure className="callout-gradient rounded-[1.25rem] px-6 pb-6 pt-5 sm:px-8 sm:pb-7 sm:pt-6">
            {/* Heading is for assistive tech only: visually the oversized quote
                mark is the header, as on the homepage. A text label stacked on
                top of it made two small competing headers in the corner. */}
            <h2 id="testimonial-heading" className="sr-only">
              Testimonial
            </h2>

            {/* aria-hidden: <blockquote> already carries the semantics. Tight
                leading crops the empty em-box under a `"`, as on the homepage. */}
            <span
              aria-hidden
              className="mt-1 block font-display text-[4rem] leading-[0.62] text-teal/70 sm:text-[5.5rem]"
            >
              &ldquo;
            </span>
            <blockquote className="-mt-5 max-w-3xl whitespace-pre-line font-display text-lg italic leading-relaxed tracking-[-0.01em] text-ink sm:-mt-7 sm:text-xl">
              {testimonial.quote}
            </blockquote>

            {(testimonial.image || testimonial.name || testimonial.role) && (
              <figcaption className="mt-5 flex items-center gap-4">
                {/* Circle = "a person", the testimonial convention; it also
                    crops out whatever background the client's headshot has.
                    Gradient ring is the same one the site logo wears. */}
                {testimonial.image && (
                  <span className="logo-gradient-border shrink-0 rounded-full p-[2px]">
                    <Image
                      src={testimonial.image}
                      alt={testimonial.name || "Testimonial"}
                      width={72}
                      height={72}
                      className="block h-16 w-16 rounded-full object-cover sm:h-[72px] sm:w-[72px]"
                    />
                  </span>
                )}
                <div className="text-sm leading-snug text-ink">
                  {testimonial.name && (
                    <p className="font-display text-base font-bold">{testimonial.name}</p>
                  )}
                  {testimonial.role && <p className="mt-1 text-muted">{testimonial.role}</p>}
                </div>
              </figcaption>
            )}
          </figure>
        </aside>
      )}

      {/* Helpful? — deliberately narrower than the max-w-5xl body column, so the
          prompt reads as an aside rather than another section of the article. */}
      <div className="mx-auto max-w-3xl px-6 pb-14 lg:px-10">
        <ArticleFeedback postSlug={slug} />
      </div>

      {/* CTA banner */}
      <div className="mx-auto max-w-5xl px-6 lg:px-10">
        <div className="relative flex flex-col items-start justify-between gap-6 overflow-hidden rounded-[1.75rem] bg-gradient-to-r from-leaf-deep via-teal to-sky p-8 sm:flex-row sm:items-center">
          <div className="absolute inset-0 bg-[radial-gradient(90%_140%_at_85%_0%,rgba(255,255,255,0.25),transparent_55%)]" />
          <div className="relative z-10">
            <h3 className="font-display text-xl font-bold text-white sm:text-2xl">
              Ready to architect your next stage of growth?
            </h3>
            <p className="mt-1 text-sm text-white/90">
              Partner with wedigtech and turn ambition into compounding,
              measurable outcomes.
            </p>
          </div>
          <Link
            href="/#contact"
            className="btn-pill relative z-10 shrink-0 bg-paper px-6 py-3 text-sm text-ink hover:brightness-95"
          >
            Book Discovery Call
            <ArrowRight className="h-4 w-4" />
          </Link>
        </div>
      </div>

      {/* Related */}
      {related.length > 0 && (
        <section className="mx-auto max-w-7xl px-6 py-20 lg:px-10">
          <div className="mb-8 flex items-center justify-between">
            <h3 className="font-display text-2xl font-bold text-ink">
              More from {meta.label}
            </h3>
            <Button href={`/resources/${category}`} variant="ghost">
              View All
            </Button>
          </div>
          <div className="grid gap-7 sm:grid-cols-2 lg:grid-cols-3">
            {related.map((p) => (
              <BlogCard key={p.slug} post={p} />
            ))}
          </div>
        </section>
      )}
    </article>
  );
}