brackt/app/components/AutodraftSettings.tsx

import { useState, useEffect, useRef } from "react";
import { Check, Info } from "lucide-react";
import { toast } from "sonner";
import { Label } from "~/components/ui/label";
import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover";

type AutodraftMode = "next_pick" | "while_on";

// 4 visible states map to isEnabled + mode + queueOnly:
//   "off"         → isEnabled: false
//   "next_queue"  → isEnabled: true,  mode: "next_pick", queueOnly: true
//   "all_queue"   → isEnabled: true,  mode: "while_on",  queueOnly: true
//   "all_picks"   → isEnabled: true,  mode: "while_on",  queueOnly: false
type AutodraftState = "off" | "next_queue" | "all_queue" | "all_picks";

type OptionConfig = {
  label: string;
  desc: string;
  isEnabled: boolean;
  mode: AutodraftMode;
  queueOnly: boolean;
};

// Record ensures all AutodraftState values are covered — no runtime find() needed
const OPTIONS: Record<AutodraftState, OptionConfig> = {
  off: {
    label: "Off",
    desc: "You pick manually every round.",
    isEnabled: false,
    mode: "next_pick",
    queueOnly: false,
  },
  next_queue: {
    label: "Next in Queue",
    desc: "Autodrafts your next pick from your queue, then turns off.",
    isEnabled: true,
    mode: "next_pick",
    queueOnly: true,
  },
  all_queue: {
    label: "All in Queue",
    desc: "Keeps autodrafting from your queue until it runs out, then turns off automatically.",
    isEnabled: true,
    mode: "while_on",
    queueOnly: true,
  },
  all_picks: {
    label: "All Picks",
    desc: "Keeps autodrafting all your picks. Uses your queue first, then falls back to the highest-ranked undrafted player.",
    isEnabled: true,
    mode: "while_on",
    queueOnly: false,
  },
};

const OPTION_ORDER: AutodraftState[] = ["off", "next_queue", "all_queue", "all_picks"];

// border-l-[3px] is applied to ALL options (transparent when inactive) so the
// content never shifts when the active border color is applied.
function getButtonClassName(state: AutodraftState, isActive: boolean): string {
  if (!isActive) {
    return "border-l-[3px] border-l-transparent text-muted-foreground hover:bg-muted/40";
  }
  if (state === "off") {
    return "border-l-[3px] border-l-muted-foreground/50 text-foreground";
  }
  return "border-l-[3px] border-l-electric bg-electric text-background";
}

function getCheckClassName(state: AutodraftState): string {
  if (state === "off") return "text-muted-foreground";
  return "text-background";
}

function toAutodraftState(
  isEnabled: boolean,
  mode: AutodraftMode,
  queueOnly: boolean
): AutodraftState {
  if (!isEnabled) return "off";
  if (mode === "next_pick") return "next_queue";
  return queueOnly ? "all_queue" : "all_picks";
}

interface AutodraftSettingsProps {
  seasonId: string;
  teamId: string;
  isEnabled: boolean;
  mode: AutodraftMode;
  queueOnly: boolean;
  isMyTurn: boolean;
  onUpdate: (isEnabled: boolean, mode: AutodraftMode, queueOnly: boolean) => void;
}

export function AutodraftSettings({
  seasonId,
  teamId,
  isEnabled,
  mode,
  queueOnly,
  isMyTurn,
  onUpdate,
}: AutodraftSettingsProps) {
  const [localState, setLocalState] = useState<AutodraftState>(
    toAutodraftState(isEnabled, mode, queueOnly)
  );
  // Holds the abort controller for any in-flight save so rapid selections
  // cancel the previous request rather than racing to update the server.
  const abortRef = useRef<AbortController | null>(null);

  // Sync local state with props when they change (from socket events)
  useEffect(() => {
    setLocalState(toAutodraftState(isEnabled, mode, queueOnly));
  }, [isEnabled, mode, queueOnly]);

  const sendUpdate = async (newState: AutodraftState) => {
    // Cancel any in-flight request before starting a new one
    abortRef.current?.abort();
    abortRef.current = new AbortController();

    const option = OPTIONS[newState];

    try {
      const formData = new FormData();
      formData.append("seasonId", seasonId);
      formData.append("teamId", teamId);
      formData.append("isEnabled", option.isEnabled.toString());
      formData.append("mode", option.mode);
      formData.append("queueOnly", option.queueOnly.toString());

      const response = await fetch("/api/autodraft/update", {
        method: "POST",
        body: formData,
        signal: abortRef.current.signal,
      });

      if (response.ok) {
        onUpdate(option.isEnabled, option.mode, option.queueOnly);
        toast.success(
          option.isEnabled ? `Autodraft set to "${option.label}"` : "Autodraft turned off"
        );
      } else {
        setLocalState(toAutodraftState(isEnabled, mode, queueOnly));
        toast.error("Failed to save autodraft settings");
      }
    } catch (error) {
      // Ignore cancellations — a newer selection has already taken over
      if (error instanceof Error && error.name === "AbortError") return;
      setLocalState(toAutodraftState(isEnabled, mode, queueOnly));
      toast.error("Failed to save autodraft settings");
    }
  };

  const handleStateChange = (newState: AutodraftState) => {
    if (newState === localState || isMyTurn) return;
    setLocalState(newState);
    sendUpdate(newState);
  };

  const isDisabled = isMyTurn;

  return (
    <div className="border-t pt-4 mt-4">
      {/* Header with info icon inline */}
      <div className="flex items-center gap-1.5 mb-3">
        <Label className="text-sm font-semibold">Autodraft</Label>
        <Popover>
          <PopoverTrigger asChild>
            <button
              type="button"
              className="text-muted-foreground hover:text-foreground transition-colors"
              aria-label="Autodraft options explained"
            >
              <Info className="h-3.5 w-3.5" />
            </button>
          </PopoverTrigger>
          <PopoverContent className="w-72" align="start">
            <p className="text-sm font-semibold mb-2.5">Autodraft Options</p>
            <div className="space-y-2.5">
              {OPTION_ORDER.map((state) => {
                const { label, desc } = OPTIONS[state];
                return (
                  <div key={state}>
                    <p className="text-xs font-medium">{label}</p>
                    <p className="text-xs text-muted-foreground">{desc}</p>
                  </div>
                );
              })}
            </div>
          </PopoverContent>
        </Popover>
      </div>

      <div className="flex flex-col rounded-lg border overflow-hidden">
        {OPTION_ORDER.map((state) => {
          const { label } = OPTIONS[state];
          const isActive = localState === state;
          return (
            <button
              key={state}
              type="button"
              disabled={isDisabled}
              onClick={() => handleStateChange(state)}
              className={`w-full py-2.5 px-3 text-left transition-colors border-b last:border-b-0 flex items-center justify-between gap-2 ${getButtonClassName(state, isActive)} ${
                isDisabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
              }`}
            >
              <span className="text-xs font-medium">{label}</span>
              {isActive && (
                <Check className={`h-3.5 w-3.5 shrink-0 ${getCheckClassName(state)}`} />
              )}
            </button>
          );
        })}
      </div>

      {isMyTurn && (
        <p className="text-xs text-muted-foreground mt-2">You're on the clock!</p>
      )}
    </div>
  );
}