import { keepPreviousData, useQuery, useQueryClient } from "@tanstack/react-query";
import { useEffect, useState } from "react";
import { adminApproveWaitlist, getAdminWaitlist } from "~/fns/admin";
import { useAction } from "~/hooks/use-action";
import { Button } from "~/ui/Button";
import { ErrorBanner } from "~/ui/Callout";
import { EmptyState } from "~/ui/EmptyState";
import { compactInputClass } from "~/ui/Field";
import { RelativeTime } from "~/ui/RelativeTime";

const STATUSES = [
  { value: "all", label: "Everyone" },
  { value: "waiting", label: "Waiting" },
  { value: "invited", label: "Invited" },
  { value: "approved", label: "Approved" },
] as const;
type Status = (typeof STATUSES)[number]["value"];

const SEARCH_DEBOUNCE_MS = 250;
export const WAITLIST_KEY = ["admin", "waitlist"] as const;

/** The waitlist in line order, searchable by email and filterable by status, with "Let in" per person. */
export function WaitlistTable() {
  const [search, setSearch] = useState("");
  const [query, setQuery] = useState("");
  const [status, setStatus] = useState<Status>("all");
  const [page, setPage] = useState(1);
  const queryClient = useQueryClient();
  const approve = useAction(adminApproveWaitlist);

  useEffect(() => {
    const timer = setTimeout(() => {
      setQuery(search.trim());
      setPage(1);
    }, SEARCH_DEBOUNCE_MS);
    return () => clearTimeout(timer);
  }, [search]);

  const list = useQuery({
    queryKey: [...WAITLIST_KEY, query, status, page],
    queryFn: () => getAdminWaitlist({ data: { query, status, page } }),
    placeholderData: keepPreviousData,
  });
  const data = list.data;
  const pages = data ? Math.max(1, Math.ceil(data.total / data.pageSize)) : 1;

  async function letIn(id: number) {
    if (await approve.run({ data: { id } })) await queryClient.invalidateQueries({ queryKey: WAITLIST_KEY });
  }

  return (
    <div className="space-y-2">
      <div className="flex flex-wrap items-center gap-2">
        <input
          aria-label="Search the waitlist by email"
          type="search"
          className={compactInputClass("w-56")}
          placeholder="Search email"
          value={search}
          onChange={(event) => setSearch(event.target.value)}
        />
        <select
          aria-label="Filter by status"
          className={compactInputClass()}
          value={status}
          onChange={(event) => {
            setStatus(event.target.value as Status);
            setPage(1);
          }}
        >
          {STATUSES.map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
        {data && <span className="text-xs text-kumo-subtle">{data.total} matching</span>}
      </div>
      <ErrorBanner message={approve.error ?? (list.error ? "Couldn't load the waitlist" : null)} />
      {data && data.rows.length === 0 ? (
        <EmptyState title={query || status !== "all" ? "No one matches" : "Nobody is on the waitlist"} icon="users" />
      ) : (
        <ol className="divide-y divide-kumo-hairline">
          {data?.rows.map((row) => (
            <li key={row.id} className="flex flex-wrap items-center gap-x-3 gap-y-1 py-2">
              <span className="font-mono text-kumo-default">{row.email}</span>
              <span className="text-kumo-subtle">
                {row.expiresAt ? (
                  <>
                    {row.approved ? "approved" : "invited"}, expires <RelativeTime timestamp={row.expiresAt} />
                  </>
                ) : (
                  <>
                    joined <RelativeTime timestamp={row.createdAt} />
                  </>
                )}
              </span>
              {!row.approved && (
                <Button
                  className="ml-auto"
                  size="sm"
                  variant="secondary"
                  pending={approve.pending}
                  title="Email an invite that skips the cap"
                  onClick={() => letIn(row.id)}
                >
                  Let in
                </Button>
              )}
            </li>
          ))}
        </ol>
      )}
      {pages > 1 && (
        <div className="flex items-center justify-between pt-1 text-xs text-kumo-subtle">
          <Button size="sm" variant="secondary" disabled={page <= 1} onClick={() => setPage(page - 1)}>
            Previous
          </Button>
          <span>
            Page {page} of {pages}
          </span>
          <Button size="sm" variant="secondary" disabled={page >= pages} onClick={() => setPage(page + 1)}>
            Next
          </Button>
        </div>
      )}
    </div>
  );
}