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

const RegistrationStep2 = ({ formData, setFormData, handleInputChange }) => {
  const volunteerOptions = [
    'Welcoming new members at events',
    'Sending out birthday cards',
    'Care Team Calls',
    'Sharing ideas for events',
    'Researching grants',
    'Applying for grants',
    'Assisting with TeatherLOAFers',
    'Assisting with ActiveLOAFers',
    'Assisting with weekday Lunch Bunch',
    'Uploading Photos to the Website',
    'Assisting with eNewsletter',
    'Other administrative task'
  ];

  const handleVolunteerChange = (option) => {
    setFormData(prev => {
      const interests = prev.volunteer_interests.includes(option)
        ? prev.volunteer_interests.filter(i => i !== option)
        : [...prev.volunteer_interests, option];
      return { ...prev, volunteer_interests: interests };
    });
  };

  return (
    <div className="space-y-8">
      {/* Newsletter Publication Preferences */}
      <div className="space-y-4">
        <h2 className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
          Newsletter Publication Preferences *
        </h2>
        <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
          Please check what information may be published in LOAF Newsletter
        </p>

        <div className="space-y-3">
          <div className="flex items-center space-x-2">
            <Checkbox
              id="newsletter_publish_name"
              checked={formData.newsletter_publish_name}
              onCheckedChange={(checked) =>
                setFormData(prev => ({ ...prev, newsletter_publish_name: checked }))
              }
            />
            <Label htmlFor="newsletter_publish_name" className="text-base cursor-pointer">
              Name
            </Label>
          </div>

          <div className="flex items-center space-x-2">
            <Checkbox
              id="newsletter_publish_photo"
              checked={formData.newsletter_publish_photo}
              onCheckedChange={(checked) =>
                setFormData(prev => ({ ...prev, newsletter_publish_photo: checked }))
              }
            />
            <Label htmlFor="newsletter_publish_photo" className="text-base cursor-pointer">
              Photo (added later in profile)
            </Label>
          </div>

          <div className="flex items-center space-x-2">
            <Checkbox
              id="newsletter_publish_birthday"
              checked={formData.newsletter_publish_birthday}
              onCheckedChange={(checked) =>
                setFormData(prev => ({ ...prev, newsletter_publish_birthday: checked }))
              }
            />
            <Label htmlFor="newsletter_publish_birthday" className="text-base cursor-pointer">
              Birthday
            </Label>
          </div>

          <div className="flex items-center space-x-2">
            <Checkbox
              id="newsletter_publish_none"
              checked={formData.newsletter_publish_none}
              onCheckedChange={(checked) =>
                setFormData(prev => ({ ...prev, newsletter_publish_none: checked }))
              }
            />
            <Label htmlFor="newsletter_publish_none" className="text-base cursor-pointer">
              Do not publish any of my information
            </Label>
          </div>
        </div>
      </div>

      {/* Referral */}
      <div className="space-y-4">
        <h2 className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
          Referral
        </h2>
        <div>
          <Label htmlFor="referred_by_member_name">
            Name of a LOAF Member who already knows you
          </Label>
          <Input
            id="referred_by_member_name"
            name="referred_by_member_name"
            value={formData.referred_by_member_name}
            onChange={handleInputChange}
            placeholder="Enter member name or email"
            className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
            data-testid="referral-input"
          />
          <p className="text-sm text-[#664fa3] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
            If referred by a current member, you may skip the event attendance requirement.
          </p>
        </div>
      </div>

      {/* Volunteer Interests */}
      <div className="space-y-4">
        <h2 className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
          Volunteer Interests (Optional)
        </h2>
        <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
          I may at some time be interested in volunteering with LOAF in the following ways (training is provided)
        </p>

        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          {volunteerOptions.map((option) => (
            <div key={option} className="flex items-center space-x-2">
              <Checkbox
                id={`volunteer_${option}`}
                checked={formData.volunteer_interests.includes(option)}
                onCheckedChange={() => handleVolunteerChange(option)}
              />
              <Label htmlFor={`volunteer_${option}`} className="text-base cursor-pointer">
                {option}
              </Label>
            </div>
          ))}
        </div>
      </div>

      {/* Scholarship Request */}
      <div className="space-y-4">
        <div className="flex items-center space-x-2">
          <Checkbox
            id="scholarship_requested"
            checked={formData.scholarship_requested}
            onCheckedChange={(checked) =>
              setFormData(prev => ({ ...prev, scholarship_requested: checked }))
            }
          />
          <Label htmlFor="scholarship_requested" className="text-base cursor-pointer font-semibold">
            I am requesting for scholarship
          </Label>
        </div>
        <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
          Scholarship information is kept confidential
        </p>

        {formData.scholarship_requested && (
          <div className="mt-4">
            <Label htmlFor="scholarship_reason">
              Please explain your situation *
            </Label>
            <Textarea
              id="scholarship_reason"
              name="scholarship_reason"
              value={formData.scholarship_reason}
              onChange={handleInputChange}
              placeholder="Tell us why you're requesting a scholarship..."
              rows={4}
              className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
            />
          </div>
        )}
      </div>
    </div>
  );
};

export default RegistrationStep2;