import { useState } from 'react';
import { FrameworkTab } from './contents/FrameworkTab';
import { TargetArchTab } from './contents/TargetArchTab';
import { InterfaceTab } from './contents/InterfaceTab';
import { HeterogeneousTab } from './contents/HeterogeneousTab';
import { CommonFeaturesTab } from './contents/CommonFeaturesTab';

type TabId = 'framework' | 'target' | 'interface' | 'heterogeneous' | 'common-features';

const TABS: { id: TabId; label: string }[] = [
  { id: 'framework', label: '표준 프레임워크' },
  { id: 'target', label: '목표시스템 아키텍쳐' },
  { id: 'interface', label: '시스템 인터페이스 연계' },
  { id: 'heterogeneous', label: '이기종시스템연계' },
  { id: 'common-features', label: '공통기능' },
];

// ─── 기술 스택 테이블 데이터 ──────────────────────────────────────────────────────

export default function SystemArchPanel() {
  const [activeTab, setActiveTab] = useState<TabId>('framework');

  return (
    <div className="flex flex-col h-full overflow-hidden">
      {/* 헤더 */}
      <div className="flex items-center justify-between px-5 py-3 border-b border-stroke shrink-0">
        <h2 className="text-body-2 font-semibold text-t1">시스템구조</h2>
      </div>

      {/* 탭 버튼 */}
      <div className="flex gap-1.5 px-5 py-2.5 border-b border-stroke shrink-0 bg-bg-base">
        {TABS.map((tab) => (
          <button
            key={tab.id}
            onClick={() => setActiveTab(tab.id)}
            className={`px-3 py-1.5 text-caption font-medium rounded transition-colors ${
              activeTab === tab.id
                ? 'bg-color-accent text-white'
                : 'bg-bg-elevated text-t2 hover:bg-bg-card'
            }`}
          >
            {tab.label}
          </button>
        ))}
      </div>

      {/* 탭 콘텐츠 */}
      <div className="flex-1 overflow-auto">
        {activeTab === 'framework' && <FrameworkTab />}
        {activeTab === 'target' && <TargetArchTab />}
        {activeTab === 'interface' && <InterfaceTab />}
        {activeTab === 'heterogeneous' && <HeterogeneousTab />}
        {activeTab === 'common-features' && <CommonFeaturesTab />}
      </div>
    </div>
  );
}
