import type { Dispatch, SetStateAction } from "react";
import { NetworkAdminCreateVenueForm } from "@/components/network-admin-create-venue-form";
import {
  type Club,
  type MachineFormState,
  type VenueFormState,
  type VenueStatus,
  resolveMachineForm,
} from "@/components/network-admin-client-config";
import { readNetworkAdminError } from "@/components/network-admin-mutation-helpers";
import { NetworkAdminVenueCard } from "@/components/network-admin-venue-card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

type NetworkAdminClubCardProps = {
  club: Club;
  busy: boolean;
  setClubs: Dispatch<SetStateAction<Club[]>>;
  venueForm: VenueFormState;
  setVenueForms: Dispatch<SetStateAction<Record<string, VenueFormState>>>;
  emptyVenueForm: VenueFormState;
  machineForms: Record<string, MachineFormState>;
  setMachineForms: Dispatch<SetStateAction<Record<string, MachineFormState>>>;
  emptyMachineForm: MachineFormState;
  venueStatusOptions: VenueStatus[];
  selectClassName: string;
  articleCardClassName: string;
  mutedPanelClassName: string;
  insetPanelClassName: string;
  wellClassName: string;
  runMutation: (task: () => Promise<void>, successMessage: string) => Promise<void>;
};

export function NetworkAdminClubCard({
  club,
  busy,
  setClubs,
  venueForm,
  setVenueForms,
  emptyVenueForm,
  machineForms,
  setMachineForms,
  emptyMachineForm,
  venueStatusOptions,
  selectClassName,
  articleCardClassName,
  mutedPanelClassName,
  insetPanelClassName,
  wellClassName,
  runMutation,
}: NetworkAdminClubCardProps) {
  function updateClub(patch: Partial<Pick<Club, "atcSportclubId">>) {
    setClubs((current) => current.map((item) => (item.id === club.id ? { ...item, ...patch } : item)));
  }

  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">Club</p>
          <div className="mt-4 grid gap-3 md:grid-cols-[1.6fr_auto_auto]">
            <Input
              value={club.atcSportclubId}
              onChange={(event) => updateClub({ atcSportclubId: event.target.value })}
              disabled={busy}
            />
            <Button
              loading={busy}
              variant="outline"
              disabled={busy}
              onClick={() =>
                runMutation(async () => {
                  const response = await fetch(`/api/network/${club.id}`, {
                    method: "PATCH",
                    headers: { "content-type": "application/json" },
                    body: JSON.stringify({ atcSportclubId: club.atcSportclubId }),
                  });

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

        <div className={mutedPanelClassName}>
          <p className="text-xs uppercase tracking-[0.22em] text-primary">Club health</p>
          <p className="mt-3 text-sm text-muted-foreground">ATC id: {club.atcSportclubId}</p>
          <p className="mt-2 text-sm text-muted-foreground">ATC nombre: {club.name ?? "No disponible"}</p>
          <p className="mt-2 text-sm text-muted-foreground">
            ATC ubicacion: {club.locationName ?? "No disponible"}
          </p>
          <p className="mt-2 text-sm text-muted-foreground">Venues: {club.venues.length}</p>
          <p className="mt-2 text-sm text-muted-foreground">
            Machines: {club.venues.reduce((total, venue) => total + venue.machines, 0)} · Screens: {" "}
            {club.venues.reduce((total, venue) => total + venue.screens, 0)}
          </p>
        </div>
      </div>

      <div className={wellClassName}>
        <p className="text-xs uppercase tracking-[0.24em] text-primary">Add venue</p>
        <NetworkAdminCreateVenueForm
          busy={busy}
          clubId={club.id}
          venueForm={venueForm}
          setVenueForms={setVenueForms}
          emptyVenueForm={emptyVenueForm}
          statusOptions={venueStatusOptions}
          selectClassName={selectClassName}
          runMutation={runMutation}
        />
      </div>

      <div className="mt-6 space-y-3">
        {club.venues.length === 0 ? (
          <div className={`${mutedPanelClassName} text-sm text-muted-foreground`}>No venues yet.</div>
        ) : (
          club.venues.map((venue) => (
            <NetworkAdminVenueCard
              key={venue.id}
              clubId={club.id}
              venue={venue}
              busy={busy}
              setClubs={setClubs}
              machineForm={resolveMachineForm(machineForms, venue.id, emptyMachineForm)}
              setMachineForms={setMachineForms}
              emptyMachineForm={emptyMachineForm}
              venueStatusOptions={venueStatusOptions}
              selectClassName={selectClassName}
              mutedPanelClassName={mutedPanelClassName}
              insetPanelClassName={insetPanelClassName}
              wellClassName={wellClassName}
              runMutation={runMutation}
            />
          ))
        )}
      </div>
    </article>
  );
}