'use client';

import { useState } from 'react';
import { Tag } from './Tag';
import type { ExperienceData } from '@/utils/profileDataMapper';

interface ExperienceSectionProps {
  experience: ExperienceData;
}

const EXPERTISE_INITIAL_COUNT = 4;
const CERTIFICATIONS_INITIAL_COUNT = 2;

export function ExperienceSection({ experience }: ExperienceSectionProps) {
  const [showAllExpertise, setShowAllExpertise] = useState(false);
  const [showAllCertifications, setShowAllCertifications] = useState(false);

  // Show agency block whenever name OR designation is filled
  const hasAgency = !!(experience.agencyName || experience.agencyDesignation);

  // Calculate how many more items are hidden
  const expertiseRemaining = experience.expertiseYears.length - EXPERTISE_INITIAL_COUNT;
  const certificationsRemaining = experience.certifications.length - CERTIFICATIONS_INITIAL_COUNT;

  // Get displayed items
  const displayedExpertise = showAllExpertise
    ? experience.expertiseYears
    : experience.expertiseYears.slice(0, EXPERTISE_INITIAL_COUNT);
  const displayedCertifications = showAllCertifications
    ? experience.certifications
    : experience.certifications.slice(0, CERTIFICATIONS_INITIAL_COUNT);

  return (
    <div className="bg-white rounded-[20px] p-4 lg:p-5">
      <h2 className="text-[20px] font-bold text-[#00293D] font-fractul leading-[24px] mb-4 text-center lg:text-left">Experience</h2>
      <div className="flex flex-col lg:flex-row gap-4 lg:gap-8">
        {/* Left Column */}
        <div className="flex-1 space-y-4">
          {hasAgency && (
            <>
              <div>
                <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-2">{experience.agencySectionLabel}</p>
                {experience.agencyName && (
                  <p className="font-serif font-medium text-[15px] leading-[21px] text-[#00293D]">
                    {experience.agencyName}
                  </p>
                )}
                {experience.agencyDesignation && (
                  <p className="font-serif font-normal text-[14px] leading-[21px] text-[#00293D]/70">
                    {experience.agencyDesignation}
                  </p>
                )}
              </div>
              {/* Horizontal divider */}
              <div className="w-full h-0 border-t-[0.5px] border-solid border-[#00293D]/20" />
            </>
          )}
          <div>
            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-2">{experience.yearsLabel}</p>
            <ul className="list-disc list-inside">
              <li className="font-serif font-medium text-[15px] leading-[21px] text-[#00293D]">
                {experience.years !== '-' ? experience.years : <span className="text-[#00293D]/40">Not specified</span>}
              </li>
            </ul>
          </div>
          {/* Horizontal divider */}
          <div className="w-full h-0 border-t-[0.5px] border-solid border-[#00293D]/20" />
          <div>
            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-2">{experience.contractsLabel}</p>
            <ul className="list-disc list-inside">
              <li className="font-serif font-medium text-[15px] leading-[21px] text-[#00293D]">
                {experience.contracts !== '-' ? experience.contracts : <span className="text-[#00293D]/40">Not specified</span>}
              </li>
            </ul>
          </div>
        </div>

        {/* Divider - Hidden on mobile, visible on desktop */}
        <div className="hidden lg:block w-px bg-gray-200" />
        <div className="lg:hidden border-t border-gray-200" />

        {/* Right Column */}
        <div className="flex-1 space-y-4">
          <div>
            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-3">{experience.expertiseYearsLabel}</p>
            <div className="flex flex-wrap gap-2">
              {experience.expertiseYears.length > 0 ? (
                <>
                  {displayedExpertise.map((item, idx) => (
                    <Tag key={idx} variant="light">
                      {item.years ? `${item.area} – ${item.years}` : item.area}
                    </Tag>
                  ))}
                  {!showAllExpertise && expertiseRemaining > 0 && (
                    <button
                      onClick={() => setShowAllExpertise(true)}
                      className="inline-flex items-center justify-center h-[28px] px-3 rounded-[15px] border border-[#00293d]/10 text-[15px] font-light font-serif text-[#00293d] cursor-pointer hover:bg-gray-50 transition-colors"
                    >
                      +{expertiseRemaining} More
                    </button>
                  )}
                  {showAllExpertise && experience.expertiseYears.length > EXPERTISE_INITIAL_COUNT && (
                    <button
                      onClick={() => setShowAllExpertise(false)}
                      className="inline-flex items-center justify-center h-[28px] px-3 rounded-[15px] border border-[#00293d]/10 text-[15px] font-light font-serif text-[#00293d] cursor-pointer hover:bg-gray-50 transition-colors"
                    >
                      Show Less
                    </button>
                  )}
                </>
              ) : (
                <span className="text-[14px] font-serif text-[#00293D]/40">No expertise areas added</span>
              )}
            </div>
          </div>
          <div>
            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-3">{experience.certificationsLabel}</p>
            {experience.certifications.length > 0 ? (
              <div>
                <ul className="space-y-3">
                  {displayedCertifications.map((cert, idx) => (
                    <li key={idx}>
                      <span className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D]">{cert.name}</span>
                      {cert.org && (
                        <p className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D] opacity-50 ml-3">{cert.org}</p>
                      )}
                    </li>
                  ))}
                </ul>
                {!showAllCertifications && certificationsRemaining > 0 && (
                  <button
                    onClick={() => setShowAllCertifications(true)}
                    className="mt-3 inline-flex items-center justify-center h-[28px] px-3 rounded-[15px] border border-[#00293d]/10 text-[15px] font-light font-serif text-[#00293d] cursor-pointer hover:bg-gray-50 transition-colors"
                  >
                    +{certificationsRemaining} More
                  </button>
                )}
                {showAllCertifications && experience.certifications.length > CERTIFICATIONS_INITIAL_COUNT && (
                  <button
                    onClick={() => setShowAllCertifications(false)}
                    className="mt-3 inline-flex items-center justify-center h-[28px] px-3 rounded-[15px] border border-[#00293d]/10 text-[15px] font-light font-serif text-[#00293d] cursor-pointer hover:bg-gray-50 transition-colors"
                  >
                    Show Less
                  </button>
                )}
              </div>
            ) : (
              <span className="text-[14px] font-serif text-[#00293D]/40">No certifications added</span>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}
