import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import Script from "next/script";
import { notFound } from "next/navigation";
import {
  FaCalendarAlt,
  FaMapMarkerAlt,
  FaArrowLeft,
  FaUsers,
} from "react-icons/fa";

import Breadcrumb from "@/components/common/Breadcrumb";
import CTA from "@/components/common/CTA";

const SITE_URL = "https://www.rajvisocialwelfare.org";

const events = [
  {
    title: "Education Awareness Drive",
    slug: "education-awareness-drive",
    category: "Education",
    image: "/images/1.webp",
    date: "2026-07-10",
    displayDate: "Upcoming",
    location: "India",
    description:
      "A community-focused education awareness program promoting learning opportunities and student support.",
    content:
      "This event focuses on promoting education awareness, encouraging school participation, supporting students and spreading awareness about lifelong learning opportunities.",
  },
  {
    title: "Healthcare Awareness Camp",
    slug: "healthcare-awareness-camp",
    category: "Healthcare",
    image: "/images/2.webp",
    date: "2026-07-18",
    displayDate: "Upcoming",
    location: "India",
    description:
      "Healthcare awareness initiative focused on preventive care and community well-being.",
    content:
      "The healthcare awareness camp aims to educate communities about preventive healthcare, hygiene, nutrition and healthy lifestyle practices.",
  },
  {
    title: "Women Empowerment Workshop",
    slug: "women-empowerment-workshop",
    category: "Women Empowerment",
    image: "/images/3.webp",
    date: "2026-07-24",
    displayDate: "Upcoming",
    location: "India",
    description:
      "Workshop designed to promote awareness, dignity and opportunities for women.",
    content:
      "The workshop focuses on confidence building, awareness, skill development and empowering women to participate actively in social and economic development.",
  },
  {
    title: "Environmental Awareness Campaign",
    slug: "environmental-awareness-campaign",
    category: "Environment",
    image: "/images/4.webp",
    date: "2026-08-08",
    displayDate: "Upcoming",
    location: "India",
    description:
      "Campaign encouraging sustainable living and environmental responsibility.",
    content:
      "This campaign promotes cleanliness, plantation drives, waste reduction and environmental awareness among communities.",
  },
  {
    title: "Youth Development Session",
    slug: "youth-development-session",
    category: "Youth Development",
    image: "/images/5.webp",
    date: "2026-08-15",
    displayDate: "Upcoming",
    location: "India",
    description:
      "Youth-focused leadership and awareness development program.",
    content:
      "The session encourages leadership, social responsibility, awareness and skill development among young people.",
  },
  {
    title: "Community Welfare Outreach",
    slug: "community-welfare-outreach",
    category: "Community Welfare",
    image: "/images/6.webp",
    date: "2026-08-22",
    displayDate: "Upcoming",
    location: "India",
    description:
      "Volunteer-led welfare outreach supporting underserved communities.",
    content:
      "The outreach initiative aims to provide support, awareness and welfare assistance to communities in need.",
  },
];

type Props = {
  params: Promise<{
    slug: string;
  }>;
};

export function generateStaticParams() {
  return events.map((event) => ({
    slug: event.slug,
  }));
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const event = events.find((item) => item.slug === slug);

  if (!event) {
    return {
      title: "Event Not Found",
      robots: {
        index: false,
        follow: false,
      },
    };
  }

  return {
    title: event.title,
    description: event.description,
    alternates: {
      canonical: `/events/${event.slug}`,
    },
    openGraph: {
      title: event.title,
      description: event.description,
      url: `${SITE_URL}/events/${event.slug}`,
      type: "website",
      images: [
        {
          url: event.image,
          width: 1200,
          height: 630,
          alt: event.title,
        },
      ],
    },
    twitter: {
      card: "summary_large_image",
      title: event.title,
      description: event.description,
      images: [event.image],
    },
  };
}

export default async function EventDetailsPage({ params }: Props) {
  const { slug } = await params;
  const event = events.find((item) => item.slug === slug);

  if (!event) {
    notFound();
  }

  const eventSchema = {
    "@context": "https://schema.org",
    "@type": "Event",
    name: event.title,
    description: event.description,
    image: `${SITE_URL}${event.image}`,
    startDate: event.date,
    eventAttendanceMode: "https://schema.org/OfflineEventAttendanceMode",
    eventStatus: "https://schema.org/EventScheduled",
    location: {
      "@type": "Place",
      name: event.location,
      address: {
        "@type": "PostalAddress",
        addressCountry: "IN",
      },
    },
    organizer: {
      "@type": "NGO",
      name: "Rajvi Social Welfare Trust",
      url: SITE_URL,
    },
    url: `${SITE_URL}/events/${event.slug}`,
  };

  return (
    <>
      <Script
        id={`event-schema-${event.slug}`}
        type="application/ld+json"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(eventSchema),
        }}
      />

      <section className="relative overflow-hidden bg-slate-950 pb-20 pt-32 text-white sm:pt-36 lg:pt-40">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(251,191,36,0.15),transparent_40%)]" />

        <div className="relative z-10 mx-auto max-w-5xl px-4 text-center sm:px-6 lg:px-8">
          <span className="inline-flex rounded-full bg-white/10 px-4 py-2 text-xs font-bold uppercase tracking-widest text-[var(--accent)]">
            {event.category}
          </span>

          <h1 className="mt-6 text-4xl font-extrabold leading-tight sm:text-5xl lg:text-6xl">
            {event.title}
          </h1>

          <div className="mt-6 flex flex-wrap items-center justify-center gap-5 text-sm text-slate-300">
            <span className="flex items-center gap-2">
              <FaCalendarAlt className="text-[var(--accent)]" />
              {event.displayDate}
            </span>

            <span className="flex items-center gap-2">
              <FaMapMarkerAlt className="text-[var(--accent)]" />
              {event.location}
            </span>
          </div>
        </div>
      </section>

      <Breadcrumb />

      <section className="bg-white py-14 sm:py-16 lg:py-24">
        <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
          <div className="overflow-hidden rounded-3xl shadow-sm">
            <div className="relative h-[250px] sm:h-[350px] lg:h-[500px]">
              <Image
                src={event.image}
                alt={event.title}
                fill
                priority
                sizes="(max-width: 768px) 100vw, 1024px"
                className="object-cover"
              />
            </div>
          </div>

          <div className="mt-10">
            <div className="inline-flex items-center gap-2 rounded-full bg-amber-50 px-4 py-2 text-sm font-semibold text-amber-700">
              <FaUsers />
              Community Event
            </div>

            <h2 className="mt-6 text-3xl font-extrabold text-slate-950">
              Event Overview
            </h2>

            <p className="mt-5 text-lg leading-8 text-slate-600">
              {event.description}
            </p>

            <div className="mt-8 rounded-3xl bg-slate-50 p-6 sm:p-8">
              <h3 className="text-2xl font-bold text-slate-950">
                About This Event
              </h3>

              <p className="mt-4 leading-8 text-slate-600">
                {event.content}
              </p>
            </div>

            <div className="mt-10 rounded-3xl border border-amber-200 bg-amber-50 p-6 sm:p-8">
              <h3 className="text-2xl font-bold text-slate-950">
                Participate & Support
              </h3>

              <p className="mt-4 leading-8 text-slate-700">
                Join Rajvi Social Welfare Trust in creating positive social
                impact through awareness programs, volunteer activities and
                community welfare initiatives.
              </p>

              <div className="mt-6 flex flex-col gap-4 sm:flex-row">
                <Link
                  href="/volunteers"
                  className="rounded-xl bg-[var(--accent)] px-6 py-4 text-center text-sm font-bold text-black"
                >
                  Become Volunteer
                </Link>

                <Link
                  href="/donate-now"
                  className="rounded-xl bg-slate-950 px-6 py-4 text-center text-sm font-bold text-white"
                >
                  Donate Now
                </Link>
              </div>
            </div>

            <div className="mt-10">
              <Link
                href="/events"
                className="inline-flex items-center gap-2 text-sm font-bold text-amber-600"
              >
                <FaArrowLeft />
                Back to Events
              </Link>
            </div>
          </div>
        </div>
      </section>

      <CTA />
    </>
  );
}