import { useState } from 'react'
import type { LeftPanelProps, ExpandedSections } from './leftPanelTypes'
import PredictionInputSection from './PredictionInputSection'
import InfoLayerSection from './InfoLayerSection'
import OilBoomSection from './OilBoomSection'

export type { LeftPanelProps }

export function LeftPanel({
  selectedAnalysis,
  enabledLayers,
  onToggleLayer,
  accidentTime,
  onAccidentTimeChange,
  incidentCoord,
  onCoordChange,
  isSelectingLocation,
  onMapSelectClick,
  onRunSimulation,
  isRunningSimulation,
  selectedModels,
  onModelsChange,
  visibleModels,
  onVisibleModelsChange,
  hasResults,
  predictionTime,
  onPredictionTimeChange,
  spillType,
  onSpillTypeChange,
  oilType,
  onOilTypeChange,
  spillAmount,
  onSpillAmountChange,
  incidentName,
  onIncidentNameChange,
  spillUnit,
  onSpillUnitChange,
  boomLines,
  onBoomLinesChange,
  oilTrajectory,
  algorithmSettings,
  onAlgorithmSettingsChange,
  isDrawingBoom,
  onDrawingBoomChange,
  drawingPoints,
  onDrawingPointsChange,
  containmentResult,
  onContainmentResultChange,
  layerOpacity,
  onLayerOpacityChange,
  layerBrightness,
  onLayerBrightnessChange,
  sensitiveResources = [],
  onImageAnalysisResult,
}: LeftPanelProps) {
  const [expandedSections, setExpandedSections] = useState<ExpandedSections>({
    predictionInput: true,
    incident: false,
    impactResources: false,
    infoLayer: false,
    oilBoom: false,
  })

  const toggleSection = (section: keyof ExpandedSections) => {
    setExpandedSections(prev => ({
      ...prev,
      [section]: !prev[section]
    }))
  }

  return (
    <div className="w-80 min-w-[320px] bg-bg-1 border-r border-border flex flex-col">
      {/* Scrollable Content */}
      <div className="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-border-light scrollbar-track-transparent">
        {/* Prediction Input Section */}
        <PredictionInputSection
          expanded={expandedSections.predictionInput}
          onToggle={() => toggleSection('predictionInput')}
          accidentTime={accidentTime}
          onAccidentTimeChange={onAccidentTimeChange}
          incidentCoord={incidentCoord}
          onCoordChange={onCoordChange}
          isSelectingLocation={isSelectingLocation}
          onMapSelectClick={onMapSelectClick}
          onRunSimulation={onRunSimulation}
          isRunningSimulation={isRunningSimulation}
          selectedModels={selectedModels}
          onModelsChange={onModelsChange}
          visibleModels={visibleModels}
          onVisibleModelsChange={onVisibleModelsChange}
          hasResults={hasResults}
          predictionTime={predictionTime}
          onPredictionTimeChange={onPredictionTimeChange}
          spillType={spillType}
          onSpillTypeChange={onSpillTypeChange}
          oilType={oilType}
          onOilTypeChange={onOilTypeChange}
          spillAmount={spillAmount}
          onSpillAmountChange={onSpillAmountChange}
          incidentName={incidentName}
          onIncidentNameChange={onIncidentNameChange}
          spillUnit={spillUnit}
          onSpillUnitChange={onSpillUnitChange}
          onImageAnalysisResult={onImageAnalysisResult}
        />

        {/* Incident Section */}
        <div className="border-b border-border">
          <div
            onClick={() => toggleSection('incident')}
            className="flex items-center justify-between p-4 cursor-pointer hover:bg-[rgba(255,255,255,0.02)]"
          >
            <h3 className="text-[13px] font-bold text-text-2 font-korean">
              사고정보
            </h3>
            <span className="text-[10px] text-text-3">
              {expandedSections.incident ? '▼' : '▶'}
            </span>
          </div>

          {expandedSections.incident && (
            selectedAnalysis ? (
              <div className="px-4 pb-4 space-y-3">
                {/* Status Badge */}
                {(() => {
                  const statusMap: Record<string, { label: string; style: string; dot: string }> = {
                    ACTIVE: {
                      label: '진행중',
                      style: 'bg-[rgba(239,68,68,0.15)] text-status-red border border-[rgba(239,68,68,0.3)]',
                      dot: 'bg-status-red animate-pulse',
                    },
                    INVESTIGATING: {
                      label: '조사중',
                      style: 'bg-[rgba(249,115,22,0.15)] text-status-orange border border-[rgba(249,115,22,0.3)]',
                      dot: 'bg-status-orange animate-pulse',
                    },
                    CLOSED: {
                      label: '종료',
                      style: 'bg-[rgba(100,116,139,0.15)] text-text-3 border border-[rgba(100,116,139,0.3)]',
                      dot: 'bg-text-3',
                    },
                  }
                  const s = statusMap[selectedAnalysis.acdntSttsCd] ?? statusMap['ACTIVE']
                  return (
                    <div className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[9px] font-semibold ${s.style}`}>
                      <span className={`w-1.5 h-1.5 rounded-full ${s.dot}`} />
                      {s.label}
                    </div>
                  )
                })()}

                {/* Info Grid */}
                <div className="grid gap-1">
                  <div className="flex items-baseline gap-1.5">
                    <span className="text-[10px] text-text-3 min-w-[52px] font-korean">사고코드</span>
                    <span className="text-[11px] text-text-1 font-medium font-mono">{selectedAnalysis.acdntSn}</span>
                  </div>
                  <div className="flex items-baseline gap-1.5">
                    <span className="text-[10px] text-text-3 min-w-[52px] font-korean">사고명</span>
                    <span className="text-[11px] text-text-1 font-medium font-korean">{selectedAnalysis.acdntNm || '—'}</span>
                  </div>
                  <div className="flex items-baseline gap-1.5">
                    <span className="text-[10px] text-text-3 min-w-[52px] font-korean">사고일시</span>
                    <span className="text-[11px] text-text-1 font-medium font-mono">{selectedAnalysis.occurredAt ? selectedAnalysis.occurredAt.slice(0, 16).replace(' ', 'T') : '—'}</span>
                  </div>
                  <div className="flex items-baseline gap-1.5">
                    <span className="text-[10px] text-text-3 min-w-[52px] font-korean">유종</span>
                    <span className="text-[11px] text-text-1 font-medium font-korean">{selectedAnalysis.oilType || '—'}</span>
                  </div>
                  <div className="flex items-baseline gap-1.5">
                    <span className="text-[10px] text-text-3 min-w-[52px] font-korean">유출량</span>
                    <span className="text-[11px] text-text-1 font-medium font-mono">{selectedAnalysis.volume != null ? `${selectedAnalysis.volume.toFixed(2)} kl` : '—'}</span>
                  </div>
                  <div className="flex items-baseline gap-1.5">
                    <span className="text-[10px] text-text-3 min-w-[52px] font-korean">담당자</span>
                    <span className="text-[11px] text-text-1 font-medium font-korean">{selectedAnalysis.analyst || '—'}</span>
                  </div>
                  <div className="flex items-baseline gap-1.5">
                    <span className="text-[10px] text-text-3 min-w-[52px] font-korean">위치</span>
                    <span className="text-[11px] text-status-orange font-semibold font-korean">{selectedAnalysis.location || '—'}</span>
                  </div>
                </div>
              </div>
            ) : (
              <div className="px-4 pb-4">
                <p className="text-[11px] text-text-3 font-korean text-center py-2">선택된 사고정보가 없습니다.</p>
              </div>
            )
          )}
        </div>

        {/* Impact Resources Section */}
        <div className="border-b border-border">
          <div
            onClick={() => toggleSection('impactResources')}
            className="flex items-center justify-between p-4 cursor-pointer hover:bg-[rgba(255,255,255,0.02)]"
          >
            <h3 className="text-[13px] font-bold text-text-2 font-korean">
              영향 민감자원
            </h3>
            <span className="text-[10px] text-text-3">
              {expandedSections.impactResources ? '▼' : '▶'}
            </span>
          </div>

          {expandedSections.impactResources && (
            <div className="px-4 pb-4">
              {sensitiveResources.length === 0 ? (
                <p className="text-[11px] text-text-3 font-korean">영향받는 민감자원 목록</p>
              ) : (
                <div className="space-y-1.5">
                  {sensitiveResources.map(({ category, count }) => (
                    <div key={category} className="flex items-center justify-between">
                      <span className="text-[11px] text-text-2 font-korean">{category}</span>
                      <span className="text-[11px] text-primary font-bold font-mono">{count}개</span>
                    </div>
                  ))}
                </div>
              )}
            </div>
          )}
        </div>

        {/* Info Layer Section */}
        <InfoLayerSection
          expanded={expandedSections.infoLayer}
          onToggle={() => toggleSection('infoLayer')}
          enabledLayers={enabledLayers}
          onToggleLayer={onToggleLayer}
          layerOpacity={layerOpacity}
          onLayerOpacityChange={onLayerOpacityChange}
          layerBrightness={layerBrightness}
          onLayerBrightnessChange={onLayerBrightnessChange}
        />

        {/* Oil Boom Placement Guide Section */}
        <OilBoomSection
          expanded={expandedSections.oilBoom}
          onToggle={() => toggleSection('oilBoom')}
          boomLines={boomLines}
          onBoomLinesChange={onBoomLinesChange}
          oilTrajectory={oilTrajectory}
          incidentCoord={incidentCoord ?? { lat: 0, lon: 0 }}
          algorithmSettings={algorithmSettings}
          onAlgorithmSettingsChange={onAlgorithmSettingsChange}
          isDrawingBoom={isDrawingBoom}
          onDrawingBoomChange={onDrawingBoomChange}
          drawingPoints={drawingPoints}
          onDrawingPointsChange={onDrawingPointsChange}
          containmentResult={containmentResult}
          onContainmentResultChange={onContainmentResultChange}
        />
      </div>
    </div>
  )
}