"use client";

import { PasswordInput, Label, ErrorMessage } from "@/components/atoms";
import { PasswordRequirements } from "./PasswordRequirements";
import { PasswordMatchIndicator } from "./PasswordMatchIndicator";
import { usePasswordValidation } from "../hooks/usePasswordValidation";

interface PasswordSectionProps {
  password: string;
  confirmPassword: string;
  onPasswordChange: (value: string) => void;
  onConfirmPasswordChange: (value: string) => void;
  errors: {
    password?: string | undefined;
    confirmPassword?: string | undefined;
  };
  clearError: (field: "password" | "confirmPassword") => void;
  loading: boolean;
}

export function PasswordSection({
  password,
  confirmPassword,
  onPasswordChange,
  onConfirmPasswordChange,
  errors,
  clearError,
  loading,
}: PasswordSectionProps) {
  const { checks } = usePasswordValidation(password);
  const showPasswordMatch = confirmPassword.length > 0 && !errors.confirmPassword;
  const passwordsMatch = password === confirmPassword;

  return (
    <>
      <div className="space-y-2">
        <Label htmlFor="password">
          Password <span className="text-danger">*</span>
        </Label>
        <PasswordInput
          id="password"
          value={password}
          onChange={e => {
            onPasswordChange(e.target.value);
            clearError("password");
          }}
          placeholder="Create a strong password"
          disabled={loading}
          error={errors.password}
          autoComplete="new-password"
        />
        <ErrorMessage>{errors.password}</ErrorMessage>
        <PasswordRequirements checks={checks} showHint={password.length === 0} />
      </div>

      <div className="space-y-2">
        <Label htmlFor="confirmPassword">
          Confirm Password <span className="text-danger">*</span>
        </Label>
        <PasswordInput
          id="confirmPassword"
          value={confirmPassword}
          onChange={e => {
            onConfirmPasswordChange(e.target.value);
            clearError("confirmPassword");
          }}
          placeholder="Confirm your password"
          disabled={loading}
          error={errors.confirmPassword}
          autoComplete="new-password"
        />
        <ErrorMessage>{errors.confirmPassword}</ErrorMessage>
        {showPasswordMatch && <PasswordMatchIndicator passwordsMatch={passwordsMatch} />}
      </div>
    </>
  );
}
