'use client';
import React, { useState } from 'react';
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogTitle,
} from '@/components/ui/dialog';
import { format } from 'date-fns';
import {
  Popover,
  PopoverTrigger,
  PopoverContent,
} from '@/components/ui/popover';
import CommonImage from '@/components/common/CommonImage';
import { Text } from '@/components/ui/text';
import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
import { Calendar } from '@/components/ui/calendar';
import TableData from '@/components/main/table/main/TableData';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { useForm, useFieldArray } from 'react-hook-form';
import { Textarea } from '@/components/ui/textarea';
import { CalendarIcon } from 'lucide-react';
import { Heading } from '@/components/ui/heading';
import { cn } from '@/lib/utils';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
const AssociateTypeList = [
  { value: '1', label: '1' },
  { value: '2', label: '2' },
  { value: '3', label: '3' },
  { value: '4', label: '4' },
  { value: '5', label: '5' },
];
const CommissionCountry = [
  { value: 'Afghanistan', label: 'Afghanistan' },
  { value: 'Albania', label: 'Albania' },
  { value: 'Algeria', label: 'Algeria' },
  { value: 'Andorra', label: 'Andorra' },
];
const associateList = [
  { value: '1', label: '1' },
  { value: '2', label: '2' },
  { value: '3', label: '3' },
  { value: '4', label: '4' },
];
const commissionInstanceList = [
  { value: '1', label: '1' },
  { value: '2', label: '2' },
  { value: '3', label: '3' },
  { value: '4', label: '4' },
];
const RecordInstitute = [
  { value: 'University of Auckland', label: 'University of Auckland' },
  { value: 'University of Canada', label: 'University of Canada' },
  { value: 'University of USA', label: 'University of USA' },
  { value: 'University of India', label: 'University of India' },
];
const RecordSubAgentValidation = z.object({
  Associate_Type: z.string().min(1, 'Associate Type is required'),
  Commission_Country: z.string().min(1, 'Country is required'),
  Associate: z.string().min(1, 'Associate is required'),
  Commission_Instance: z.string().min(1, 'Commission Instance is required'),
  Record_Institute: z.string().min(1, 'This field is required'),
  Pick_Date: z.string().min(1, 'Pick a date is required'),
  Sa_Commission_Type: z.string().min(1, 'This field is required'),
  // step 2 sets validation
  sets: z.array(
    z.object({
      Set_Name: z.string().min(1, 'This field is required'),
    }),
  ),
  // step 3 sets validation
  Other_Deduction: z.string().min(1, 'This field is required'),
  Reason_Deduction: z.string().min(1, 'This field is required'),
  //Net_Amount_INR : z.string().min(1, "This field is required"),
  Payment_Date: z.string().min(1, 'This field is required'),
  Mode_of_Payment: z.string().min(1, 'This field is required'),
  Bank_Account: z.string().min(1, 'This field is required'),
  Transaction_ID: z.string().min(1, 'This field is required'),
  Transaction_Screenshot: z.string().min(1, 'This field is required'),
  //Remarks_Commission : z.string().min(1, "This field is required"),
});
type RecordSubAgentCommissionProps = {
  triggerIcon?: React.ReactNode;
};
const RecordSubAgentCommission: React.FC<RecordSubAgentCommissionProps> = ({
  triggerIcon,
}) => {
  const form = useForm<z.infer<typeof RecordSubAgentValidation>>({
    resolver: zodResolver(RecordSubAgentValidation),
    defaultValues: {
      Associate_Type: '',
      Commission_Country: '',
      Associate: '',
      Commission_Instance: '',
      Record_Institute: '',
      Pick_Date: '',
      Sa_Commission_Type: '',
      sets: [
        {
          Set_Name: '',
        },
      ],
      Other_Deduction: '',
      Reason_Deduction: '',
      // Net_Amount_INR : "",
      Payment_Date: '',
      Mode_of_Payment: '',
      Bank_Account: '',
      Transaction_ID: '',
      Transaction_Screenshot: '',
    },
  });
  const {
    handleSubmit,
    control,
    formState: {},
    setValue,
    clearErrors,
    trigger,
  } = form;
  const { fields } = useFieldArray({
    control,
    name: 'sets',
  });
  const [step, setStep] = useState(1);
  // State for date picker and selected date
  const [singleDate, setSingleDate] = useState<Date | undefined>();
  const [datePicker, setDatePicker] = useState(false);
  const [tempDate, setTempDate] = useState<Date | undefined>();
  // When user applies date selection
  const handleApply = () => {
    if (tempDate) {
      setSingleDate(tempDate);
      // Format date as string and update form state for Pick_Date
      setValue('Pick_Date', tempDate.toISOString());
      clearErrors('Pick_Date'); // clear error if any
    }
    setDatePicker(false);
  };
  // Clear date
  const handleClear = () => {
    setTempDate(undefined);
    setSingleDate(undefined);
    setValue('Pick_Date', '');
  };
  const onSubmit = (data: z.infer<typeof RecordSubAgentValidation>) => {
    console.log('Submitted Data:', data);
  };
  // Validate step 1 fields including Pick_Date on Next button click
  // const handleNextStep = async () => {
  //   if (step === 1) {
  //     const isValid = await trigger([
  //       "Associate_Type",
  //       "Commission_Country",
  //       "Associate",
  //       "Commission_Instance",
  //       "Pick_Date",
  //     ]);
  //     if (isValid) {
  //       clearErrors("sets");
  //       setStep(2);
  //     }
  //   } else if (step === 2) {
  //     clearErrors("sets");
  //     setStep(3);
  //   }
  // };
  // const handleNext = async () => {
  // const handleStep3 = async () => {
  // };
  const handleNextStep = async () => {
    if (step === 1) {
      const isValid = await trigger([
        'Associate_Type',
        'Commission_Country',
        'Associate',
        'Commission_Instance',
        'Record_Institute',
        'Pick_Date', // <-- validate date here
      ]);
      if (isValid) {
        clearErrors('sets');
        setStep(2);
      }
    } else if (step === 2) {
      clearErrors('sets');
      setStep(3);
    }
  };
  return (
    <Dialog>
      <DialogTrigger asChild>
        {triggerIcon || (
          <Text
            title="Add"
            className="add-icn wo-fts-filter-bts flex justify-content items-start"
          >
            <CommonImage
              src="/main/record-agent.webp"
              width={20}
              height={20}
              alt="Add"
              classname="add-icon"
            />
          </Text>
        )}
      </DialogTrigger>
      <DialogContent
        aria-describedby={undefined}
        className="modal-common-widget w-full max-w-7xl p-0 m-0 table-modal-settings"
      >
        <DialogTitle className="p-5 modal-header">
          Record Sub Agent Commission
        </DialogTitle>
        <VisuallyHidden>
          <DialogTitle>Hidden Title</DialogTitle>
        </VisuallyHidden>
        <Form {...form}>
          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
            <Text className="main-scroll-widget">
              <Text className="flex flex-wrap p-2 form-mid mt-0">
                {step === 1 && (
                  <>
                    <div className="flex flex-wrap w-full">
                      {/* Associate Type */}
                      <FormField
                        control={control}
                        name="Associate_Type"
                        render={({ field }) => (
                          <FormItem className="w-1/4 p-2">
                            <FormLabel className="font-bold">
                              Associate Type *
                            </FormLabel>
                            <Select
                              value={field.value}
                              onValueChange={(value) => {
                                field.onChange(value);
                                clearErrors('Associate_Type');
                              }}
                            >
                              <SelectTrigger>
                                <SelectValue placeholder="Select product" />
                              </SelectTrigger>
                              <SelectContent className="z-[9999]">
                                {AssociateTypeList.map((item) => (
                                  <SelectItem
                                    key={item.value}
                                    value={item.value}
                                  >
                                    {item.label}
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                      {/* Associate */}
                      <FormField
                        control={control}
                        name="Associate"
                        render={({ field }) => (
                          <FormItem className="w-1/4 p-2">
                            <FormLabel className="font-bold">
                              Associate *
                            </FormLabel>
                            <Select
                              value={field.value}
                              onValueChange={(value) => {
                                field.onChange(value);
                                clearErrors('Associate');
                              }}
                            >
                              <SelectTrigger>
                                <SelectValue placeholder="Select associate" />
                              </SelectTrigger>
                              <SelectContent className="z-[9999]">
                                {associateList.map((item) => (
                                  <SelectItem
                                    key={item.value}
                                    value={item.value}
                                  >
                                    {item.label}
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                      {/* Commission Country */}
                      <FormField
                        control={control}
                        name="Commission_Country"
                        render={({ field }) => (
                          <FormItem className="w-1/4 p-2">
                            <FormLabel className="font-bold">
                              Country *
                            </FormLabel>
                            <Select
                              value={field.value}
                              onValueChange={(value) => {
                                field.onChange(value);
                                clearErrors('Commission_Country');
                              }}
                            >
                              <SelectTrigger>
                                <SelectValue placeholder="Select country" />
                              </SelectTrigger>
                              <SelectContent className="z-[9999]">
                                {CommissionCountry.map((item) => (
                                  <SelectItem
                                    key={item.value}
                                    value={item.value}
                                  >
                                    {item.label}
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                      {/* Commission Country */}
                      <FormField
                        control={control}
                        name="Record_Institute"
                        render={({ field }) => (
                          <FormItem className="w-1/4 p-2">
                            <FormLabel className="font-bold">
                              Institute *
                            </FormLabel>
                            <Select
                              value={field.value}
                              onValueChange={(value) => {
                                field.onChange(value);
                                clearErrors('Record_Institute');
                              }}
                            >
                              <SelectTrigger>
                                <SelectValue placeholder="Select Institute" />
                              </SelectTrigger>
                              <SelectContent className="z-[9999]">
                                {RecordInstitute.map((item) => (
                                  <SelectItem
                                    key={item.value}
                                    value={item.value}
                                  >
                                    {item.label}
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                      {/* Pick a Date */}
                      <FormField
                        control={control}
                        name="Pick_Date"
                        render={() => (
                          <FormItem className="w-1/4 p-2">
                            <FormLabel className="font-bold">
                              Intake *
                            </FormLabel>
                            <Popover
                              open={datePicker}
                              onOpenChange={setDatePicker}
                            >
                              <PopoverTrigger asChild>
                                <Button
                                  variant="outline"
                                  name="Pick_Date"
                                  className={cn(
                                    'w-full justify-start text-left font-normal',
                                    !singleDate && 'text-muted-foreground',
                                  )}
                                >
                                  <CalendarIcon className="mr-2 h-4 w-4" />
                                  {singleDate
                                    ? format(singleDate, 'LLL dd, y')
                                    : 'Pick a date'}
                                </Button>
                              </PopoverTrigger>
                              <PopoverContent
                                className="w-auto p-0"
                                align="start"
                              >
                                <div className="flex flex-col space-y-2 p-3">
                                  <Calendar
                                    mode="single"
                                    selected={tempDate ?? singleDate}
                                    onSelect={setTempDate}
                                    initialFocus
                                  />
                                  <div className="flex justify-end space-x-2 pt-2 border-t">
                                    <Button
                                      variant="ghost"
                                      onClick={handleClear}
                                    >
                                      Clear
                                    </Button>
                                    <Button onClick={handleApply}>Apply</Button>
                                  </div>
                                </div>
                              </PopoverContent>
                            </Popover>
                            {/* Show validation error */}
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                      {/* Commission Instance */}
                      <FormField
                        control={control}
                        name="Commission_Instance"
                        render={({ field }) => (
                          <FormItem className="w-1/4 p-2">
                            <FormLabel className="font-bold">
                              Commission Instance *
                            </FormLabel>
                            <Select
                              value={field.value}
                              onValueChange={(value) => {
                                field.onChange(value);
                                clearErrors('Commission_Instance');
                              }}
                            >
                              <SelectTrigger>
                                <SelectValue placeholder="Select condition" />
                              </SelectTrigger>
                              <SelectContent className="z-[9999]">
                                {commissionInstanceList.map((item) => (
                                  <SelectItem
                                    key={item.value}
                                    value={item.value}
                                  >
                                    {item.label}
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                    </div>
                    {/* Button - this button does not submit form but triggers validation for step1 */}
                    <Button
                      variant="outline"
                      className="btn record-commission-filter p-4 m-4"
                    >
                      Submit
                    </Button>
                    <Text className="container-widget mx-auto">
                      <Text className="wo-favorite-table box wo-table-ui-scroller">
                        <Text className="wo-box-header flex justify-between gap-5">
                          <Text className="wo-box-header-left">
                            <Heading
                              level="h3"
                              className="box-title text-primary"
                            >
                              Select Eligible Cases
                            </Heading>
                          </Text>
                          {/* <Text className="wo-box-header-right flex gap-2">
                            <FilterMenu />
                          </Text> */}
                        </Text>
                        <Text className="p-1 w-full overflow-auto table-responsive table-container mt-2">
                          <TableData />
                        </Text>
                      </Text>
                    </Text>
                  </>
                )}
                {step === 2 &&
                  fields.map((fieldItem, index) => (
                    <div
                      key={fieldItem.id}
                      className={`commission-set-addon w-full ${index}`}
                    >
                      <div className="flex flex-wrap w-full">
                        {/* Product */}
                        <FormField
                          control={control}
                          name="Associate_Type"
                          render={({ field }) => (
                            <FormItem className="w-1/4 p-2">
                              <FormLabel className="font-bold">
                                Associate Type *
                              </FormLabel>
                              <Select
                                disabled
                                value={field.value}
                                onValueChange={(value) => {
                                  field.onChange(value); // update value
                                  clearErrors('Associate_Type'); // clear error on change
                                }}
                              >
                                <SelectTrigger>
                                  <SelectValue placeholder="Select product" />
                                </SelectTrigger>
                                <SelectContent className="z-[9999]">
                                  {AssociateTypeList.map((item) => (
                                    <SelectItem
                                      key={item.value}
                                      value={item.value}
                                    >
                                      {item.label}
                                    </SelectItem>
                                  ))}
                                </SelectContent>
                              </Select>
                              <FormMessage />
                            </FormItem>
                          )}
                        />
                        {/* Associate */}
                        <FormField
                          control={control}
                          name="Associate"
                          render={({ field }) => (
                            <FormItem className="w-1/4 p-2">
                              <FormLabel className="font-bold">
                                Associate *
                              </FormLabel>
                              <Select
                                disabled
                                value={field.value}
                                onValueChange={(value) => {
                                  field.onChange(value); // update value
                                  clearErrors('Associate'); // clear error on change
                                }}
                              >
                                <SelectTrigger>
                                  <SelectValue placeholder="Select associate" />
                                </SelectTrigger>
                                <SelectContent className="z-[9999]">
                                  {associateList.map((item) => (
                                    <SelectItem
                                      key={item.value}
                                      value={item.value}
                                    >
                                      {item.label}
                                    </SelectItem>
                                  ))}
                                </SelectContent>
                              </Select>
                              <FormMessage />
                            </FormItem>
                          )}
                        />
                        {/* Visa Service Country */}
                        <FormField
                          control={control}
                          name="Commission_Country"
                          render={({ field }) => (
                            <FormItem className="w-1/4 p-2">
                              <FormLabel className="font-bold">
                                Country *
                              </FormLabel>
                              <Select
                                disabled
                                value={field.value}
                                onValueChange={(value) => {
                                  field.onChange(value); // update value
                                  clearErrors('Commission_Country'); // clear error on change
                                }}
                              >
                                <SelectTrigger>
                                  <SelectValue placeholder="Select country" />
                                </SelectTrigger>
                                <SelectContent className="z-[9999]">
                                  {CommissionCountry.map((item) => (
                                    <SelectItem
                                      key={item.value}
                                      value={item.value}
                                    >
                                      {item.label}
                                    </SelectItem>
                                  ))}
                                </SelectContent>
                              </Select>
                              <FormMessage />
                            </FormItem>
                          )}
                        />
                        {/* Visa Service Country */}
                        <FormField
                          control={control}
                          name="Commission_Country"
                          render={({ field }) => (
                            <FormItem className="w-1/4 p-2">
                              <FormLabel className="font-bold">
                                Institute *
                              </FormLabel>
                              <Select
                                disabled
                                value={field.value}
                                onValueChange={(value) => {
                                  field.onChange(value); // update value
                                  clearErrors('Commission_Country'); // clear error on change
                                }}
                              >
                                <SelectTrigger>
                                  <SelectValue placeholder="Select country" />
                                </SelectTrigger>
                                <SelectContent className="z-[9999]">
                                  {CommissionCountry.map((item) => (
                                    <SelectItem
                                      key={item.value}
                                      value={item.value}
                                    >
                                      {item.label}
                                    </SelectItem>
                                  ))}
                                </SelectContent>
                              </Select>
                              <FormMessage />
                            </FormItem>
                          )}
                        />
                        {/* Client Country */}
                        <Text className="space-y-2 w-1/4 p-2 rounded-full">
                          <FormLabel className="no-error-styles font-bold">
                            Intake
                          </FormLabel>
                          <Popover
                            open={datePicker}
                            onOpenChange={setDatePicker}
                          >
                            <PopoverTrigger asChild>
                              <Button
                                disabled
                                variant="outline"
                                className={cn(
                                  'w-full justify-start text-left font-normal',
                                  !singleDate && 'text-muted-foreground',
                                )}
                              >
                                <CalendarIcon className="mr-2 h-4 w-4" />
                                {singleDate ? (
                                  format(singleDate, 'LLL dd, y')
                                ) : (
                                  <span>Pick a date</span>
                                )}
                              </Button>
                            </PopoverTrigger>
                            <PopoverContent
                              className="w-auto p-0"
                              align="start"
                            >
                              <div className="flex flex-col space-y-2 p-3">
                                <Calendar
                                  mode="single"
                                  selected={tempDate ?? singleDate}
                                  onSelect={setTempDate}
                                  initialFocus
                                />
                                <div className="flex justify-end space-x-2 pt-2 border-t">
                                  <Button variant="ghost" onClick={handleClear}>
                                    Clear
                                  </Button>
                                  <Button onClick={handleApply}>Apply</Button>
                                </div>
                              </div>
                            </PopoverContent>
                          </Popover>
                        </Text>
                        {/* Student Condition */}
                        <FormField
                          control={control}
                          name="Commission_Instance"
                          render={({ field }) => (
                            <FormItem className="w-1/4 p-2">
                              <FormLabel className="font-bold">
                                Commission Instance *
                              </FormLabel>
                              <Select
                                disabled
                                value={field.value}
                                onValueChange={(value) => {
                                  field.onChange(value); // update value
                                  clearErrors('Commission_Instance'); // clear error on change
                                }}
                              >
                                <SelectTrigger>
                                  <SelectValue placeholder="Select condition" />
                                </SelectTrigger>
                                <SelectContent className="z-[9999]">
                                  {commissionInstanceList.map((item) => (
                                    <SelectItem
                                      key={item.value}
                                      value={item.value}
                                    >
                                      {item.label}
                                    </SelectItem>
                                  ))}
                                </SelectContent>
                              </Select>
                              <FormMessage />
                            </FormItem>
                          )}
                        />
                      </div>
                      <div className="border border-solid border-gray-400 rounded-sm p-4 pl-2 pr-2 w-full mt-8">
                        <div className="w-full common-type flex justify-between ml-2 commission-set-header mb-4 pb-0">
                          <div className="heading">
                            Sr. 1 John Doe -DH454545 - L45456 - CASE876464
                          </div>
                          <div className="commission-action flex mr-4">
                            <button
                              type="button"
                              className="pl-3 pr-3 pt-1 pb-1 text-sm"
                            >
                              Commission Info
                            </button>
                          </div>
                        </div>
                        <div className="w-full pt-0 pb-2">
                          <div className="flex flex-wrap">
                            <FormField
                              name="Commission_Received"
                              render={({ field }) => (
                                <FormItem className="w-1/4 p-2 rounded-full">
                                  <FormLabel className="no-error-styles font-bold">
                                    Commission Received *
                                  </FormLabel>
                                  <FormControl>
                                    <Input
                                      disabled
                                      className="rounded-full border-gray-600 shadow-none focus-within:shadow-none hover:shadow-none focus:shadow-none"
                                      placeholder="INR 1500"
                                      {...field}
                                    />
                                  </FormControl>
                                  <FormMessage />
                                </FormItem>
                              )}
                            />
                            <FormField
                              control={control}
                              name="Sa_Commission_Type"
                              render={({ field }) => (
                                <FormItem className="w-1/4 p-2">
                                  <FormLabel className="font-bold">
                                    {`SA's Commission Type`} *
                                  </FormLabel>
                                  <Select
                                    value={field.value}
                                    onValueChange={(value) => {
                                      field.onChange(value); // update value
                                      clearErrors('Sa_Commission_Type'); // clear error on change
                                    }}
                                  >
                                    <SelectTrigger>
                                      <SelectValue placeholder="Select SA's Commission" />
                                    </SelectTrigger>
                                    <SelectContent className="z-[9999]">
                                      {commissionInstanceList.map((item) => (
                                        <SelectItem
                                          key={item.value}
                                          value={item.value}
                                        >
                                          {item.label}
                                        </SelectItem>
                                      ))}
                                    </SelectContent>
                                  </Select>
                                  <FormMessage />
                                </FormItem>
                              )}
                            />
                            <FormField
                              control={control}
                              name="Commission_Instance"
                              render={({ field }) => (
                                <FormItem className="w-1/4 p-2">
                                  <FormLabel className="font-bold">
                                    {`SA's Commission Percent`} *
                                  </FormLabel>
                                  <Select
                                    value={field.value}
                                    onValueChange={(value) => {
                                      field.onChange(value); // update value
                                      clearErrors('Commission_Instance'); // clear error on change
                                    }}
                                  >
                                    <SelectTrigger>
                                      <SelectValue placeholder="Select condition" />
                                    </SelectTrigger>
                                    <SelectContent className="z-[9999]">
                                      {commissionInstanceList.map((item) => (
                                        <SelectItem
                                          key={item.value}
                                          value={item.value}
                                        >
                                          {item.label}
                                        </SelectItem>
                                      ))}
                                    </SelectContent>
                                  </Select>
                                  <FormMessage />
                                </FormItem>
                              )}
                            />
                            <FormField
                              name="Set_Name"
                              render={({ field }) => (
                                <FormItem className="w-1/4 p-2 rounded-full">
                                  <FormLabel className="no-error-styles font-bold">
                                    {`SA's Commission`}
                                  </FormLabel>
                                  <FormControl>
                                    <Input
                                      className="rounded-full border-gray-600 shadow-none focus-within:shadow-none hover:shadow-none focus:shadow-none"
                                      placeholder="Enter Value"
                                      {...field}
                                    />
                                  </FormControl>
                                  <FormMessage />
                                </FormItem>
                              )}
                            />
                          </div>
                        </div>
                      </div>
                      <div className="border border-solid border-gray-400 rounded-sm p-4 pl-2 pr-2 w-full mt-8">
                        <div className="w-full common-type flex justify-between ml-2 commission-set-header mb-4 pb-0">
                          <div className="heading">
                            Sr.2 John Doe -DH454545 - L45456 - CASE876464
                          </div>
                          <div className="commission-action flex mr-4">
                            <button
                              type="button"
                              className="pl-3 pr-3 pt-1 pb-1 text-sm"
                            >
                              Commission Info
                            </button>
                          </div>
                        </div>
                        <div className="w-full pt-0 pb-2">
                          <div className="flex flex-wrap">
                            <FormField
                              name="Set_Name"
                              render={({ field }) => (
                                <FormItem className="w-1/4 p-2 rounded-full">
                                  <FormLabel className="no-error-styles font-bold">
                                    Commission Received *
                                  </FormLabel>
                                  <FormControl>
                                    <Input
                                      disabled
                                      className="rounded-full border-gray-600 shadow-none focus-within:shadow-none hover:shadow-none focus:shadow-none"
                                      placeholder="INR 1500"
                                      {...field}
                                    />
                                  </FormControl>
                                  <FormMessage />
                                </FormItem>
                              )}
                            />
                            <FormField
                              control={control}
                              name="Commission_Instance"
                              render={({ field }) => (
                                <FormItem className="w-1/4 p-2">
                                  <FormLabel className="font-bold">
                                    {`SA's Commission Type`} *
                                  </FormLabel>
                                  <Select
                                    value={field.value}
                                    onValueChange={(value) => {
                                      field.onChange(value); // update value
                                      clearErrors('Commission_Instance'); // clear error on change
                                    }}
                                  >
                                    <SelectTrigger>
                                      <SelectValue placeholder="Select condition" />
                                    </SelectTrigger>
                                    <SelectContent className="z-[9999]">
                                      {commissionInstanceList.map((item) => (
                                        <SelectItem
                                          key={item.value}
                                          value={item.value}
                                        >
                                          {item.label}
                                        </SelectItem>
                                      ))}
                                    </SelectContent>
                                  </Select>
                                  <FormMessage />
                                </FormItem>
                              )}
                            />
                            <FormField
                              name="Set_Name"
                              render={({ field }) => (
                                <FormItem className="w-1/4 p-2 rounded-full">
                                  <FormLabel className="no-error-styles font-bold">
                                    {`SA's Commission Percent`} *
                                  </FormLabel>
                                  <FormControl>
                                    <Input
                                      className="rounded-full border-gray-600 shadow-none focus-within:shadow-none hover:shadow-none focus:shadow-none"
                                      placeholder="Enter Value"
                                      {...field}
                                    />
                                  </FormControl>
                                  <FormMessage />
                                </FormItem>
                              )}
                            />
                            <FormField
                              name="Set_Name"
                              render={({ field }) => (
                                <FormItem className="w-1/4 p-2 rounded-full">
                                  <FormLabel className="no-error-styles font-bold">
                                    {`SA's Commission`}
                                  </FormLabel>
                                  <FormControl>
                                    <Input
                                      className="rounded-full border-gray-600 shadow-none focus-within:shadow-none hover:shadow-none focus:shadow-none"
                                      placeholder="Enter Value"
                                      {...field}
                                    />
                                  </FormControl>
                                  <FormMessage />
                                </FormItem>
                              )}
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  ))}
                {step === 3 && (
                  <>
                    {/*  Other Deduction */}
                    <div className="flex justify-between w-9/12 border-gray-900 border-b mb-4 pt-2 pb-2 mt-4">
                      <div>
                        <b>Total Before Tax</b>
                      </div>
                      <div>
                        <b>INR 110000</b>
                      </div>
                    </div>
                    <div className="flex w-9/12 flex-wrap border-gray-900 border-b mb-4 pt-2 pb-2 dedicated-amount">
                      <div className="w-full mb-4">
                        <button className="add-btnF mr-4 green-btn">
                          <CommonImage
                            src="/main/add-icn.webp"
                            width={10}
                            height={10}
                            alt="Add"
                            classname="add-icon"
                          />
                        </button>
                        Create Taxable Amount
                      </div>
                      <div className="flex justify-between flex w-full pb-2">
                        <div>
                          <button className="cross-btn mr-2 red-btn">
                            <CommonImage
                              src="/main/cross-arrow.webp"
                              width={10}
                              height={10}
                              alt="Close"
                              classname="cross-icon"
                            />
                          </button>
                          <button className="edit-btn mr-4 yellow-btn">
                            <CommonImage
                              src="/main/edit-icon.webp"
                              width={10}
                              height={10}
                              alt="Edit Record"
                              classname="edit-icon"
                            />
                          </button>{' '}
                          Taxable @ 15 %
                        </div>
                        <div>INR 98655.17</div>
                      </div>
                    </div>
                    <div className="flex w-9/12 flex-wrap border-gray-900 border-b mb-4 pt-2 pb-2 dedicated-amount">
                      <div className="w-full mb-4">
                        <button className="add-btnF mr-4 green-btn">
                          <CommonImage
                            src="/main/add-icn.webp"
                            width={10}
                            height={10}
                            alt="Add"
                            classname="add-icon"
                          />
                        </button>
                        Add Tax
                      </div>
                      <div className="flex justify-between flex w-full pb-2">
                        <div>
                          <button className="cross-btn mr-2 red-btn">
                            <CommonImage
                              src="/main/cross-arrow.webp"
                              width={10}
                              height={10}
                              alt="Cross icon"
                              classname="add-icon"
                            />
                          </button>
                          <button className="edit-btn mr-4 yellow-btn">
                            <CommonImage
                              src="/main/edit-icon.webp"
                              width={10}
                              height={10}
                              alt="Edit icon"
                              classname="add-icon"
                            />
                          </button>{' '}
                          Tax 1 @ 15 %
                        </div>
                        <div>INR 98655.17</div>
                      </div>
                    </div>
                    <div className="flex justify-between w-9/12 mb-4 pt-2 pb-2 mb-4">
                      <div>Total </div>
                      <div>INR 110000</div>
                    </div>
                    <div className="flex w-9/12 flex-wrap border-gray-900 border-b mb-4 pt-2 pb-2 dedicated-amount">
                      <div className="w-full mb-4">
                        <button className="add-btnF mr-4 green-btn">
                          <CommonImage
                            src="/main/add-icn.webp"
                            width={10}
                            height={10}
                            alt="Add"
                            classname="add-icon"
                          />
                        </button>
                        Add TDS / Other Tax
                      </div>
                      <div className="flex justify-between flex w-full pb-2">
                        <div>
                          <button className="cross-btn mr-2 red-btn">
                            <CommonImage
                              src="/main/cross-arrow.webp"
                              width={10}
                              height={10}
                              alt="Close"
                              classname="add-icon"
                            />
                          </button>
                          <button className="edit-btn mr-4 yellow-btn">
                            <CommonImage
                              src="/main/edit-icon.webp"
                              width={10}
                              height={10}
                              alt="Edit Record"
                              classname="add-icon"
                            />
                          </button>{' '}
                          Tax @ 15 %
                        </div>
                        <div>INR 98655.17</div>
                      </div>
                    </div>
                    <div className="flex justify-between w-9/12 mb-4 pt-2 pb-2">
                      <div>
                        <b>Total After Tax</b>
                      </div>
                      <div>
                        <b>INR 110000</b>
                      </div>
                    </div>
                    <div className="flex w-full flex-wrap border-gray-900 border-t pt-4 pb-4 mt-4 mb-4">
                      <FormField
                        name="Other_Deduction"
                        render={({}) => (
                          <FormItem className="w-1/4 p-2 rounded-full">
                            <FormLabel className="no-error-styles font-bold">
                              Other Deduction *
                            </FormLabel>
                            <FormControl>
                              <Input
                                className="rounded-full border-gray-600 shadow-none focus-within:shadow-none hover:shadow-none focus:shadow-none"
                                placeholder="INR 10000"
                              />
                            </FormControl>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                      {/*  Reason */}
                      <FormField
                        name="Reason_Deduction"
                        render={({}) => (
                          <FormItem className="w-3/4 p-2 rounded-full">
                            <FormLabel className="no-error-styles font-bold">
                              Reason *
                            </FormLabel>
                            <FormControl>
                              <Input
                                className="rounded-full border-gray-600 shadow-none focus-within:shadow-none hover:shadow-none focus:shadow-none"
                                placeholder="This is the reason this deduction has been made"
                              />
                            </FormControl>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                      {/*  Reason */}
                      <FormField
                        name="Net_Amount_INR"
                        render={({}) => (
                          <FormItem className="w-1/4 p-2 rounded-full">
                            <FormLabel className="no-error-styles font-bold">
                              Net Amount in INR
                            </FormLabel>
                            <FormControl>
                              <Input
                                disabled
                                className="rounded-full border-gray-600 shadow-none focus-within:shadow-none hover:shadow-none focus:shadow-none"
                                placeholder="85466.65"
                              />
                            </FormControl>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                      {/* Pick a Date */}
                      <FormField
                        control={control}
                        name="Payment_Date"
                        render={({}) => (
                          <FormItem className="w-1/4 p-2">
                            <FormLabel className="font-bold">
                              Payment Date *
                            </FormLabel>
                            <Popover
                              open={datePicker}
                              onOpenChange={setDatePicker}
                            >
                              <PopoverTrigger asChild>
                                <Button
                                  variant="outline"
                                  name="Pick_Date"
                                  className={cn(
                                    'w-full justify-start text-left font-normal',
                                    !singleDate && 'text-muted-foreground',
                                  )}
                                >
                                  <CalendarIcon className="mr-2 h-4 w-4" />
                                  {singleDate
                                    ? format(singleDate, 'LLL dd, y')
                                    : 'Pick a date'}
                                </Button>
                              </PopoverTrigger>
                              <PopoverContent
                                className="w-auto p-0"
                                align="start"
                              >
                                <div className="flex flex-col space-y-2 p-3">
                                  <Calendar
                                    mode="single"
                                    selected={tempDate ?? singleDate}
                                    onSelect={setTempDate}
                                    initialFocus
                                  />
                                  <div className="flex justify-end space-x-2 pt-2 border-t">
                                    <Button
                                      variant="ghost"
                                      onClick={handleClear}
                                    >
                                      Clear
                                    </Button>
                                    <Button onClick={handleApply}>Apply</Button>
                                  </div>
                                </div>
                              </PopoverContent>
                            </Popover>
                            {/* Show validation error */}
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                      <FormField
                        control={control}
                        name="Mode_of_Payment"
                        render={({ field }) => (
                          <FormItem className="w-1/4 p-2">
                            <FormLabel className="font-bold">
                              Mode of Payment *
                            </FormLabel>
                            <Select
                              value={field.value}
                              onValueChange={field.onChange}
                            >
                              <SelectTrigger>
                                <SelectValue placeholder="Select Commission Instance" />
                              </SelectTrigger>
                              <SelectContent className="z-[9999]">
                                {associateList.map((item) => (
                                  <SelectItem
                                    key={item.value}
                                    value={item.value}
                                  >
                                    {item.label}
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                      <FormField
                        control={control}
                        name="Bank_Account"
                        render={({ field }) => (
                          <FormItem className="w-1/4 p-2">
                            <FormLabel className="font-bold">
                              Bank Account *
                            </FormLabel>
                            <Select
                              value={field.value}
                              onValueChange={field.onChange}
                            >
                              <SelectTrigger>
                                <SelectValue placeholder="Select Commission Instance" />
                              </SelectTrigger>
                              <SelectContent className="z-[9999]">
                                {associateList.map((item) => (
                                  <SelectItem
                                    key={item.value}
                                    value={item.value}
                                  >
                                    {item.label}
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                      {/*  Other Deduction */}
                      <FormField
                        name="Transaction_ID"
                        render={({}) => (
                          <FormItem className="w-1/4 p-2 rounded-full">
                            <FormLabel className="no-error-styles font-bold">
                              Transaction ID *
                            </FormLabel>
                            <FormControl>
                              <Input
                                className="rounded-full border-gray-600 shadow-none focus-within:shadow-none hover:shadow-none focus:shadow-none"
                                placeholder="85566dsf6556d"
                              />
                            </FormControl>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                      {/* General Contract File Upload */}
                      <FormField
                        control={control}
                        name="Transaction_Screenshot"
                        render={({ field }) => (
                          <FormItem className="w-1/4 p-2">
                            <FormLabel className="font-bold">
                              Transaction Screenshot *
                            </FormLabel>
                            <Input
                              type="file"
                              onChange={(value) => {
                                field.onChange(value.target.files);
                                clearErrors('Transaction_Screenshot'); // clear error on change
                              }}
                              className="rounded-full border-gray-600 mt-3 shadow-none"
                            />
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                      {/* Important Conditions / Notes */}
                      <FormField
                        //control={control}
                        name="Remarks_Commission"
                        render={({ field }) => (
                          <FormItem className="w-full p-2">
                            <FormLabel
                              htmlFor="Important_Conditions"
                              className="font-bold"
                            >
                              Remarks
                            </FormLabel>
                            <Textarea
                              id="Important_Conditions"
                              placeholder="Type your message here."
                              className="py-1 mt-2 rounded-lg p-2 pl-2 pr-6 border-gray-600 h-32"
                              value={field.value}
                              onChange={(e) => {
                                field.onChange(e); // update the value
                                // clearErrors("Remarks_Commission"); // clear the error
                              }}
                            />
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                    </div>
                  </>
                )}
              </Text>
            </Text>
            {/* Footer Buttons */}
            <Text className="modal-footer flex justify-end items-end footer-modal text-right gap-2 m-0 pr-4 p-2">
              {step > 1 && (
                <Button
                  type="button"
                  onClick={() => setStep(step - 1)}
                  className="m-0 back-button"
                >
                  Back
                </Button>
              )}
              {step < 3 && (
                <Button
                  type="button"
                  onClick={handleNextStep}
                  className="m-0 primary-button w-40"
                >
                  Next
                </Button>
              )}
              {step === 3 && (
                <Button type="submit" className="m-0 primary-button w-40">
                  Submit
                </Button>
              )}
            </Text>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  );
};
export default RecordSubAgentCommission;