'use client';

import { useState, useMemo, useEffect } from 'react';
import { useTranslations } from '@/core/lib/translations';
import { cn } from '@/core/lib/utils';
import { LoadingSpinner } from '@/ui/shared/loading-spinner';
import { getPasswordError } from '@/core/lib/validation';
import { useStoreInfo } from '@/core/providers/store-provider';
import { toBirthdayNumber } from '@/core/lib/birthday';
import { BirthdayPicker } from '@/components/shared/birthday-picker';
import { readReferralCookie } from '@/core/lib/referral';
import { useStoreCapabilities } from '@/core/providers/store-provider';

interface RegisterData {
  firstName: string;
  lastName: string;
  email: string;
  password: string;
  acceptsMarketing: boolean;
  /**
   * Birthday month and day, never a year. Sent together or left out entirely:
   * one without the other is rejected with HTTP 400. Omitted rather than
   * nulled when the shopper leaves the field empty, because `registerCustomer()`
   * takes numbers only.
   */
  birthMonth?: number;
  birthDay?: number;
  /**
   * Loyalty referral share code, captured from a `?ref=` link that may have
   * been clicked days ago. Omitted when nothing was captured; never invented.
   */
  referralCode?: string;
}

interface RegisterFormProps {
  onSubmit: (data: RegisterData) => Promise<void>;
  error?: string | null;
  className?: string;
}

function getPasswordStrength(password: string): { label: string; color: string; width: string } {
  if (password.length === 0) return { label: '', color: '', width: 'w-0' };
  if (password.length < 8) return { label: 'tooShort', color: 'bg-destructive', width: 'w-1/4' };

  let score = 0;
  if (password.length >= 8) score++;
  if (/[A-Z]/.test(password)) score++;
  if (/[0-9]/.test(password)) score++;
  if (/[^A-Za-z0-9]/.test(password)) score++;

  if (score <= 1) return { label: 'weak', color: 'bg-orange-500', width: 'w-1/3' };
  if (score <= 2) return { label: 'fair', color: 'bg-yellow-500', width: 'w-1/2' };
  if (score <= 3) return { label: 'good', color: 'bg-primary', width: 'w-3/4' };
  return { label: 'strong', color: 'bg-green-500', width: 'w-full' };
}

export function RegisterForm({ onSubmit, error, className }: RegisterFormProps) {
  const t = useTranslations('auth');
  const tf = useTranslations('checkoutForm');
  const tc = useTranslations('common');
  const { storeInfo } = useStoreInfo();
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [privacyAccepted, setPrivacyAccepted] = useState(false);
  const [privacyError, setPrivacyError] = useState(false);
  const [passwordError, setPasswordError] = useState<string | null>(null);
  const [acceptsMarketing, setAcceptsMarketing] = useState(false);
  const { capabilities } = useStoreCapabilities();

  /**
   * Whether to promise a birthday gift beside the picker.
   *
   * The gate is inverted relative to `ReferralGreeting`, and deliberately so.
   * There, an undecided capability must not suppress a real referral, so only
   * an explicit `false` hides anything. Here the text makes a PROMISE, and a
   * promise may only be printed on an explicit `true`: a store with birthday
   * rewards switched off — which is the default — would otherwise tell every
   * customer a gift is coming and send nothing, and `requireBirthday` can make
   * handing over the date compulsory on top of that.
   */
  const birthdayGiftOn = capabilities?.features.hasBirthdayRewards === true;
  const [birthMonth, setBirthMonth] = useState('');
  const [birthDay, setBirthDay] = useState('');
  const [birthdayError, setBirthdayError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const [referralCode, setReferralCode] = useState<string | null>(null);

  /**
   * A referral code captured from a `?ref=` link, possibly on a different day.
   * Read in an effect rather than during render because it comes from
   * `document.cookie`, which does not exist during SSR: reading it inline would
   * render one thing on the server and another on the client and trip a
   * hydration mismatch.
   */
  useEffect(() => {
    setReferralCode(readReferralCookie());
  }, []);

  /**
   * The merchant can make the birthday mandatory at registration on this sales
   * channel; the backend then rejects a register call without it. The flag is a
   * rendering hint only, and absent means optional, so the fields stay optional
   * unless it is explicitly true.
   */
  const birthdayRequired = storeInfo?.requireBirthday === true;

  const strength = useMemo(() => getPasswordStrength(password), [password]);

  /**
   * The picker hands back both halves at once, or two nulls when the shopper
   * clears the field. State stays as strings so the submit path below is
   * unchanged.
   */
  function selectBirthday(month: number | null, day: number | null) {
    setBirthMonth(month ? String(month) : '');
    setBirthDay(day ? String(day) : '');
    setBirthdayError(null);
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (loading) return;

    const pwCode = getPasswordError(password);
    if (pwCode) {
      setPasswordError(t(pwCode));
      return;
    }
    setPasswordError(null);

    const month = toBirthdayNumber(birthMonth);
    const day = toBirthdayNumber(birthDay);

    if (birthdayRequired && (month === null || day === null)) {
      setBirthdayError(tc('birthdayRequired'));
      return;
    }
    // Half a birthday is an HTTP 400 at the API, so catch it here rather than
    // letting the shopper find out from a failed registration.
    if ((month === null) !== (day === null)) {
      setBirthdayError(tc('birthdayIncomplete'));
      return;
    }
    setBirthdayError(null);

    if (!privacyAccepted) {
      setPrivacyError(true);
      return;
    }

    try {
      setLoading(true);
      await onSubmit({
        firstName,
        lastName,
        email,
        password,
        acceptsMarketing,
        // Omitted, never nulled, when the shopper left the field empty:
        // `registerCustomer()` takes numbers only.
        ...(month !== null && day !== null ? { birthMonth: month, birthDay: day } : {}),
        // Same rule for the referral: send it only when one was captured. The
        // API validates it after the fact, so a stale code cannot cost this
        // shopper their registration.
        ...(referralCode ? { referralCode } : {}),
      });
    } finally {
      setLoading(false);
    }
  }

  return (
    <form onSubmit={handleSubmit} className={cn('space-y-4', className)}>
      {error && (
        <div className="bg-destructive/10 border-destructive/20 text-destructive rounded-lg border px-4 py-3 text-sm">
          {error}
        </div>
      )}

      {/* A referral captured earlier is about to be applied. Worth saying out
          loud: the shopper was promised a welcome gift on a page they may have
          left days ago, and silence here reads as the offer having expired.
          Renders nothing when no code was captured. */}
      {referralCode && (
        <p className="border-primary/20 bg-primary/5 text-muted-foreground rounded-lg border px-4 py-3 text-sm">
          {t('referralApplied')}
        </p>
      )}

      <div className="grid grid-cols-2 gap-3">
        <div>
          <label
            htmlFor="register-first-name"
            className="text-foreground mb-1.5 block text-sm font-medium"
          >
            {tf('firstName')}
          </label>
          <input
            id="register-first-name"
            type="text"
            required
            value={firstName}
            onChange={(e) => setFirstName(e.target.value)}
            placeholder={t('firstNamePlaceholder')}
            autoComplete="given-name"
            className="border-border bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary h-10 w-full rounded border px-3 text-sm focus:outline-none focus:ring-2"
          />
        </div>

        <div>
          <label
            htmlFor="register-last-name"
            className="text-foreground mb-1.5 block text-sm font-medium"
          >
            {tf('lastName')}
          </label>
          <input
            id="register-last-name"
            type="text"
            required
            value={lastName}
            onChange={(e) => setLastName(e.target.value)}
            placeholder={t('lastNamePlaceholder')}
            autoComplete="family-name"
            className="border-border bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary h-10 w-full rounded border px-3 text-sm focus:outline-none focus:ring-2"
          />
        </div>
      </div>

      <div>
        <label
          htmlFor="register-email"
          className="text-foreground mb-1.5 block text-sm font-medium"
        >
          {t('email')}
        </label>
        <input
          id="register-email"
          type="email"
          required
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder={t('emailPlaceholder')}
          autoComplete="email"
          className="border-border bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary h-10 w-full rounded border px-3 text-sm focus:outline-none focus:ring-2"
        />
      </div>

      <div>
        <label
          htmlFor="register-password"
          className="text-foreground mb-1.5 block text-sm font-medium"
        >
          {t('password')}
        </label>
        <input
          id="register-password"
          type="password"
          required
          minLength={8}
          value={password}
          onChange={(e) => {
            setPassword(e.target.value);
            if (passwordError) setPasswordError(null);
          }}
          placeholder={t('atLeastChars')}
          autoComplete="new-password"
          className="border-border bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary h-10 w-full rounded border px-3 text-sm focus:outline-none focus:ring-2"
        />
        {password.length > 0 && (
          <div className="mt-2">
            <div className="bg-muted h-1.5 w-full overflow-hidden rounded-full">
              <div
                className={cn(
                  'h-full rounded-full transition-all duration-300',
                  strength.color,
                  strength.width
                )}
              />
            </div>
            <p className="text-muted-foreground mt-1 text-xs">
              {strength.label
                ? t(strength.label as 'tooShort' | 'weak' | 'fair' | 'good' | 'strong')
                : ''}
            </p>
          </div>
        )}
        {passwordError && <p className="text-destructive mt-1 text-xs">{passwordError}</p>}
      </div>

      {/* Birthday: month and day only, never a year. Optional unless the
          merchant made it mandatory on this sales channel. */}
      <div>
        <label
          htmlFor="register-birthday"
          className="text-foreground mb-1.5 block text-sm font-medium"
        >
          {tc('birthday')}
          {birthdayRequired && <span className="text-destructive"> *</span>}
        </label>
        <BirthdayPicker
          id="register-birthday"
          month={toBirthdayNumber(birthMonth)}
          day={toBirthdayNumber(birthDay)}
          onChange={selectBirthday}
          required={birthdayRequired}
          invalid={birthdayError !== null}
        />
        {birthdayGiftOn && (
          <p className="text-muted-foreground mt-1.5 text-xs">{tc('birthdayGiftNote')}</p>
        )}
        {birthdayError && <p className="text-destructive mt-1 text-xs">{birthdayError}</p>}
      </div>

      {/* Privacy Policy (required) */}
      <div>
        <label className="flex cursor-pointer items-start gap-2">
          <input
            type="checkbox"
            checked={privacyAccepted}
            onChange={(e) => {
              setPrivacyAccepted(e.target.checked);
              setPrivacyError(false);
            }}
            className="accent-primary mt-0.5"
          />
          <span className="text-muted-foreground text-sm">
            {t('privacyAcceptPrefix')}{' '}
            <a
              href="/privacy"
              target="_blank"
              rel="noopener noreferrer"
              className="text-primary underline underline-offset-2"
            >
              {t('privacyPolicyLink')}
            </a>{' '}
            <span className="text-destructive">*</span>
          </span>
        </label>
        {privacyError && <p className="text-destructive mt-1 text-xs">{t('privacyRequired')}</p>}
      </div>

      {/* Marketing consent (optional) */}
      <label className="flex cursor-pointer items-start gap-2">
        <input
          type="checkbox"
          checked={acceptsMarketing}
          onChange={(e) => setAcceptsMarketing(e.target.checked)}
          className="accent-primary mt-0.5"
        />
        <span className="text-muted-foreground text-sm">{t('acceptsMarketing')}</span>
      </label>

      <button
        type="submit"
        disabled={loading}
        className="bg-primary text-primary-foreground flex h-10 w-full items-center justify-center gap-2 rounded text-sm font-medium transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
      >
        {loading ? (
          <>
            <LoadingSpinner
              size="sm"
              className="border-primary-foreground/30 border-t-primary-foreground"
            />
            {t('creatingAccount')}
          </>
        ) : (
          t('createAccount')
        )}
      </button>
    </form>
  );
}