"use client";

import * as React from "react";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
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 { Stage, Pipeline } from "@/api/rtk/pipelines-api";
import { PipelineStageName } from "@/api/rtk/pipeline-stage-names-api";
import { useAuthToken } from "@/hooks/use-auth-token"
import type { PipelineStageKind } from "@/api/rtk/pipelines-api";
import {
  selectEditStageDialog,
  closeEditDialog,
  setEditName,
  setEditStageType,
  setEditPipelineId,
} from "@/store/slices/edit-stage-slice";

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

export function EditStageDialog({
  pipelines,
  savingStage,
  onSave,
}: EditStageDialogProps) {
  const dispatch = useAppDispatch();
  const { token: accessToken } = useAuthToken();
  const editState = useAppSelector(selectEditStageDialog);
  const handleOpenChange = (open: boolean) => {
    if (!open) {
      dispatch(closeEditDialog());
    }
  };

  return (
    <Dialog open={editState.open} onOpenChange={handleOpenChange}>
      <DialogContent className="sm:max-w-[420px] rounded-2xl">
        <DialogHeader>
          <DialogTitle className="font-['Lexend']">Edit stage</DialogTitle>
          <DialogDescription>
            Update the selected stage for this pipeline.
          </DialogDescription>
        </DialogHeader>
        <form onSubmit={onSave} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="edit-stage-pipeline">Pipeline</Label>
            <ReactSelect
              id="edit-stage-pipeline"
              value={editState.editPipelineId || ""}
              onValueChange={(value) => {
                if (value) dispatch(setEditPipelineId(value));
              }}
              options={pipelines.map((p) => ({ value: p.id, label: p.name }))}
              placeholder="Select pipeline"
              aria-label="Pipeline"
              triggerClassName="rounded-xl"
              contentClassName="rounded-xl"
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="edit-stage-name">Name</Label>
            <Input
              id="edit-stage-name"
              className="rounded-xl"
              value={editState.editName}
              onChange={(e) => dispatch(setEditName(e.target.value))}
              placeholder="Enter stage name"
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="edit-stage-type">Stage type</Label>
            <ReactSelect
              id="edit-stage-type"
              value={editState.editStageType}
              onValueChange={(value) =>
                dispatch(setEditStageType(value as PipelineStageKind))
              }
              options={[
                { value: "Lead", label: "Lead" },
                { value: "Deal", label: "Deal" },
              ]}
              aria-label="Stage type"
              triggerClassName="rounded-xl"
              contentClassName="rounded-xl"
            />
          </div>

          <DialogFooter className="gap-2 sm:gap-3">
            <Button
              type="button"
              variant="ghost"
              className="rounded-xl"
              onClick={() => dispatch(closeEditDialog())}
            >
              Cancel
            </Button>
            <Button
              type="submit"
              className="rounded-xl bg-accent"
              disabled={savingStage || !editState.editingRowId}
            >
              {savingStage ? "Saving..." : "Save changes"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}