"use client";

import { useEffect, useState } from "react";
import { api } from "@/lib/api";
import { getMeetupStartUtc } from "@/lib/meetupEventTime";
import { Navbar } from "@/components/public/Navbar";
import { Footer } from "@/components/public/Footer";
import { MeetupCard } from "@/components/public/MeetupCard";
import { AddToCalendarButton } from "@/components/public/AddToCalendarDialog";

function CardSkeleton() {
  return (
    <div className="bg-zinc-900 border border-zinc-800 rounded-xl p-6 animate-pulse">
      <div className="flex items-start gap-4 mb-4">
        <div className="bg-zinc-800 rounded-lg w-[52px] h-[58px] shrink-0" />
        <div className="flex-1 space-y-2">
          <div className="h-4 bg-zinc-800 rounded w-3/4" />
          <div className="h-3 bg-zinc-800 rounded w-1/2" />
        </div>
      </div>
      <div className="space-y-2 mb-4">
        <div className="h-3 bg-zinc-800 rounded w-full" />
        <div className="h-3 bg-zinc-800 rounded w-5/6" />
      </div>
    </div>
  );
}

export default function EventsPage() {
  const [meetups, setMeetups] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    api
      .getMeetups()
      .then((data: any) => {
        const list = Array.isArray(data) ? data : [];
        setMeetups(list);
      })
      .catch((err) => setError(err.message))
      .finally(() => setLoading(false));
  }, []);

  const now = new Date();
  const upcoming = meetups.filter((m) => {
    const start = getMeetupStartUtc(m.date, m.time || "00:00");
    if (Number.isNaN(start.getTime())) return false;
    return start >= now;
  });
  const past = meetups
    .filter((m) => {
      const start = getMeetupStartUtc(m.date, m.time || "00:00");
      if (Number.isNaN(start.getTime())) return false;
      return start < now;
    })
    .reverse();

  return (
    <>
      <Navbar />
      <div className="min-h-screen">
        <header className="pt-24 pb-12 px-8">
          <div className="max-w-6xl mx-auto">
            <p className="uppercase tracking-[0.2em] text-primary mb-2 font-semibold text-xs">
              Belgian Bitcoin Embassy
            </p>
            <h1 className="text-4xl md:text-6xl font-black tracking-tighter mb-4">
              All Events
            </h1>
            <p className="text-on-surface-variant max-w-md leading-relaxed">
              Past and upcoming Bitcoin meetups in Belgium.
            </p>
          </div>
        </header>

        <div className="max-w-6xl mx-auto px-8 pb-24 space-y-20">
          {error && (
            <div className="bg-red-900/20 text-red-400 rounded-xl p-6 text-sm">
              Failed to load events: {error}
            </div>
          )}

          <div>
            <div className="flex items-center justify-between mb-8">
              <h2 className="text-xl font-black flex items-center gap-3">
                Upcoming
                {!loading && upcoming.length > 0 && (
                  <span className="text-xs font-bold bg-primary/10 text-primary px-2.5 py-1 rounded-full">
                    {upcoming.length}
                  </span>
                )}
              </h2>
              <AddToCalendarButton />
            </div>

            {loading ? (
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
                {[0, 1, 2].map((i) => <CardSkeleton key={i} />)}
              </div>
            ) : upcoming.length === 0 ? (
              <div className="border border-zinc-800/60 rounded-xl px-8 py-12 text-center">
                <p className="text-on-surface-variant text-sm">
                  No upcoming events scheduled. Check back soon.
                </p>
              </div>
            ) : (
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
                {upcoming.map((m) => <MeetupCard key={m.id} meetup={m} />)}
              </div>
            )}
          </div>

          {(loading || past.length > 0) && (
            <div>
              <h2 className="text-xl font-black mb-8 text-on-surface-variant/60">
                Past Events
              </h2>

              {loading ? (
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
                  {[0, 1, 2].map((i) => <CardSkeleton key={i} />)}
                </div>
              ) : (
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
                  {past.map((m) => <MeetupCard key={m.id} meetup={m} muted />)}
                </div>
              )}
            </div>
          )}
        </div>
      </div>
      <Footer />
    </>
  );
}