'use client';

import { useTranslations } from 'next-intl';
import {
  originCountries,
  targetCountries,
  getCurrencySymbolForCountry,
  APPLICATION_DISPLAY_AMOUNT,
} from '@/lib/countries';
import type { FormData } from './PersonalInfoStep';

interface ReviewStepProps {
  data: FormData;
  cvFileName: string;
  targetCountry: string;
  jobSector: string;
  isSubmitting: boolean;
  onSubmit: () => void;
}

export default function ReviewStep({
  data,
  cvFileName,
  targetCountry,
  jobSector,
  isSubmitting,
  onSubmit,
}: ReviewStepProps) {
  const t = useTranslations('Apply');

  const originCountry = originCountries.find((c) => c.code === data.countryOfOrigin);
  const targetCountryData = targetCountries.find((c) => c.code === targetCountry);

  const InfoRow = ({ label, value }: { label: string; value: string }) => (
    <div className="flex flex-col sm:flex-row sm:justify-between py-2.5 border-b border-gray-100 last:border-b-0">
      <span className="text-sm text-gray-500">{label}</span>
      <span className="text-sm font-medium text-gray-900 mt-0.5 sm:mt-0">{value}</span>
    </div>
  );

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

      {/* Personal Information Section */}
      <div className="bg-white border border-gray-200 rounded-xl overflow-hidden">
        <div className="px-5 py-3.5 bg-gray-50 border-b border-gray-200">
          <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wider">
            {t('personalInfo')}
          </h3>
        </div>
        <div className="px-5 py-2">
          <InfoRow label={t('firstName')} value={data.firstName} />
          <InfoRow label={t('lastName')} value={data.lastName} />
          <InfoRow label={t('email')} value={data.email} />
          <InfoRow label={t('phone')} value={data.phone} />
          <InfoRow
            label={t('countryOfOrigin')}
            value={originCountry ? `${originCountry.flag} ${originCountry.name}` : data.countryOfOrigin}
          />
          <InfoRow label={t('dateOfBirth')} value={data.dateOfBirth} />
          <InfoRow label={t('educationLevel')} value={data.educationLevel ? t(`education.${data.educationLevel}`) : '-'} />
          <InfoRow label={t('yearsExperience')} value={data.yearsExperience || '-'} />
          <InfoRow label={t('skills')} value={data.skills || '-'} />
        </div>
      </div>

      {/* CV Section */}
      <div className="bg-white border border-gray-200 rounded-xl overflow-hidden">
        <div className="px-5 py-3.5 bg-gray-50 border-b border-gray-200">
          <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wider">
            {t('cvFile')}
          </h3>
        </div>
        <div className="px-5 py-4">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center">
              <svg className="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
              </svg>
            </div>
            <div>
              <p className="text-sm font-medium text-gray-900">{cvFileName}</p>
              <p className="text-xs text-emerald-600">{t('uploadSuccess')}</p>
            </div>
          </div>
        </div>
      </div>

      {/* Preferences Section */}
      <div className="bg-white border border-gray-200 rounded-xl overflow-hidden">
        <div className="px-5 py-3.5 bg-gray-50 border-b border-gray-200">
          <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wider">
            {t('preferences')}
          </h3>
        </div>
        <div className="px-5 py-2">
          <InfoRow
            label={t('targetCountry')}
            value={targetCountryData ? `${targetCountryData.flag} ${targetCountryData.name}` : targetCountry}
          />
          <InfoRow
            label={t('jobSector')}
            value={jobSector ? t(`sectors.${jobSector}`) : '-'}
          />
        </div>
      </div>

      {/* Payment summary */}
      <div className="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-xl p-6 text-white">
        <div className="flex items-center justify-between mb-4">
          <div>
            <p className="text-sm font-medium text-blue-100">{t('applicationFee')}</p>
            <p className="text-xs text-blue-200 mt-0.5">{t('applicationFeeNote')}</p>
          </div>
          <p className="text-3xl font-bold">
            {targetCountry ? getCurrencySymbolForCountry(targetCountry) : ''}{APPLICATION_DISPLAY_AMOUNT}
          </p>
        </div>

        <button
          onClick={onSubmit}
          disabled={isSubmitting}
          className="w-full flex items-center justify-center gap-2 px-6 py-4 bg-white text-blue-700 font-semibold rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 shadow-lg"
        >
          {isSubmitting ? (
            <>
              <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
              </svg>
              {t('submitting')}
            </>
          ) : (
            <>
              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z" />
              </svg>
              {t('proceedToPayment')}
            </>
          )}
        </button>

        <div className="flex items-center justify-center gap-2 mt-3">
          <svg className="w-4 h-4 text-blue-200" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
          </svg>
          <p className="text-xs text-blue-200">{t('paymentNote')}</p>
        </div>
      </div>
    </div>
  );
}