/**
 * Password Step - Password creation with strength indicator
 */

"use client";

import Link from "next/link";
import { Input } from "@/components/atoms";
import { FormField } from "@/components/molecules/FormField/FormField";
import { checkPasswordStrength, getPasswordStrengthDisplay } from "@customer-portal/domain/auth";

interface PasswordStepProps {
  form: {
    values: {
      email: string;
      password: string;
      confirmPassword: string;
      acceptTerms: boolean;
      marketingConsent?: boolean | undefined;
    };
    errors: Record<string, string | undefined>;
    touched: Record<string, boolean | undefined>;
    setValue: (field: string, value: unknown) => void;
    setTouchedField: (field: string) => void;
  };
}

export function PasswordStep({ form }: PasswordStepProps) {
  const { values, errors, touched, setValue, setTouchedField } = form;
  const { requirements, strength, isValid } = checkPasswordStrength(values.password);
  const { label, colorClass } = getPasswordStrengthDisplay(strength);
  const passwordsMatch = values.password === values.confirmPassword;

  return (
    <div className="space-y-6">
      {/* Hidden email field for browser password manager to associate credentials */}
      <input
        type="email"
        name="email"
        value={values.email}
        autoComplete="section-signup username"
        readOnly
        className="sr-only"
        tabIndex={-1}
        aria-hidden="true"
      />

      <FormField
        label="Password"
        error={touched["password"] ? errors["password"] : undefined}
        required
      >
        <Input
          name="new-password"
          type="password"
          value={values.password}
          onChange={e => setValue("password", e.target.value)}
          onBlur={() => setTouchedField("password")}
          placeholder="Create a secure password"
          autoComplete="section-signup new-password"
          data-field="password"
        />
      </FormField>

      {values.password && (
        <div className="space-y-3">
          <div className="flex items-center gap-2">
            <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
              <div
                className={`h-full transition-all ${colorClass}`}
                style={{ width: `${strength}%` }}
              />
            </div>
            <span
              className={`text-xs font-medium ${isValid ? "text-success" : "text-muted-foreground"}`}
            >
              {label}
            </span>
          </div>
          <div className="grid grid-cols-2 gap-1">
            {requirements.map(r => (
              <div key={r.key} className="flex items-center gap-1.5 text-xs">
                <span className={r.met ? "text-success" : "text-muted-foreground/60"}>
                  {r.met ? "✓" : "○"}
                </span>
                <span className={r.met ? "text-success" : "text-muted-foreground"}>{r.label}</span>
              </div>
            ))}
          </div>
        </div>
      )}

      <FormField
        label="Confirm Password"
        error={touched["confirmPassword"] ? errors["confirmPassword"] : undefined}
        required
      >
        <Input
          name="confirm-password"
          type="password"
          value={values.confirmPassword}
          onChange={e => setValue("confirmPassword", e.target.value)}
          onBlur={() => setTouchedField("confirmPassword")}
          placeholder="Re-enter your password"
          autoComplete="section-signup new-password"
          data-field="confirmPassword"
        />
      </FormField>

      {values.confirmPassword && (
        <p className={`text-sm ${passwordsMatch ? "text-success" : "text-danger"}`}>
          {passwordsMatch ? "✓ Passwords match" : "✗ Passwords do not match"}
        </p>
      )}

      <div className="space-y-3 rounded-xl border border-border bg-muted/30 p-4">
        <label className="flex items-start gap-3 cursor-pointer">
          <input
            type="checkbox"
            checked={values.acceptTerms}
            onChange={e => setValue("acceptTerms", e.target.checked)}
            onBlur={() => setTouchedField("acceptTerms")}
            className="mt-0.5 h-5 w-5 text-primary border-input rounded focus:ring-ring"
          />
          <span className="text-sm text-foreground/80">
            I accept the{" "}
            <Link
              href="/terms"
              className="text-primary hover:underline font-medium"
              target="_blank"
            >
              Terms of Service
            </Link>{" "}
            and{" "}
            <Link
              href="/privacy"
              className="text-primary hover:underline font-medium"
              target="_blank"
            >
              Privacy Policy
            </Link>
            <span className="text-red-500 ml-1">*</span>
          </span>
        </label>
        {touched["acceptTerms"] && errors["acceptTerms"] && (
          <p className="text-sm text-danger ml-8">{errors["acceptTerms"]}</p>
        )}

        <label className="flex items-start gap-3 cursor-pointer">
          <input
            type="checkbox"
            checked={values.marketingConsent ?? false}
            onChange={e => setValue("marketingConsent", e.target.checked)}
            className="mt-0.5 h-5 w-5 text-primary border-input rounded focus:ring-ring"
          />
          <span className="text-sm text-foreground/80">
            Send me updates about new products and promotions
            <span className="block text-xs text-muted-foreground mt-0.5">
              You can unsubscribe anytime
            </span>
          </span>
        </label>
      </div>
    </div>
  );
}
