import { useEffect, useRef, useState } from 'react';
import { loginSlideApi } from '../../api/endpoints';

/** 슬라이드 1장(공개 DTO 부분집합) — 폴백도 같은 shape 사용. */
interface Slide {
  id: number;
  imageUrl: string;
  title: string;
  caption: string | null;
}

/** API 실패/빈 응답 시 번들 기본 5종(시드와 동일 자산·문구). */
const FALLBACK_SLIDES: Slide[] = [
  {
    id: -1,
    imageUrl: '/login-slides/slide-1.png',
    title: '아시아를 대표하는 전시컨벤션센터, KINTEX',
    caption: '10만㎡ 전시 공간에서 펼쳐지는 무한한 비즈니스 기회를 만나보세요.',
  },
  {
    id: -2,
    imageUrl: '/login-slides/slide-2.png',
    title: '신청서를 내는 순간, 시공 후 사진을 먼저 봅니다',
    caption: 'AI가 부스 배치부터 시공 결과 시각화까지 전 과정을 자동으로 설계합니다.',
  },
  {
    id: -3,
    imageUrl: '/login-slides/slide-3.png',
    title: '국내 최대 무주(無柱) 전시홀이 당신의 무대가 됩니다',
    caption: '기둥 없는 대공간에서 어떤 규모의 전시도 자유롭게 연출하세요.',
  },
  {
    id: -4,
    imageUrl: '/login-slides/slide-4.png',
    title: '회의부터 국제 컨벤션까지, 완벽한 비즈니스 공간',
    caption: '최첨단 회의 시설과 전문 운영 인력이 성공적인 행사를 지원합니다.',
  },
  {
    id: -5,
    imageUrl: '/login-slides/slide-5.png',
    title: '전시 운영의 모든 순간을 하나의 플랫폼에서',
    caption: '부스 배선·전기·조명 설계와 현장 검수까지 데이터로 관리하세요.',
  },
];

const INTERVAL_MS = 5000;

/**
 * SCR-01 로그인 좌측 브랜드 패널 — 이미지 캐러셀(페이드 전환·5초·인디케이터 도트).
 * 슬라이드는 관리자 등록분(공개 API, 최신 5건)을 쓰고 실패 시 번들 기본 5종으로 폴백한다.
 */
export function LoginSlides() {
  const [slides, setSlides] = useState<Slide[]>(FALLBACK_SLIDES);
  const [index, setIndex] = useState(0);
  const timerRef = useRef<number | null>(null);

  // 공개 슬라이드 로드 — 실패/빈 목록이면 폴백 유지(로그인 화면은 항상 그려져야 함).
  useEffect(() => {
    const ctrl = new AbortController();
    loginSlideApi
      .publicList()
      .then((list) => {
        if (!ctrl.signal.aborted && list && list.length > 0) {
          setSlides(list.map((s) => ({ id: s.id, imageUrl: s.imageUrl, title: s.title, caption: s.caption })));
          setIndex(0);
        }
      })
      .catch(() => {
        /* 폴백 유지 */
      });
    return () => ctrl.abort();
  }, []);

  // 자동 로테이션 — 슬라이드 2장 이상일 때만.
  useEffect(() => {
    if (slides.length < 2) return;
    timerRef.current = window.setInterval(
      () => setIndex((i) => (i + 1) % slides.length),
      INTERVAL_MS,
    );
    return () => {
      if (timerRef.current != null) window.clearInterval(timerRef.current);
    };
  }, [slides.length]);

  function goTo(i: number) {
    setIndex(i);
    // 수동 이동 시 타이머 리셋(바로 다시 넘어가는 어색함 방지)
    if (timerRef.current != null) {
      window.clearInterval(timerRef.current);
      timerRef.current = window.setInterval(
        () => setIndex((v) => (v + 1) % slides.length),
        INTERVAL_MS,
      );
    }
  }

  const current = slides[index] ?? slides[0];

  return (
    <section className="kx-login__brand" aria-label="KINTEX 소개 슬라이드">
      {slides.map((s, i) => (
        <div
          key={s.id}
          className={`kx-login__slide ${i === index ? 'is-active' : ''}`}
          style={{ backgroundImage: `url(${s.imageUrl})` }}
          aria-hidden="true"
        />
      ))}
      <div className="kx-login__brand-overlay" />
      <div className="kx-login__brand-content">
        <span className="kx-login__ai-cap">✦ KINTEX AI 전시관리</span>
        <h1 className="kx-login__headline" key={`t-${current.id}`}>
          {current.title}
        </h1>
        {current.caption && (
          <p className="kx-login__sub" key={`c-${current.id}`}>
            {current.caption}
          </p>
        )}
        {slides.length > 1 && (
          <div className="kx-login__dots" role="tablist" aria-label="슬라이드 선택">
            {slides.map((s, i) => (
              <button
                key={s.id}
                type="button"
                role="tab"
                aria-selected={i === index}
                aria-label={`슬라이드 ${i + 1}`}
                className={`kx-login__dot ${i === index ? 'is-active' : ''}`}
                onClick={() => goTo(i)}
              />
            ))}
          </div>
        )}
      </div>
    </section>
  );
}
