'use client';

import { useTranslations } from 'next-intl';
import { originCountries, educationLevels } from '@/lib/countries';

export interface FormData {
  firstName: string;
  lastName: string;
  email: string;
  phone: string;
  countryOfOrigin: string;
  dateOfBirth: string;
  educationLevel: string;
  yearsExperience: string;
  skills: string;
}

interface PersonalInfoStepProps {
  data: FormData;
  onChange: (data: Partial<FormData>) => void;
}

export default function PersonalInfoStep({ data, onChange }: PersonalInfoStepProps) {
  const t = useTranslations('Apply');

  const inputClasses =
    'w-full px-4 py-3 border border-gray-300 rounded-lg text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent transition-all duration-200';

  const labelClasses = 'block text-sm font-medium text-gray-700 mb-1.5';

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-2xl font-bold text-gray-900">{t('personalInfo')}</h2>
        <p className="mt-1 text-sm text-gray-500">{t('personalInfoSubtitle')}</p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
        {/* First Name */}
        <div>
          <label htmlFor="firstName" className={labelClasses}>
            {t('firstName')}
          </label>
          <input
            id="firstName"
            type="text"
            value={data.firstName}
            onChange={(e) => onChange({ firstName: e.target.value })}
            placeholder={t('firstName')}
            className={inputClasses}
          />
        </div>

        {/* Last Name */}
        <div>
          <label htmlFor="lastName" className={labelClasses}>
            {t('lastName')}
          </label>
          <input
            id="lastName"
            type="text"
            value={data.lastName}
            onChange={(e) => onChange({ lastName: e.target.value })}
            placeholder={t('lastName')}
            className={inputClasses}
          />
        </div>

        {/* Email */}
        <div>
          <label htmlFor="email" className={labelClasses}>
            {t('email')}
          </label>
          <input
            id="email"
            type="email"
            value={data.email}
            onChange={(e) => onChange({ email: e.target.value })}
            placeholder={t('email')}
            className={inputClasses}
          />
        </div>

        {/* Phone */}
        <div>
          <label htmlFor="phone" className={labelClasses}>
            {t('phone')}
          </label>
          <input
            id="phone"
            type="tel"
            value={data.phone}
            onChange={(e) => onChange({ phone: e.target.value })}
            placeholder={t('phone')}
            className={inputClasses}
          />
        </div>

        {/* Country of Origin */}
        <div>
          <label htmlFor="countryOfOrigin" className={labelClasses}>
            {t('countryOfOrigin')}
          </label>
          <select
            id="countryOfOrigin"
            value={data.countryOfOrigin}
            onChange={(e) => onChange({ countryOfOrigin: e.target.value })}
            className={inputClasses}
          >
            <option value="">{t('selectCountry')}</option>
            {originCountries.map((country) => (
              <option key={country.code} value={country.code}>
                {country.flag} {country.name}
              </option>
            ))}
          </select>
        </div>

        {/* Date of Birth */}
        <div>
          <label htmlFor="dateOfBirth" className={labelClasses}>
            {t('dateOfBirth')}
          </label>
          <input
            id="dateOfBirth"
            type="date"
            value={data.dateOfBirth}
            onChange={(e) => onChange({ dateOfBirth: e.target.value })}
            className={inputClasses}
          />
        </div>

        {/* Education Level */}
        <div>
          <label htmlFor="educationLevel" className={labelClasses}>
            {t('educationLevel')}
          </label>
          <select
            id="educationLevel"
            value={data.educationLevel}
            onChange={(e) => onChange({ educationLevel: e.target.value })}
            className={inputClasses}
          >
            <option value="">{t('selectEducation')}</option>
            {educationLevels.map((level) => (
              <option key={level} value={level}>
                {t(`education.${level}`)}
              </option>
            ))}
          </select>
        </div>

        {/* Years of Experience */}
        <div>
          <label htmlFor="yearsExperience" className={labelClasses}>
            {t('yearsExperience')}
          </label>
          <input
            id="yearsExperience"
            type="number"
            min="0"
            max="50"
            value={data.yearsExperience}
            onChange={(e) => onChange({ yearsExperience: e.target.value })}
            placeholder={t('yearsExperience')}
            className={inputClasses}
          />
        </div>
      </div>

      {/* Skills - full width */}
      <div>
        <label htmlFor="skills" className={labelClasses}>
          {t('skills')}
        </label>
        <textarea
          id="skills"
          rows={3}
          value={data.skills}
          onChange={(e) => onChange({ skills: e.target.value })}
          placeholder={t('skillsPlaceholder')}
          className={`${inputClasses} resize-none`}
        />
      </div>
    </div>
  );
}