import { useState } from 'react';
import { OverviewPanel } from './contents/OverviewPanel';
import { DeploymentTheoryPanel } from './contents/DeploymentTheoryPanel';
import { OptimizationPanel } from './contents/OptimizationPanel';
import { FluidDynamicsPanel } from './contents/FluidDynamicsPanel';
import { FieldApplicationPanel } from './contents/FieldApplicationPanel';
import { ReferencesPanel } from './contents/ReferencesPanel';

const boomTabs = [
  { id: 0, label: '개요' },
  { id: 1, label: '배치 이론' },
  { id: 2, label: '최적화 알고리즘' },
  { id: 3, label: '유체역학 모델' },
  { id: 4, label: '현장 적용' },
  { id: 5, label: '참고문헌' },
];

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

  const handleExportPDF = () => {
    window.print();
  };

  return (
    <div className="flex flex-col h-full overflow-hidden bg-bg-base">
      <div className="flex-1 overflow-y-auto scrollbar-thin p-5">
        {/* 헤더 */}
        <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">오일펜스 배치 최적화 알고리즘 이론</div>
              <div className="text-label-2 mt-0.5 text-fg-default">
                Oil Boom Deployment Optimization · 유출유 확산예측 연동 · 방제효율 최대화
              </div>
            </div>
          </div>
          <button
            onClick={handleExportPDF}
            className="px-3.5 py-1.5 rounded-sm text-label-2 font-semibold cursor-pointer text-color-accent"
            style={{
              border: '1px solid rgba(6,182,212,.3)',
              background: 'rgba(6,182,212,.08)',
            }}
          >
            📤 PDF 내보내기
          </button>
        </div>

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

        {/* ═══ PANEL 0: 개요 ═══ */}
        {activePanel === 0 && <OverviewPanel />}
        {activePanel === 1 && <DeploymentTheoryPanel />}
        {activePanel === 2 && <OptimizationPanel />}
        {activePanel === 3 && <FluidDynamicsPanel />}
        {activePanel === 4 && <FieldApplicationPanel />}
        {activePanel === 5 && <ReferencesPanel />}
      </div>
    </div>
  );
}
