BelgianBitcoinEmbassy/frontend/app/events/[id]/EventDetailClient.tsx

"use client";

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

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

function DateBadge({ dateStr }: { dateStr: string }) {
  const d = new Date(dateStr);
  const month = d.toLocaleString("en-US", { month: "short" }).toUpperCase();
  const day = String(d.getDate());
  return (
    <div className="bg-zinc-800 rounded-xl px-4 py-3 text-center shrink-0 min-w-[60px]">
      <span className="block text-[11px] font-bold uppercase text-primary tracking-wider leading-none mb-1">
        {month}
      </span>
      <span className="block text-3xl font-black leading-none">{day}</span>
    </div>
  );
}

function EventSkeleton() {
  return (
    <div className="animate-pulse max-w-3xl mx-auto">
      <div className="h-64 bg-zinc-800 rounded-2xl mb-10" />
      <div className="h-8 w-3/4 bg-zinc-800 rounded mb-4" />
      <div className="h-5 w-1/2 bg-zinc-800 rounded mb-8" />
      <div className="space-y-3">
        {[90, 80, 95, 70].map((w, i) => (
          <div key={i} className="h-4 bg-zinc-800 rounded" style={{ width: `${w}%` }} />
        ))}
      </div>
    </div>
  );
}

export default function EventDetailClient({ id }: { id: string }) {
  const [meetup, setMeetup] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!id) return;
    setLoading(true);
    api
      .getMeetup(id)
      .then(setMeetup)
      .catch((err) => setError(err.message))
      .finally(() => setLoading(false));
  }, [id]);

  const isPast = meetup ? new Date(meetup.date) < new Date() : false;

  return (
    <>
      <Navbar />
      <div className="min-h-screen">
        <div className="max-w-3xl mx-auto px-8 pt-12 pb-24">
          <Link
            href="/events"
            className="inline-flex items-center gap-2 text-on-surface-variant hover:text-primary transition-colors mb-12 text-sm font-medium"
          >
            <ArrowLeft size={16} />
            All Events
          </Link>

          {loading && <EventSkeleton />}

          {error && (
            <div className="bg-red-900/20 text-red-400 rounded-xl p-6 text-sm">
              Failed to load event: {error}
            </div>
          )}

          {!loading && !error && meetup && (
            <>
              {meetup.imageId && (
                <div className="rounded-2xl overflow-hidden mb-10 aspect-video bg-zinc-800">
                  <img
                    src={`/media/${meetup.imageId}`}
                    alt={meetup.title}
                    className="w-full h-full object-cover"
                  />
                </div>
              )}

              <div className="flex items-start gap-5 mb-8">
                <DateBadge dateStr={meetup.date} />
                <div className="min-w-0">
                  {isPast && (
                    <span className="inline-block text-[10px] font-bold uppercase tracking-widest text-on-surface-variant/50 bg-zinc-800 px-2.5 py-1 rounded-full mb-3">
                      Past Event
                    </span>
                  )}
                  {!isPast && (
                    <span className="inline-block text-[10px] font-bold uppercase tracking-widest text-primary bg-primary/10 px-2.5 py-1 rounded-full mb-3">
                      Upcoming
                    </span>
                  )}
                  <h1 className="text-3xl md:text-4xl font-black tracking-tight leading-tight">
                    {meetup.title}
                  </h1>
                </div>
              </div>

              <div className="flex flex-wrap gap-4 mb-10 text-sm text-on-surface-variant">
                <div className="flex items-center gap-2">
                  <Calendar size={15} className="text-primary/70 shrink-0" />
                  {formatFullDate(meetup.date)}
                </div>
                {meetup.time && (
                  <div className="flex items-center gap-2">
                    <Clock size={15} className="text-primary/70 shrink-0" />
                    {meetup.time}
                  </div>
                )}
                {meetup.location && (
                  <div className="flex items-center gap-2">
                    <MapPin size={15} className="text-primary/70 shrink-0" />
                    {meetup.location}
                  </div>
                )}
              </div>

              {meetup.description && (
                <div className="prose prose-invert max-w-none mb-12">
                  <p className="text-on-surface-variant leading-relaxed text-base whitespace-pre-wrap">
                    {meetup.description}
                  </p>
                </div>
              )}

              {meetup.link && (
                <a
                  href={meetup.link}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-2 bg-primary text-on-primary px-8 py-4 rounded-xl font-bold text-sm hover:opacity-90 transition-opacity"
                >
                  Register for this event <ExternalLink size={16} />
                </a>
              )}
            </>
          )}
        </div>
      </div>
      <Footer />
    </>
  );
}