"use client";
import { GlobeIcon } from "@/assets/icons";
import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
import InputGroup from "@/components/FormElements/InputGroup";
import { Select } from "@/components/FormElements/select";
import { ShowcaseSection } from "@/components/Layouts/showcase-section";
import Stepper from "@/components/ui/Stepper";
import { Countries } from "@/constants/countries";
import { Languages } from "@/constants/languages";
import { FormErrorMessages } from "@/constants/Texts";
import { BreadcrumbItem } from "@/types/shared";
import BenefitsStep from "./BenefitsStep";
import ChallengesStep from "./ChallengesStep";
import ChartStep from "./ChartStep";
import ContactsStep from "./ContactsStep";
import FeaturesStep from "./FeaturesStep";
import FooterStep from "./FooterStep";
import HeroStep from "./HeroStep";
import useMarketingForm from "./useMarketingForm";

interface MarketingFormProps {
  breadcrumbItems: BreadcrumbItem[];
  title: string;
  onSubmit: (data: any) => void;
  isPending: boolean;
  initialData?: any;
}

const MarketingForm = ({
  breadcrumbItems,
  title,
  onSubmit,
  isPending,
  initialData,
}: MarketingFormProps) => {
  const {
    step,
    formData,
    steps,
    handleStepChange,
    handleSubmitAll,
    registerPageType,
    watchPageType,
    pageTypeErrors,
    isCompany,
    isCurrentStepValid,
    stepValidityHandlers,
    setValue,
    heroRef,
    chartRef,
    featuresRef,
    challengesRef,
    benefitsRef,
    contactsRef,
    footerRef,
  } = useMarketingForm(initialData, onSubmit);
  return (
    <>
      <Breadcrumb items={breadcrumbItems} />
      <ShowcaseSection title={title}>
        <div className="mb-6 rounded-xl bg-gray-1 p-10 dark:bg-gray-7">
          <h3 className="mb-4 text-lg font-semibold text-dark dark:text-white">
            Page Configuration
          </h3>
          <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
            <div>
              <Select
                {...registerPageType("type", {
                  required: {
                    message: FormErrorMessages.required,
                    value: true,
                  },
                })}
                errors={pageTypeErrors}
                name="type"
                label="Page Type"
                required
                value={watchPageType("type")}
                items={[
                  { value: "company", label: "Company" },
                  { value: "organization", label: "Organization" },
                ]}
              />
            </div>

            <div>
              <Select
                {...registerPageType("language", {
                  validate: (v) =>
                    !isCompany ||
                    (typeof v === "string" && v.length > 0) ||
                    FormErrorMessages.required,
                })}
                errors={pageTypeErrors}
                label="Language"
                name="language"
                items={Languages}
                defaultValue="en"
                value={watchPageType("language")}
                clearable
                prefixIcon={<GlobeIcon />}
                disabled={!isCompany}
                required={isCompany}
                placeholder={
                  isCompany ? "Please select language" : undefined
                }
                onClear={() => setValue("language", "")}
              />
            </div>
            <div>
              <InputGroup
                {...registerPageType("company_name", {
                  required: isCompany
                    ? { message: FormErrorMessages.required, value: true }
                    : false,
                  minLength: isCompany
                    ? { value: 2, message: FormErrorMessages.minLength(2) }
                    : undefined,
                  maxLength: isCompany
                    ? { value: 200, message: FormErrorMessages.maxLength(200) }
                    : undefined,
                })}
                label="Company Name"
                name="company_name"
                type="text"
                placeholder={isCompany ? "Enter Company Name" : undefined}
                disabled={!isCompany}
                required={isCompany}
              />
              {pageTypeErrors.company_name && (
                <p className="mt-1 text-sm text-red-500">
                  {pageTypeErrors.company_name.message}
                </p>
              )}
            </div>
            <div>
              <Select
                {...registerPageType("country", {
                  validate: (v) =>
                    !isCompany ||
                    (typeof v === "string" && v.length > 0) ||
                    FormErrorMessages.required,
                })}
                errors={pageTypeErrors}
                name="country"
                label="Country"
                items={Countries}
                defaultValue="USA"
                value={watchPageType("country")}
                clearable
                prefixIcon={<GlobeIcon />}
                disabled={!isCompany}
                required={isCompany}
                placeholder={isCompany ? "Please select country" : undefined}
                onClear={() => setValue("country", "")}
              />
            </div>
            <div className="sm:col-span-2">
              <InputGroup
                {...registerPageType("key", {
                  required: {
                    value: true,
                    message: FormErrorMessages.required,
                  },
                })}
                label="Page key"
                name="key"
                required
                placeholder="Please enter page key"
                type="text"
              />
              {pageTypeErrors.key && (
                <p className="mt-1 text-sm text-red-500">
                  {pageTypeErrors.key.message}
                </p>
              )}
            </div>
          </div>
        </div>

        <div style={{ display: step === 0 ? "block" : "none" }}>
          <HeroStep
            ref={heroRef}
            initialData={formData.hero}
            onValidityChange={stepValidityHandlers[0]}
          />
        </div>
        <div style={{ display: step === 1 ? "block" : "none" }}>
          <ChartStep
            ref={chartRef}
            initialData={formData.chart}
            onValidityChange={stepValidityHandlers[1]}
          />
        </div>
        <div style={{ display: step === 2 ? "block" : "none" }}>
          <FeaturesStep
            ref={featuresRef}
            initialData={formData.features}
            onValidityChange={stepValidityHandlers[2]}
          />
        </div>
        <div style={{ display: step === 3 ? "block" : "none" }}>
          <ChallengesStep
            ref={challengesRef}
            initialData={formData.challenges}
            onValidityChange={stepValidityHandlers[3]}
          />
        </div>
        <div style={{ display: step === 4 ? "block" : "none" }}>
          <BenefitsStep
            ref={benefitsRef}
            initialData={formData.advantages}
            onValidityChange={stepValidityHandlers[4]}
          />
        </div>
        <div style={{ display: step === 5 ? "block" : "none" }}>
          <ContactsStep
            ref={contactsRef}
            initialData={formData.contact}
            onValidityChange={stepValidityHandlers[5]}
          />
        </div>
        <div style={{ display: step === 6 ? "block" : "none" }}>
          <FooterStep
            ref={footerRef}
            initialData={formData.footer}
            onValidityChange={stepValidityHandlers[6]}
          />
        </div>

        <Stepper
          steps={steps}
          currentStep={step}
          onStepChange={handleStepChange}
          onSubmit={handleSubmitAll}
          isSubmitting={isPending}
          nextDisabled={!isCurrentStepValid}
        />
      </ShowcaseSection>
    </>
  );
};

export default MarketingForm;
