"use client";

import React, { useEffect, useRef, useState } from "react";
import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik";
import PhoneInput from "@/components/ui/PhoneInputField";
import GlobalLoadingOverlay from "@/components/ui/GlobalLoadingOverlay";
import {
  AgencyFormValues,
  agencyInitialValues,
  agencyValidationSchema,
  AGENCY_CREATORS_MANAGED_OPTIONS,
  AGENCY_PRIMARY_PLATFORM_OPTIONS,
} from "./types";
import {
  PrivacyConsentField,
  ApplyFormStatus,
  ApplySubmitButton,
} from "./CommonApplyFields";

interface AgencyApplyFormProps {
  apiError: string;
  successMessage: string;
  onSubmit: (
    values: AgencyFormValues,
    helpers: FormikHelpers<AgencyFormValues>
  ) => Promise<void>;
}

export default function AgencyApplyForm({
  apiError,
  successMessage,
  onSubmit,
}: AgencyApplyFormProps) {
  const [isPrimaryOpen, setIsPrimaryOpen] = useState(false);
  const primaryDropdownRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    const handleOutsideClick = (event: MouseEvent) => {
      if (
        primaryDropdownRef.current &&
        !primaryDropdownRef.current.contains(event.target as Node)
      ) {
        setIsPrimaryOpen(false);
      }
    };

    // Only add listener when dropdown is open to avoid interfering with other form interactions
    if (isPrimaryOpen) {
      document.addEventListener("mousedown", handleOutsideClick);
      return () => document.removeEventListener("mousedown", handleOutsideClick);
    }
  }, [isPrimaryOpen]);

  return (
    <Formik<AgencyFormValues>
      initialValues={agencyInitialValues}
      validationSchema={agencyValidationSchema}
      onSubmit={onSubmit}
      validateOnBlur
      validateOnChange
    >
      {({ isSubmitting, values, setFieldValue }) => (
        <Form className="">
          <GlobalLoadingOverlay show={isSubmitting} />
          <div className="row g-3">
            <div className="col-md-6">
              <label htmlFor="fullName" className="form-check-label">
                Full Name <span className="color-second">*</span>
              </label>
              <Field
                placeholder="Full Name"
                className="form-control"
                type="text"
                name="fullName"
              />
              <ErrorMessage
                name="fullName"
                component="div"
                className="invalid-feedback d-block"
              />
            </div>

            <div className="col-md-6">
              <label htmlFor="email" className="form-check-label">
                Email ID <span className="color-second">*</span>
              </label>
              <Field
                placeholder="Email ID"
                className="form-control"
                type="email"
                name="email"
              />
              <ErrorMessage
                name="email"
                component="div"
                className="invalid-feedback d-block"
              />
            </div>

            <div className="col-md-6">
              <label className="form-check-label">
                Phone Number <span className="color-second">*</span>
              </label>
              <div className="position-relative request-code-input">
                <PhoneInput />
              </div>
            </div>

            <div className="col-md-6">
              <label htmlFor="agencyName" className="form-check-label">
                Agency Name <span className="color-second">*</span>
              </label>
              <Field
                placeholder="Agency Name"
                className="form-control"
                type="text"
                name="agencyName"
              />
              <ErrorMessage
                name="agencyName"
                component="div"
                className="invalid-feedback d-block"
              />
            </div>

            <div className="col-md-6">
              <label htmlFor="website" className="form-check-label">
                Website <span className="color-second">*</span>
              </label>
              <Field
                placeholder="Website"
                className="form-control"
                type="url"
                name="website"
              />
              <ErrorMessage
                name="website"
                component="div"
                className="invalid-feedback d-block"
              />
            </div>

            <div className="col-md-6">
              <label htmlFor="instagramPage" className="form-check-label">
                Instagram Page <span className="color-second">*</span>
              </label>
              <Field
                placeholder="Instagram Page"
                className="form-control"
                type="text"
                name="instagramPage"
              />
              <ErrorMessage
                name="instagramPage"
                component="div"
                className="invalid-feedback d-block"
              />
            </div>

            <div className="col-md-6">
              <label htmlFor="creatorsManaged" className="form-check-label">
                Number of Creators Managed <span className="color-second">*</span>
              </label>
              <Field
                as="select"
                name="creatorsManaged"
                className="form-select custom-select-box"
              >
                <option value="" disabled>
                  Select Number of Creators Managed
                </option>
                {AGENCY_CREATORS_MANAGED_OPTIONS.map((option) => (
                  <option key={option} value={option}>
                    {option}
                  </option>
                ))}
              </Field>
              <ErrorMessage
                name="creatorsManaged"
                component="div"
                className="invalid-feedback d-block"
              />
            </div>

            <div className="col-md-6">
              <label className="form-check-label">
                Primary Platforms <span className="color-second">*</span>
              </label>
              <div className="position-relative mt-1" ref={primaryDropdownRef}>
                <button
                  type="button"
                  className="form-control text-start d-flex align-items-center justify-content-between"
                  onClick={() => setIsPrimaryOpen((prev) => !prev)}
                  aria-expanded={isPrimaryOpen}
                  aria-haspopup="listbox"
                >
                  <span className="text-truncate">
                    {values.primaryPlatforms.length > 0
                      ? values.primaryPlatforms.join(", ")
                      : "Select Primary Platforms"}
                  </span>
                  <span aria-hidden="true">▾</span>
                </button>

                {isPrimaryOpen && (
                  <div
                    className="position-absolute top-100 start-0 w-100 bg-white border rounded-3 mt-1 p-2"
                    style={{ zIndex: 20 }}
                    role="listbox"
                    aria-label="Primary Platforms"
                  >
                    <div className="d-flex flex-column gap-2">
                      {AGENCY_PRIMARY_PLATFORM_OPTIONS.map((option) => {
                        const isChecked = values.primaryPlatforms.includes(option);
                        return (
                          <label
                            key={option}
                            className="form-check-label d-flex align-items-center gap-2"
                          >
                            <input
                              type="checkbox"
                              className="form-check-input m-0"
                              checked={isChecked}
                              onChange={(e) => {
                                const checked = e.target.checked;
                                const next = checked
                                  ? [...values.primaryPlatforms, option]
                                  : values.primaryPlatforms.filter((item) => item !== option);
                                setFieldValue("primaryPlatforms", next);
                              }}
                            />
                            <span>{option}</span>
                          </label>
                        );
                      })}
                    </div>
                  </div>
                )}
              </div>
              <ErrorMessage
                name="primaryPlatforms"
                component="div"
                className="invalid-feedback d-block"
              />
            </div>

            <PrivacyConsentField />
            <ApplyFormStatus apiError={apiError} successMessage={successMessage} />
            <ApplySubmitButton isSubmitting={isSubmitting} />
          </div>
        </Form>
      )}
    </Formik>
  );
}