import React from 'react';
import { CurrentView, Vacancy } from '../types';
import { SECTION_IDS, VACANCY_DETAIL_CONTENT } from '../constants'; // mockVacancies removed
import Button from './Button';
import { ArrowUturnLeftIcon, BriefcaseIcon, MapPinIcon, ClockIcon, EmailIcon, CheckIcon } from './icons'; 

interface VacancyDetailProps {
  itemId: string;
  allVacancies: Vacancy[]; // Changed to accept allVacancies from Strapi
  setCurrentView: (view: CurrentView) => void;
  setSelectedItemId: (id: string | null) => void;
}

const VacancyDetail: React.FC<VacancyDetailProps> = ({ itemId, allVacancies, setCurrentView, setSelectedItemId }) => {
  const vacancy = allVacancies.find(v => v.id === itemId || v.href === itemId);

  const handleBackClick = () => {
    setCurrentView('careers');
    setSelectedItemId(null);
     setTimeout(() => {
      document.getElementById(SECTION_IDS.careersPage)?.scrollIntoView({ behavior: 'smooth' });
    }, 0);
  };

  if (!vacancy) {
    return (
      <section 
        id={SECTION_IDS.vacancyDetailPage}
        className="py-16 md:py-24 bg-white min-h-screen flex items-center justify-center"
      >
        <div className="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <BriefcaseIcon className="w-16 h-16 mx-auto text-slate-400 mb-4" />
          <h1 className="text-2xl font-semibold font-quicksand text-slate-700 mb-4">{VACANCY_DETAIL_CONTENT.notFoundTitle}</h1>
          <p className="text-slate-600 mb-8">
            {VACANCY_DETAIL_CONTENT.vacancyNotFoundMessage}
          </p>
          <Button 
            onClick={handleBackClick} 
            leftIcon={<ArrowUturnLeftIcon />} 
            variant="outline"
          >
            {VACANCY_DETAIL_CONTENT.backButtonText}
          </Button>
        </div>
      </section>
    );
  }

  const applyMailto = `mailto:${VACANCY_DETAIL_CONTENT.hrEmail}?subject=${encodeURIComponent(VACANCY_DETAIL_CONTENT.mailtoSubjectPrefix + vacancy.title)}&body=${encodeURIComponent(VACANCY_DETAIL_CONTENT.mailtoBodyPrefix + vacancy.title + "\"." + " Мое резюме во вложении.")}`;


  return (
    <section 
      id={SECTION_IDS.vacancyDetailPage}
      className="py-16 md:py-24 bg-white min-h-screen"
    >
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <header className="mb-8 md:mb-12">
          <Button
            variant="outline"
            size="sm"
            onClick={handleBackClick}
            leftIcon={<ArrowUturnLeftIcon />}
            className="mb-6"
          >
            {VACANCY_DETAIL_CONTENT.backButtonText}
          </Button>
          <h1 className="font-quicksand text-3xl sm:text-4xl md:text-5xl font-bold text-slate-800 mb-3">
            {vacancy.title}
          </h1>
          <div className="flex flex-wrap items-center gap-x-4 gap-y-2 font-inter text-sm text-slate-600">
            <div className="flex items-center">
              <BriefcaseIcon className="w-4 h-4 mr-1.5 text-slate-500" />
              <span>{vacancy.department}</span>
            </div>
            <div className="flex items-center">
              <MapPinIcon className="w-4 h-4 mr-1.5 text-slate-500" />
              <span>{vacancy.location}</span>
            </div>
            <div className="flex items-center">
              <ClockIcon className="w-4 h-4 mr-1.5 text-slate-500" />
              <span>{vacancy.type}</span>
            </div>
          </div>
        </header>

        <div className="bg-white p-6 sm:p-8 md:p-10 rounded-xl">
          <div className="prose prose-lg max-w-none font-inter text-slate-700">
            {vacancy.fullDescription && (
              <>
                <h2 className="font-quicksand text-xl font-semibold text-slate-700">{VACANCY_DETAIL_CONTENT.descriptionTitle}</h2>
                {typeof vacancy.fullDescription === 'string' && vacancy.fullDescription.includes('<') ? 
                  <div dangerouslySetInnerHTML={{ __html: vacancy.fullDescription }} /> : 
                  <p>{vacancy.fullDescription}</p>
                }
              </>
            )}

            {vacancy.responsibilities && vacancy.responsibilities.length > 0 && (
              <>
                <h2 className="font-quicksand text-xl font-semibold text-slate-700 mt-8">{VACANCY_DETAIL_CONTENT.responsibilitiesTitle}</h2>
                <ul className="list-none p-0 space-y-3">
                  {vacancy.responsibilities.map((item, index) => (
                    <li key={index} className="flex items-start">
                      <CheckIcon className="w-5 h-5 text-slate-500 mr-3 mt-1 flex-shrink-0" />
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </>
            )}

            {vacancy.qualifications && vacancy.qualifications.length > 0 && (
              <>
                <h2 className="font-quicksand text-xl font-semibold text-slate-700 mt-8">{VACANCY_DETAIL_CONTENT.qualificationsTitle}</h2>
                <ul className="list-none p-0 space-y-3">
                  {vacancy.qualifications.map((item, index) => (
                    <li key={index} className="flex items-start">
                      <CheckIcon className="w-5 h-5 text-slate-500 mr-3 mt-1 flex-shrink-0" />
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </>
            )}

            {vacancy.offer && vacancy.offer.length > 0 && (
              <>
                <h2 className="font-quicksand text-xl font-semibold text-slate-700 mt-8">{VACANCY_DETAIL_CONTENT.offerTitle}</h2>
                <ul className="list-none p-0 space-y-3">
                  {vacancy.offer.map((item, index) => (
                     <li key={index} className="flex items-start">
                      <CheckIcon className="w-5 h-5 text-slate-500 mr-3 mt-1 flex-shrink-0" />
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </>
            )}
          </div>

          <div className="mt-10 pt-8 border-t border-slate-200 text-center">
             <h3 className="text-xl font-quicksand font-semibold text-slate-700 mb-4">
                {VACANCY_DETAIL_CONTENT.applyPromptTitle}
            </h3>
            <p className="text-slate-600 font-inter mb-6 max-w-lg mx-auto">
                {VACANCY_DETAIL_CONTENT.applyPromptMessage}
            </p>
            <Button
              variant="primary"
              size="lg"
              leftIcon={<EmailIcon />} 
              onClick={() => window.location.href = applyMailto}
            >
              {VACANCY_DETAIL_CONTENT.applyButtonText}
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
};

export default VacancyDetail;