import {
  AdminPageHeader,
  CompactActionLink,
  EmptyTableState,
  FilterBar,
  SearchField,
  SelectFilter,
  StatusBadge,
  TablePanel,
} from "@/components/admin/admin-ui";
import Link from "next/link";
import { getAdminVenues } from "@/lib/admin-data";
import { formatAdminDate, formatHourlyCost } from "@/lib/admin-format";

type VenuesPageProps = {
  searchParams: Promise<{ search?: string; type?: string; state?: string }>;
};

export default async function AdminVenuesPage({ searchParams }: VenuesPageProps) {
  const filters = await searchParams;
  const venues = await getAdminVenues(filters);

  return (
    <div className="flex h-full min-h-[42rem] flex-col">
      <AdminPageHeader
        eyebrow="Venues"
        title="Know where every game can run."
        description="A clean directory of school, council and community grounds with availability context."
        action={<CompactActionLink href="/admin/venues/new">Create venue</CompactActionLink>}
      />

      <FilterBar resetHref="/admin/venues">
        <SearchField defaultValue={filters.search} placeholder="Search venue, suburb or postcode" />
        <SelectFilter
          name="type"
          label="Venue type"
          value={filters.type}
          options={[
            { value: "all", label: "All venue types" },
            { value: "school", label: "School" },
            { value: "council_ground", label: "Council ground" },
            { value: "community_centre", label: "Community centre" },
            { value: "other", label: "Other" },
          ]}
        />
        <SelectFilter
          name="state"
          label="Availability"
          value={filters.state}
          options={[
            { value: "all", label: "All availability" },
            { value: "active", label: "Active" },
            { value: "inactive", label: "Inactive" },
          ]}
        />
      </FilterBar>

      <TablePanel count={venues.length} label={venues.length === 1 ? "venue" : "venues"}>
        {venues.length === 0 ? (
          <EmptyTableState
            icon="location_off"
            title="No venues match these filters"
            description="Venue records will appear here once they are available in the directory."
          />
        ) : (
          <>
            {/* MOBILE VIEW (< md): Responsive Stacked Cards */}
            <div className="divide-y divide-slate-100 md:hidden">
              {venues.map((venue) => (
                <div key={venue.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-slate-100 px-2 py-0.5 text-[10px] font-bold capitalize text-slate-700">
                        {venue.type.replaceAll("_", " ")}
                      </span>
                      <h3 className="mt-1 text-sm font-extrabold text-[#0D1B2A]">{venue.name}</h3>
                      <p className="text-xs text-slate-500">{venue.location}</p>
                    </div>
                    <StatusBadge value={venue.active ? "active" : "inactive"} />
                  </div>

                  <div className="grid grid-cols-2 gap-2 text-xs text-slate-600 pt-1">
                    <div className="flex items-center gap-1.5">
                      <span className="material-symbols-outlined text-[15px] text-slate-400">payments</span>
                      <span>{formatHourlyCost(venue.hourlyCost)}</span>
                    </div>
                    <div className="flex items-center gap-1.5">
                      <span className="material-symbols-outlined text-[15px] text-slate-400">event</span>
                      <span>{venue.eventCount} events</span>
                    </div>
                  </div>

                  <div className="flex items-center justify-between pt-2 border-t border-slate-100 text-xs">
                    <span className="text-[11px] text-slate-500">
                      Next: {formatAdminDate(venue.nextEvent, true)}
                    </span>
                    <Link
                      href={`/admin/venues/${venue.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>

            {/* 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">Venue</th>
                  <th className="px-4 py-3.5">Type</th>
                  <th className="px-4 py-3.5">Hourly cost</th>
                  <th className="px-4 py-3.5">Scheduled events</th>
                  <th className="px-4 py-3.5">Next event</th>
                  <th className="px-5 py-3.5 text-right">Availability</th>
                  <th className="px-5 py-3.5 text-right">Manage</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100">
                {venues.map((venue) => (
                  <tr key={venue.id} className="transition hover:bg-slate-50/70">
                    <td className="px-5 py-3.5">
                      <p className="text-sm font-extrabold text-[#0D1B2A]">{venue.name}</p>
                      <p className="mt-0.5 text-xs text-slate-500">{venue.location}</p>
                    </td>
                    <td className="px-4 py-3.5 text-xs font-semibold capitalize text-slate-600">
                      {venue.type.replaceAll("_", " ")}
                    </td>
                    <td className="px-4 py-3.5 text-xs font-semibold text-slate-700">{formatHourlyCost(venue.hourlyCost)}</td>
                    <td className="px-4 py-3.5 text-xs font-extrabold text-[#0D1B2A]">{venue.eventCount}</td>
                    <td className="px-4 py-3.5 text-xs text-slate-500">{formatAdminDate(venue.nextEvent, true)}</td>
                    <td className="px-5 py-3.5 text-right">
                      <StatusBadge value={venue.active ? "active" : "inactive"} />
                    </td>
                    <td className="px-5 py-3.5 text-right">
                      <Link
                        href={`/admin/venues/${venue.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>
  );
}