"use client";

import * as React from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { PipelineStageRow } from "@/api/rtk/pipelines-api";

interface SubStageDialogProps {
  open: boolean;
  mode: "add" | "edit";
  parentStage: PipelineStageRow | null;
  value: string;
  loading?: boolean;
  onValueChange: (value: string) => void;
  onOpenChange: (open: boolean) => void;
  onSubmit: (e: React.FormEvent) => void;
}

export function SubStageDialog({
  open,
  mode,
  parentStage,
  value,
  loading = false,
  onValueChange,
  onOpenChange,
  onSubmit,
}: SubStageDialogProps) {
  const isEdit = mode === "edit";

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[440px] rounded-2xl">
        <DialogHeader>
          <DialogTitle className="font-['Lexend']">
            {isEdit ? "Edit substage" : "Add substage"}
          </DialogTitle>
          <DialogDescription>
            {isEdit ? "Update" : "Create"} a substage under{" "}
            <span className="font-semibold text-gray-900">
              {parentStage?.stageName ?? "this stage"}
            </span>
            .
          </DialogDescription>
        </DialogHeader>

        <form onSubmit={onSubmit} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="substage-parent-stage">Parent stage</Label>
            <Input
              id="substage-parent-stage"
              value={
                parentStage
                  ? `${parentStage.stageName} - ${parentStage.pipelineName}`
                  : ""
              }
              readOnly
              className="rounded-xl bg-gray-50"
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="substage-name">
              {isEdit ? "Substage name" : "New substage name"}
            </Label>
            <Input
              id="substage-name"
              value={value}
              onChange={(e) => onValueChange(e.target.value)}
              placeholder="Enter substage name"
              autoFocus
              className="rounded-xl"
            />
          </div>

          <DialogFooter className="gap-2 sm:gap-3">
            <Button
              type="button"
              variant="outline"
              onClick={() => onOpenChange(false)}
              disabled={loading}
            >
              Cancel
            </Button>
            <Button type="submit" disabled={loading}>
              {loading
                ? isEdit
                  ? "Saving..."
                  : "Adding..."
                : isEdit
                  ? "Save changes"
                  : "Add substage"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}