import { useState } from 'react';
import { PanelOverview } from './contents/PanelOverview';
import { PanelDetection } from './contents/PanelDetection';
import { PanelRemoteSensing } from './contents/PanelRemoteSensing';
import { PanelESIMap } from './contents/PanelESIMap';
import { PanelAreaCalc } from './contents/PanelAreaCalc';
import { PanelSpreadModel } from './contents/PanelSpreadModel';
import { PanelReferences } from './contents/PanelReferences';

const panels = [
  { id: 0, icon: '🌐', label: '개요' },
  { id: 1, icon: '🛸', label: '탐지 장비' },
  { id: 2, icon: '🛰', label: '원격탐사' },
  { id: 3, icon: '🗺️', label: 'ESI 방제지도' },
  { id: 4, icon: '📏', label: '면적 산정' },
  { id: 5, icon: '🔗', label: '확산예측 연계' },
  { id: 6, icon: '📚', label: '논문·특허' },
];


export function AerialTheoryView() {
  const [activePanel, setActivePanel] = useState(0);

  return (
    <div className="flex flex-col h-full w-full flex-1 overflow-hidden bg-bg-base">
      <div
        className="flex-1 overflow-y-auto scrollbar-thin px-6 py-5"
        style={{ scrollbarGutter: 'stable' }}
      >
        {/* 헤더 */}
        <div className="flex items-center justify-between mb-5">
          <div className="flex items-center gap-3">
            <div className="w-[42px] h-[42px] rounded-[10px] bg-bg-elevated border border-stroke flex items-center justify-center text-heading-3">
              📐
            </div>
            <div>
              <div className="text-title-2 font-bold text-fg">해양 항공탐색 · 원격탐사 이론</div>
              <div className="text-label-2 text-fg-disabled mt-0.5">
                유출유 원격탐지 · 항공감시 기법 · ESI 방제정보지도 · 등록특허 10-1567431 기반
              </div>
            </div>
          </div>
        </div>

        {/* 내부 네비게이션 */}
        <div className="flex gap-[3px] bg-bg-card rounded-lg p-1 mb-5 border border-stroke">
          {panels.map((p) => (
            <button
              key={p.id}
              onClick={() => setActivePanel(p.id)}
              className={`flex-1 py-2 px-1 text-label-1 font-medium rounded-md transition-all duration-150 cursor-pointer border ${
                activePanel === p.id
                  ? 'border-stroke-light bg-bg-elevated text-fg'
                  : 'border-transparent bg-bg-card text-fg-disabled hover:text-fg-sub'
              }`}
            >
              {p.icon} {p.label}
            </button>
          ))}
        </div>

        {/* 패널 */}
        {activePanel === 0 && <PanelOverview />}
        {activePanel === 1 && <PanelDetection />}
        {activePanel === 2 && <PanelRemoteSensing />}
        {activePanel === 3 && <PanelESIMap />}
        {activePanel === 4 && <PanelAreaCalc />}
        {activePanel === 5 && <PanelSpreadModel />}
        {activePanel === 6 && <PanelReferences />}
      </div>
    </div>
  );
}
