"use client";

import { GlobeIcon } from "@/assets/icons";
import InputGroup from "@/components/FormElements/InputGroup";
import MultiSelect from "@/components/FormElements/MultiSelect";
import { Select } from "@/components/FormElements/select";
import { ShowcaseSection } from "@/components/Layouts/showcase-section";
import FormFooter from "@/components/ui/FormFooter";
import { FormErrorMessages } from "@/constants/Texts";
import { CreateCustomerCredentials } from "@/lib/api";
import useCreateCustomerPresenter from "./useCreateCustomerPresenter";

interface IProps {
  editMode?: boolean;
  defaultValues?: CreateCustomerCredentials;
  id?: string;
}

const CreateCustomer = ({ defaultValues, editMode, id }: IProps) => {
  const { errors, handleSubmit, register, onSubmit, companies, router } =
    useCreateCustomerPresenter({ defaultValues, editMode, id });

  return (
    <form className="grid grid-cols-1 gap-9" onSubmit={handleSubmit(onSubmit)}>
      <ShowcaseSection
        title="Create Customer"
        className="grid grid-cols-2 gap-5"
      >
        <div className="flex flex-col gap-2">
          <InputGroup
            {...register("username", {
              required: { value: true, message: FormErrorMessages.required },
              minLength: { value: 3, message: FormErrorMessages.minLength(3) },
              maxLength: {
                value: 30,
                message: FormErrorMessages.maxLength(30),
              },
              pattern: {
                value: /^[a-zA-Z0-9](?:[a-zA-Z0-9._]*[a-zA-Z0-9])?$/,
                message: FormErrorMessages.invalidPattern,
              },
            })}
            name="username"
            label="Username"
            type="text"
            placeholder="Enter username"
          />
          {errors.username && (
            <p className="mt-1 text-sm text-red-500">
              {errors.username.message}
            </p>
          )}
        </div>
        <div className="flex flex-col gap-2">
          <MultiSelect
            label="Select companies"
            items={
              companies
                ? companies?.map((item) => ({
                    value: item.id,
                    text: item.name,
                  }))
                : []
            }
            placeholder="Select companies to assign"
            {...register("companies", {
              required: "Please select at least one interest",
            })}
            errors={errors}
            required
          />
        </div>
        <div className="flex flex-col gap-2">
          <InputGroup
            {...register("email", {
              required: { value: true, message: FormErrorMessages.required },
              pattern: {
                value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
                message: FormErrorMessages.invalidEmail,
              },
            })}
            name="email"
            label="Email"
            type="email"
            placeholder="Enter email"
          />
          {errors.email && (
            <p className="mt-1 text-sm text-red-500">{errors.email.message}</p>
          )}
        </div>
        <div className="flex flex-col">
          <Select
            label="Role"
            {...register("role", {
              required: { message: FormErrorMessages.required, value: true },
            })}
            name="role"
            items={[
              {
                label: "Admin",
                value: "admin",
              },
              {
                label: "Analyst",
                value: "analyst",
              },
            ]}
            placeholder="Select Role"
          />
        </div>
        {!editMode && (
          <div className="flex flex-col gap-2">
            <InputGroup
              {...register("password", {
                required: { value: true, message: FormErrorMessages.required },
                minLength: {
                  value: 8,
                  message: FormErrorMessages.minLength(8),
                },
                maxLength: {
                  value: 128,
                  message: FormErrorMessages.maxLength(128),
                },
              })}
              disabled={editMode}
              name="password"
              label="Password"
              type="password"
              placeholder="Enter password"
            />
            {errors.password && (
              <p className="mt-1 text-sm text-red-500">
                {errors.password.message}
              </p>
            )}
          </div>
        )}

        <div className="flex flex-col gap-2">
          <InputGroup
            {...register("full_name", {
              minLength: { value: 2, message: FormErrorMessages.minLength(2) },
              maxLength: {
                value: 100,
                message: FormErrorMessages.maxLength(100),
              },
            })}
            name="full_name"
            label="Full name"
            type="full_name"
            placeholder="Enter full name"
          />
          {errors.full_name && (
            <p className="mt-1 text-sm text-red-500">
              {errors.full_name.message}
            </p>
          )}
        </div>
        <div className="flex flex-col gap-2">
          <InputGroup
            {...register("phone", {
              minLength: {
                value: 10,
                message: FormErrorMessages.minLength(10),
              },
              maxLength: {
                value: 20,
                message: FormErrorMessages.maxLength(20),
              },
            })}
            name="phone"
            label="Phone"
            type="tel"
            placeholder="Enter phone"
          />
          {errors.phone && (
            <p className="mt-1 text-sm text-red-500">{errors.phone.message}</p>
          )}
        </div>

        <div className="flex flex-col gap-2">
          <Select
            {...register("type", {
              required: {
                message: FormErrorMessages.required,
                value: true,
              },
            })}
            name="type"
            label="Type"
            placeholder="Select Type"
            prefixIcon={<GlobeIcon />}
            items={[
              {
                label: "Individual",
                value: "individual",
              },
              {
                label: "Company",
                value: "company",
              },
              {
                label: "Government",
                value: "government",
              },
            ]}
          />
          {errors.type && (
            <p className="mt-1 text-sm text-red-500">{errors.type.message}</p>
          )}
        </div>

        <FormFooter />
      </ShowcaseSection>
    </form>
  );
};

export default CreateCustomer;
