/**
 * Password Step Component
 * Password and security fields for signup using Zod validation
 */

"use client";

import { Input } from "@/components/atoms";
import { FormField } from "@/components/molecules/FormField/FormField";
import type { UseZodFormReturn } from "@customer-portal/validation";
import type { SignupFormValues } from "./SignupForm";

type PasswordStepProps = Pick<
  UseZodFormReturn<SignupFormValues>,
  "values" | "errors" | "touched" | "setValue" | "setTouchedField"
>;

export function PasswordStep({
  values,
  errors,
  touched,
  setValue,
  setTouchedField,
}: PasswordStepProps) {
  return (
    <div className="space-y-6">
      <FormField
        label="Password"
        error={touched.password ? errors.password : undefined}
        required
        helperText="Password must be at least 8 characters long"
      >
        <Input
          type="password"
          value={values.password}
          onChange={e => setValue("password", e.target.value)}
          onBlur={() => setTouchedField("password")}
          placeholder="Create a secure password"
          className="w-full"
        />
      </FormField>

      <FormField
        label="Confirm Password"
        error={touched.confirmPassword ? errors.confirmPassword : undefined}
        required
      >
        <Input
          type="password"
          value={values.confirmPassword}
          onChange={e => setValue("confirmPassword", e.target.value)}
          onBlur={() => setTouchedField("confirmPassword")}
          placeholder="Confirm your password"
          className="w-full"
        />
      </FormField>

      <div className="space-y-4">
        <div className="flex items-start">
          <div className="flex items-center h-5">
            <input
              id="accept-terms"
              name="accept-terms"
              type="checkbox"
              checked={values.acceptTerms}
              onChange={e => setValue("acceptTerms", e.target.checked)}
              onBlur={() => setTouchedField("acceptTerms")}
              className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"
            />
          </div>
          <div className="ml-3 text-sm">
            <label htmlFor="accept-terms" className="font-medium text-gray-700">
              I accept the{" "}
              <a href="/terms" className="text-blue-600 hover:text-blue-500">
                Terms of Service
              </a>{" "}
              and{" "}
              <a href="/privacy" className="text-blue-600 hover:text-blue-500">
                Privacy Policy
              </a>
            </label>
            {touched.acceptTerms && errors.acceptTerms && (
              <p className="mt-1 text-sm text-red-600">{errors.acceptTerms}</p>
            )}
          </div>
        </div>

        <div className="flex items-start">
          <div className="flex items-center h-5">
            <input
              id="marketing-consent"
              name="marketing-consent"
              type="checkbox"
              checked={values.marketingConsent}
              onChange={e => setValue("marketingConsent", e.target.checked)}
              onBlur={() => setTouchedField("marketingConsent")}
              className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"
            />
          </div>
          <div className="ml-3 text-sm">
            <label htmlFor="marketing-consent" className="font-medium text-gray-700">
              I would like to receive marketing communications and updates
            </label>
          </div>
        </div>
      </div>
    </div>
  );
}
