"use client";
import React, { useState, useEffect, useCallback, useId } from "react";

import Link from "next/link";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import SidebarAdStack from "@/components/SidebarAdStack";

// ─── Types ────────────────────────────────────────────────────────────────────
interface ArticleBlock {
  title?: string;
  excerpt?: string;
  url?: string;
  category?: string;
  featured?: boolean;
}

interface Newsletter {
  id: string;
  name: string;
  description?: string;
  layout: string;
  subject_prefix?: string;
  header_text?: string;
  accent_color?: string;
  article_blocks: ArticleBlock[];
  created_at: string;
  updated_at: string;
}

// ─── Topic options ─────────────────────────────────────────────────────────────
const TOPICS = [
  "All Topics",
  "Broadcast",
  "Live Production",
  "Post Production",
  "AI & Automation",
  "Products",
  "Technology",
  "Events",
  "Industry News",
  "NAB Show",
  "IBC",
];

const CATEGORIES = [
  "Broadcast",
  "Post Production",
  "Animation",
  "AI & Automation",
  "Live Production",
  "NAB Show",
];

// ─── Newsletter Card ───────────────────────────────────────────────────────────
function NewsletterCard({ newsletter }: { newsletter: Newsletter }) {
  const date = new Date(newsletter.created_at);
  const formattedDate = date.toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
  });
  const blocks = Array.isArray(newsletter.article_blocks)
    ? newsletter.article_blocks.filter((b) => b.title)
    : [];
  const accent = newsletter.accent_color || "#E67E22";

  const layoutLabel: Record<string, string> = {
    featured: "Weekly Digest",
    minimal: "Breaking News",
    "two-column": "Product Spotlight",
    standard: "Industry Report",
  };

  return (
    <article className="bg-[#111] border border-[#222] hover:border-[#333] transition-colors rounded-sm overflow-hidden">
      {/* Accent bar */}
      <div className="h-0.5 w-full" style={{ backgroundColor: accent }} />
      <div className="p-5">
        {/* Meta */}
        <div className="flex items-center gap-2 mb-3">
          <span
            className="font-body text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-sm"
            style={{ color: accent, backgroundColor: `${accent}18` }}>
            {layoutLabel[newsletter.layout] || newsletter.layout}
          </span>
          <span className="text-[#444] text-[10px]">·</span>
          <time className="text-[#555] font-body text-[11px]" dateTime={newsletter.created_at}>
            {formattedDate}
          </time>
        </div>

        {/* Title */}
        <h2 className="font-heading text-[#e0e0e0] text-base font-bold leading-snug mb-2">
          {newsletter.subject_prefix ? (
            <span className="text-[#777] font-normal">{newsletter.subject_prefix} </span>
          ) : null}
          {newsletter.name}
        </h2>

        {/* Description */}
        {newsletter.header_text && (
          <p className="font-body text-[#777] text-sm leading-relaxed mb-4 line-clamp-2">
            {newsletter.header_text}
          </p>
        )}

        {/* Article blocks preview */}
        {blocks.length > 0 && (
          <ul className="space-y-1.5 mb-4">
            {blocks.slice(0, 3).map((block, i) => (
              <li key={i} className="flex items-start gap-2">
                <span className="mt-1.5 w-1 h-1 rounded-full bg-[#444] flex-shrink-0" />
                <span className="font-body text-[#888] text-xs leading-relaxed line-clamp-1">
                  {block.category && (
                    <span className="text-[#E67E22] font-bold mr-1">{block.category}:</span>
                  )}
                  {block.title}
                </span>
              </li>
            ))}
            {blocks.length > 3 && (
              <li className="font-body text-[#555] text-xs pl-3">
                +{blocks.length - 3} more stories
              </li>
            )}
          </ul>
        )}

        {/* Footer */}
        <div className="flex items-center justify-between pt-3 border-t border-[#1a1a1a]">
          <span className="font-body text-[#555] text-xs">
            {blocks.length} {blocks.length === 1 ? "story" : "stories"}
          </span>
          <span className="font-body text-[#E67E22] text-xs font-medium">
            Issue #{newsletter.id.slice(0, 6).toUpperCase()}
          </span>
        </div>
      </div>
    </article>
  );
}

// ─── Signup CTA ────────────────────────────────────────────────────────────────
function SignupCTA() {
  const [email, setEmail] = useState("");
  const [selected, setSelected] = useState<string[]>(["Broadcast"]);
  const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");
  const [message, setMessage] = useState("");
  const formId = useId();

  const toggleCategory = (cat: string) => {
    setSelected((prev) =>
      prev.includes(cat) ? prev.filter((c) => c !== cat) : [...prev, cat]
    );
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      setStatus("error");
      setMessage("Please enter a valid email address.");
      return;
    }
    setStatus("loading");
    setMessage("");
    try {
      const res = await fetch("/api/newsletter/subscribe", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email, topics: selected }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "Failed to subscribe");
      setStatus("success");
    } catch (err: unknown) {
      setStatus("error");
      setMessage(err instanceof Error ? err.message : "Something went wrong. Please try again.");
    }
  };

  return (
    <section
      className="bg-[#0d1520] border border-[#1e3a5f] rounded-sm p-6 md:p-8"
      aria-labelledby={`${formId}-heading`}>
      <div className="flex items-center gap-3 mb-4">
        <div className="flex-1 h-px bg-[#1e3a5f]" />
        <span className="section-label" id={`${formId}-heading`}>Subscribe</span>
        <div className="flex-1 h-px bg-[#1e3a5f]" />
      </div>
      <h3 className="font-heading text-[#e0e0e0] text-xl font-bold text-center mb-1">
        Never Miss an Issue
      </h3>
      <p className="font-body text-[#777] text-sm text-center mb-6">
        Get the latest broadcast industry news delivered to your inbox.
      </p>

      {status === "success" ? (
        <div className="text-center py-4" role="status" aria-live="polite">
          <div className="w-10 h-10 rounded-full bg-[#E67E22]/20 flex items-center justify-center mx-auto mb-3">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
              <path d="M4 10l4 4 8-8" stroke="#E67E22" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>
          <p className="font-heading text-[#e0e0e0] font-bold mb-1">You&apos;re subscribed!</p>
          <p className="font-body text-[#777] text-sm">Check your inbox for a confirmation email.</p>
        </div>
      ) : (
        <form onSubmit={handleSubmit} noValidate>
          {/* Topic chips */}
          <fieldset className="mb-5">
            <legend className="font-body text-xs font-bold text-[#888] uppercase tracking-wider mb-3 block text-center">
              Topics you care about
            </legend>
            <div className="flex flex-wrap justify-center gap-2">
              {CATEGORIES.map((cat) => {
                const checked = selected.includes(cat);
                return (
                  <label
                    key={cat}
                    className={`newsletter-chip ${checked ? "newsletter-chip-active" : ""}`}>
                    <input
                      type="checkbox"
                      checked={checked}
                      onChange={() => toggleCategory(cat)}
                      className="sr-only"
                      aria-label={`Subscribe to ${cat} news`}
                    />
                    <span
                      aria-hidden="true"
                      className={`mr-1.5 inline-block w-3 h-3 rounded-sm border transition-colors ${checked ? "bg-[#E67E22] border-[#E67E22]" : "border-[#444]"}`}>
                      {checked && (
                        <svg viewBox="0 0 12 12" fill="none" className="w-full h-full" aria-hidden="true">
                          <path d="M2 6l3 3 5-5" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                        </svg>
                      )}
                    </span>
                    {cat}
                  </label>
                );
              })}
            </div>
          </fieldset>

          {/* Email + button */}
          <div className="flex flex-col sm:flex-row gap-2 max-w-md mx-auto">
            <div className="flex-1">
              <label htmlFor={`${formId}-email`} className="sr-only">Email address</label>
              <input
                id={`${formId}-email`}
                type="email"
                value={email}
                onChange={(e) => { setEmail(e.target.value); setMessage(""); setStatus("idle"); }}
                placeholder="Enter your email address"
                autoComplete="email"
                aria-required="true"
                aria-invalid={status === "error"}
                disabled={status === "loading"}
                className={`search-input w-full py-2.5 px-4 text-sm ${status === "error" ? "border-red-500" : ""} ${status === "loading" ? "opacity-60 cursor-not-allowed" : ""}`}
              />
            </div>
            <button
              type="submit"
              disabled={status === "loading"}
              className={`btn-subscribe py-2.5 px-6 text-sm whitespace-nowrap focus:outline-none focus-visible:ring-2 focus-visible:ring-[#E67E22] ${status === "loading" ? "opacity-70 cursor-not-allowed" : ""}`}>
              {status === "loading" ? "Subscribing..." : "Subscribe Free"}
            </button>
          </div>

          {status === "error" && message && (
            <p className="font-body text-red-400 text-xs mt-2 text-center" role="alert">
              {message}
            </p>
          )}

          <p className="font-body text-[#555] text-xs mt-3 text-center">
            No spam. Unsubscribe anytime.{" "}
            <Link href="/privacy" className="text-[#E67E22] hover:underline">
              Privacy Policy
            </Link>
          </p>
        </form>
      )}
    </section>
  );
}

// ─── Main Page ─────────────────────────────────────────────────────────────────
export default function NewsletterArchivePage() {
  const [newsletters, setNewsletters] = useState<Newsletter[]>([]);
  const [years, setYears] = useState<number[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  // Filters
  const [selectedTopic, setSelectedTopic] = useState("All Topics");
  const [selectedYear, setSelectedYear] = useState("");
  const [selectedMonth, setSelectedMonth] = useState("");
  const [searchQuery, setSearchQuery] = useState("");

  const MONTHS = [
    { value: "", label: "All Months" },
    { value: "1", label: "January" },
    { value: "2", label: "February" },
    { value: "3", label: "March" },
    { value: "4", label: "April" },
    { value: "5", label: "May" },
    { value: "6", label: "June" },
    { value: "7", label: "July" },
    { value: "8", label: "August" },
    { value: "9", label: "September" },
    { value: "10", label: "October" },
    { value: "11", label: "November" },
    { value: "12", label: "December" },
  ];

  const fetchArchive = useCallback(async () => {
    setLoading(true);
    setError("");
    try {
      const params = new URLSearchParams();
      if (selectedTopic && selectedTopic !== "All Topics") params.set("topic", selectedTopic);
      if (selectedYear) params.set("year", selectedYear);
      if (selectedYear && selectedMonth) params.set("month", selectedMonth);

      const res = await fetch(`/api/newsletter/archive?${params.toString()}`);
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "Failed to load archive");
      setNewsletters(data.newsletters || []);
      setYears(data.years || []);
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : "Failed to load newsletter archive.");
    } finally {
      setLoading(false);
    }
  }, [selectedTopic, selectedYear, selectedMonth]);

  useEffect(() => {
    fetchArchive();
  }, [fetchArchive]);

  // Client-side text search on top of server results
  const filtered = newsletters.filter((n) => {
    if (!searchQuery.trim()) return true;
    const q = searchQuery.toLowerCase();
    return (
      n.name?.toLowerCase().includes(q) ||
      n.description?.toLowerCase().includes(q) ||
      n.header_text?.toLowerCase().includes(q) ||
      (Array.isArray(n.article_blocks) &&
        n.article_blocks.some(
          (b) =>
            b.title?.toLowerCase().includes(q) ||
            b.category?.toLowerCase().includes(q)
        ))
    );
  });

  const handleClearFilters = () => {
    setSelectedTopic("All Topics");
    setSelectedYear("");
    setSelectedMonth("");
    setSearchQuery("");
  };

  const hasActiveFilters =
    selectedTopic !== "All Topics" || selectedYear || selectedMonth || searchQuery;

  return (
    <div className="min-h-screen bg-background">
      <Header />

      {/* Hero */}
      <div className="bg-[#111] border-b border-[#222] py-8">
        <div className="max-w-container mx-auto px-4">
          <div className="flex items-center gap-3 mb-2">
            <span className="section-label">Newsletter</span>
            <div className="flex-1 h-px bg-[#2a2a2a]" />
          </div>
          <h1 className="font-heading text-white text-3xl font-bold">Newsletter Archive</h1>
          <p className="text-[#777] font-body text-sm mt-2">
            Browse past issues of the AV Beat newsletter — searchable by date and topic.
          </p>
        </div>
      </div>

      <main className="max-w-container mx-auto px-4 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">

          {/* ── Left: Archive list ─────────────────────────────────────────── */}
          <div className="lg:col-span-8">

            {/* Search bar */}
            <div className="mb-5">
              <label htmlFor="archive-search" className="sr-only">Search newsletters</label>
              <div className="relative">
                <svg
                  className="absolute left-3 top-1/2 -translate-y-1/2 text-[#555]"
                  width="16" height="16" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
                  aria-hidden="true">
                  <circle cx="11" cy="11" r="8" />
                  <path d="m21 21-4.35-4.35" />
                </svg>
                <input
                  id="archive-search"
                  type="search"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  placeholder="Search newsletters by title, topic, or content…"
                  className="search-input w-full py-2.5 pl-9 pr-4 text-sm"
                />
              </div>
            </div>

            {/* Topic filter chips */}
            <div className="flex flex-wrap gap-2 mb-5" role="group" aria-label="Filter by topic">
              {TOPICS.map((topic) => (
                <button
                  key={topic}
                  onClick={() => setSelectedTopic(topic)}
                  className={`font-body text-xs px-3 py-1.5 rounded-sm border transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#E67E22] ${
                    selectedTopic === topic
                      ? "bg-[#E67E22] border-[#E67E22] text-white"
                      : "bg-transparent border-[#333] text-[#888] hover:border-[#555] hover:text-[#ccc]"
                  }`}
                  aria-pressed={selectedTopic === topic}>
                  {topic}
                </button>
              ))}
            </div>

            {/* Date filters */}
            <div className="flex flex-wrap gap-3 mb-6">
              <div>
                <label htmlFor="filter-year" className="sr-only">Filter by year</label>
                <select
                  id="filter-year"
                  value={selectedYear}
                  onChange={(e) => { setSelectedYear(e.target.value); setSelectedMonth(""); }}
                  className="search-input py-2 px-3 text-sm min-w-[120px]">
                  <option value="">All Years</option>
                  {years.map((y) => (
                    <option key={y} value={String(y)}>{y}</option>
                  ))}
                </select>
              </div>
              {selectedYear && (
                <div>
                  <label htmlFor="filter-month" className="sr-only">Filter by month</label>
                  <select
                    id="filter-month"
                    value={selectedMonth}
                    onChange={(e) => setSelectedMonth(e.target.value)}
                    className="search-input py-2 px-3 text-sm min-w-[140px]">
                    {MONTHS.map((m) => (
                      <option key={m.value} value={m.value}>{m.label}</option>
                    ))}
                  </select>
                </div>
              )}
              {hasActiveFilters && (
                <button
                  onClick={handleClearFilters}
                  className="font-body text-xs text-[#E67E22] hover:text-[#E67E22] transition-colors underline focus:outline-none focus-visible:ring-2 focus-visible:ring-[#E67E22]">
                  Clear filters
                </button>
              )}
            </div>

            {/* Results count */}
            {!loading && (
              <p className="font-body text-[#555] text-xs mb-4" aria-live="polite">
                {filtered.length === 0
                  ? "No newsletters found"
                  : `${filtered.length} ${filtered.length === 1 ? "issue" : "issues"} found`}
                {hasActiveFilters && " (filtered)"}
              </p>
            )}

            {/* Loading */}
            {loading && (
              <div className="space-y-4" aria-busy="true" aria-label="Loading newsletters">
                {[1, 2, 3].map((i) => (
                  <div key={i} className="bg-[#111] border border-[#222] rounded-sm p-5 animate-pulse">
                    <div className="h-3 bg-[#1e1e1e] rounded w-24 mb-3" />
                    <div className="h-5 bg-[#1e1e1e] rounded w-3/4 mb-2" />
                    <div className="h-3 bg-[#1e1e1e] rounded w-full mb-1" />
                    <div className="h-3 bg-[#1e1e1e] rounded w-2/3" />
                  </div>
                ))}
              </div>
            )}

            {/* Error */}
            {!loading && error && (
              <div className="bg-[#1a0a0a] border border-red-900 rounded-sm p-5 text-center" role="alert">
                <p className="font-body text-red-400 text-sm mb-3">{error}</p>
                <button
                  onClick={fetchArchive}
                  className="font-body text-xs text-[#E67E22] hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-[#E67E22]">
                  Try again
                </button>
              </div>
            )}

            {/* Empty state */}
            {!loading && !error && filtered.length === 0 && (
              <div className="text-center py-16 border border-[#222] rounded-sm">
                <svg
                  className="mx-auto mb-4 text-[#333]"
                  width="48" height="48" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"
                  aria-hidden="true">
                  <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
                  <polyline points="22,6 12,13 2,6" />
                </svg>
                <p className="font-heading text-[#555] text-base font-bold mb-1">No newsletters found</p>
                <p className="font-body text-[#444] text-sm mb-4">
                  Try adjusting your filters or search query.
                </p>
                <button
                  onClick={handleClearFilters}
                  className="font-body text-xs text-[#E67E22] hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-[#E67E22]">
                  Clear all filters
                </button>
              </div>
            )}

            {/* Newsletter grid */}
            {!loading && !error && filtered.length > 0 && (
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                {filtered.map((newsletter) => (
                  <NewsletterCard key={newsletter.id} newsletter={newsletter} />
                ))}
              </div>
            )}
          </div>

          {/* ── Right: Sidebar ─────────────────────────────────────────────── */}
          <aside className="lg:col-span-4 space-y-6">
            {/* 300x600 + rotating 300x250 stack */}
            <SidebarAdStack />

            {/* Signup CTA */}
            <SignupCTA />

            {/* Browse by topic */}
            <div className="bg-[#111] border border-[#222] rounded-sm p-5">
              <h3 className="font-heading text-[#e0e0e0] text-sm font-bold uppercase tracking-wider mb-4">
                Browse by Topic
              </h3>
              <ul className="space-y-1">
                {TOPICS.filter((t) => t !== "All Topics").map((topic) => (
                  <li key={topic}>
                    <button
                      onClick={() => setSelectedTopic(topic)}
                      className={`w-full text-left font-body text-sm py-1.5 px-2 rounded-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#E67E22] ${
                        selectedTopic === topic
                          ? "text-[#E67E22] bg-[#E67E22]/10"
                          : "text-[#888] hover:text-[#ccc] hover:bg-[#1a1a1a]"
                      }`}>
                      {topic}
                    </button>
                  </li>
                ))}
              </ul>
            </div>

            {/* Browse by year */}
            {years.length > 0 && (
              <div className="bg-[#111] border border-[#222] rounded-sm p-5">
                <h3 className="font-heading text-[#e0e0e0] text-sm font-bold uppercase tracking-wider mb-4">
                  Browse by Year
                </h3>
                <ul className="space-y-1">
                  {years.map((year) => (
                    <li key={year}>
                      <button
                        onClick={() => { setSelectedYear(String(year)); setSelectedMonth(""); }}
                        className={`w-full text-left font-body text-sm py-1.5 px-2 rounded-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#E67E22] ${
                          selectedYear === String(year)
                            ? "text-[#E67E22] bg-[#E67E22]/10"
                            : "text-[#888] hover:text-[#ccc] hover:bg-[#1a1a1a]"
                        }`}>
                        {year}
                      </button>
                    </li>
                  ))}
                </ul>
              </div>
            )}
          </aside>
        </div>
      </main>

      <Footer />
    </div>
  );
}