"use client";

import Link from "next/link";
import Image from "next/image";
import {
  ArrowRight,
  Clock,
  Calendar,
  MessageCircle,
  Share2,
  CheckCircle2,
  ExternalLink,
  ChevronRight,
  Building2,
  ShieldCheck,
  Compass,
  Quote,
  HelpCircle,
} from "lucide-react";
import Breadcrumbs from "@/components/ui/breadcrumbs";
import TableOfContents, { TocItem } from "@/components/ui/table-of-contents";
import CalloutBox from "@/components/ui/callout-box";
import PortableTextRenderer from "@/components/portable-text-renderer";
import FounderBioSection from "@/components/sections/founder-bio-section";
import LuxuryCTABanner from "@/components/sections/luxury-cta-banner";
import { getWhatsAppUrl } from "@/lib/whatsapp";
import { WhatsAppIcon } from "@/components/ui/whatsapp-icon";
import { useState, useMemo } from "react";
import { toast } from "sonner";

import type { PortableTextProps } from "@portabletext/react";

export interface ArticleData {
  title: string;
  slug: string;
  excerpt?: string;
  tag?: string;
  readTime?: string;
  publishedAt?: string;
  coverImage?: string;
  author?: {
    name: string;
    role?: string;
    avatar?: string;
  };
  toc?: TocItem[];
  body?: PortableTextProps["value"] | null;
  fallbackContent?: {
    introduction?: string[];
    sections: {
      id: string;
      title: string;
      level?: number;
      paragraphs?: string[];
      callout?: {
        title: string;
        text: string;
      };
      bulletPoints?: string[];
      scenarios?: {
        title: string;
        upside: string;
        downside: string;
      }[];
    }[];
  };
}

export interface BlogArticleViewProps {
  article: ArticleData;
  relatedArticles?: {
    title: string;
    slug: string;
    excerpt: string;
    tag: string;
  }[];
}

export default function BlogArticleView({
  article,
  relatedArticles = [],
}: BlogArticleViewProps) {
  const [copied, setCopied] = useState(false);

  const handleCopyLink = () => {
    if (typeof window !== "undefined") {
      navigator.clipboard.writeText(window.location.href);
      setCopied(true);
      toast.success("Article link copied to clipboard");
      setTimeout(() => setCopied(false), 2000);
    }
  };

  const shareText = `Check out this wedding guide: ${article.title}`;
  const currentUrl = typeof window !== "undefined" ? window.location.href : "";

  const breadcrumbLinks = [
    { label: "Home", href: "/" },
    { label: "Wedding Guides", href: "/blog" },
    { label: article.title, href: "#" },
  ];

  // Compute Table of Contents from Portable Text headings or fallbackContent
  const tocItems: TocItem[] = useMemo(() => {
    if (article.toc && article.toc.length > 0) return article.toc;

    if (Array.isArray(article.body)) {
      const headings: TocItem[] = [];
      for (const block of article.body) {
        if (
          block._type === "block" &&
          (block.style === "h2" || block.style === "h3")
        ) {
          const text =
            block.children?.map((c: any) => c.text).join("") || "";
          if (text) {
            const cleanTitle = text.replace(/[*#→>_]/g, "").trim();
            const id = cleanTitle
              .toLowerCase()
              .replace(/[^a-z0-9]+/g, "-")
              .replace(/^-|-$/g, "");
            if (cleanTitle && id) {
              headings.push({
                id,
                title: cleanTitle,
                level: block.style === "h2" ? 2 : 3,
              });
            }
          }
        }
      }
      if (headings.length > 0) return headings;
    }

    return (
      article.fallbackContent?.sections.map((s) => ({
        id: s.id,
        title: s.title,
        level: s.level || 2,
      })) || []
    );
  }, [article.toc, article.body, article.fallbackContent]);

  return (
    <div className="bg-brand-ivory">
      {/* 1. ARTICLE HEADER HERO */}
      <section className="hero-pattern pt-12 pb-16 lg:pt-16 lg:pb-20 border-b border-brand-border/60">
        <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <Breadcrumbs links={breadcrumbLinks} />

          <div className="max-w-4xl mx-auto mt-8">
            {/* Meta Ribbon */}
            <div className="flex flex-wrap items-center gap-3 mb-6">
              <span className="text-xs font-semibold text-brand-gold uppercase tracking-[0.2em]">
                {article.tag || "Wedding Guide"}
              </span>
              <span className="inline-flex items-center gap-1.5 text-xs text-brand-muted font-medium">
                <Clock size={13} className="text-brand-gold" />
                <span>{article.readTime || "10 min read"}</span>
              </span>
              {article.publishedAt && (
                <span className="inline-flex items-center gap-1.5 text-xs text-brand-muted font-medium">
                  <Calendar size={13} className="text-brand-gold" />
                  <span>{article.publishedAt}</span>
                </span>
              )}
            </div>

            {/* Main Title in Philosopher */}
            <h1 className="font-title text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-brand-dark leading-[1.2] mb-6">
              {article.title}
            </h1>

            {/* Excerpt / Lead */}
            {article.excerpt && (
              <p className="text-base sm:text-xl text-brand-muted font-normal leading-relaxed mb-8">
                {article.excerpt}
              </p>
            )}

            {/* Author Byline & Social Sharing */}
            <div className="pt-6 border-t border-brand-border/60 flex flex-col sm:flex-row sm:items-center justify-between gap-6">
              {/* Author */}
              <div className="flex items-center gap-3.5">
                <div className="relative w-12 h-12 rounded-full overflow-hidden bg-brand-sand border border-brand-border/80 shrink-0">
                  <Image
                    src={article.author?.avatar || "/images/nhi-vo-profile.webp"}
                    alt={article.author?.name || "Nhi Võ"}
                    fill
                    className="object-cover object-top"
                    sizes="48px"
                  />
                </div>
                <div>
                  <h4 className="font-title text-base font-bold text-brand-dark">
                    {article.author?.name || "Nhi Võ"}
                  </h4>
                  <p className="text-xs text-brand-muted">
                    {article.author?.role || "Founder & Senior Destination Consultant"}
                  </p>
                </div>
              </div>

              {/* Share Actions */}
              <div className="flex items-center gap-2.5">
                <span className="text-xs font-semibold uppercase tracking-wider text-brand-muted mr-1 hidden sm:inline-block">
                  Share:
                </span>
                <a
                  href={getWhatsAppUrl(`Hello Nhi, I would like to discuss this guide: "${article.title}"`)}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="w-9 h-9 rounded-full bg-white border border-brand-border hover:border-brand-gold flex items-center justify-center text-brand-dark hover:text-brand-gold transition-colors shadow-xs"
                  title="Discuss on WhatsApp"
                  aria-label="Discuss on WhatsApp"
                >
                  <MessageCircle size={15} />
                </a>
                <button
                  onClick={handleCopyLink}
                  className="w-9 h-9 rounded-full bg-white border border-brand-border hover:border-brand-gold flex items-center justify-center text-brand-dark hover:text-brand-gold transition-colors shadow-xs"
                  title="Copy link"
                  aria-label="Copy link"
                >
                  <Share2 size={15} />
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 2. MAIN EDITORIAL CONTENT + STICKY SIDEBAR */}
      <section className="py-16 lg:py-24">
        <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16">
            {/* MAIN ARTICLE BODY (8 Columns) */}
            <article className="lg:col-span-8 space-y-10">
              {/* Featured Cover Image if available */}
              {article.coverImage && (
                <div className="relative aspect-[16/9] rounded-3xl overflow-hidden bg-brand-sand border border-brand-border/80 shadow-md">
                  <Image
                    src={article.coverImage}
                    alt={article.title}
                    fill
                    priority
                    className="object-cover"
                    sizes="(min-width: 1024px) 800px, 100vw"
                  />
                </div>
              )}

              {/* MOBILE TABLE OF CONTENTS */}
              {tocItems.length > 0 && (
                <div className="block lg:hidden">
                  <TableOfContents items={tocItems} />
                </div>
              )}

              {/* SANITY PORTABLE TEXT CONTENT (If Available) */}
              {article.body ? (
                <div className="prose prose-stone max-w-none text-brand-dark leading-relaxed font-body">
                  <PortableTextRenderer value={article.body} />
                </div>
              ) : (
                /* STRUCTURED FALLBACK CONTENT */
                <div className="space-y-10 text-brand-dark/90 leading-relaxed font-body">
                  {/* Introduction Paragraphs */}
                  {article.fallbackContent?.introduction && (
                    <div className="space-y-4 text-base sm:text-lg text-brand-muted leading-relaxed">
                      {article.fallbackContent.introduction.map((p, idx) => (
                        <p key={idx}>{p}</p>
                      ))}
                    </div>
                  )}

                  {/* Fallback Sections with Headings */}
                  {article.fallbackContent?.sections.map((sec) => (
                    <section key={sec.id} id={sec.id} className="scroll-mt-28 space-y-5 pt-4">
                      <h2 className="font-title text-2xl sm:text-3xl font-bold text-brand-dark pb-2 border-b border-brand-border/60">
                        {sec.title}
                      </h2>

                      {/* Paragraphs */}
                      {sec.paragraphs &&
                        sec.paragraphs.map((para, pIdx) => (
                          <p key={pIdx} className="text-base sm:text-lg leading-relaxed text-brand-dark/85">
                            {para}
                          </p>
                        ))}

                      {/* Consultant Callout Box */}
                      {sec.callout && (
                        <CalloutBox title={sec.callout.title} tone="gold">
                          <p>{sec.callout.text}</p>
                        </CalloutBox>
                      )}

                      {/* Bullet points */}
                      {sec.bulletPoints && (
                        <ul className="space-y-3 pt-2">
                          {sec.bulletPoints.map((bp, bpIdx) => (
                            <li key={bpIdx} className="flex items-start gap-3 text-sm sm:text-base">
                              <span className="shrink-0 mt-1 w-4 h-4 rounded-full bg-brand-sand flex items-center justify-center text-brand-gold">
                                <CheckCircle2 size={13} />
                              </span>
                              <span className="text-brand-dark/90">{bp}</span>
                            </li>
                          ))}
                        </ul>
                      )}

                      {/* Scenarios Comparison */}
                      {sec.scenarios && (
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 pt-4">
                          {sec.scenarios.map((scen, sIdx) => (
                            <div
                              key={sIdx}
                              className="rounded-2xl p-5 bg-brand-sand/40 border border-brand-border/80"
                            >
                              <h4 className="font-title text-base font-bold text-brand-dark mb-2">
                                {scen.title}
                              </h4>
                              <p className="text-xs text-brand-dark/90 mb-2 leading-relaxed">
                                <strong className="text-brand-dark">Advantage:</strong> {scen.upside}
                              </p>
                              <p className="text-xs text-brand-muted leading-relaxed">
                                <strong className="text-brand-dark">Trade-off:</strong> {scen.downside}
                              </p>
                            </div>
                          ))}
                        </div>
                      )}
                    </section>
                  ))}
                </div>
              )}

              {/* 3. AUTHOR BIO CARD (Founder Credibility) */}
              <FounderBioSection variant="compact" />
            </article>

            {/* STICKY SIDEBAR (4 Columns on Desktop) */}
            <aside className="hidden lg:block lg:col-span-4 space-y-8">
              <div className="sticky top-28 space-y-8">
                {/* Table of Contents */}
                {tocItems.length > 0 && <TableOfContents items={tocItems} />}

                {/* Direct WhatsApp Advisory Card */}
                <div className="rounded-3xl p-6 bg-brand-sand/60 border border-brand-border/80 space-y-4">
                  <div className="w-10 h-10 rounded-2xl bg-white flex items-center justify-center text-brand-gold border border-brand-border shadow-xs">
                    <MessageCircle size={20} />
                  </div>
                  <h4 className="font-title text-lg font-bold text-brand-dark">
                    Have Questions About This Guide?
                  </h4>
                  <p className="text-xs text-brand-muted leading-relaxed">
                    Every destination wedding has unique contract nuances. Connect directly with Nhi Võ on WhatsApp for unbiased second opinions on resort quotes and contracts.
                  </p>
                  <a
                    href={getWhatsAppUrl(`Hello Nhi, I was reading your guide "${article.title}" and would like to ask a question.`)}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="w-full inline-flex items-center justify-center gap-2 bg-brand-gold hover:bg-brand-gold-hover text-white py-3 px-5 rounded-full text-xs font-semibold uppercase tracking-widest transition-all duration-300 shadow-xs"
                  >
                    <span>Chat on WhatsApp</span>
                    <ArrowRight size={13} />
                  </a>
                </div>

                {/* Quick Trust Badges */}
                <div className="p-6 rounded-3xl bg-white border border-brand-border space-y-3.5">
                  <div className="flex items-center gap-3">
                    <ShieldCheck size={18} className="text-brand-gold shrink-0" />
                    <span className="text-xs font-medium text-brand-dark">Zero Vendor Kickbacks</span>
                  </div>
                  <div className="flex items-center gap-3">
                    <Compass size={18} className="text-brand-gold shrink-0" />
                    <span className="text-xs font-medium text-brand-dark">Local Vietnam Clout</span>
                  </div>
                  <div className="flex items-center gap-3">
                    <Building2 size={18} className="text-brand-gold shrink-0" />
                    <span className="text-xs font-medium text-brand-dark">5-Star Luxury Benchmarks</span>
                  </div>
                </div>
              </div>
            </aside>
          </div>
        </div>
      </section>

      {/* 4. RELATED WEDDING GUIDES */}
      {relatedArticles && relatedArticles.length > 0 && (
        <section className="py-20 lg:py-28 bg-brand-sand/40 border-t border-brand-border/60">
          <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex flex-col sm:flex-row sm:items-end justify-between mb-12">
              <div>
                <span className="text-xs font-semibold tracking-widest text-brand-gold uppercase block mb-2">
                  Continue Reading
                </span>
                <h2 className="font-title text-2xl sm:text-3xl lg:text-4xl font-bold text-brand-dark">
                  Related Wedding Guides
                </h2>
              </div>
              <Link
                href="/blog"
                className="inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-widest text-brand-gold hover:underline mt-4 sm:mt-0"
              >
                <span>View All Guides</span>
                <ArrowRight size={14} />
              </Link>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {relatedArticles.map((item) => (
                <Link
                  key={item.slug}
                  href={`/blog/${item.slug}`}
                  className="card-luxury group flex w-full flex-col justify-between overflow-hidden rounded-3xl p-6 bg-white border border-brand-border transition-all duration-300 hover:border-brand-gold hover:shadow-xl"
                >
                  <div>
                    <div className="mb-4 relative h-40 rounded-2xl bg-brand-sand flex flex-col justify-between p-4 overflow-hidden border border-brand-border/40">
                      <span className="badge-gold px-3 py-1 rounded-full text-xs font-semibold text-brand-dark uppercase tracking-wider self-start">
                        {item.tag}
                      </span>
                      <span className="font-title text-xs uppercase tracking-widest text-brand-muted">
                        Vietnam Wedding Guide
                      </span>
                    </div>
                    <h3 className="font-title font-bold text-lg leading-snug text-brand-dark group-hover:text-brand-gold transition-colors duration-300 line-clamp-2">
                      {item.title}
                    </h3>
                    <p className="mt-2.5 text-xs text-brand-muted leading-relaxed line-clamp-3">
                      {item.excerpt}
                    </p>
                  </div>

                  <div className="mt-6 pt-4 border-t border-brand-border/60 flex items-center justify-between">
                    <span className="text-xs font-semibold text-brand-gold uppercase tracking-wider group-hover:underline">
                      Read Guide
                    </span>
                    <div className="w-7 h-7 rounded-full border border-brand-border flex items-center justify-center text-brand-gold group-hover:bg-brand-gold group-hover:text-white transition-all duration-300">
                      <ChevronRight size={14} />
                    </div>
                  </div>
                </Link>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* 5. BOTTOM LUXURY CTA BANNER */}
      <LuxuryCTABanner
        badgeText="Planning Clarity"
        title="Planning a Wedding in Vietnam?"
        description="Don't navigate complex resort minimums and vendor contracts alone. Book an hourly consultation or request an objective quote audit with Nhi Võ."
        primaryCtaText="Inquire Now"
        primaryCtaHref="/contact"
        primaryCtaIcon="arrow"
        whatsappMessage={`Hello Nhi, I would like to inquire about wedding consultation after reading "${article.title}".`}
        whatsappButtonText="Chat on WhatsApp"
        sectionPadding="pb-20 lg:pb-32 pt-10"
      />
    </div>
  );
}