import type { Dispatch, SetStateAction } from "react";
import type { CoachFormState, SportsEventFormState } from "@/components/sports-admin-client-config";
import { SportsAdminCoachesSection } from "@/components/sports-admin-coaches-section";
import { SportsAdminEventsSection } from "@/components/sports-admin-events-section";
import type { BallboxStoreSportsCoach } from "@/lib/sports-backend-coaches";
import type { BallboxStoreSportsAdminData, BallboxStoreSportsEvent } from "@/lib/sports-backend-events";

type SportsAdminShellProps = {
  data: BallboxStoreSportsAdminData;
  setData: Dispatch<SetStateAction<BallboxStoreSportsAdminData>>;
  busy: boolean;
  message: string | null;
  coachForm: CoachFormState;
  setCoachForm: Dispatch<SetStateAction<CoachFormState>>;
  openMatchForm: SportsEventFormState;
  setOpenMatchForm: Dispatch<SetStateAction<SportsEventFormState>>;
  classForm: SportsEventFormState;
  setClassForm: Dispatch<SetStateAction<SportsEventFormState>>;
  runMutation: (task: () => Promise<void>, successMessage: string) => Promise<void>;
};

const sportsAdminSelectClassName = "h-9 rounded-md border border-input bg-transparent px-3 text-sm";

function updateSportsCollection<T>(
  setData: Dispatch<SetStateAction<BallboxStoreSportsAdminData>>,
  key: "coaches" | "openMatches" | "classes",
  next: SetStateAction<T[]>,
) {
  setData((current) => ({
    ...current,
    [key]: typeof next === "function" ? (next as (value: T[]) => T[])(current[key] as T[]) : next,
  }));
}

export function SportsAdminShell({
  data,
  setData,
  busy,
  message,
  coachForm,
  setCoachForm,
  openMatchForm,
  setOpenMatchForm,
  classForm,
  setClassForm,
  runMutation,
}: SportsAdminShellProps) {
  const setCoaches: Dispatch<SetStateAction<BallboxStoreSportsCoach[]>> = (next) =>
    updateSportsCollection(setData, "coaches", next);

  const setOpenMatches: Dispatch<SetStateAction<BallboxStoreSportsEvent[]>> = (next) =>
    updateSportsCollection(setData, "openMatches", next);

  const setClasses: Dispatch<SetStateAction<BallboxStoreSportsEvent[]>> = (next) =>
    updateSportsCollection(setData, "classes", next);

  return (
    <div className="space-y-6">
      <section className="grid gap-4 md:grid-cols-3">
        <div className="rounded-3xl border border-border/70 bg-card/90 p-6">
          <p className="text-sm text-muted-foreground">Coaches</p>
          <p className="mt-2 text-4xl font-semibold">{data.coaches.length}</p>
        </div>
        <div className="rounded-3xl border border-border/70 bg-card/90 p-6">
          <p className="text-sm text-muted-foreground">Open matches</p>
          <p className="mt-2 text-4xl font-semibold">{data.openMatches.length}</p>
        </div>
        <div className="rounded-3xl border border-border/70 bg-card/90 p-6">
          <p className="text-sm text-muted-foreground">Classes</p>
          <p className="mt-2 text-4xl font-semibold">{data.classes.length}</p>
        </div>
      </section>

      <section className="rounded-3xl border border-border/70 bg-card/90 p-6">
        <div className="flex flex-wrap items-start justify-between gap-4">
          <div>
            <p className="text-xs uppercase tracking-[0.24em] text-primary">Sports ops</p>
            <h2 className="mt-2 text-2xl font-semibold">Coaches + open matches + classes</h2>
            <p className="mt-3 max-w-3xl text-sm leading-6 text-muted-foreground">
              Sports ya tiene entidades Ballbox-locales. Esta surface administra roster base y agenda inicial por venue.
            </p>
          </div>
          <div className="rounded-full border border-border/70 px-4 py-2 text-sm text-foreground">ballbox postgres</div>
        </div>

        {message ? <p className="mt-4 text-sm text-muted-foreground">{message}</p> : null}
      </section>

      <SportsAdminCoachesSection
        clubs={data.clubs}
        coaches={data.coaches}
        setCoaches={setCoaches}
        busy={busy}
        coachForm={coachForm}
        setCoachForm={setCoachForm}
        selectClassName={sportsAdminSelectClassName}
        runMutation={runMutation}
      />

      <section className="grid gap-6 xl:grid-cols-2">
        <SportsAdminEventsSection
          eyebrow="Competition"
          title="Open matches"
          createPlaceholder="Open match title"
          createButtonLabel="Add open match"
          createEndpoint="/api/admin/sports/open-matches"
          itemEndpointSegment="open-matches"
          createdMessage="Open match created"
          updatedMessage="Open match updated"
          deletedMessage="Open match deleted"
          venues={data.venues}
          items={data.openMatches}
          setItems={setOpenMatches}
          form={openMatchForm}
          setForm={setOpenMatchForm}
          busy={busy}
          selectClassName={sportsAdminSelectClassName}
          runMutation={runMutation}
        />

        <SportsAdminEventsSection
          eyebrow="Academy"
          title="Classes"
          createPlaceholder="Class title"
          createButtonLabel="Add class"
          createEndpoint="/api/admin/sports/classes"
          itemEndpointSegment="classes"
          createdMessage="Class created"
          updatedMessage="Class updated"
          deletedMessage="Class deleted"
          venues={data.venues}
          items={data.classes}
          setItems={setClasses}
          form={classForm}
          setForm={setClassForm}
          busy={busy}
          selectClassName={sportsAdminSelectClassName}
          runMutation={runMutation}
        />
      </section>
    </div>
  );
}