import React, {useState} from 'react';
import businessItems from "@/data/business";
import type {BusinessItem} from "@/data/business";
import DarkOverlay from "@/components/common/DarkOverlay";
import IndicatorDots from "@/components/common/IndicatorDots";

const Sections = () => {
  const [selectedItem, setSelectedItem] = useState<BusinessItem | null>(null);
  const [currentSubIndex, setCurrentSubIndex] = useState(0);

  const handleSelectItem = (item: BusinessItem) => {
    setSelectedItem(item);
    setCurrentSubIndex(0); // 새 항목 선택 시 초기화
  };

  const handlePrev = () => {
    const images = selectedItem?.subImages;
    if (!images) return;

    setCurrentSubIndex((prev) =>
      prev === 0 ? images.length - 1 : prev - 1
    );
  };

  const handleNext = () => {
    const images = selectedItem?.subImages;
    if (!images) return;

    setCurrentSubIndex((prev) =>
      prev === images.length - 1 ? 0 : prev + 1
    );
  };

  const handleDotClick = (index: number) => {
    setCurrentSubIndex(index);
  };

  const subImages = selectedItem?.subImages;

  return (
    <div className="relative h-[1453px] px-6 py-10 flex-col">
      {/* 썸네일 선택 */}
      <div className="relative grid grid-cols-5 gap-2 w-7xl mx-auto h-44 bg-white">
        {businessItems.map((item, index) => (
          <div
            key={index}
            className="relative bg-gray-100 bg-cover bg-center cursor-pointer"
            style={{backgroundImage: `url(${item.image})`}}
            onClick={() => handleSelectItem(item)}
          >
            <DarkOverlay/>
            <div className="relative p-2">
              <div className="text-white text-lg font-semibold font-['Inter']">{item.label}</div>
            </div>
          </div>
        ))}
      </div>

      {selectedItem && (
        <>
          {/* 타이틀 */}
          <div className="h-60 flex flex-col my-10 justify-center items-center gap-9">
            <div className="text-center text-neutral-800 text-5xl font-extrabold">{selectedItem.label}</div>
            <div
              className="text-center text-neutral-800 text-2xl font-medium whitespace-pre-line">{selectedItem.description}</div>
          </div>

          {/* 그림 및 설명 */}
          <div className="max-w-7xl mx-auto h-96 bg-zinc-300/75 flex">
            <div className="w-1/2 h-full">
              <img className="w-full h-full object-cover" src={selectedItem.image} alt="image"/>
            </div>
            <div className="w-1/2 flex items-center justify-center px-4">
              <div className="text-black text-xl font-light leading-9 whitespace-pre-line">
                {selectedItem.description2}
              </div>
            </div>
          </div>

          {/* 중간 타이틀 */}
          <div className="h-28 flex flex-col justify-center my-10 items-center gap-9">
            <div className="text-center text-neutral-800 text-2xl font-medium">대표공사실적</div>
          </div>

          {Array.isArray(subImages) && subImages.length > 0 ? (
            <div
              className="relative max-w-7xl mx-auto h-128 bg-cover bg-center transition-all duration-500"
              style={{backgroundImage: `url(${subImages[currentSubIndex]})`}}
            >
              <div className="flex items-end w-full h-full px-4 py-3 bg-gradient-to-b from-white/0 to-black/80 gap-0.5">
                <div className="text-white text-2xl font-bold">BNK 경남은행 전산 & 데이터센터</div>
              </div>

              <div className="flex justify-center mt-5 pb-5">
                <IndicatorDots
                  count={subImages.length}
                  activeIndex={currentSubIndex}
                  onClick={handleDotClick}
                  activeColorClass="bg-blue-900"
                  inactiveColorClass="bg-blue-900/20"
                />
              </div>

              <div className="absolute left-10 top-1/2 -translate-y-1/2 w-24 h-24 flex items-center justify-center">
                <div className="w-14 h-14 bg-zinc-300/75 flex items-center justify-center cursor-pointer"
                     onClick={handlePrev}>
                  <span className="text-black text-lg font-thin">{'<'}</span>
                </div>
              </div>

              <div className="absolute right-10 top-1/2 -translate-y-1/2 w-24 h-24 flex items-center justify-center">
                <div className="w-14 h-14 bg-zinc-300/75 flex items-center justify-center cursor-pointer"
                     onClick={handleNext}>
                  <span className="text-black text-lg font-thin">{'>'}</span>
                </div>
              </div>
            </div>
          ) : (
            <div className="max-w-7xl mx-auto flex items-center justify-center bg-zinc-200 min-h-[300px] mb-10">
              <span className="text-gray-500 text-xl">이미지가 없습니다</span>
            </div>
          )}
        </>
      )}
    </div>
  );
};

export default Sections;
