Project-Management-V2/frontend/app/main/configuration/integration/components/AddIntegrationModal.tsx

"use client";

import { X } from "lucide-react";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";


import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  Button,
  Form,
  FormField,
  FormItem,
  FormLabel,
  FormControl,
  FormMessage,
  Input,
  Textarea,
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from "ikoncomponents";

/* ---------------- Schema ---------------- */
const integrationSchema = z.object({
  name: z.string().min(1, "Integration name is required"),
  systemType: z.string().min(1, "System type is required"),
  connectionMethod: z.string().min(1, "Connection method is required"),
  endpointUrl: z.string().url("Invalid URL").optional().or(z.literal("")),
  description: z.string().optional(),
});

type IntegrationFormValues = z.infer<typeof integrationSchema>;

interface Props {
  open: boolean;
  onClose: () => void;
  onSubmit: (data: IntegrationFormValues) => void;
}

/* ---------------- Component ---------------- */
export default function AddIntegrationModal({
  open,
  onClose,
  onSubmit,
}: Props) {
  const form = useForm<IntegrationFormValues>({
    resolver: zodResolver(integrationSchema),
    defaultValues: {
      name: "",
      systemType: "",
      connectionMethod: "",
      endpointUrl: "",
      description: "",
    },
  });

  const handleClose = () => {
    form.reset();
    onClose();
  };

  const handleCreateIntegration = (data: IntegrationFormValues) => {
  console.log("Integration form data:", {
    ...data,
  });

  onSubmit(data);   // pass to parent if needed
  handleClose();    // close + reset modal
};


  return (
    <Dialog open={open} onOpenChange={handleClose}>
      <DialogContent className="max-w-lg">
        {/* Header */}
        <DialogHeader>
          <DialogTitle>Add External Integration</DialogTitle>
          <DialogDescription>
           
          </DialogDescription>
        </DialogHeader>

        {/* Form */}
        <Form {...form}>
          <form
           onSubmit={form.handleSubmit(handleCreateIntegration)}
            className="space-y-4"
          >
            {/* Integration Name */}
            <FormField
              control={form.control}
              name="name"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>
                    Integration Name <span className="text-red-500">*</span>
                  </FormLabel>
                  <FormControl>
                    <Input
                      placeholder="e.g., Company HRMS"
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            {/* System Type */}
            <FormField
              control={form.control}
              name="systemType"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>
                    System Type <span className="text-red-500">*</span>
                  </FormLabel>
                  <Select
                    onValueChange={field.onChange}
                    value={field.value}
                  >
                    <FormControl>
                      <SelectTrigger>
                        <SelectValue placeholder="Select system type" />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      <SelectItem value="HRMS">HRMS</SelectItem>
                      <SelectItem value="CRM">Sales CRM</SelectItem>
                      {/* <SelectItem value="ERP">ERP</SelectItem> */}
                    </SelectContent>
                  </Select>
                  <FormMessage />
                </FormItem>
              )}
            />

            {/* Connection Method */}
            <FormField
              control={form.control}
              name="connectionMethod"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>
                    Connection Method{" "}
                    <span className="text-red-500">*</span>
                  </FormLabel>
                  <Select
                    onValueChange={field.onChange}
                    value={field.value}
                  >
                    <FormControl>
                      <SelectTrigger>
                        <SelectValue placeholder="Select data" />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      <SelectItem value="Grade">Grade</SelectItem>
                      <SelectItem value="Role">Role</SelectItem>
                      <SelectItem value="Working Days">Working Days</SelectItem>
                       <SelectItem value="Employee">Employee</SelectItem>
                        <SelectItem value="FX rates">FX rates</SelectItem>
                        {/* <SelectItem value="Risk">Risk</SelectItem> */}

                    </SelectContent>
                  </Select>
                  <FormMessage />
                </FormItem>
              )}
            />

            {/* Endpoint URL */}
            <FormField
              control={form.control}
              name="endpointUrl"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Endpoint URL</FormLabel>
                  <FormControl>
                    <Input
                      placeholder="https://api.example.com/v1"
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            {/* Description */}
            <FormField
              control={form.control}
              name="description"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Description</FormLabel>
                  <FormControl>
                    <Textarea
                      rows={3}
                      placeholder="Describe what this integration does..."
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            {/* Actions */}
            <div className="flex justify-end gap-3 pt-4">
              <Button
                type="button"
                variant="secondary"
                onClick={handleClose}
              >
                Cancel
              </Button>
              <Button
                type="submit"
                
              >
                Create Integration
              </Button>
            </div>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  );
}