import { Button } from "~/components/ui/button";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "~/components/ui/dialog";

interface TimeBankAdjustmentDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  teamName: string | undefined;
  amount: string;
  onAmountChange: (value: string) => void;
  unit: "seconds" | "minutes" | "hours";
  onUnitChange: (value: "seconds" | "minutes" | "hours") => void;
  direction: "add" | "remove";
  onDirectionChange: (value: "add" | "remove") => void;
  isAdjusting: boolean;
  onConfirm: () => void;
}

export function TimeBankAdjustmentDialog({
  open,
  onOpenChange,
  teamName,
  amount,
  onAmountChange,
  unit,
  onUnitChange,
  direction,
  onDirectionChange,
  isAdjusting,
  onConfirm,
}: TimeBankAdjustmentDialogProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Adjust Time Bank</DialogTitle>
          <DialogDescription>
            {teamName ? `Adjusting time for ${teamName}` : "Adjust a team's time bank"}
          </DialogDescription>
        </DialogHeader>

        <div className="flex flex-col gap-4 py-2">
          <div role="group" aria-label="Adjustment direction" className="flex gap-2">
            <button
              type="button"
              onClick={() => onDirectionChange("add")}
              aria-pressed={direction === "add"}
              className={`flex-1 py-2 rounded-md border text-sm font-medium transition-colors ${
                direction === "add"
                  ? "bg-emerald-500/20 border-emerald-500 text-emerald-400"
                  : "border-border text-muted-foreground hover:bg-muted"
              }`}
            >
              Add Time
            </button>
            <button
              type="button"
              onClick={() => onDirectionChange("remove")}
              aria-pressed={direction === "remove"}
              className={`flex-1 py-2 rounded-md border text-sm font-medium transition-colors ${
                direction === "remove"
                  ? "bg-destructive/20 border-destructive text-destructive"
                  : "border-border text-muted-foreground hover:bg-muted"
              }`}
            >
              Remove Time
            </button>
          </div>

          <div className="flex gap-2">
            <label htmlFor="timebank-amount" className="sr-only">Amount</label>
            <input
              id="timebank-amount"
              type="number"
              min="0.001"
              step="any"
              value={amount}
              onChange={(e) => onAmountChange(e.target.value)}
              className="flex-1 px-3 py-2 border rounded-md bg-background text-foreground text-base md:text-sm"
              placeholder="Amount"
            />
            <label htmlFor="timebank-unit" className="sr-only">Time unit</label>
            <select
              id="timebank-unit"
              aria-label="Time unit"
              value={unit}
              onChange={(e) => onUnitChange(e.target.value as "seconds" | "minutes" | "hours")}
              className="px-3 py-2 border rounded-md bg-background text-foreground text-base md:text-sm"
            >
              <option value="seconds">Seconds</option>
              <option value="minutes">Minutes</option>
              <option value="hours">Hours</option>
            </select>
          </div>
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Cancel
          </Button>
          <Button
            onClick={onConfirm}
            disabled={isAdjusting}
            variant={direction === "remove" ? "destructive" : "default"}
          >
            {isAdjusting ? "Adjusting..." : direction === "add" ? "Add Time" : "Remove Time"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}