/**
 * CompleteAccountStep - Full account creation form
 *
 * Handles two cases:
 * - SF-only users (prefill exists): Show pre-filled info, just add password
 * - New customers (no prefill): Full form with name, address, password
 */

"use client";

import { useState, useCallback } from "react";
import { Button, Input, Label } from "@/components/atoms";
import { Checkbox } from "@/components/atoms/checkbox";
import {
  JapanAddressForm,
  type JapanAddressFormData,
} from "@/features/address/components/JapanAddressForm";
import { prepareWhmcsAddressFields } from "@customer-portal/domain/address";
import { useGetStartedStore } from "../../../stores/get-started.store";
import { useRouter } from "next/navigation";

interface FormErrors {
  firstName?: string | undefined;
  lastName?: string | undefined;
  address?: string | undefined;
  password?: string | undefined;
  confirmPassword?: string | undefined;
  phone?: string | undefined;
  dateOfBirth?: string | undefined;
  gender?: string | undefined;
  acceptTerms?: string | undefined;
}

export function CompleteAccountStep() {
  const router = useRouter();
  const {
    formData,
    updateFormData,
    completeAccount,
    prefill,
    accountStatus,
    loading,
    error,
    clearError,
    goBack,
    redirectTo,
    serviceContext,
  } = useGetStartedStore();

  // Compute effective redirect URL from store state
  const effectiveRedirectTo = redirectTo || serviceContext?.redirectTo || "/account/dashboard";

  // Check if this is a new customer (needs full form) or SF-only (has prefill)
  const isNewCustomer = accountStatus === "new_customer";
  const hasPrefill = !!(prefill?.firstName || prefill?.lastName);

  const [firstName, setFirstName] = useState(formData.firstName || prefill?.firstName || "");
  const [lastName, setLastName] = useState(formData.lastName || prefill?.lastName || "");
  const [isAddressComplete, setIsAddressComplete] = useState(!isNewCustomer);
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [phone, setPhone] = useState(formData.phone || prefill?.phone || "");
  const [dateOfBirth, setDateOfBirth] = useState(formData.dateOfBirth);
  const [gender, setGender] = useState<"male" | "female" | "other" | "">(formData.gender);
  const [acceptTerms, setAcceptTerms] = useState(formData.acceptTerms);
  const [marketingConsent, setMarketingConsent] = useState(formData.marketingConsent);
  const [localErrors, setLocalErrors] = useState<FormErrors>({});

  // Handle address form changes (only for new customers)
  const handleAddressChange = useCallback(
    (data: JapanAddressFormData, isComplete: boolean) => {
      setIsAddressComplete(isComplete);
      const whmcsFields = prepareWhmcsAddressFields(data);
      updateFormData({
        address: {
          address1: whmcsFields.address1 || "",
          address2: whmcsFields.address2 || "",
          city: whmcsFields.city || "",
          state: whmcsFields.state || "",
          postcode: whmcsFields.postcode || "",
          country: "JP",
        },
      });
    },
    [updateFormData]
  );

  const validatePassword = (pass: string): string | undefined => {
    if (!pass) return "Password is required";
    if (pass.length < 8) return "Password must be at least 8 characters";
    if (!/[A-Z]/.test(pass)) return "Password must contain an uppercase letter";
    if (!/[a-z]/.test(pass)) return "Password must contain a lowercase letter";
    if (!/[0-9]/.test(pass)) return "Password must contain a number";
    return undefined;
  };

  const validate = (): boolean => {
    const errors: FormErrors = {};

    // Validate name and address only for new customers
    if (isNewCustomer) {
      if (!firstName.trim()) {
        errors.firstName = "First name is required";
      }
      if (!lastName.trim()) {
        errors.lastName = "Last name is required";
      }
      if (!isAddressComplete) {
        errors.address = "Please complete the address";
      }
    }

    const passwordError = validatePassword(password);
    if (passwordError) {
      errors.password = passwordError;
    }

    if (password !== confirmPassword) {
      errors.confirmPassword = "Passwords do not match";
    }

    if (!phone.trim()) {
      errors.phone = "Phone number is required";
    }

    if (!dateOfBirth) {
      errors.dateOfBirth = "Date of birth is required";
    }

    if (!gender) {
      errors.gender = "Please select a gender";
    }

    if (!acceptTerms) {
      errors.acceptTerms = "You must accept the terms of service";
    }

    setLocalErrors(errors);
    return Object.keys(errors).length === 0;
  };

  const handleSubmit = async () => {
    clearError();

    if (!validate()) {
      return;
    }

    // Update form data
    updateFormData({
      firstName: firstName.trim(),
      lastName: lastName.trim(),
      password,
      confirmPassword,
      phone: phone.trim(),
      dateOfBirth,
      gender: gender as "male" | "female" | "other",
      acceptTerms,
      marketingConsent,
    });

    const result = await completeAccount();
    if (result) {
      // Redirect to the effective redirect URL on success
      router.push(effectiveRedirectTo);
    }
  };

  const canSubmit =
    password &&
    confirmPassword &&
    phone &&
    dateOfBirth &&
    gender &&
    acceptTerms &&
    (isNewCustomer ? firstName && lastName && isAddressComplete : true);

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="text-center space-y-2">
        <p className="text-sm text-muted-foreground">
          {hasPrefill
            ? `Welcome back, ${prefill?.firstName}! Just a few more details.`
            : "Fill in your details to create your account."}
        </p>
      </div>

      {/* Pre-filled info display in gray disabled inputs (SF-only users) */}
      {hasPrefill && (
        <div className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label className="text-muted-foreground">First Name</Label>
              <Input
                value={prefill?.firstName || ""}
                disabled
                className="bg-muted text-muted-foreground"
              />
            </div>
            <div className="space-y-2">
              <Label className="text-muted-foreground">Last Name</Label>
              <Input
                value={prefill?.lastName || ""}
                disabled
                className="bg-muted text-muted-foreground"
              />
            </div>
          </div>
          <div className="space-y-2">
            <Label className="text-muted-foreground">Email</Label>
            <Input value={formData.email} disabled className="bg-muted text-muted-foreground" />
          </div>
          {prefill?.address && (
            <div className="space-y-2">
              <Label className="text-muted-foreground">Address</Label>
              <Input
                value={[
                  prefill.address.postcode,
                  prefill.address.state,
                  prefill.address.city,
                  prefill.address.address1,
                  prefill.address.address2,
                ]
                  .filter(Boolean)
                  .join(", ")}
                disabled
                className="bg-muted text-muted-foreground"
              />
            </div>
          )}
        </div>
      )}

      {/* Name fields (new customers only) */}
      {isNewCustomer && (
        <>
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="firstName">
                First Name <span className="text-danger">*</span>
              </Label>
              <Input
                id="firstName"
                value={firstName}
                onChange={e => {
                  setFirstName(e.target.value);
                  setLocalErrors(prev => ({ ...prev, firstName: undefined }));
                }}
                placeholder="Taro"
                disabled={loading}
                error={localErrors.firstName}
              />
              {localErrors.firstName && (
                <p className="text-sm text-danger">{localErrors.firstName}</p>
              )}
            </div>

            <div className="space-y-2">
              <Label htmlFor="lastName">
                Last Name <span className="text-danger">*</span>
              </Label>
              <Input
                id="lastName"
                value={lastName}
                onChange={e => {
                  setLastName(e.target.value);
                  setLocalErrors(prev => ({ ...prev, lastName: undefined }));
                }}
                placeholder="Yamada"
                disabled={loading}
                error={localErrors.lastName}
              />
              {localErrors.lastName && (
                <p className="text-sm text-danger">{localErrors.lastName}</p>
              )}
            </div>
          </div>

          {/* Address Form (new customers only) */}
          <div className="space-y-2">
            <Label>
              Address <span className="text-danger">*</span>
            </Label>
            <JapanAddressForm onChange={handleAddressChange} disabled={loading} />
            {localErrors.address && <p className="text-sm text-danger">{localErrors.address}</p>}
          </div>
        </>
      )}

      {/* Phone */}
      <div className="space-y-2">
        <Label htmlFor="phone">
          Phone Number <span className="text-danger">*</span>
        </Label>
        <Input
          id="phone"
          type="tel"
          value={phone}
          onChange={e => {
            setPhone(e.target.value);
            setLocalErrors(prev => ({ ...prev, phone: undefined }));
          }}
          placeholder="090-1234-5678"
          disabled={loading}
          error={localErrors.phone}
        />
        {localErrors.phone && <p className="text-sm text-danger">{localErrors.phone}</p>}
      </div>

      {/* Date of Birth */}
      <div className="space-y-2">
        <Label htmlFor="dateOfBirth">
          Date of Birth <span className="text-danger">*</span>
        </Label>
        <Input
          id="dateOfBirth"
          type="date"
          value={dateOfBirth}
          onChange={e => {
            setDateOfBirth(e.target.value);
            setLocalErrors(prev => ({ ...prev, dateOfBirth: undefined }));
          }}
          disabled={loading}
          error={localErrors.dateOfBirth}
          max={new Date().toISOString().split("T")[0]}
        />
        {localErrors.dateOfBirth && (
          <p className="text-sm text-danger">{localErrors.dateOfBirth}</p>
        )}
      </div>

      {/* Gender */}
      <div className="space-y-2">
        <Label>
          Gender <span className="text-danger">*</span>
        </Label>
        <div className="flex gap-4">
          {(["male", "female", "other"] as const).map(option => (
            <label key={option} className="flex items-center gap-2 cursor-pointer">
              <input
                type="radio"
                name="gender"
                value={option}
                checked={gender === option}
                onChange={() => {
                  setGender(option);
                  setLocalErrors(prev => ({ ...prev, gender: undefined }));
                }}
                disabled={loading}
                className="h-4 w-4 text-primary focus:ring-primary"
              />
              <span className="text-sm capitalize">{option}</span>
            </label>
          ))}
        </div>
        {localErrors.gender && <p className="text-sm text-danger">{localErrors.gender}</p>}
      </div>

      {/* Password (at bottom before terms) */}
      <div className="space-y-2">
        <Label htmlFor="password">
          Password <span className="text-danger">*</span>
        </Label>
        <Input
          id="password"
          type="password"
          value={password}
          onChange={e => {
            setPassword(e.target.value);
            setLocalErrors(prev => ({ ...prev, password: undefined }));
          }}
          placeholder="Create a strong password"
          disabled={loading}
          error={localErrors.password}
          autoComplete="new-password"
        />
        {localErrors.password && <p className="text-sm text-danger">{localErrors.password}</p>}
        <p className="text-xs text-muted-foreground">
          At least 8 characters with uppercase, lowercase, and numbers
        </p>
      </div>

      {/* Confirm Password */}
      <div className="space-y-2">
        <Label htmlFor="confirmPassword">
          Confirm Password <span className="text-danger">*</span>
        </Label>
        <Input
          id="confirmPassword"
          type="password"
          value={confirmPassword}
          onChange={e => {
            setConfirmPassword(e.target.value);
            setLocalErrors(prev => ({ ...prev, confirmPassword: undefined }));
          }}
          placeholder="Confirm your password"
          disabled={loading}
          error={localErrors.confirmPassword}
          autoComplete="new-password"
        />
        {localErrors.confirmPassword && (
          <p className="text-sm text-danger">{localErrors.confirmPassword}</p>
        )}
      </div>

      {/* Terms & Marketing */}
      <div className="space-y-3">
        <div className="flex items-start gap-2">
          <Checkbox
            id="acceptTerms"
            checked={acceptTerms}
            onChange={e => {
              setAcceptTerms(e.target.checked);
              setLocalErrors(prev => ({ ...prev, acceptTerms: undefined }));
            }}
            disabled={loading}
          />
          <Label htmlFor="acceptTerms" className="text-sm font-normal leading-tight cursor-pointer">
            I accept the{" "}
            <a
              href="/terms"
              target="_blank"
              rel="noopener noreferrer"
              className="text-primary hover:underline"
            >
              Terms of Service
            </a>{" "}
            and{" "}
            <a
              href="/privacy"
              target="_blank"
              rel="noopener noreferrer"
              className="text-primary hover:underline"
            >
              Privacy Policy
            </a>{" "}
            <span className="text-danger">*</span>
          </Label>
        </div>
        {localErrors.acceptTerms && (
          <p className="text-sm text-danger ml-6">{localErrors.acceptTerms}</p>
        )}

        <div className="flex items-start gap-2">
          <Checkbox
            id="marketingConsent"
            checked={marketingConsent}
            onChange={e => setMarketingConsent(e.target.checked)}
            disabled={loading}
          />
          <Label
            htmlFor="marketingConsent"
            className="text-sm font-normal leading-tight cursor-pointer"
          >
            I would like to receive marketing emails and updates
          </Label>
        </div>
      </div>

      {/* Error display */}
      {error && (
        <div className="p-3 rounded-lg bg-danger/10 border border-danger/20">
          <p className="text-sm text-danger">{error}</p>
        </div>
      )}

      {/* Actions */}
      <div className="space-y-3">
        <Button
          type="button"
          onClick={handleSubmit}
          disabled={loading || !canSubmit}
          loading={loading}
          className="w-full h-11"
        >
          {loading ? "Creating Account..." : "Create Account"}
        </Button>

        <Button
          type="button"
          variant="ghost"
          onClick={goBack}
          disabled={loading}
          className="w-full"
        >
          Go Back
        </Button>
      </div>
    </div>
  );
}
