import { useRef } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { useMdiStore } from '../../store/mdiStore';
import { IconClose } from '../ui/icons';

/**
 * MDI 문서 탭 스트립 (design.md §2.7-2) — 유틸리티 바 아래 전폭.
 *
 * 탭 = 라우트 북마크: 열린 문서 경로를 좌→우로 나열하고, 클릭 시 해당 라우트로 이동한다.
 * 탭 추가/활성은 AppShell 의 라우트 동기화 이펙트(openTab)가 담당하고, 여기서는 표시·상호작용만 맡는다.
 * 키보드: role=tablist/tab · aria-selected · 좌/우 화살표로 인접 탭 이동(포커스+활성).
 * 모바일(<720px)에서는 CSS 로 숨김.
 */
export function MdiTabBar() {
  const tabs = useMdiStore((s) => s.tabs);
  const activePath = useMdiStore((s) => s.activePath);
  const closeTab = useMdiStore((s) => s.closeTab);
  const closeAll = useMdiStore((s) => s.closeAll);
  const navigate = useNavigate();
  const location = useLocation();
  const btnRefs = useRef<(HTMLButtonElement | null)[]>([]);

  if (tabs.length === 0) return null;

  function activate(path: string) {
    if (path !== location.pathname) navigate(path);
  }

  function handleClose(e: React.MouseEvent, path: string) {
    e.stopPropagation();
    const nextActive = closeTab(path);
    // 활성 탭을 닫아 활성 경로가 바뀌었으면 그 경로로 이동(현재와 다를 때만).
    if (nextActive && nextActive !== location.pathname) navigate(nextActive);
  }

  function handleKeyDown(e: React.KeyboardEvent, index: number) {
    if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
    e.preventDefault();
    const dir = e.key === 'ArrowRight' ? 1 : -1;
    const nextIndex = (index + dir + tabs.length) % tabs.length;
    const target = tabs[nextIndex];
    btnRefs.current[nextIndex]?.focus();
    activate(target.path);
  }

  return (
    <div className="kx-mdi" role="tablist" aria-label="열린 문서 탭">
      {tabs.map((tab, i) => {
        const isActive = tab.path === activePath;
        return (
          <div
            key={tab.path}
            className={`kx-mdi__tab ${isActive ? 'is-active' : ''}`}
            role="presentation"
          >
            <button
              type="button"
              role="tab"
              aria-selected={isActive}
              tabIndex={isActive ? 0 : -1}
              ref={(el) => {
                btnRefs.current[i] = el;
              }}
              className="kx-mdi__tab-btn"
              title={tab.label}
              onClick={() => activate(tab.path)}
              onKeyDown={(e) => handleKeyDown(e, i)}
            >
              <span className="kx-mdi__tab-label">{tab.label}</span>
            </button>
            <button
              type="button"
              className="kx-mdi__tab-close"
              aria-label={`${tab.label} 탭 닫기`}
              tabIndex={-1}
              onClick={(e) => handleClose(e, tab.path)}
            >
              <IconClose size={13} />
            </button>
          </div>
        );
      })}
      {tabs.length > 1 && (
        <button
          type="button"
          className="kx-mdi__closeall"
          title="모든 탭 닫기"
          aria-label="모든 탭 닫기"
          onClick={() => {
            const to = closeAll();
            if (to !== location.pathname) navigate(to);
          }}
        >
          <IconClose size={13} />
          <span className="kx-mdi__closeall-label">모두 닫기</span>
        </button>
      )}
    </div>
  );
}
