"use client";

import { useState, useMemo, useEffect } from "react";
import { useSearchParams } from "next/navigation";
import Link from "next/link";
import Image from "next/image";
import {
  ArrowRight,
  Search,
  ChevronRight,
  Clock,
  BookOpen,
  MessageCircle,
  Tag,
  SlidersHorizontal,
} from "lucide-react";
import Breadcrumbs from "@/components/ui/breadcrumbs";
import { getWhatsAppUrl } from "@/lib/whatsapp";
import { WhatsAppIcon } from "@/components/ui/whatsapp-icon";
import { POSTS_QUERY_RESULT } from "@/sanity.types";

export interface BlogIndexViewProps {
  posts?: POSTS_QUERY_RESULT;
}

interface GuideItem {
  title: string;
  slug: string;
  excerpt: string;
  tag: string;
  readTime: string;
  publishedAt?: string;
  image?: any;
  featured?: boolean;
}

const fallbackGuides: GuideItem[] = [
  {
    title: "Vietnam Luxury Wedding Cost: A Complete Budget Guide (2025)",
    slug: "vietnam-wedding-guide-part-1",
    excerpt:
      "A comprehensive, transparent breakdown of real venue fees, F&B minimums, decoration production, and logistics across Vietnam's 5-star destination resorts.",
    tag: "Budget Guides",
    readTime: "12 min read",
    publishedAt: "Oct 2025",
    featured: true,
  },
  {
    title: "Ngân Sách Tiệc Cưới Cao Cấp Tại Việt Nam: Các Khoản Chi Phí Ẩn",
    slug: "ngan-sach-tiec-cuoi-cao-cap-viet-nam-phan-2",
    excerpt:
      "Vạch trần các khoản phí tiềm ẩn: phí phục vụ bên ngoài, phí máy phát điện, phụ thu overtime đêm muộn và thuế quan nhập khẩu trang thiết bị.",
    tag: "Budget Guides",
    readTime: "9 min read",
    publishedAt: "Oct 2025",
  },
  {
    title: "Why Vietnam is the Premier Destination for Your Wedding?",
    slug: "why-vietnam",
    excerpt:
      "From pristine beachfronts in Da Nang and Phu Quoc to historic colonial charm in Da Lat and Hoi An, discover why Vietnam outshines traditional regional wedding hubs.",
    tag: "Destination Guides",
    readTime: "8 min read",
    publishedAt: "Sep 2025",
  },
  {
    title: "The Compass Framework: A Project Management Approach to Your Wedding",
    slug: "wedding-framework-project-managment",
    excerpt:
      "How to treat your cross-border wedding like a luxury production. Essential milestone calendars, vendor screening checklists, and contingency buffers.",
    tag: "Planning Guides",
    readTime: "10 min read",
    publishedAt: "Sep 2025",
  },
  {
    title: "Chọn Lựa Wedding Planner: Chỉ Có Phù Hợp, Không Có Tốt Nhất",
    slug: "chn-la-wedding-planner-ch-c-ph-hp-khng-c-tt-nht",
    excerpt:
      "Tiêu chuẩn đánh giá năng lực thực tế của planner: phân biệt giữa đơn vị chuyên trang trí và đơn vị có tư duy quản trị sự kiện quốc tế.",
    tag: "Planning Guides",
    readTime: "7 min read",
    publishedAt: "Oct 2025",
  },
  {
    title: "Top Questions for Planning a Premium Wedding in Vietnam, Answered by an Insider",
    slug: "wedding-in-vietnam-questions",
    excerpt:
      "Clear answers to seasonal weather risks, optimal guest accommodation ratios, booking timelines, and contract deposit schedules.",
    tag: "Planning Guides",
    readTime: "6 min read",
    publishedAt: "Sep 2025",
  },
  {
    title: "Tại Sao Chọn Việt Nam Làm Điểm Đến Cho Tiệc Cưới Của Bạn?",
    slug: "tai-sao-chon-viet-nam",
    excerpt:
      "Khám phá bức tranh tổng thể về dịch vụ hiếu khách 5 sao, cảnh quan ngoạn mục từ biển đảo đến đồi thông, và tối ưu ngân sách cho cặp đôi quốc tế.",
    tag: "Destination Guides",
    readTime: "11 min read",
    publishedAt: "Oct 2025",
  },
  {
    title: "Case Study: Tổ Chức Siêu Tiệc Cưới Ấn Độ Đa Ngày Tại Phú Quốc & Đà Nẵng",
    slug: "case-study--siu-tic-ci-n",
    excerpt:
      "Phân tích chuyên sâu các thách thức vận hành: ẩm thực chay chuyên biệt, nghi thức tôn giáo phức tạp, và điều phối hậu cần cho 500+ khách bay quốc tế.",
    tag: "Venue Guides",
    readTime: "9 min read",
    publishedAt: "Oct 2025",
  },
];

const categories = [
  "All Guides",
  "Venue Guides",
  "Budget Guides",
  "Destination Guides",
  "Planning Guides",
];

export default function BlogIndexView({ posts = [] }: BlogIndexViewProps) {
  const searchParams = useSearchParams();
  const tagParam = searchParams.get("tag");

  const [activeCategory, setActiveCategory] = useState("All Guides");
  const [searchQuery, setSearchQuery] = useState("");

  // Sync category with URL tag parameter when navigated from footer or direct link
  useEffect(() => {
    if (!tagParam) return;
    const lower = tagParam.toLowerCase();
    if (lower === "venue" || lower === "venues") {
      setActiveCategory("Venue Guides");
    } else if (lower === "budget" || lower === "budgets" || lower === "cost") {
      setActiveCategory("Budget Guides");
    } else if (lower === "destination" || lower === "destinations") {
      setActiveCategory("Destination Guides");
    } else if (lower === "planning" || lower === "framework") {
      setActiveCategory("Planning Guides");
    } else {
      const match = categories.find((c) => c.toLowerCase().includes(lower));
      if (match) setActiveCategory(match);
    }
  }, [tagParam]);

  // Map Sanity posts to guide item format if present
  const allGuides = useMemo(() => {
    if (posts && posts.length > 0) {
      const sanityList: GuideItem[] = posts.map((post, idx) => {
        const isFeatured =
          post.featured === true ||
          post.slug?.current === "vietnam-wedding-guide-part-1";

        const slug = post.slug?.current ?? "";
        let tag = post.categories?.[0]?.title || "Destination Guides";
        if (!post.categories?.[0]?.title) {
          if (slug.includes("part") || slug.includes("ngan-sach") || slug.includes("budget")) {
            tag = "Budget Guides";
          } else if (
            slug.includes("framework") ||
            slug.includes("questions") ||
            slug.includes("planner") ||
            slug.includes("regret") ||
            slug.includes("plan")
          ) {
            tag = "Planning Guides";
          } else if (slug.includes("case-study") || slug.includes("venue")) {
            tag = "Venue Guides";
          }
        }

        return {
          title: post.title ?? "Untitled Guide",
          slug: post.slug?.current ?? `guide-${idx}`,
          excerpt: post.excerpt ?? "",
          tag,
          readTime: "10 min read",
          publishedAt: post.publishedAt
            ? new Date(post.publishedAt).toLocaleDateString("en-US", {
                month: "short",
                year: "numeric",
              })
            : undefined,
          image: post.image,
          featured: isFeatured,
        };
      });

      return sanityList;
    }

    return fallbackGuides;
  }, [posts]);

  // Filtered guides based on category and search query
  const filteredGuides = useMemo(() => {
    return allGuides.filter((guide) => {
      const matchesCategory =
        activeCategory === "All Guides" || guide.tag === activeCategory;
      const matchesSearch =
        searchQuery.trim() === "" ||
        guide.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
        guide.excerpt.toLowerCase().includes(searchQuery.toLowerCase()) ||
        guide.tag.toLowerCase().includes(searchQuery.toLowerCase());

      return matchesCategory && matchesSearch;
    });
  }, [allGuides, activeCategory, searchQuery]);

  // Featured Guide (first one that has featured=true, or first in list)
  const featuredGuide = useMemo(() => {
    if (activeCategory === "All Guides" && searchQuery.trim() === "") {
      return allGuides.find((g) => g.featured) || allGuides[0];
    }
    return null;
  }, [allGuides, activeCategory, searchQuery]);

  // Non-featured guides list
  const listGuides = useMemo(() => {
    if (featuredGuide) {
      return filteredGuides.filter((g) => g.slug !== featuredGuide.slug);
    }
    return filteredGuides;
  }, [filteredGuides, featuredGuide]);

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

  return (
    <div className="bg-brand-ivory">
      {/* 1. HERO SECTION */}
      <section className="hero-pattern pt-12 pb-16 lg:pt-20 lg:pb-24 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-3xl mx-auto text-center mt-6">
            <div className="inline-flex items-center gap-3 mb-6">
              <span className="w-8 h-px bg-brand-gold/60" />
              <span className="text-xs font-semibold tracking-[0.25em] text-brand-gold uppercase">
                Curated Editorial &amp; Destination Intelligence
              </span>
              <span className="w-8 h-px bg-brand-gold/60" />
            </div>

            <h1 className="font-title text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-brand-dark leading-[1.18] mb-6">
              Vietnam Wedding Guides &amp;{" "}
              <span className="gold-gradient-text">Editorial Insights</span>
            </h1>

            <p className="text-base sm:text-lg text-brand-muted leading-relaxed max-w-2xl mx-auto mb-10">
              The independent publication for couples and luxury planners. Unbiased analysis on 5-star destination resorts, transparent cost realities, and luxury event production.
            </p>

            {/* Search Input Bar */}
            <div className="max-w-xl mx-auto relative">
              <div className="relative flex items-center">
                <Search className="w-5 h-5 text-brand-muted absolute left-4 pointer-events-none" />
                <input
                  type="text"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  placeholder="Search guides by resort, budget topic, or region..."
                  className="w-full bg-white border border-brand-border hover:border-brand-gold focus:border-brand-gold rounded-full pl-12 pr-6 py-3.5 text-sm text-brand-dark placeholder:text-brand-muted/70 focus:outline-hidden shadow-xs transition-all duration-300"
                />
                {searchQuery && (
                  <button
                    onClick={() => setSearchQuery("")}
                    className="absolute right-4 text-xs uppercase tracking-wider text-brand-muted hover:text-brand-dark font-medium"
                  >
                    Clear
                  </button>
                )}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 2. CATEGORY TABS & STATS */}
      <section className="py-6 border-b border-brand-border/60 bg-white sticky top-0 z-20 backdrop-blur-md bg-white/95">
        <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between gap-4 overflow-x-auto no-scrollbar py-1">
            <div className="flex items-center gap-2 sm:gap-3 shrink-0">
              <SlidersHorizontal className="w-4 h-4 text-brand-gold mr-1 hidden sm:inline-block" />
              {categories.map((cat) => {
                const isActive = activeCategory === cat;
                return (
                  <button
                    key={cat}
                    onClick={() => setActiveCategory(cat)}
                    className={`px-4 py-2 rounded-full text-xs font-semibold uppercase tracking-wider transition-all duration-300 shrink-0 ${
                      isActive
                        ? "bg-brand-dark text-white shadow-xs"
                        : "bg-brand-sand/60 text-brand-dark hover:bg-brand-sand hover:text-brand-gold"
                    }`}
                  >
                    {cat}
                  </button>
                );
              })}
            </div>

            <div className="text-xs text-brand-muted shrink-0 hidden md:block">
              Showing <span className="font-semibold text-brand-dark">{filteredGuides.length}</span> editorial guides
            </div>
          </div>
        </div>
      </section>

      {/* 3. MAIN CONTENT AREA */}
      <section className="py-16 lg:py-24">
        <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          {/* FEATURED GUIDE SPOTLIGHT (Visible when no search active and "All Guides") */}
          {featuredGuide && (
            <div className="mb-16">
              <div className="mb-6 flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <span className="w-2 h-2 rounded-full bg-brand-gold animate-pulse" />
                  <span className="text-xs font-bold uppercase tracking-widest text-brand-dark">
                    Featured Editorial Guide
                  </span>
                </div>
              </div>

              <Link
                href={`/blog/${featuredGuide.slug}`}
                className="group card-luxury block rounded-3xl overflow-hidden bg-white border border-brand-border hover:border-brand-gold transition-all duration-300 p-8 sm:p-12 shadow-sm hover:shadow-xl"
              >
                <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-center">
                  <div className="lg:col-span-7 space-y-5">
                    <div className="flex flex-wrap items-center gap-3">
                      <span className="badge-gold px-3.5 py-1 rounded-full text-xs font-semibold text-brand-dark uppercase tracking-wider">
                        {featuredGuide.tag}
                      </span>
                      <span className="inline-flex items-center gap-1.5 text-xs text-brand-muted">
                        <Clock size={13} />
                        <span>{featuredGuide.readTime}</span>
                      </span>
                      {featuredGuide.publishedAt && (
                        <span className="text-xs text-brand-muted">&bull; {featuredGuide.publishedAt}</span>
                      )}
                    </div>

                    <h2 className="font-title text-2xl sm:text-3xl lg:text-4xl font-bold text-brand-dark group-hover:text-brand-gold transition-colors duration-300 leading-tight">
                      {featuredGuide.title}
                    </h2>

                    <p className="text-sm sm:text-base text-brand-muted leading-relaxed line-clamp-3">
                      {featuredGuide.excerpt}
                    </p>

                    <div className="pt-4 flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-brand-gold group-hover:text-brand-gold-hover">
                      <span>Read Complete Guide</span>
                      <ArrowRight size={14} className="group-hover:translate-x-1 transition-transform" />
                    </div>
                  </div>

                  <div className="lg:col-span-5">
                    <div className="relative aspect-[16/10] sm:aspect-[16/9] lg:aspect-[4/3] rounded-2xl overflow-hidden bg-brand-sand flex flex-col justify-between p-6 sm:p-8 border border-brand-border/60">
                      <div className="flex justify-between items-start">
                        <span className="font-title text-xs uppercase tracking-widest text-brand-gold font-bold">
                          Official Publication
                        </span>
                        <BookOpen className="w-5 h-5 text-brand-gold" />
                      </div>
                      <div>
                        <span className="font-title text-xl sm:text-2xl font-bold text-brand-dark/80 block leading-snug">
                          Vietnam Luxury Wedding Dossier
                        </span>
                        <span className="text-xs text-brand-muted uppercase tracking-wider block mt-1">
                          Editorial Insight by Nhi Võ
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </Link>
            </div>
          )}

          {/* GUIDES GRID */}
          {listGuides.length > 0 ? (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              {listGuides.map((guide) => (
                <Link
                  key={guide.slug}
                  href={`/blog/${guide.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>
                    {/* Decorative Header Card Cover */}
                    <div className="mb-5 relative h-48 rounded-2xl bg-brand-sand flex flex-col justify-between p-5 overflow-hidden border border-brand-border/40">
                      <div className="flex justify-between items-start">
                        <span className="badge-gold px-3 py-1 rounded-full text-xs font-semibold text-brand-dark tracking-wider uppercase">
                          {guide.tag}
                        </span>
                        <span className="inline-flex items-center gap-1 text-xs text-brand-muted">
                          <Clock size={12} />
                          <span>{guide.readTime}</span>
                        </span>
                      </div>
                      <div className="flex items-center justify-between">
                        <span className="font-title text-xs uppercase tracking-widest text-brand-muted">
                          VWG Editorial
                        </span>
                        {guide.publishedAt && (
                          <span className="text-xs text-brand-muted">{guide.publishedAt}</span>
                        )}
                      </div>
                    </div>

                    <h3 className="font-title font-bold text-xl leading-snug text-brand-dark group-hover:text-brand-gold transition-colors duration-300 line-clamp-2">
                      {guide.title}
                    </h3>
                    <p className="mt-3 text-sm text-brand-muted leading-relaxed line-clamp-3">
                      {guide.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-8 h-8 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={16} />
                    </div>
                  </div>
                </Link>
              ))}
            </div>
          ) : (
            <div className="text-center py-20 bg-white rounded-3xl border border-brand-border max-w-xl mx-auto p-8">
              <BookOpen className="w-10 h-10 text-brand-gold mx-auto mb-4" />
              <h3 className="font-title text-xl font-bold text-brand-dark mb-2">
                No Guides Found
              </h3>
              <p className="text-sm text-brand-muted mb-6">
                No editorial guides matched your filter or search query &ldquo;{searchQuery}&rdquo;.
              </p>
              <button
                onClick={() => {
                  setActiveCategory("All Guides");
                  setSearchQuery("");
                }}
                className="bg-brand-gold hover:bg-brand-gold-hover text-white px-6 py-2.5 rounded-full text-xs font-semibold uppercase tracking-widest transition-all duration-300"
              >
                Reset Filters
              </button>
            </div>
          )}
        </div>
      </section>

      {/* 4. EDITORIAL ADVISORY RIBBON */}
      <section className="pb-20 lg:pb-28">
        <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="card-luxury rounded-3xl p-8 sm:p-12 bg-white border border-brand-border flex flex-col md:flex-row items-center justify-between gap-8">
            <div className="max-w-2xl">
              <span className="text-xs font-semibold tracking-widest text-brand-gold uppercase block mb-2">
                Personalized Advisory
              </span>
              <h3 className="font-title text-2xl sm:text-3xl font-bold text-brand-dark mb-3">
                Need Specific Guidance on a Resort or Budget?
              </h3>
              <p className="text-sm text-brand-muted leading-relaxed">
                Our guides provide foundational clarity, but every wedding has unique contract nuances. Connect with our senior destination consultant via WhatsApp for a neutral second opinion.
              </p>
            </div>

            <a
              href={getWhatsAppUrl("Hello Nhi, I am browsing your Vietnam Wedding Guides and have a question regarding an editorial guide.")}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center justify-center gap-2 bg-white hover:bg-brand-sand text-brand-dark border border-brand-border hover:border-brand-gold px-8 py-3.5 rounded-full text-xs font-semibold uppercase tracking-widest shrink-0 transition-all duration-300 shadow-xs hover:shadow-md hover:-translate-y-0.5"
            >
              <WhatsAppIcon className="w-4 h-4 fill-[#25D366] shrink-0" />
              <span>Chat on WhatsApp</span>
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}