import type { Dispatch, SetStateAction } from "react";
import { readPlayersAdminError, resolveMembershipClubId } from "@/components/players-admin-client-config";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import type { BallboxStoreAdminPlayer, BallboxStoreClubListItem } from "@/lib/ballbox-store";

type PlayersAdminPlayerCardProps = {
  player: BallboxStoreAdminPlayer;
  setPlayers: Dispatch<SetStateAction<BallboxStoreAdminPlayer[]>>;
  busy: boolean;
  clubs: BallboxStoreClubListItem[];
  membershipClubIds: Record<string, string>;
  setMembershipClubIds: Dispatch<SetStateAction<Record<string, string>>>;
  articleCardClassName: string;
  insetPanelClassName: string;
  wellClassName: string;
  selectClassName: string;
  runMutation: (task: () => Promise<void>, successMessage: string) => Promise<void>;
};

export function PlayersAdminPlayerCard({
  player,
  setPlayers,
  busy,
  clubs,
  membershipClubIds,
  setMembershipClubIds,
  articleCardClassName,
  insetPanelClassName,
  wellClassName,
  selectClassName,
  runMutation,
}: PlayersAdminPlayerCardProps) {
  const selectedClubId = resolveMembershipClubId(membershipClubIds, player, clubs);

  return (
    <article className={articleCardClassName}>
      <div className="grid gap-4 lg:grid-cols-[1.1fr_0.9fr]">
        <div>
          <p className="text-xs uppercase tracking-[0.24em] text-primary">Player</p>
          <div className="mt-4 grid gap-3 md:grid-cols-3">
            <Input
              value={player.name}
              onChange={(event) => {
                const nextName = event.target.value;
                setPlayers((current) => current.map((item) => (item.id === player.id ? { ...item, name: nextName } : item)));
              }}
              disabled={busy}
            />
            <Input
              value={player.whatsappPhone ?? ""}
              onChange={(event) => {
                const nextValue = event.target.value;
                setPlayers((current) =>
                  current.map((item) => (item.id === player.id ? { ...item, whatsappPhone: nextValue || null } : item))
                );
              }}
              placeholder="WhatsApp"
              disabled={busy}
            />
            <Input
              value={player.telegramHandle ?? ""}
              onChange={(event) => {
                const nextValue = event.target.value;
                setPlayers((current) =>
                  current.map((item) => (item.id === player.id ? { ...item, telegramHandle: nextValue || null } : item))
                );
              }}
              placeholder="Telegram"
              disabled={busy}
            />
          </div>

          <div className="mt-3 flex flex-wrap gap-3">
            <Button
              loading={busy}
              variant="outline"
              disabled={busy || player.name.trim().length === 0}
              onClick={() =>
                runMutation(async () => {
                  const response = await fetch(`/api/admin/players/${player.id}`, {
                    method: "PATCH",
                    headers: { "content-type": "application/json" },
                    body: JSON.stringify({
                      name: player.name,
                      whatsappPhone: player.whatsappPhone,
                      telegramHandle: player.telegramHandle,
                    }),
                  });

                  if (!response.ok) {
                    throw new Error(await readPlayersAdminError(response));
                  }
                }, "Player updated")
              }
            >
              Save
            </Button>
            <Button
              loading={busy}
              variant="destructive"
              disabled={busy}
              onClick={() =>
                runMutation(async () => {
                  const response = await fetch(`/api/admin/players/${player.id}`, { method: "DELETE" });
                  if (!response.ok) {
                    throw new Error(await readPlayersAdminError(response));
                  }
                }, "Player deleted")
              }
            >
              Delete
            </Button>
          </div>
        </div>

        <div className={`${insetPanelClassName} text-sm text-muted-foreground`}>
          <p>ID: {player.id}</p>
          <p className="mt-2">Memberships: {player.memberships.length}</p>
          <p className="mt-2">
            Clubs: {player.memberships.length > 0
              ? player.memberships.map((membership) => membership.clubName ?? "ATC no disponible").join(", ")
              : "none"}
          </p>
          <p className="mt-2">WhatsApp: {player.whatsappPhone ?? "none"}</p>
          <p className="mt-2">Telegram: {player.telegramHandle ?? "none"}</p>
        </div>
      </div>

      <div className={wellClassName}>
        <p className="text-xs uppercase tracking-[0.24em] text-primary">Add membership</p>
        <div className="mt-3 grid gap-3 md:grid-cols-[1fr_auto]">
          <select
            value={selectedClubId}
            onChange={(event) => setMembershipClubIds((current) => ({ ...current, [player.id]: event.target.value }))}
            disabled={busy}
            className={selectClassName}
          >
            <option value="">Select club</option>
            {clubs
              .filter((club) => !player.memberships.some((membership) => membership.clubId === club.id))
              .map((club) => (
                <option key={club.id} value={club.id}>
                  {club.name ?? `ATC ${club.atcSportclubId}`}
                </option>
              ))}
          </select>
          <Button
            loading={busy}
            disabled={busy || !selectedClubId}
            onClick={() =>
              runMutation(async () => {
                const response = await fetch(`/api/admin/players/${player.id}/memberships`, {
                  method: "POST",
                  headers: { "content-type": "application/json" },
                  body: JSON.stringify({ clubId: selectedClubId }),
                });

                if (!response.ok) {
                  throw new Error(await readPlayersAdminError(response));
                }

                setMembershipClubIds((current) => ({ ...current, [player.id]: "" }));
              }, "Membership added")
            }
          >
            Add membership
          </Button>
        </div>
      </div>

      <div className="mt-4 space-y-3">
        {player.memberships.length === 0 ? (
          <div className={`${insetPanelClassName} text-sm text-muted-foreground`}>No memberships yet.</div>
        ) : (
          player.memberships.map((membership) => (
            <div
              key={membership.id}
              className={`${insetPanelClassName} flex flex-wrap items-center justify-between gap-3`}
            >
              <div>
                <p className="font-medium text-foreground">{membership.clubName ?? "ATC no disponible"}</p>
                <p className="mt-1 text-xs uppercase tracking-[0.16em] text-muted-foreground">{membership.id}</p>
              </div>
              <Button
                loading={busy}
                variant="outline"
                disabled={busy}
                onClick={() =>
                  runMutation(async () => {
                    const response = await fetch(`/api/admin/players/memberships/${membership.id}`, {
                      method: "DELETE",
                    });

                    if (!response.ok) {
                      throw new Error(await readPlayersAdminError(response));
                    }
                  }, "Membership removed")
                }
              >
                Remove
              </Button>
            </div>
          ))
        )}
      </div>
    </article>
  );
}