import { CalendarDays, MapPin, Users } from "lucide-react";
import Modal from "@/components/ui/Modal";
import type { EventRow } from "@/components/business/BusinessPanelEvents";

type Props = { event: EventRow; onClose(): void };

export default function EventDetailModal({ event, onClose }: Props) {
  const locations = event.hostingLocations?.map(({ location }) => location.name) ?? [event.location.name];

  return (
    <Modal title={event.title} description="Event details" wide onClose={onClose}>
      <div className="space-y-5 overflow-y-auto px-5 py-5 sm:px-6">
        {event.imageUrl && <img src={event.imageUrl} alt="" className="h-48 w-full rounded-xl object-cover" />}
        <div className="flex flex-wrap gap-2">
          <span className="rounded-full bg-[var(--accent-muted)] px-2.5 py-1 text-xs font-medium text-[var(--accent-hover)]">{event.status.toLowerCase()}</span>
          {event.categories[0] && <span className="rounded-full bg-[var(--bg-hover)] px-2.5 py-1 text-xs text-[var(--text-muted)]">{event.categories[0].category.name}</span>}
          {event.recurrence !== "NONE" && <span className="rounded-full bg-[var(--bg-hover)] px-2.5 py-1 text-xs text-[var(--text-muted)]">{event.recurrence.toLowerCase()}</span>}
        </div>
        {event.description && <p className="text-sm leading-6 text-[var(--text-muted)]">{event.description}</p>}
        <div className="grid gap-3 sm:grid-cols-2">
          <div className="rounded-xl border border-[var(--border)] bg-[var(--bg)]/50 p-3"><CalendarDays className="h-4 w-4 text-[var(--accent)]" /><p className="mt-2 text-xs text-[var(--text-faint)]">Schedule</p><p className="mt-1 text-sm font-medium">{new Date(event.startsAt).toLocaleString()}</p>{event.endsAt && <p className="mt-1 text-xs text-[var(--text-muted)]">Ends {new Date(event.endsAt).toLocaleString()}</p>}</div>
          <div className="rounded-xl border border-[var(--border)] bg-[var(--bg)]/50 p-3"><MapPin className="h-4 w-4 text-[var(--accent)]" /><p className="mt-2 text-xs text-[var(--text-faint)]">Venue</p><p className="mt-1 text-sm font-medium">{event.venueMode === "ON_SITE" ? event.venueName || event.venueAddress : locations.join(", ")}</p>{event.venueMode === "ON_SITE" && event.venueAddress && <p className="mt-1 text-xs text-[var(--text-muted)]">{event.venueAddress}</p>}</div>
          <div className="rounded-xl border border-[var(--border)] bg-[var(--bg)]/50 p-3"><Users className="h-4 w-4 text-[var(--accent)]" /><p className="mt-2 text-xs text-[var(--text-faint)]">Attendance</p><p className="mt-1 text-sm font-medium">{event._count.registrations}{event.capacity ? ` / ${event.capacity}` : " attendees"}</p></div>
        </div>
      </div>
    </Modal>
  );
}