import React from 'react';
import { Label } from '../ui/label';
import { Input } from '../ui/input';
import { Checkbox } from '../ui/checkbox';

const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
  const leadSourceOptions = [
    'Current member',
    'Friend',
    'OutSmart Magazine',
    'Search engine (Google etc.)',
    "I've known about LOAF for a long time",
    'Other'
  ];

  const handleLeadSourceChange = (source) => {
    setFormData(prev => {
      const sources = prev.lead_sources.includes(source)
        ? prev.lead_sources.filter(s => s !== source)
        : [...prev.lead_sources, source];
      return { ...prev, lead_sources: sources };
    });
  };

  return (
    <div className="space-y-8">
      {/* Personal Information */}
      <div className="space-y-4">
        <h2 className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
          Personal Information
        </h2>

        {/* First Name, Last Name */}
        <div className="grid md:grid-cols-2 gap-4">
          <div>
            <Label htmlFor="first_name">First Name *</Label>
            <Input
              id="first_name"
              name="first_name"
              required
              value={formData.first_name}
              onChange={handleInputChange}
              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
              data-testid="first-name-input"
            />
          </div>
          <div>
            <Label htmlFor="last_name">Last Name *</Label>
            <Input
              id="last_name"
              name="last_name"
              required
              value={formData.last_name}
              onChange={handleInputChange}
              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
              data-testid="last-name-input"
            />
          </div>
        </div>

        {/* Phone, Date of Birth */}
        <div className="grid md:grid-cols-2 gap-4">
          <div>
            <Label htmlFor="phone">Phone *</Label>
            <Input
              id="phone"
              name="phone"
              type="tel"
              required
              value={formData.phone}
              onChange={handleInputChange}
              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
              data-testid="phone-input"
            />
          </div>
          <div>
            <Label htmlFor="date_of_birth">Date of Birth *</Label>
            <Input
              id="date_of_birth"
              name="date_of_birth"
              type="date"
              required
              value={formData.date_of_birth}
              onChange={handleInputChange}
              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
              data-testid="dob-input"
            />
          </div>
        </div>

        {/* Address */}
        <div>
          <Label htmlFor="address">Address *</Label>
          <Input
            id="address"
            name="address"
            required
            value={formData.address}
            onChange={handleInputChange}
            className="h-14 rounded-xl border-2 border-var[(--neutral-300)] focus:border-[var(--orange-soft)]"
            data-testid="address-input"
          />
        </div>

        {/* City, State, Zipcode */}
        <div className="grid md:grid-cols-3 gap-4">
          <div>
            <Label htmlFor="city">City *</Label>
            <Input
              id="city"
              name="city"
              required
              value={formData.city}
              onChange={handleInputChange}
              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
              data-testid="city-input"
            />
          </div>
          <div>
            <Label htmlFor="state">State *</Label>
            <Input
              id="state"
              name="state"
              required
              value={formData.state}
              onChange={handleInputChange}
              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
              data-testid="state-input"
            />
          </div>
          <div>
            <Label htmlFor="zipcode">Zipcode *</Label>
            <Input
              id="zipcode"
              name="zipcode"
              required
              value={formData.zipcode}
              onChange={handleInputChange}
              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
              data-testid="zipcode-input"
            />
          </div>
        </div>
      </div>

      {/* How Did You Hear About Us */}
      <div className="space-y-4">
        <h2 className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
          How Did You Hear About Us? *
        </h2>
        <div className="space-y-3">
          {leadSourceOptions.map((source) => (
            <div key={source} className="flex items-center space-x-2">
              <Checkbox
                id={source}
                checked={formData.lead_sources.includes(source)}
                onCheckedChange={() => handleLeadSourceChange(source)}
                data-testid={`lead-source-${source.toLowerCase().replace(/\s+/g, '-')}`}
              />
              <Label htmlFor={source} className="text-base cursor-pointer">
                {source}
              </Label>
            </div>
          ))}
        </div>
      </div>

      {/* Partner Information */}
      <div className="space-y-4">
        <h2 className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
          Partner Information (Optional)
        </h2>

        <div className="grid md:grid-cols-2 gap-4">
          <div>
            <Label htmlFor="partner_first_name">Partner First Name</Label>
            <Input
              id="partner_first_name"
              name="partner_first_name"
              value={formData.partner_first_name}
              onChange={handleInputChange}
              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
              data-testid="partner-first-name-input"
            />
          </div>
          <div>
            <Label htmlFor="partner_last_name">Partner Last Name</Label>
            <Input
              id="partner_last_name"
              name="partner_last_name"
              value={formData.partner_last_name}
              onChange={handleInputChange}
              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
              data-testid="partner-last-name-input"
            />
          </div>
        </div>

        <div className="space-y-3">
          <div className="flex items-center space-x-2">
            <Checkbox
              id="partner_is_member"
              name="partner_is_member"
              checked={formData.partner_is_member}
              onCheckedChange={(checked) =>
                setFormData(prev => ({ ...prev, partner_is_member: checked }))
              }
              data-testid="partner-is-member-checkbox"
            />
            <Label htmlFor="partner_is_member" className="text-base cursor-pointer">
              Is your partner already a member?
            </Label>
          </div>

          <div className="flex items-center space-x-2">
            <Checkbox
              id="partner_plan_to_become_member"
              name="partner_plan_to_become_member"
              checked={formData.partner_plan_to_become_member}
              onCheckedChange={(checked) =>
                setFormData(prev => ({ ...prev, partner_plan_to_become_member: checked }))
              }
              data-testid="partner-plan-member-checkbox"
            />
            <Label htmlFor="partner_plan_to_become_member" className="text-base cursor-pointer">
              Does your partner plan to become a member?
            </Label>
          </div>
        </div>
      </div>
    </div>
  );
};

export default RegistrationStep1;