"use client";

import Image from "next/image";
import React from "react";

import RecaptchaField from "@/components/common/RecaptchaField";
import config from "@/utils/config";

import NewsLetterModal from "../../modal/NewsletterModal";
import {
  formatCardInput,
  US_STATES,
} from "../landingFormConstants";

type FreeShippingSignupFormProps = {
  loading: boolean;
  userLoggedIn?: boolean;
  userEmail?: string | null;
  isExistingUser: boolean;
  isSubscribedUser: boolean;
  step1Errors: Record<string, string>;
  step2Errors: Record<string, string>;
  firstName: string;
  lastName: string;
  email: string;
  password: string;
  address: string;
  city: string;
  country: string;
  stateVal: string;
  zipcode: string;
  creditCard: string;
  expMonth: string;
  expYear: string;
  cvv: string;
  agree: boolean;
  rebatesAgree: boolean;
  years: number[];
  showNewsLetterModal: boolean;
  onSubmit: (e: React.FormEvent) => void;
  onFirstNameChange: (value: string) => void;
  onLastNameChange: (value: string) => void;
  onEmailChange: (value: string) => void;
  onPasswordChange: (value: string) => void;
  onAddressChange: (value: string) => void;
  onCityChange: (value: string) => void;
  onCountryChange: (value: string) => void;
  onStateChange: (value: string) => void;
  onZipcodeChange: (value: string) => void;
  onCreditCardChange: (value: string) => void;
  onExpMonthChange: (value: string) => void;
  onExpYearChange: (value: string) => void;
  onCvvChange: (value: string) => void;
  onAgreeChange: (checked: boolean) => void;
  onRebatesAgreeChange: (checked: boolean) => void;
  onRecaptchaVerified: (verified: boolean) => void;
  onCloseNewsletter: () => void;
  clearFieldError: (field: string) => void;
  clearStep2Error: (field: string) => void;
  checkEmailInstant: (email: string) => void;
};

export default function FreeShippingSignupForm({
  loading,
  userLoggedIn = false,
  userEmail = "",
  isExistingUser,
  isSubscribedUser,
  step1Errors,
  step2Errors,
  firstName,
  lastName,
  email,
  password,
  address,
  city,
  country,
  stateVal,
  zipcode,
  creditCard,
  expMonth,
  expYear,
  cvv,
  agree,
  rebatesAgree,
  years,
  showNewsLetterModal,
  onSubmit,
  onFirstNameChange,
  onLastNameChange,
  onEmailChange,
  onPasswordChange,
  onAddressChange,
  onCityChange,
  onCountryChange,
  onStateChange,
  onZipcodeChange,
  onCreditCardChange,
  onExpMonthChange,
  onExpYearChange,
  onCvvChange,
  onAgreeChange,
  onRebatesAgreeChange,
  onRecaptchaVerified,
  onCloseNewsletter,
  clearFieldError,
  clearStep2Error,
  checkEmailInstant,
}: FreeShippingSignupFormProps) {
  const inputClass = (hasError: boolean) =>
    `form-control ${hasError ? "is-invalid" : ""}`;
  const selectClass = (hasError: boolean) =>
    `form-select ${hasError ? "is-invalid" : ""}`;
  const submitError =
    step1Errors.submit ||
    step2Errors.submit ||
    (Object.keys(step2Errors).some((key) => step2Errors[key])
      ? "All fields are mandatory & should match criteria. Please check all fields."
      : "");

  return (
    <>
      <div className="card signup-card shadow-lg border-0">
        <div className="card-body px-3 px-md-4 py-4">
          <h2 className="h4 fw-bold text-center mb-1">
            Time to Start Saving on Shipping
          </h2>
          <p className="text-center text-muted small mb-4">
            Create your account and claim your benefit.
          </p>
          <form
            id="landing-page-form"
            className="signup-form"
            onSubmit={onSubmit}
            noValidate
          >
            <div className="row g-2">
              <div className="col-sm-6">
                <label className="form-label" htmlFor="fs-fname">
                  First Name <span className="req">*</span>
                </label>
                <input
                  id="fs-fname"
                  name="fname"
                  type="text"
                  className={inputClass(!!step1Errors.firstName)}
                  placeholder="First Name"
                  value={firstName}
                  onChange={(e) => {
                    onFirstNameChange(e.target.value);
                    clearFieldError("firstName");
                  }}
                  disabled={loading}
                  required
                />
                <div className="invalid-feedback">{step1Errors.firstName}</div>
              </div>

              <div className="col-sm-6">
                <label className="form-label" htmlFor="fs-lname">
                  Last Name <span className="req">*</span>
                </label>
                <input
                  id="fs-lname"
                  name="lname"
                  type="text"
                  className={inputClass(!!step1Errors.lastName)}
                  placeholder="Last Name"
                  value={lastName}
                  onChange={(e) => {
                    onLastNameChange(e.target.value);
                    clearFieldError("lastName");
                  }}
                  disabled={loading}
                  required
                />
                <div className="invalid-feedback">{step1Errors.lastName}</div>
              </div>

              <div className="col-sm-6">
                <label className="form-label" htmlFor="fs-email">
                  Email <span className="req">*</span>
                </label>
                <input
                  id="fs-email"
                  name="email"
                  type="email"
                  className={inputClass(
                    !!step1Errors.email || isExistingUser || isSubscribedUser,
                  )}
                  placeholder="Email"
                  value={userLoggedIn ? (userEmail ?? "") : email}
                  onChange={(e) => {
                    onEmailChange(e.target.value);
                    checkEmailInstant(e.target.value);
                    clearFieldError("email");
                  }}
                  readOnly={userLoggedIn}
                  disabled={loading}
                  required
                />
                <div className="invalid-feedback">
                  {isSubscribedUser
                    ? "You have already Subscribed! Please go back to main site & login"
                    : isExistingUser
                      ? "User with this email already exists. Please continue and Subscribe."
                      : step1Errors.email}
                </div>
              </div>

              {!isExistingUser && (
                <div className="col-sm-6">
                  <label className="form-label" htmlFor="fs-password">
                    Password <span className="req">*</span>
                  </label>
                  <input
                    id="fs-password"
                    name="password"
                    type="password"
                    className={inputClass(!!step1Errors.password)}
                    placeholder="Type Password"
                    minLength={8}
                    value={password}
                    onChange={(e) => {
                      onPasswordChange(e.target.value);
                      clearFieldError("password");
                    }}
                    disabled={loading}
                    required
                  />
                  <div className="invalid-feedback">{step1Errors.password}</div>
                </div>
              )}

              {!isSubscribedUser && (
                <>
                  <div className="col-12">
                    <label className="form-label" htmlFor="fs-address">
                      Address <span className="req">*</span>
                    </label>
                    <input
                      id="fs-address"
                      name="address"
                      type="text"
                      className={inputClass(!!step1Errors.address)}
                      placeholder="Address"
                      value={address}
                      onChange={(e) => {
                        onAddressChange(e.target.value);
                        clearFieldError("address");
                      }}
                      disabled={loading}
                      required
                    />
                    <div className="invalid-feedback">{step1Errors.address}</div>
                  </div>

                  <div className="col-sm-6">
                    <label className="form-label" htmlFor="fs-city">
                      City <span className="req">*</span>
                    </label>
                    <input
                      id="fs-city"
                      name="city"
                      type="text"
                      className={inputClass(!!step1Errors.city)}
                      placeholder="City"
                      value={city}
                      onChange={(e) => {
                        onCityChange(e.target.value);
                        clearFieldError("city");
                      }}
                      disabled={loading}
                      required
                    />
                    <div className="invalid-feedback">{step1Errors.city}</div>
                  </div>

                  <div className="col-sm-6">
                    <label className="form-label" htmlFor="fs-country">
                      Country <span className="req">*</span>
                    </label>
                    <select
                      id="fs-country"
                      name="country"
                      className="form-select"
                      value={country}
                      onChange={(e) => onCountryChange(e.target.value)}
                      disabled={loading}
                      required
                    >
                      <option value="US">USA</option>
                    </select>
                  </div>

                  <div className="col-sm-6">
                    <label className="form-label" htmlFor="fs-state">
                      State <span className="req">*</span>
                    </label>
                    <select
                      id="fs-state"
                      name="state"
                      className={selectClass(!!step1Errors.state)}
                      value={stateVal}
                      onChange={(e) => {
                        onStateChange(e.target.value);
                        clearFieldError("state");
                      }}
                      disabled={loading}
                      required
                    >
                      <option value="">Select State</option>
                      {US_STATES.map((st) => (
                        <option key={st.code} value={st.code}>
                          {st.name}
                        </option>
                      ))}
                    </select>
                    <div className="invalid-feedback">{step1Errors.state}</div>
                  </div>

                  <div className="col-sm-6">
                    <label className="form-label" htmlFor="fs-zipcode">
                      ZipCode <span className="req">*</span>
                    </label>
                    <input
                      id="fs-zipcode"
                      name="zipcode"
                      type="text"
                      className={inputClass(!!step1Errors.zipcode)}
                      placeholder="Zipcode"
                      value={zipcode}
                      onChange={(e) => {
                        onZipcodeChange(e.target.value);
                        clearFieldError("zipcode");
                      }}
                      maxLength={7}
                      disabled={loading}
                      required
                    />
                    <div className="invalid-feedback">{step1Errors.zipcode}</div>
                  </div>
                </>
              )}

              <div className="col-12">
                <label className="form-label" htmlFor="fs-credit-card">
                  Card Number <span className="req">*</span>
                </label>
                <input
                  id="fs-credit-card"
                  name="credit_card"
                  type="text"
                  inputMode="numeric"
                  className={inputClass(!!step2Errors.card)}
                  placeholder="XXXX-XXXX-XXXX-XXXX"
                  value={creditCard}
                  onChange={(e) => {
                    const digits = e.target.value.replace(/\D/g, "").slice(0, 16);
                    onCreditCardChange(formatCardInput(digits));
                    clearStep2Error("card");
                  }}
                  disabled={loading}
                  required
                />
                <Image
                  src={`${config.ENV_VARS.CDN_URL}/assets/img/landing/visa.png`}
                  alt="Accepted cards"
                  width={120}
                  height={40}
                  className="credit-card-logo"
                />
                <div className="invalid-feedback">{step2Errors.card}</div>
              </div>

              <div className="col-7">
                <label className="form-label" htmlFor="fs-cc-exp-month">
                  Expiration Date <span className="req">*</span>
                </label>
                <div className="d-flex gap-2">
                  <select
                    id="fs-cc-exp-month"
                    name="cc-exp-month"
                    className={selectClass(!!step2Errors.month)}
                    value={expMonth}
                    onChange={(e) => {
                      onExpMonthChange(e.target.value);
                      clearStep2Error("month");
                    }}
                    disabled={loading}
                    required
                  >
                    <option value="">MM</option>
                    {Array.from({ length: 12 }).map((_, i) => {
                      const num = (i + 1).toString().padStart(2, "0");
                      return (
                        <option key={num} value={num}>
                          {num}
                        </option>
                      );
                    })}
                  </select>
                  <select
                    id="fs-cc-exp-year"
                    name="cc-exp-year"
                    className={selectClass(!!step2Errors.year)}
                    value={expYear}
                    onChange={(e) => {
                      onExpYearChange(e.target.value);
                      clearStep2Error("year");
                    }}
                    disabled={loading}
                    required
                  >
                    <option value="">YY</option>
                    {years.map((y) => (
                      <option key={y} value={y}>
                        {String(y).slice(-2)}
                      </option>
                    ))}
                  </select>
                </div>
                <div className="invalid-feedback">
                  {step2Errors.month || step2Errors.year}
                </div>
              </div>

              <div className="col-5">
                <label className="form-label" htmlFor="fs-cvv">
                  CVV <span className="req">*</span>
                </label>
                <div className="input-group cvv-group">
                  <input
                    id="fs-cvv"
                    name="cvv"
                    type="text"
                    inputMode="numeric"
                    maxLength={4}
                    className={inputClass(!!step2Errors.cvv)}
                    placeholder="CVV"
                    value={cvv}
                    onChange={(e) => {
                      onCvvChange(e.target.value.replace(/\D/g, ""));
                      clearStep2Error("cvv");
                    }}
                    disabled={loading}
                    required
                  />
                  <span className="input-group-text">CVV</span>
                </div>
                <div className="invalid-feedback">{step2Errors.cvv}</div>
              </div>

              <div className="col-12">
                <div className="form-check small">
                  <input
                    className="form-check-input"
                    id="fs-agree"
                    type="checkbox"
                    checked={agree}
                    onChange={(e) => onAgreeChange(e.target.checked)}
                    disabled={loading}
                  />
                  <label
                    className="form-check-label text-muted"
                    htmlFor="fs-agree"
                  >
                    I Agree to Offer Details,{" "}
                    <a href="/terms" target="_blank" rel="noreferrer">
                      <strong>Terms of Use</strong>
                    </a>{" "}
                    &amp;{" "}
                    <a href="/privacy" target="_blank" rel="noreferrer">
                      <strong>Privacy Policy</strong>
                    </a>
                  </label>
                </div>
                {step2Errors.agree ? (
                  <div className="form-error-banner mt-2">
                    Please select the checkbox to accept terms &amp; privacy
                  </div>
                ) : null}
              </div>

              <div className="col-12">
                <div className="form-check small">
                  <input
                    className="form-check-input"
                    id="fs-rebatesplusagree"
                    type="checkbox"
                    checked={rebatesAgree}
                    onChange={(e) => onRebatesAgreeChange(e.target.checked)}
                    disabled={loading}
                  />
                  <label
                    className="form-check-label text-muted"
                    htmlFor="fs-rebatesplusagree"
                  >
                    I understand and agree to the terms of the subscription
                    trial at Rebatesplus. I consent to be billed after the trial
                    period.
                  </label>
                </div>
                {step2Errors.rebatesAgree ? (
                  <div className="form-error-banner mt-2">
                    Please accept the subscription trial terms.
                  </div>
                ) : null}
              </div>

              <div className="col-12">
                <label className="form-label" htmlFor="fs-recaptcha">
                  Captcha <span className="req">*</span>
                </label>
                <div id="fs-recaptcha">
                  <RecaptchaField onVerifiedChange={onRecaptchaVerified} />
                </div>
                {step2Errors.recaptchaChecked ? (
                  <div className="invalid-feedback d-block">
                    {step2Errors.recaptchaChecked}
                  </div>
                ) : null}
              </div>

              {submitError ? (
                <div className="col-12">
                  <div className="form-error-banner">{submitError}</div>
                </div>
              ) : null}

              <div className="col-12 d-grid">
                <button
                  type="submit"
                  className="btn btn-submit btn-lg"
                  disabled={loading || isSubscribedUser}
                >
                  {loading
                    ? "Processing..."
                    : isSubscribedUser
                      ? "Already Subscribed"
                      : "Submit"}
                </button>
              </div>
            </div>
          </form>
          <p className="text-center text-muted small mt-3 mb-0">
            Secure signup. We never sell your data.
          </p>
        </div>
      </div>
      <NewsLetterModal
        show={showNewsLetterModal}
        title="Success!"
        message="Subscription successful! Thank you for subscribing."
        onClose={onCloseNewsletter}
      />
    </>
  );
}