"use client";

import SiteHeader from "./SiteHeader";
import SiteFooter from "./SiteFooter";
import Image from "next/image";
import Link from "next/link";
import { motion } from "framer-motion";
import {
  ArrowLeft,
  ArrowRight,
  CalendarDays,
  Gamepad2,
  MessageCircleMore,
  Sparkles,
  Trophy,
  UsersRound,
} from "lucide-react";
import { communityEvents } from "../lib-events";

const reveal = {
  initial: { opacity: 0, y: 22 },
  whileInView: { opacity: 1, y: 0 },
  viewport: { once: true, amount: 0.12 },
  transition: { duration: 0.55 },
};

const formatDate = (value: string) =>
  new Intl.DateTimeFormat("de-DE", {
    weekday: "short",
    day: "2-digit",
    month: "short",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  }).format(new Date(value));

export default function EventsDirectory() {
  const now = new Date();
  const upcoming = communityEvents
    .filter((event) => new Date(event.startsAt).getTime() >= now.getTime())
    .sort((a, b) => new Date(a.startsAt).getTime() - new Date(b.startsAt).getTime());
  const past = communityEvents
    .filter((event) => new Date(event.startsAt).getTime() < now.getTime())
    .sort((a, b) => new Date(b.startsAt).getTime() - new Date(a.startsAt).getTime());
  const nextEvent = upcoming[0];

  return (
    <main className="subpage events-page">
      <div className="subpage-atmosphere" />
      <SiteHeader />

      <section className="shell events-hero">
        <motion.div initial={{opacity:0,y:24}} animate={{opacity:1,y:0}} transition={{duration:.65}} className="events-hero-copy">
          <Link href="/" className="back-link"><ArrowLeft size={15}/> Zur Startseite</Link>
          <span className="kicker">COMMUNITY EVENTS</span>
          <h1>Zusammen zocken.<br/><span className="gradient-text">Zusammen erleben.</span></h1>
          <p>Gaming Nights, Turniere, Specials und spontane Community-Aktionen bekommen hier einen festen Platz. Nur bestätigte Termine werden veröffentlicht.</p>
          <div className="events-hero-actions">
            <a href="https://discord.com/invite/pTNwsZrvym" target="_blank" rel="noopener noreferrer" className="button primary">Auf Discord dabei sein <UsersRound size={17}/></a>
            <a href="#event-list" className="button secondary">Termine ansehen <CalendarDays size={17}/></a>
          </div>
        </motion.div>
        <motion.div initial={{opacity:0,scale:.95}} animate={{opacity:1,scale:1}} transition={{duration:.7,delay:.08}} className="events-hero-art">
          <div className="events-hero-orb"><CalendarDays size={54}/><span>NEXT UP</span><strong>{nextEvent ? formatDate(nextEvent.startsAt) : "Noch kein Termin"}</strong></div>
          <Image src="/bexogames-logo.png" alt="BexoGames" width={390} height={390} priority/>
        </motion.div>
      </section>

      <section id="event-list" className="shell events-directory">
        <div className="events-directory-head">
          <div><span className="kicker">WAS STEHT AN?</span><h2>Die nächsten Community-Termine.</h2></div>
          <p>Keine Fake-Termine. Sobald etwas feststeht, erscheint es hier.</p>
        </div>

        {upcoming.length > 0 ? (
          <div className="event-list-grid">
            {upcoming.map((event, index) => (
              <motion.article {...reveal} key={event.id} className={`event-list-card ${index === 0 ? "featured" : ""}`}>
                <div className="event-list-date"><CalendarDays size={18}/><span>{formatDate(event.startsAt)}</span></div>
                <div className="event-list-copy"><small>{event.type}{event.game ? ` • ${event.game}` : ""}</small><h3>{event.title}</h3><p>{event.description}</p></div>
                <a href="https://discord.com/invite/pTNwsZrvym" target="_blank" rel="noopener noreferrer" className="event-list-action">Auf Discord <ArrowRight size={17}/></a>
              </motion.article>
            ))}
          </div>
        ) : (
          <motion.div {...reveal} className="events-empty-state">
            <div className="events-empty-icon"><CalendarDays size={32}/></div>
            <span className="kicker">AKTUELL NOCH FREI</span>
            <h3>Der nächste Termin wird gerade noch geplant.</h3>
            <p>Sobald ein Community-Event feststeht, taucht es hier automatisch als nächster Termin auf. Bis dahin läuft die spontane Planung wie gewohnt über Discord.</p>
            <a href="https://discord.com/invite/pTNwsZrvym" target="_blank" rel="noopener noreferrer" className="button primary">Discord öffnen <ArrowRight size={17}/></a>
          </motion.div>
        )}
      </section>

      <section className="shell events-types">
        <motion.div {...reveal} className="events-type"><Gamepad2/><span><small>01</small><b>Gaming Nights</b><p>Gemeinsam in ein Game rein, ohne unnötigen Turnierdruck.</p></span></motion.div>
        <motion.div {...reveal} className="events-type"><Trophy/><span><small>02</small><b>Turniere</b><p>Wenn es kompetitiver werden darf – mit klarer Ankündigung und Ablauf.</p></span></motion.div>
        <motion.div {...reveal} className="events-type"><Sparkles/><span><small>03</small><b>Specials</b><p>Besondere Aktionen, Community-Projekte und alles, was nicht in eine Schublade passt.</p></span></motion.div>
        <motion.div {...reveal} className="events-type"><MessageCircleMore/><span><small>04</small><b>Spontan</b><p>Nicht alles braucht Wochen Vorlauf. Vieles entsteht direkt aus der Community.</p></span></motion.div>
      </section>

      {past.length > 0 && (
        <section className="shell events-past">
          <span className="kicker">VERGANGENE EVENTS</span>
          <h2>Was schon gelaufen ist.</h2>
          <div className="events-past-row">{past.slice(0, 6).map((event) => <div key={event.id}><small>{formatDate(event.startsAt)}</small><strong>{event.title}</strong></div>)}</div>
        </section>
      )}

      <section className="shell event-join-banner">
        <div><span className="kicker">DEINE IDEE?</span><h2>Ein Event muss nicht von uns kommen.</h2><p>Wenn du eine Idee für einen Community-Abend hast, bring sie auf Discord mit rein. BexoGames lebt davon, dass Leute mitmachen.</p></div>
        <a href="https://discord.com/invite/pTNwsZrvym" target="_blank" rel="noopener noreferrer" className="button primary big">Zur Community <UsersRound size={19}/></a>
      </section>
      <SiteFooter />
    </main>
  );
}