'use client';

import { useState } from 'react';
import { Tag } from './Tag';

interface ExperienceData {
  years: string;
  contracts: string;
  licensingAreas: string[];
  expertiseYears: { area: string; years: string }[];
  certifications: { name: string; org: string }[];
}

interface ExperienceSectionProps {
  experience: ExperienceData;
}

const INITIAL_DISPLAY_COUNT = 6;
const EXPERTISE_INITIAL_COUNT = 4;

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

  // Calculate how many more items are hidden
  const licensingRemaining = experience.licensingAreas.length - INITIAL_DISPLAY_COUNT;
  const expertiseRemaining = experience.expertiseYears.length - EXPERTISE_INITIAL_COUNT;

  // Get displayed items
  const displayedLicensing = showAllLicensing
    ? experience.licensingAreas
    : experience.licensingAreas.slice(0, INITIAL_DISPLAY_COUNT);
  const displayedExpertise = showAllExpertise
    ? experience.expertiseYears
    : experience.expertiseYears.slice(0, EXPERTISE_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">
          <div>
            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-2">Years in Experience</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">Number of contracts closed</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>
            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-3">Licensing &amp; Areas</p>
            <div className="flex flex-wrap gap-2">
              {experience.licensingAreas.length > 0 ? (
                <>
                  {displayedLicensing.map((area, idx) => (
                    <Tag key={idx} variant="light">
                      {area}
                    </Tag>
                  ))}
                  {!showAllLicensing && licensingRemaining > 0 && (
                    <button
                      onClick={() => setShowAllLicensing(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"
                    >
                      +{licensingRemaining} More
                    </button>
                  )}
                  {showAllLicensing && experience.licensingAreas.length > INITIAL_DISPLAY_COUNT && (
                    <button
                      onClick={() => setShowAllLicensing(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 licensed areas added</span>
              )}
            </div>
          </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">Areas in expertise &amp; Years</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">Certifications</p>
            {experience.certifications.length > 0 ? (
              <ul className="space-y-3">
                {experience.certifications.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>
            ) : (
              <span className="text-[14px] font-serif text-[#00293D]/40">No certifications added</span>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}
