import React from 'react';
import { Label } from '../ui/label';
import { Input } from '../ui/input';
import { PasswordInput } from '../ui/password-input';

const RegistrationStep4 = ({ formData, handleInputChange }) => {
  return (
    <div className="space-y-6">
      <div className="space-y-4">
        <h2 className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
          Account Credentials
        </h2>

        <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
          Your email is also your username that you can use to login.
          Please note you can only login after your application is validated.
        </p>
      </div>

      <div className="space-y-4">
        <div>
          <Label htmlFor="email">Email *</Label>
          <Input
            id="email"
            name="email"
            type="email"
            required
            value={formData.email}
            onChange={handleInputChange}
            placeholder="your.email@example.com"
            className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
            data-testid="email-input"
          />
        </div>

        <div>
          <Label htmlFor="password">Password *</Label>
          <PasswordInput
            id="password"
            name="password"
            required
            minLength={6}
            value={formData.password}
            onChange={handleInputChange}
            placeholder="At least 6 characters"
            className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
            data-testid="password-input"
          />
          <p className="text-sm text-brand-purple  mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
            Must be at least 6 characters long
          </p>
        </div>

        <div>
          <Label htmlFor="confirmPassword">Repeat Password *</Label>
          <PasswordInput
            id="confirmPassword"
            name="confirmPassword"
            required
            value={formData.confirmPassword}
            onChange={handleInputChange}
            placeholder="Re-enter your password"
            className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
            data-testid="confirm-password-input"
          />
          {formData.confirmPassword && formData.password !== formData.confirmPassword && (
            <p className="text-sm text-red-500 mt-2">
              Passwords do not match
            </p>
          )}
        </div>

        {/* Terms of Service Acceptance */}
        <div className="p-4 bg-[var(--lavender-500)] rounded-lg border border-[var(--neutral-800)]">
          <div className="flex items-start gap-3">
            <input
              type="checkbox"
              id="accepts_tos"
              name="accepts_tos"
              checked={formData.accepts_tos || false}
              onChange={handleInputChange}
              className="mt-1 w-4 h-4 text-brand-purple  border-gray-300 rounded focus:ring-brand-purple "
              required
              data-testid="tos-checkbox"
            />
            <label htmlFor="accepts_tos" className="text-sm text-gray-700" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
              I agree to the{' '}
              <a
                href="/become-a-member/terms-of-service"
                target="_blank"
                rel="noopener noreferrer"
                className="text-brand-purple  hover:text-[var(--purple-ink)] font-semibold underline"
              >
                Terms of Service
              </a>
              {' '}and{' '}
              <a
                href="become-a-member/privacy-policy"
                target="_blank"
                rel="noopener noreferrer"
                className="text-brand-purple  hover:text-[var(--purple-ink)] font-semibold underline"
              >
                Privacy Policy
              </a>
              <span className="text-red-500 ml-1">*</span>
            </label>
          </div>
        </div>
      </div>
    </div>
  );
};

export default RegistrationStep4;
