import {
  AdminPageHeader,
  CompactActionLink,
  EmptyTableState,
  FilterBar,
  SearchField,
  SelectFilter,
  StatusBadge,
  TablePanel,
} from "@/components/admin/admin-ui";
import Link from "next/link";
import { DefaultCapacityControl } from "@/components/admin/default-capacity-control";
import { EventCreatedToast } from "@/components/admin/event-created-toast";
import {
  getActiveSports,
  getAdminEvents,
  getDefaultEventCapacity,
  type AdminEvent,
} from "@/lib/admin-data";
import {
  formatAdminCurrency,
  formatAdminDate,
} from "@/lib/admin-format";

type EventsPageProps = {
  searchParams: Promise<{
    search?: string;
    status?: string;
    sport?: string;
    schedule?: string;
    capacity?: string;
    created?: string;
  }>;
};

export default async function AdminEventsPage({
  searchParams,
}: EventsPageProps) {
  const filters = await searchParams;

  const [events, sports, defaultCapacity] = await Promise.all([
    getAdminEvents(filters),
    getActiveSports(),
    getDefaultEventCapacity(),
  ]);

  return (
    <div className="flex h-full min-h-[42rem] flex-col">

      {/* EVENT CREATED SUCCESS POPUP */}
      <EventCreatedToast show={filters.created === "1"} />

      <AdminPageHeader
        eyebrow="Events"
        title="Every session, one schedule."
        description="Monitor dates, locations and capacity without mixing in registrations or venue administration."
        action={
          <div className="flex flex-wrap items-center justify-end gap-2">
            <DefaultCapacityControl initialCapacity={defaultCapacity} />
            <CompactActionLink href="/admin/events/new">
              Create event
            </CompactActionLink>
          </div>
        }
      />

      <FilterBar resetHref="/admin/events">
        <SearchField
          defaultValue={filters.search}
          placeholder="Search event, venue or suburb"
        />

        <SelectFilter
          name="status"
          label="Event status"
          value={filters.status}
          options={[
            { value: "all", label: "All statuses" },
            { value: "draft", label: "Draft" },
            { value: "scheduled", label: "Pending threshold" },
            { value: "confirmed", label: "Confirmed" },
            { value: "full", label: "Full" },
            { value: "completed", label: "Completed" },
            { value: "cancelled", label: "Cancelled" },
          ]}
        />

        <SelectFilter
          name="sport"
          label="Sport"
          value={filters.sport}
          options={[
            { value: "all", label: "All sports" },
            ...sports,
          ]}
        />

        <SelectFilter
          name="schedule"
          label="Schedule"
          value={filters.schedule}
          options={[
            { value: "all", label: "Any date" },
            { value: "upcoming", label: "Upcoming" },
            { value: "past", label: "Past" },
          ]}
        />

        <SelectFilter
          name="capacity"
          label="Capacity"
          value={filters.capacity}
          options={[
            { value: "all", label: "Any capacity" },
            { value: "near-full", label: "80%+ full" },
            { value: "available", label: "Under 80%" },
          ]}
        />
      </FilterBar>

      <TablePanel
        count={events.length}
        label={events.length === 1 ? "event" : "events"}
      >
        {events.length === 0 ? (
          <EmptyTableState
            icon="event_busy"
            title="No events match these filters"
            description="Reset the filters or add scheduled events to see them here."
          />
        ) : (
          <>
            {/* MOBILE VIEW (< md): Responsive Stacked Cards */}
            <div className="divide-y divide-slate-100 md:hidden">
              {events.map((event: AdminEvent) => {
                const percentage = event.capacity
                  ? Math.round((event.registrations / event.capacity) * 100)
                  : 0;

                return (
                  <div key={event.id} className="p-4 space-y-3 hover:bg-slate-50/60 transition-colors">
                    <div className="flex items-start justify-between gap-3">
                      <div>
                        <span className="inline-block rounded-md bg-blue-50 px-2 py-0.5 text-[10px] font-bold text-[#1D4ED8]">
                          {event.sport} · {event.ageGroup}
                        </span>
                        <h3 className="mt-1 text-sm font-extrabold text-[#0D1B2A]">{event.title}</h3>
                      </div>
                      <StatusBadge value={event.status} />
                    </div>

                    <div className="grid grid-cols-2 gap-2 text-xs text-slate-600">
                      <div className="flex items-center gap-1.5">
                        <span className="material-symbols-outlined text-[15px] text-slate-400">calendar_month</span>
                        <span>{formatAdminDate(event.startsAt, true)}</span>
                      </div>
                      <div className="flex items-center gap-1.5">
                        <span className="material-symbols-outlined text-[15px] text-slate-400">location_on</span>
                        <span className="truncate">{event.venue}</span>
                      </div>
                    </div>

                    <div className="flex items-center justify-between pt-2 border-t border-slate-100 text-xs">
                      <div className="flex items-center gap-2">
                        <div className="h-1.5 w-16 overflow-hidden rounded-full bg-slate-100">
                          <div
                            className={`h-full rounded-full ${percentage >= 80 ? "bg-[#F97316]" : "bg-[#1D4ED8]"}`}
                            style={{ width: `${Math.min(percentage, 100)}%` }}
                          />
                        </div>
                        <span className="font-semibold text-slate-500">
                          {event.registrations}/{event.capacity}
                        </span>
                      </div>

                      <div className="flex items-center gap-3">
                        <span className="font-extrabold text-[#0D1B2A]">
                          {event.priceCents === 0 ? "Free" : formatAdminCurrency(event.priceCents)}
                        </span>
                        <Link
                          href={`/admin/events/${event.id}`}
                          className="inline-flex items-center gap-1 rounded-xl bg-slate-100 hover:bg-[#1D4ED8] hover:text-white px-3 py-1.5 text-xs font-semibold text-slate-700 transition"
                        >
                          Manage
                          <span className="material-symbols-outlined text-[15px]">arrow_forward</span>
                        </Link>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>

            {/* DESKTOP VIEW (>= md): Clean Data Table */}
            <table className="hidden md:table w-full border-separate border-spacing-0 text-left">
              <thead className="sticky top-0 z-10 bg-slate-50/95 text-[10px] font-extrabold uppercase tracking-wider text-slate-500 border-b border-slate-200/80 backdrop-blur-xl">
                <tr>
                  <th className="px-5 py-3.5">Event</th>
                  <th className="px-4 py-3.5">Date and time</th>
                  <th className="px-4 py-3.5">Venue</th>
                  <th className="px-4 py-3.5">Capacity</th>
                  <th className="px-4 py-3.5">Price</th>
                  <th className="px-5 py-3.5 text-right">Status</th>
                  <th className="px-5 py-3.5 text-right">Manage</th>
                </tr>
              </thead>

              <tbody className="divide-y divide-slate-100">
                {events.map((event: AdminEvent) => {
                  const percentage = event.capacity
                    ? Math.round(
                        (event.registrations / event.capacity) * 100,
                      )
                    : 0;

                  return (
                    <tr
                      key={event.id}
                      className="transition hover:bg-slate-50/70"
                    >
                      <td className="px-5 py-3.5">
                        <p className="text-sm font-extrabold text-[#0D1B2A]">
                          {event.title}
                        </p>

                        <p className="mt-0.5 text-xs text-slate-500">
                          {event.sport} · {event.ageGroup}
                        </p>
                      </td>

                      <td className="px-4 py-3.5 text-xs font-semibold text-slate-600">
                        {formatAdminDate(event.startsAt, true)}
                      </td>

                      <td className="px-4 py-3.5">
                        <p className="text-xs font-semibold text-[#0D1B2A]">
                          {event.venue}
                        </p>

                        <p className="mt-0.5 text-[11px] text-slate-400">
                          {event.suburb}
                        </p>
                      </td>

                      <td className="px-4 py-3.5">
                        <div className="flex items-center gap-3">
                          <div className="h-1.5 w-20 overflow-hidden rounded-full bg-slate-100">
                            <div
                              className={`h-full rounded-full ${
                                percentage >= 80
                                  ? "bg-[#F97316]"
                                  : "bg-[#1D4ED8]"
                              }`}
                              style={{
                                width: `${Math.min(
                                  percentage,
                                  100,
                                )}%`,
                              }}
                            />
                          </div>

                          <span className="text-xs font-semibold text-slate-600">
                            {event.registrations}/{event.capacity}
                          </span>
                        </div>
                      </td>

                      <td className="px-4 py-3.5 text-xs font-extrabold text-[#0D1B2A]">
                        {event.priceCents === 0
                          ? "Free"
                          : formatAdminCurrency(event.priceCents)}
                      </td>

                      <td className="px-5 py-3.5 text-right">
                        <StatusBadge value={event.status} />
                      </td>

                      <td className="px-5 py-3.5 text-right">
                        <Link
                          href={`/admin/events/${event.id}`}
                          className="inline-flex items-center gap-1 text-xs font-semibold text-[#1D4ED8] transition hover:text-[#1e40af]"
                        >
                          Manage
                          <span className="material-symbols-outlined text-[16px]">
                            arrow_forward
                          </span>
                        </Link>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </>
        )}
      </TablePanel>
    </div>
  );
}