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

type CoachesPageProps = {
  searchParams: Promise<{ search?: string; status?: string }>;
};

export default async function AdminCoachesPage({
  searchParams,
}: CoachesPageProps) {
  const filters = await searchParams;
  const coaches = await getAdminCoaches(filters);

  return (
    <div className="flex h-full min-h-[42rem] flex-col">
      <AdminPageHeader
        eyebrow="Coach reviews"
        title="Trust before team access."
        description="Review WWCC progress separately from event assignment and player rosters."
        action={
          <div className="hidden items-center gap-1.5 rounded-full border border-orange-200/80 bg-orange-50/80 px-3 py-1.5 text-xs font-semibold text-[#F97316] sm:flex">
            <span className="material-symbols-outlined text-[16px]">
              lock
            </span>
            Restricted credentials
          </div>
        }
      />

      <FilterBar resetHref="/admin/coaches">
        <SearchField
          defaultValue={filters.search}
          placeholder="Search coach name or email"
        />

        <SelectFilter
          name="status"
          label="Verification status"
          value={filters.status}
          options={[
            { value: "all", label: "All verification states" },
            { value: "pending", label: "Pending review" },
            { value: "approved", label: "Approved" },
            { value: "rejected", label: "Rejected" },
            { value: "expired", label: "Expired" },
            { value: "not-submitted", label: "Not submitted" },
          ]}
        />
      </FilterBar>

      {/* WWCC CSV Export */}
      <div className="mb-4 flex justify-end">
        <a
          href="/api/admin/coaches/wwcc/export"
          className="inline-flex items-center gap-2 rounded-xl bg-[#1D4ED8] px-4 py-2.5 text-xs font-semibold text-white shadow-xs transition hover:bg-[#1e40af]"
        >
          <span className="material-symbols-outlined text-[18px]">
            download
          </span>
          Download pending CSV
        </a>
      </div>

      <TablePanel
        count={coaches.length}
        label={coaches.length === 1 ? "coach account" : "coach accounts"}
      >
        {coaches.length === 0 ? (
          <EmptyTableState
            icon="verified_user"
            title="No coach applications match"
            description="Applications and verified volunteer accounts will appear here."
          />
        ) : (
          <>
            {/* Mobile View: Stacked Cards */}
            <div className="block divide-y divide-slate-100 md:hidden">
              {coaches.map((coach) => (
                <div key={coach.id} className="p-4 space-y-3 bg-white">
                  <div className="flex items-start justify-between gap-2">
                    <div>
                      <p className="text-sm font-bold text-[#0D1B2A]">{coach.name}</p>
                      <p className="text-xs text-slate-500">{coach.email}</p>
                    </div>
                    <StatusBadge value={coach.status} />
                  </div>

                  <div className="grid grid-cols-2 gap-2 text-xs text-slate-600">
                    <div>
                      <span className="text-[10px] font-semibold uppercase tracking-wider text-slate-400 block">WWCC Ref</span>
                      <span className="font-mono font-medium text-slate-700">{coach.wwccMasked}</span>
                    </div>
                    <div>
                      <span className="text-[10px] font-semibold uppercase tracking-wider text-slate-400 block">Expiry</span>
                      <span>{formatAdminDate(coach.expiryDate)}</span>
                    </div>
                  </div>

                  <div className="pt-2 flex items-center justify-between border-t border-slate-100">
                    <span className="text-[11px] text-slate-400">
                      Submitted {formatAdminDate(coach.submittedAt)}
                    </span>
                    {coach.status === "not-submitted" ? (
                      <span className="text-xs font-medium text-slate-400">Waiting</span>
                    ) : (
                      <Link
                        href={`/admin/coaches/${coach.id}`}
                        className="inline-flex items-center gap-1 text-xs font-semibold text-[#1D4ED8] hover:text-[#2563EB]"
                      >
                        Review
                        <span className="material-symbols-outlined text-[16px]">arrow_forward</span>
                      </Link>
                    )}
                  </div>
                </div>
              ))}
            </div>

            {/* Desktop View: Full Table */}
            <table className="hidden md:table w-full min-w-[56rem] border-separate border-spacing-0 text-left">
              <thead className="sticky top-0 z-10 bg-slate-100/95 text-[10px] font-extrabold uppercase tracking-[0.12em] text-slate-500 backdrop-blur-xl">
                <tr>
                  <th className="px-5 py-3">Volunteer</th>
                  <th className="px-4 py-3">WWCC reference</th>
                  <th className="px-4 py-3">Submitted</th>
                  <th className="px-4 py-3">Expiry</th>
                  <th className="px-5 py-3 text-right">Verification</th>
                  <th className="px-5 py-3 text-right">Action</th>
                </tr>
              </thead>

              <tbody className="divide-y divide-slate-200/80">
                {coaches.map((coach) => (
                  <tr
                    key={coach.id}
                    className="transition hover:bg-slate-50/80"
                  >
                    <td className="px-5 py-3.5">
                      <p className="text-sm font-bold text-[#0D1B2A]">
                        {coach.name}
                      </p>
                      <p className="mt-0.5 text-xs text-slate-500">
                        {coach.email}
                      </p>
                    </td>

                    <td className="px-4 py-3.5 font-mono text-xs font-medium text-slate-600">
                      {coach.wwccMasked}
                    </td>

                    <td className="px-4 py-3.5 text-xs text-slate-600">
                      {formatAdminDate(coach.submittedAt)}
                    </td>

                    <td className="px-4 py-3.5 text-xs text-slate-600">
                      {formatAdminDate(coach.expiryDate)}
                    </td>

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

                    <td className="px-5 py-3.5 text-right">
                      {coach.status === "not-submitted" ? (
                        <span className="text-xs text-slate-400">
                          Waiting
                        </span>
                      ) : (
                        <Link
                          href={`/admin/coaches/${coach.id}`}
                          className="inline-flex items-center gap-1 text-xs font-semibold text-[#1D4ED8] transition hover:text-[#2563EB]"
                        >
                          Review
                          <span className="material-symbols-outlined text-[17px]">
                            arrow_forward
                          </span>
                        </Link>
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </>
        )}
      </TablePanel>
    </div>
  );
}