"use client";

import * as React from "react";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import {
  closePipelineForm,
  selectPipelineForm,
  setPipelineFormName,
  setModuleDependencies,
} from "@/store/slices/pipeline-form-slice";
import { ModuleSelect } from "@/components/shared/module-select";
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";

interface PipelineFormDialogProps {
  creating: boolean;
  updating: boolean;
  isAdmin: boolean;
  onSubmit: (e: React.FormEvent) => void;
}

export function PipelineFormDialog({
  creating,
  updating,
  isAdmin,
  onSubmit,
}: PipelineFormDialogProps) {
  const dispatch = useAppDispatch();
  const { form, mode, open } = useAppSelector(selectPipelineForm);

  return (
    <Dialog
      open={open}
      onOpenChange={(nextOpen) => {
        if (!nextOpen) {
          dispatch(closePipelineForm());
        }
      }}
    >
      <DialogContent className="sm:max-w-[420px] rounded-2xl">
        <DialogHeader>
          <DialogTitle className="font-['Lexend']">
            {mode === "create" ? "Create pipeline" : "Edit pipeline"}
          </DialogTitle>
          <DialogDescription>
            {mode === "create"
              ? "Name your pipeline. Stages can be adjusted from the Sales board or settings."
              : "Update the pipeline name."}
          </DialogDescription>
        </DialogHeader>
        <form onSubmit={onSubmit} className="space-y-5 py-2">
          <div className="space-y-2">
            <Label htmlFor="pipeline-page-name">Pipeline name</Label>
            <Input
              id="pipeline-page-name"
              value={form.name}
              onChange={(e) => dispatch(setPipelineFormName(e.target.value))}
              placeholder="e.g. Enterprise Sales"
              autoFocus
              className="rounded-xl"
            />
          </div>

          <div className="space-y-4">
            <ModuleSelect
              value={form.moduleDependencies ?? []}
              onValueChange={(next) => {
                // We need to carefully update the whole array in Redux
                // Since our reducer was 'toggle', I'll add a 'set' reducer or just use dispatch multiple times?
                // Actually, I'll add a 'setModuleDependencies' reducer to the slice.
                dispatch(setModuleDependencies(next));
              }}
              label="Module Dependencies"
            />
            <p className="text-[11px] text-gray-400 leading-tight px-1 italic">
              Select which modules are required or linked to this pipeline's
              workflow.
            </p>
          </div>
          <DialogFooter className="gap-2 sm:gap-3">
            <Button
              type="button"
              variant="ghost"
              className="rounded-xl"
              onClick={() => dispatch(closePipelineForm())}
            >
              Cancel
            </Button>
            <Button
              type="submit"
              className="rounded-xl bg-accent"
              disabled={!form.name.trim() || creating || updating || !isAdmin}
            >
              {creating || updating ? "Saving..." : "Save"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}