/**
 * MigrateAccountStep - Migrate WHMCS account to portal (passwordless)
 *
 * For whmcs_unmapped users who have verified their email via OTP.
 * Email verification serves as identity proof - no legacy password needed.
 * Shows prefilled WHMCS data and collects password + required fields.
 */

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Button, Input, Label } from "@/components/atoms";
import { Checkbox } from "@/components/atoms/checkbox";
import { getSafeRedirect } from "@/features/auth/utils/route-protection";
import { useGetStartedStore } from "../../../stores/get-started.store";

interface FormErrors {
  password?: string | undefined;
  confirmPassword?: string | undefined;
  dateOfBirth?: string | undefined;
  gender?: string | undefined;
  acceptTerms?: string | undefined;
}

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

  // Compute effective redirect URL from store state (with validation)
  const effectiveRedirectTo = getSafeRedirect(
    redirectTo || serviceContext?.redirectTo,
    "/account/dashboard"
  );

  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  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>({});

  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 = {};

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

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

    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 (except password/confirmPassword - they're security-sensitive
    // and should not be persisted in the store)
    updateFormData({
      dateOfBirth,
      gender: gender as "male" | "female" | "other",
      acceptTerms,
      marketingConsent,
    });

    // Pass password directly to avoid race condition between updateFormData and API call
    const result = await migrateWhmcsAccount({ password });
    if (result) {
      // Redirect to the effective redirect URL on success
      router.push(effectiveRedirectTo);
    }
  };

  const canSubmit = password && confirmPassword && dateOfBirth && gender && acceptTerms;

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="text-center space-y-2">
        <p className="text-sm text-muted-foreground">
          {prefill?.firstName
            ? `Welcome back, ${prefill.firstName}! Set up your new portal password.`
            : "Set up your new portal password to continue."}
        </p>
      </div>

      {/* Pre-filled info display in gray disabled inputs */}
      <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 || formData.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 || formData.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?.phone || formData.phone) && (
          <div className="space-y-2">
            <Label className="text-muted-foreground">Phone</Label>
            <Input
              value={prefill?.phone || formData.phone}
              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>

      {/* 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 */}
      <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 ? "Setting Up Account..." : "Set Up Account"}
        </Button>

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