"use client";

import { useState } from "react";
import Link from "next/link";
import { motion } from "framer-motion";
import type { MediaCategory } from "@/lib/media";

export type MediaCard = {
  slug: string;
  title: string;
  category: MediaCategory;
  dateLabel: string;
  location: string;
  excerpt: string;
  image?: string;
};

const categories: ("All" | MediaCategory)[] = [
  "All",
  "Events",
  "Meetings",
  "Press",
];

function PinIcon() {
  return (
    <svg
      width="12"
      height="12"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      className="shrink-0"
    >
      <path d="M12 21s-7-5.2-7-11a7 7 0 0 1 14 0c0 5.8-7 11-7 11Z" />
      <circle cx="12" cy="10" r="2.5" />
    </svg>
  );
}

export default function MediaGrid({
  featured,
  items,
}: {
  featured: MediaCard | null;
  items: MediaCard[];
}) {
  const [active, setActive] = useState<"All" | MediaCategory>("All");
  const shown =
    active === "All" ? items : items.filter((i) => i.category === active);

  return (
    <>
      {/* Featured — flagged or latest story */}
      {featured && (
        <motion.div
          className="mt-14"
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-100px" }}
          transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
        >
          <Link
            href={`/media/${featured.slug}/`}
            className="group grid overflow-hidden rounded-2xl border border-navy-100 bg-white shadow-card transition-shadow duration-300 hover:shadow-cardHover lg:grid-cols-2"
          >
            <div className="relative aspect-[16/10] overflow-hidden bg-navy-900 lg:aspect-auto lg:min-h-[320px]">
              {featured.image ? (
                // eslint-disable-next-line @next/next/no-img-element
                <img
                  src={featured.image}
                  alt={featured.title}
                  className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
                />
              ) : (
                <div className="flex h-full w-full items-center justify-center">
                  <span className="select-none text-5xl font-extrabold tracking-tightest text-gold/25">
                    O1
                  </span>
                </div>
              )}
              <span className="absolute left-4 top-4 rounded-full bg-navy/85 px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-gold-300 backdrop-blur-sm">
                {featured.category}
              </span>
            </div>
            <div className="flex flex-col justify-center p-8 sm:p-10">
              <p className="eyebrow">Latest</p>
              <h2 className="mt-4 text-2xl font-extrabold leading-tight text-navy transition-colors group-hover:text-gold-600">
                {featured.title}
              </h2>
              <p className="mt-4 leading-relaxed text-navy-600">
                {featured.excerpt}
              </p>
              <p className="mt-6 flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-navy-400">
                <span>{featured.dateLabel}</span>
                {featured.location && (
                  <>
                    <span aria-hidden="true">·</span>
                    <span className="inline-flex items-center gap-1.5 normal-case tracking-normal text-navy-500">
                      <PinIcon />
                      {featured.location}
                    </span>
                  </>
                )}
              </p>
            </div>
          </Link>
        </motion.div>
      )}

      {/* Category filter */}
      <div className="mt-14 flex flex-wrap gap-3">
        {categories.map((cat) => (
          <button
            key={cat}
            type="button"
            onClick={() => setActive(cat)}
            aria-pressed={active === cat}
            className={`rounded-full border px-4 py-1.5 text-sm font-semibold transition-all duration-200 ${
              active === cat
                ? "border-navy bg-navy text-white shadow-card"
                : "border-navy-200 bg-white text-navy-600 hover:border-gold hover:text-gold-600"
            }`}
          >
            {cat}
          </button>
        ))}
      </div>

      {/* Article grid */}
      <motion.div
        key={active}
        className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4, ease: [0.25, 0.1, 0.25, 1] }}
      >
        {shown.map((item, i) => (
          <motion.article
            key={item.slug}
            className="group flex flex-col overflow-hidden rounded-xl border border-navy-100 bg-white shadow-card transition-all duration-300 hover:-translate-y-2 hover:border-gold hover:shadow-cardHover"
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{
              duration: 0.5,
              delay: i * 0.08,
              ease: [0.25, 0.1, 0.25, 1],
            }}
          >
            <Link href={`/media/${item.slug}/`} className="flex flex-1 flex-col">
              <div className="relative aspect-[16/10] overflow-hidden bg-navy-900">
                {item.image ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img
                    src={item.image}
                    alt={item.title}
                    loading="lazy"
                    className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
                  />
                ) : (
                  <div className="flex h-full w-full items-center justify-center">
                    <span className="select-none text-4xl font-extrabold tracking-tightest text-gold/25">
                      O1
                    </span>
                  </div>
                )}
                <span className="absolute left-3 top-3 rounded-full bg-navy/85 px-2.5 py-1 text-[10px] font-bold uppercase tracking-widest text-gold-300 backdrop-blur-sm">
                  {item.category}
                </span>
              </div>
              <div className="flex flex-1 flex-col p-6">
                <p className="text-xs font-semibold uppercase tracking-wider text-navy-400">
                  {item.dateLabel}
                </p>
                <h3 className="mt-2 text-lg font-bold leading-snug text-navy transition-colors group-hover:text-gold-600">
                  {item.title}
                </h3>
                <p className="mt-2 flex-1 text-sm leading-relaxed text-navy-500">
                  {item.excerpt}
                </p>
                {item.location && (
                  <p className="mt-4 flex items-center gap-1.5 text-xs text-navy-400">
                    <PinIcon />
                    {item.location}
                  </p>
                )}
              </div>
            </Link>
          </motion.article>
        ))}
      </motion.div>

      {shown.length === 0 && (
        <p className="mt-10 text-center text-navy-500">
          No stories in this category yet.
        </p>
      )}
    </>
  );
}