"use client";

import * as React from "react";
import { useDispatch, useSelector } from "react-redux";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { ReactSelect } from "@/components/ui/react-select";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Pipeline } from "@/api/rtk/pipelines-api";
import { AppDispatch } from "@/store";
import {
  selectStageNameDialog,
  closeStageNameDialog,
  setStageName,
  setStageNamePipelineId,
} from "@/store/slices/stage-name-dialog-slice";

interface StageNameDialogProps {
  pipelines: Pipeline[];
  isCreating: boolean;
  isUpdating: boolean;
  onSave: (e: React.FormEvent) => void;
}

export function StageNameDialog({
  pipelines,
  isCreating,
  isUpdating,
  onSave,
}: StageNameDialogProps) {
  const dispatch = useDispatch<AppDispatch>();
  const dialogState = useSelector(selectStageNameDialog);

  const handleOpenChange = (open: boolean) => {
    if (!open) {
      dispatch(closeStageNameDialog());
    }
  };

  return (
    <Dialog open={dialogState.open} onOpenChange={handleOpenChange}>
      <DialogContent className="sm:max-w-[420px] rounded-2xl">
        <DialogHeader>
          <DialogTitle className="font-['Lexend']">
            {dialogState.editingId ? "Edit stage name" : "Add stage name"}
          </DialogTitle>
          <DialogDescription>
            {dialogState.editingId
              ? "Update the configuration of this pipeline stage name."
              : "Create a new pipeline stage name."}
          </DialogDescription>
        </DialogHeader>
        <form onSubmit={onSave} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="stage-name">Name</Label>
            <Input
              id="stage-name"
              className="rounded-xl"
              value={dialogState.name}
              onChange={(e) => dispatch(setStageName(e.target.value))}
              placeholder="e.g. Discovery"
              autoFocus
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="stage-pipeline">Pipeline (Optional)</Label>
            <ReactSelect
              id="stage-pipeline"
              value={dialogState.editPipelineId}
              onValueChange={(value) => dispatch(setStageNamePipelineId(value))}
              options={pipelines.map((p) => ({ value: p.id, label: p.name }))}
              placeholder="Select pipeline"
              aria-label="Pipeline"
              triggerClassName="rounded-xl"
              contentClassName="rounded-xl"
            />
          </div>
          <DialogFooter className="gap-2 sm:gap-3">
            <Button
              type="button"
              variant="ghost"
              className="rounded-xl"
              onClick={() => dispatch(closeStageNameDialog())}
            >
              Cancel
            </Button>
            <Button
              type="submit"
              className="rounded-xl bg-accent"
              disabled={isCreating || isUpdating}
            >
              {isCreating || isUpdating ? "Saving…" : "Save"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}