"use client";
import { useCallback, useEffect, useState } from "react";
import { CalendarDays, Pencil, Plus, Search, Tag, Trash2, Users } from "lucide-react";
import Button from "@/components/ui/Button";
import ConfirmModal from "@/components/ui/ConfirmModal";
import EventFormModal from "@/components/business/EventFormModal";
import EventCategoryModal from "@/components/business/EventCategoryModal";
import EventDetailModal from "@/components/business/EventDetailModal";
import { useBusinessPanelAccess } from "@/hooks/useBusinessPanelAccess";
export type EventRow = {
  id: string;
  title: string;
  description: string | null;
  startsAt: string;
  endsAt: string | null;
  timezone: string;
  locationId: string;
  venueMode: "HOST_LOCATION" | "ON_SITE";
  venueName: string | null;
  venueAddress: string | null;
  imageUrl: string | null;
  capacity: number | null;
  isOutdoor: boolean;
  status: "DRAFT" | "PUBLISHED" | "CANCELLED" | "ARCHIVED";
  recurrence: "NONE" | "DAILY" | "WEEKLY" | "MONTHLY";
  recurrenceEndsAt: string | null;
  categories: {
    category: { id: string; name: string; slug: string };
  }[];
  location: {
    id: string;
    name: string;
  };
  hostingLocations: { location: { id: string; name: string } }[];
  _count: {
    registrations: number;
  };
};
type LocationOption = {
  id: string;
  name: string;
};
export default function BusinessPanelEvents() {
  const { businessId, canManageEvents } = useBusinessPanelAccess();
  const [events, setEvents] = useState<EventRow[]>([]);
  const [locations, setLocations] = useState<LocationOption[]>([]);
  const [loading, setLoading] = useState(true);
  const [editing, setEditing] = useState<EventRow | null | undefined>(
    undefined,
  );
  const [deleting, setDeleting] = useState<EventRow | null>(null);
  const [addingCategory, setAddingCategory] = useState(false);
  const [viewing, setViewing] = useState<EventRow | null>(null);
  const [query, setQuery] = useState("");
  const [statusFilter, setStatusFilter] = useState("ALL");
  const [locationFilter, setLocationFilter] = useState("ALL");
  const [recurrenceFilter, setRecurrenceFilter] = useState("ALL");
  const load = useCallback(async () => {
    if (!businessId) return;
    setLoading(true);
    try {
      const [eventsRes, panelRes] = await Promise.all([
        fetch(`/api/businesses/${businessId}/events?showArchived=true`),
        fetch("/api/business-panel"),
      ]);
      if (eventsRes.ok) setEvents(await eventsRes.json());
      if (panelRes.ok) setLocations((await panelRes.json()).locations ?? []);
    } finally {
      setLoading(false);
    }
  }, [businessId]);
  useEffect(() => {
    load();
  }, [load]);
  async function remove() {
    if (!deleting || !businessId) return;
    await fetch(`/api/businesses/${businessId}/events/${deleting.id}`, {
      method: "DELETE",
    });
    setDeleting(null);
    load();
  }
  const filteredEvents = events.filter((event) => {
    const value = query.trim().toLowerCase();
    const matchesSearch = !value || [event.title, event.location.name, ...event.categories.map(({ category }) => category.name)].some((item) => item.toLowerCase().includes(value));
    const matchesStatus = statusFilter === "ALL" ? event.status !== "ARCHIVED" : event.status === statusFilter;
    return matchesSearch && matchesStatus && (locationFilter === "ALL" || event.hostingLocations?.some(({ location }) => location.id === locationFilter) || event.locationId === locationFilter) && (recurrenceFilter === "ALL" || event.recurrence === recurrenceFilter);
  });
  const publishedCount = events.filter((event) => event.status === "PUBLISHED").length;
  const draftCount = events.filter((event) => event.status === "DRAFT").length;
  return (
    <div className="space-y-4">
      <div className="flex flex-col justify-between gap-3 sm:flex-row">
        <div>
          <h2 className="text-lg font-semibold text-[var(--text)]">Events</h2>
          <p className="mt-1 text-sm text-[var(--text-muted)]">
            Plan and publish events for your locations.
          </p>
        </div>
        {canManageEvents && (
          <div className="flex flex-wrap gap-2">
            <Button variant="secondary" onClick={() => setAddingCategory(true)}>
              <Tag className="h-4 w-4" />
              Add category
            </Button>
            <Button onClick={() => setEditing(null)}>
              <Plus className="h-4 w-4" />
              Add event
            </Button>
          </div>
        )}
      </div>
      {!loading && (
        <div className="mt-5 grid grid-cols-3 gap-2 sm:max-w-md">
          <div className="rounded-xl border border-[var(--border)] bg-[var(--bg)]/40 px-3 py-2.5"><p className="text-xs text-[var(--text-faint)]">Total</p><p className="mt-1 text-lg font-semibold">{events.length}</p></div>
          <div className="rounded-xl border border-[var(--border)] bg-[var(--bg)]/40 px-3 py-2.5"><p className="text-xs text-[var(--text-faint)]">Published</p><p className="mt-1 text-lg font-semibold text-emerald-400">{publishedCount}</p></div>
          <div className="rounded-xl border border-[var(--border)] bg-[var(--bg)]/40 px-3 py-2.5"><p className="text-xs text-[var(--text-faint)]">Drafts</p><p className="mt-1 text-lg font-semibold text-amber-400">{draftCount}</p></div>
        </div>
      )}
      {!loading && events.length > 0 && (
        <div className="mt-4 rounded-xl border border-[var(--border)] bg-[var(--bg)]/40 p-3">
          <div className="grid gap-2 lg:grid-cols-[minmax(0,1fr)_170px_170px_170px]">
            <label className="relative">
              <Search className="pointer-events-none absolute start-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--text-faint)]" />
              <input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Search events, locations, or categories" className="w-full rounded-lg border border-[var(--border)] bg-[var(--bg-elevated)] px-3 py-2.5 ps-9 text-sm text-[var(--text)]" />
            </label>
            <select value={statusFilter} onChange={(event) => setStatusFilter(event.target.value)} className="rounded-lg border border-[var(--border)] bg-[var(--bg-elevated)] px-3 py-2.5 text-sm text-[var(--text)]"><option value="ALL">All statuses</option><option value="DRAFT">Draft</option><option value="PUBLISHED">Published</option><option value="CANCELLED">Cancelled</option><option value="ARCHIVED">Archived</option></select>
            <select value={locationFilter} onChange={(event) => setLocationFilter(event.target.value)} className="rounded-lg border border-[var(--border)] bg-[var(--bg-elevated)] px-3 py-2.5 text-sm text-[var(--text)]"><option value="ALL">All locations</option>{locations.map((location) => <option key={location.id} value={location.id}>{location.name}</option>)}</select>
            <select value={recurrenceFilter} onChange={(event) => setRecurrenceFilter(event.target.value)} className="rounded-lg border border-[var(--border)] bg-[var(--bg-elevated)] px-3 py-2.5 text-sm text-[var(--text)]"><option value="ALL">All schedules</option><option value="NONE">One-time</option><option value="DAILY">Daily</option><option value="WEEKLY">Weekly</option><option value="MONTHLY">Monthly</option></select>
          </div>
          <p className="mt-2 text-xs text-[var(--text-faint)]">{filteredEvents.length} {filteredEvents.length === 1 ? "event matches" : "events match"} the current view</p>
        </div>
      )}
      {loading ? (
        <p className="text-sm text-[var(--text-muted)]">Loading events…</p>
      ) : filteredEvents.length === 0 ? (
        <div className="rounded-xl border border-dashed border-[var(--border)] py-12 text-center">
          <CalendarDays className="mx-auto mb-2 h-8 w-8 text-[var(--text-faint)]" />
          <p className="text-sm text-[var(--text-muted)]">
            {events.length ? "No events match your search." : "No upcoming events."}
          </p>
        </div>
      ) : (
        <div className="space-y-2">
          {filteredEvents.map((event) => (
            <div
              key={event.id}
              role="button"
              tabIndex={0}
              onClick={() => setViewing(event)}
              onKeyDown={(key) => { if (key.key === "Enter" || key.key === " ") setViewing(event); }}
              className="group flex cursor-pointer flex-col gap-4 rounded-2xl border border-[var(--border)] bg-[var(--bg)]/40 p-3 transition-all hover:border-[var(--accent)]/35 hover:bg-[var(--bg-hover)]/35 focus:outline-none focus:ring-2 focus:ring-[var(--accent)]/50 sm:flex-row sm:items-center sm:p-4"
            >
              {event.imageUrl ? (
                <div className="relative h-20 w-full shrink-0 overflow-hidden rounded-xl sm:w-32">
                  <img src={event.imageUrl} alt="" className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" />
                  <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/65 to-transparent px-2 pb-1.5 text-[10px] font-semibold uppercase tracking-wider text-white">{new Date(event.startsAt).toLocaleDateString(undefined, { month: "short" })}</div>
                </div>
              ) : (
                <div className="flex h-20 w-full shrink-0 flex-row items-center justify-center gap-3 rounded-xl border border-[var(--accent)]/15 bg-[var(--accent-muted)] text-[var(--accent)] sm:w-32 sm:flex-col sm:gap-0">
                  <span className="text-xs font-bold uppercase tracking-widest">{new Date(event.startsAt).toLocaleDateString(undefined, { month: "short" })}</span>
                  <span className="text-2xl font-bold leading-none">{new Date(event.startsAt).getDate()}</span>
                  <span className="text-[10px] font-medium">{new Date(event.startsAt).getFullYear()}</span>
                </div>
              )}
              <div className="min-w-0 flex-1">
                <div className="flex flex-wrap items-center gap-2">
                  <span className="text-base font-semibold text-[var(--text)]">
                    {event.title}
                  </span>
                  <span className={`rounded-full px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wide ${event.status === "PUBLISHED" ? "bg-emerald-500/10 text-emerald-400" : event.status === "DRAFT" ? "bg-amber-500/10 text-amber-400" : "bg-[var(--bg-elevated)] text-[var(--text-muted)]"}`}>
                    {event.status.toLowerCase()}
                  </span>
                  {event.categories[0] && <span className="rounded-full bg-[var(--accent-muted)] px-2.5 py-1 text-[10px] font-medium text-[var(--accent-hover)]">{event.categories[0].category.name}</span>}
                </div>
                <p className="mt-1.5 text-xs text-[var(--text-faint)]">
                  {new Date(event.startsAt).toLocaleString()} ·{" "}
                  {event.location.name}
                  {event.recurrence !== "NONE"
                    ? ` · ${event.recurrence.toLowerCase()}`
                    : ""}
                </p>
                {event.description && (
                  <p className="mt-2 line-clamp-1 text-sm text-[var(--text-muted)]">
                    {event.description}
                  </p>
                )}
                {event.capacity && (
                  <div className="mt-3 max-w-xs">
                    <div className="mb-1 flex justify-between text-[10px] text-[var(--text-faint)]"><span>Capacity</span><span>{event._count.registrations} of {event.capacity}</span></div>
                    <div className="h-1.5 overflow-hidden rounded-full bg-[var(--bg)]"><div className="h-full rounded-full bg-[var(--accent)]" style={{ width: `${Math.min(100, (event._count.registrations / event.capacity) * 100)}%` }} /></div>
                  </div>
                )}
              </div>
              <span className="flex min-w-20 flex-col items-center gap-1 rounded-xl border border-[var(--border)] bg-[var(--bg)]/60 px-3 py-2 text-xs text-[var(--text-muted)]">
                <Users className="h-4 w-4 text-[var(--accent)]" />
                <span className="font-semibold text-[var(--text)]">{event._count.registrations}{event.capacity ? `/${event.capacity}` : ""}</span>
                <span className="text-[10px]">attending</span>
              </span>
              {canManageEvents && (
                <div className="flex gap-1 border-t border-[var(--border)] pt-3 sm:border-t-0 sm:pt-0">
                  <button
                    className="rounded-lg p-2 text-[var(--text-muted)] hover:bg-[var(--accent-muted)] hover:text-[var(--accent)]"
                    onClick={(click) => { click.stopPropagation(); setEditing(event); }}
                  >
                    <Pencil className="h-4 w-4" />
                  </button>
                  <button
                    className="rounded-lg p-2 text-[var(--text-muted)] hover:bg-red-500/10 hover:text-red-500"
                    onClick={(click) => { click.stopPropagation(); setDeleting(event); }}
                  >
                    <Trash2 className="h-4 w-4" />
                  </button>
                </div>
              )}
            </div>
          ))}
        </div>
      )}
      {editing !== undefined && businessId && (
        <EventFormModal
          businessId={businessId}
          event={editing}
          locations={locations}
          onClose={() => setEditing(undefined)}
          onSave={() => {
            setEditing(undefined);
            load();
          }}
        />
      )}
      {viewing && <EventDetailModal event={viewing} onClose={() => setViewing(null)} />}
      {addingCategory && businessId && (
        <EventCategoryModal
          businessId={businessId}
          onClose={() => setAddingCategory(false)}
          onSave={() => setAddingCategory(false)}
        />
      )}
      <ConfirmModal
        open={Boolean(deleting)}
        title="Delete event?"
        description="This permanently deletes the event and its registrations."
        onCancel={() => setDeleting(null)}
        onConfirm={remove}
      />
    </div>
  );
}