"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { MapPin, Clock, ArrowRight } from "lucide-react";
import { api } from "@/lib/api";
import { Navbar } from "@/components/public/Navbar";
import { Footer } from "@/components/public/Footer";

function formatMeetupDate(dateStr: string) {
  const d = new Date(dateStr);
  return {
    month: d.toLocaleString("en-US", { month: "short" }).toUpperCase(),
    day: String(d.getDate()),
    full: d.toLocaleString("en-US", {
      weekday: "long",
      month: "long",
      day: "numeric",
      year: "numeric",
    }),
  };
}

function MeetupCard({ meetup, muted = false }: { meetup: any; muted?: boolean }) {
  const { month, day, full } = formatMeetupDate(meetup.date);
  return (
    <Link
      href={`/events/${meetup.id}`}
      className={`group flex flex-col bg-zinc-900 border rounded-xl p-6 hover:-translate-y-0.5 hover:shadow-xl transition-all duration-200 ${
        muted
          ? "border-zinc-800/60 opacity-70 hover:opacity-100 hover:border-zinc-700"
          : "border-zinc-800 hover:border-zinc-700"
      }`}
    >
      <div className="flex items-start gap-4 mb-4">
        <div className={`rounded-lg px-3 py-2 text-center shrink-0 min-w-[52px] ${muted ? "bg-zinc-800/60" : "bg-zinc-800"}`}>
          <span className={`block text-[10px] font-bold uppercase tracking-wider leading-none mb-0.5 ${muted ? "text-on-surface-variant/50" : "text-primary"}`}>
            {month}
          </span>
          <span className="block text-2xl font-black leading-none">{day}</span>
        </div>
        <div className="min-w-0">
          <h3 className="font-bold text-base leading-snug group-hover:text-primary transition-colors">
            {meetup.title}
          </h3>
          <p className="text-on-surface-variant/60 text-xs mt-1">{full}</p>
        </div>
      </div>

      {meetup.description && (
        <p className="text-on-surface-variant text-sm leading-relaxed mb-4 flex-1 line-clamp-2">
          {meetup.description}
        </p>
      )}

      <div className="flex flex-col gap-1.5 mt-auto pt-4 border-t border-zinc-800/60">
        {meetup.location && (
          <p className="flex items-center gap-1.5 text-xs text-on-surface-variant/60">
            <MapPin size={12} className={`shrink-0 ${muted ? "text-on-surface-variant/40" : "text-primary/60"}`} />
            {meetup.location}
          </p>
        )}
        {meetup.time && (
          <p className="flex items-center gap-1.5 text-xs text-on-surface-variant/60">
            <Clock size={12} className={`shrink-0 ${muted ? "text-on-surface-variant/40" : "text-primary/60"}`} />
            {meetup.time}
          </p>
        )}
      </div>

      <span className={`flex items-center gap-1.5 text-xs font-semibold mt-4 group-hover:gap-2.5 transition-all ${muted ? "text-on-surface-variant/50" : "text-primary"}`}>
        View Details <ArrowRight size={12} />
      </span>
    </Link>
  );
}

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) => new Date(m.date) >= now);
  const past = meetups.filter((m) => new Date(m.date) < 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>
            <h2 className="text-xl font-black mb-8 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>

            {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 />
    </>
  );
}