import type { AccidentType } from '@/types/rescue/RescueType';
import type { AnalysisTab } from '../RescueView';
import { analysisTabs } from '../RescueView';
import { RescuePanel } from './RescuePanel';
import { DamageStabilityPanel } from './DamageStabilityPanel';
import { LongStrengthPanel } from './LongStrengthPanel';

export function RightPanel({
  activeAnalysis,
  onAnalysisChange,
  activeType,
}: {
  activeAnalysis: AnalysisTab;
  onAnalysisChange: (t: AnalysisTab) => void;
  activeType: AccidentType;
}) {
  return (
    <div className="w-[310px] min-w-[310px] bg-bg-base border-l border-stroke flex flex-col overflow-hidden">
      {/* 분석 탭 */}
      <div className="flex border-b border-stroke flex-shrink-0">
        {analysisTabs.map((tab) => (
          <button
            key={tab.id}
            onClick={() => onAnalysisChange(tab.id)}
            className={`flex-1 py-2 text-caption font-semibold font-korean cursor-pointer text-center transition-all border-b-2 ${
              activeAnalysis === tab.id
                ? 'text-color-accent border-b-[var(--color-accent)] bg-[rgba(6,182,212,0.04)]'
                : 'text-fg-disabled border-b-transparent hover:text-fg'
            }`}
          >
            {tab.icon} {tab.label}
          </button>
        ))}
      </div>

      {/* 패널 콘텐츠 */}
      <div className="flex-1 overflow-y-auto scrollbar-thin">
        {activeAnalysis === 'rescue' && <RescuePanel activeType={activeType} />}
        {activeAnalysis === 'damageStability' && <DamageStabilityPanel activeType={activeType} />}
        {activeAnalysis === 'longitudinalStrength' && <LongStrengthPanel activeType={activeType} />}
      </div>

      {/* Bottom Action Buttons */}
      <div className="flex gap-1.5 p-3 border-t border-stroke flex-shrink-0">
        <button className="flex-1 py-2 px-1 rounded text-label-2 font-semibold text-color-accent font-korean cursor-pointer border border-[rgba(6,182,212,0.3)] bg-[rgba(6,182,212,0.08)]">
          💾 저장
        </button>
        <button className="flex-1 py-2 px-1 rounded text-label-2 font-semibold bg-bg-elevated border border-stroke text-fg font-korean cursor-pointer">
          🔄 재계산
        </button>
        <button className="flex-1 py-2 px-1 rounded text-label-2 font-semibold text-color-accent font-korean cursor-pointer border border-[rgba(6,182,212,0.3)] bg-[rgba(6,182,212,0.08)]">
          📄 보고서
        </button>
      </div>
    </div>
  );
}
