'use client';

import { useTranslations } from 'next-intl';
import {
  targetCountries,
  jobSectors,
  getCurrencySymbolForCountry,
  APPLICATION_DISPLAY_AMOUNT,
} from '@/lib/countries';

interface TargetCountryStepProps {
  targetCountry: string;
  jobSector: string;
  onChange: (data: { targetCountry?: string; jobSector?: string }) => void;
}

export default function TargetCountryStep({ targetCountry, jobSector, onChange }: TargetCountryStepProps) {
  const t = useTranslations('Apply');

  const selectedCountryData = targetCountries.find((c) => c.code === targetCountry);

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

      {/* Country selection grid */}
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-3">
          {t('targetCountry')}
        </label>
        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
          {targetCountries.map((country) => {
            const isSelected = targetCountry === country.code;
            return (
              <button
                key={country.code}
                type="button"
                onClick={() => onChange({ targetCountry: country.code })}
                className={`
                  flex flex-col items-center gap-2 p-4 rounded-xl border-2 transition-all duration-200
                  ${isSelected
                    ? 'border-blue-600 bg-blue-50 shadow-md shadow-blue-600/10'
                    : 'border-gray-200 bg-white hover:border-blue-300 hover:bg-blue-50/30'
                  }
                `}
              >
                <span className="text-4xl" role="img" aria-hidden="true">
                  {country.flag}
                </span>
                <span
                  className={`text-sm font-medium text-center ${
                    isSelected ? 'text-blue-700' : 'text-gray-700'
                  }`}
                >
                  {country.name}
                </span>
                {isSelected && (
                  <div className="flex items-center gap-1">
                    <svg className="w-4 h-4 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clipRule="evenodd" />
                    </svg>
                  </div>
                )}
              </button>
            );
          })}
        </div>
      </div>

      {/* Job Sector dropdown */}
      <div>
        <label htmlFor="jobSector" className="block text-sm font-medium text-gray-700 mb-1.5">
          {t('jobSector')}
        </label>
        <select
          id="jobSector"
          value={jobSector}
          onChange={(e) => onChange({ jobSector: e.target.value })}
          className="w-full px-4 py-3 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent transition-all duration-200"
        >
          <option value="">{t('selectSector')}</option>
          {jobSectors.map((sector) => (
            <option key={sector} value={sector}>
              {t(`sectors.${sector}`)}
            </option>
          ))}
        </select>
      </div>

      {/* Price display */}
      {targetCountry && (
        <div className="bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-xl p-5">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-blue-800">{t('applicationFee')}</p>
              <p className="text-xs text-blue-600 mt-0.5">{t('applicationFeeNote')}</p>
            </div>
            <div className="text-right">
              <p className="text-2xl font-bold text-blue-700">
                {getCurrencySymbolForCountry(targetCountry)}{APPLICATION_DISPLAY_AMOUNT}
              </p>
              <p className="text-xs text-blue-500">{selectedCountryData?.currency.toUpperCase()}</p>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}