import { useState } from 'react';
import { Eye, EyeOff } from 'lucide-react';
import type {
  BoomLine,
  BoomLineCoord,
  AlgorithmSettings,
  ContainmentResult,
} from '@common/types/boomLine';
import { generateAIBoomLines, runContainmentAnalysis } from '@common/utils/geo';

interface OilBoomSectionProps {
  expanded: boolean;
  onToggle: () => void;
  boomLines: BoomLine[];
  onBoomLinesChange: (lines: BoomLine[]) => void;
  oilTrajectory: Array<{ lat: number; lon: number; time: number; particle?: number }>;
  incidentCoord: { lon: number; lat: number };
  algorithmSettings: AlgorithmSettings;
  onAlgorithmSettingsChange: (settings: AlgorithmSettings) => void;
  isDrawingBoom: boolean;
  onDrawingBoomChange: (drawing: boolean) => void;
  drawingPoints: BoomLineCoord[];
  onDrawingPointsChange: (points: BoomLineCoord[]) => void;
  containmentResult: ContainmentResult | null;
  onContainmentResultChange: (result: ContainmentResult | null) => void;
  showBoomLines: boolean;
  onShowBoomLinesChange: (show: boolean) => void;
}

const DEFAULT_SETTINGS: AlgorithmSettings = {
  currentOrthogonalCorrection: 15,
  safetyMarginMinutes: 60,
  minContainmentEfficiency: 80,
  waveHeightCorrectionFactor: 1.0,
};

const OilBoomSection = ({
  expanded,
  onToggle,
  boomLines,
  onBoomLinesChange,
  oilTrajectory,
  incidentCoord,
  algorithmSettings,
  onAlgorithmSettingsChange,
  onDrawingBoomChange,
  onDrawingPointsChange,
  containmentResult,
  onContainmentResultChange,
  showBoomLines,
  onShowBoomLinesChange,
}: OilBoomSectionProps) => {
  const [boomPlacementTab, setBoomPlacementTab] = useState<'ai' | 'simulation'>('simulation');
  const [showResetConfirm, setShowResetConfirm] = useState(false);

  const hasData = boomLines.length > 0 || containmentResult !== null;

  /** V자형 오일붐 배치 + 차단 시뮬레이션 실행 */
  const handleRunSimulation = () => {
    // 1단계: V자형 오일붐 자동 배치
    const lines = generateAIBoomLines(
      oilTrajectory,
      { lat: incidentCoord.lat, lon: incidentCoord.lon },
      algorithmSettings,
    );
    onBoomLinesChange(lines);

    // 2단계: 차단 시뮬레이션 실행
    const result = runContainmentAnalysis(oilTrajectory, lines);
    onContainmentResultChange(result);
  };

  /** 초기화 (오일펜스만, 확산예측 유지) */
  const handleReset = () => {
    onBoomLinesChange([]);
    onDrawingBoomChange(false);
    onDrawingPointsChange([]);
    onContainmentResultChange(null);
    onAlgorithmSettingsChange({ ...DEFAULT_SETTINGS });
    setShowResetConfirm(false);
  };

  return (
    <div className="border-b border-stroke">
      <div
        onClick={onToggle}
        className="flex items-center justify-between p-4 cursor-pointer hover:bg-[rgba(255,255,255,0.02)]"
      >
        <h3 className="text-title-4 font-bold text-fg-default font-korean">오일펜스 배치 가이드</h3>
        <div className="flex items-center gap-2">
          <button
            onClick={(e) => {
              e.stopPropagation();
              onShowBoomLinesChange(!showBoomLines);
            }}
            disabled={boomLines.length === 0}
            title={showBoomLines ? '지도에서 숨기기' : '지도에 표시'}
            className="p-1 rounded transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
            style={{ color: showBoomLines ? 'var(--color-accent)' : 'var(--fg-disabled)' }}
          >
            {showBoomLines ? <Eye size={14} /> : <EyeOff size={14} />}
          </button>
          <span className="text-label-2 text-fg-default">{expanded ? '▼' : '▶'}</span>
        </div>
      </div>

      {expanded && (
        <div className="px-4 pb-4 flex flex-col gap-3">
          {/* 탭 버튼 + 초기화 */}
          <div className="flex gap-1.5">
            {[
              { id: 'ai' as const, label: 'AI 자동 추천' },
              { id: 'simulation' as const, label: '시뮬레이션' },
            ].map((tab) => (
              <button
                key={tab.id}
                onClick={() => {
                  if (tab.id === 'ai') {
                    alert('AI 자동 추천 기능은 향후 오픈 예정입니다.');
                    return;
                  }
                  setBoomPlacementTab(tab.id);
                }}
                style={{
                  padding: '6px 8px',
                  borderRadius: 'var(--radius-sm)',
                  border:
                    boomPlacementTab === tab.id
                      ? '1px solid rgba(6,182,212,0.4)'
                      : '1px solid var(--stroke-default)',
                  background:
                    boomPlacementTab === tab.id ? 'rgba(6,182,212,0.08)' : 'var(--bg-base)',
                  color: boomPlacementTab === tab.id ? 'var(--color-accent)' : 'var(--fg-disabled)',
                  transition: '0.15s',
                }}
                className="flex-1 text-label-2 font-medium cursor-pointer"
              >
                {tab.label}
              </button>
            ))}
            <button
              onClick={() => setShowResetConfirm(true)}
              disabled={!hasData}
              style={{
                padding: '6px 10px',
                borderRadius: 'var(--radius-sm)',
                border: '1px solid var(--stroke-default)',
                background: 'var(--bg-base)',
                color: 'var(--fg-disabled)',
                cursor: hasData ? 'pointer' : 'not-allowed',
                transition: '0.15s',
              }}
              className="text-label-2 font-medium shrink-0"
            >
              초기화
            </button>
          </div>

          {/* 초기화 확인 팝업 */}
          {showResetConfirm && (
            <div
              style={{
                padding: '14px',
                background: 'rgba(239,68,68,0.06)',
                border: '1px solid rgba(239,68,68,0.3)',
                borderRadius: 'var(--radius-md)',
              }}
            >
              <div className="text-label-2 font-bold text-fg font-korean mb-2">
                ⚠ 오일펜스 배치 가이드를 초기화 합니다
              </div>
              <div className="text-caption text-fg-default font-korean mb-3">
                배치된 오일펜스 라인과 시뮬레이션 결과가 삭제됩니다. 확산 예측 결과는 유지됩니다.
              </div>
              <div className="flex gap-2">
                <button
                  onClick={handleReset}
                  style={{
                    padding: '6px 14px',
                    background: 'rgba(239,68,68,0.15)',
                    border: '1px solid var(--color-danger)',
                    borderRadius: 'var(--radius-sm)',
                    color: 'var(--color-danger)',
                    transition: '0.15s',
                  }}
                  className="flex-1 text-label-2 font-bold cursor-pointer"
                >
                  확인
                </button>
                <button
                  onClick={() => setShowResetConfirm(false)}
                  style={{
                    padding: '6px 14px',
                    background: 'var(--bg-base)',
                    border: '1px solid var(--stroke-default)',
                    borderRadius: 'var(--radius-sm)',
                    color: 'var(--fg-sub)',
                    transition: '0.15s',
                  }}
                  className="flex-1 text-label-2 font-bold cursor-pointer"
                >
                  취소
                </button>
              </div>
            </div>
          )}

          {/* Key Metrics */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '6px' }}>
            {[
              { value: String(boomLines.length), label: '배치 라인', color: 'var(--color-accent)' },
              {
                value:
                  boomLines.length > 0
                    ? `${(boomLines.reduce((s, l) => s + l.length, 0) / 1000).toFixed(1)}km`
                    : '0km',
                label: '총 길이',
                color: 'var(--color-accent)',
              },
              {
                value:
                  boomLines.length > 0
                    ? `${Math.round(boomLines.reduce((s, l) => s + l.efficiency, 0) / boomLines.length)}%`
                    : '—',
                label: '평균 효율',
                color: 'var(--color-accent)',
              },
            ].map((metric, idx) => (
              <div
                key={idx}
                style={{
                  padding: '10px 8px',
                  background: 'var(--bg-base)',
                  borderRadius: 'var(--radius-sm)',
                  textAlign: 'center',
                }}
                className="border border-stroke"
              >
                <div
                  // style={{ color: metric.color }}
                  className="text-title-1 font-semibold font-mono mb-[2px]"
                >
                  {metric.value}
                </div>
                <div className="text-caption text-fg-default">{metric.label}</div>
              </div>
            ))}
          </div>

          {/* ===== 시뮬레이션 탭 ===== */}
          {boomPlacementTab === 'simulation' && (
            <>
              {/* 전제조건 체크 */}
              <div className="flex flex-col gap-1.5">
                <div
                  style={{ background: 'var(--bg-base)', borderRadius: 'var(--radius-sm)' }}
                  className="flex items-center gap-1.5 p-[6px_10px] border border-stroke text-label-2"
                >
                  <span
                    style={{
                      width: '8px',
                      height: '8px',
                      borderRadius: '50%',
                      background: 'var(--fg-default)',
                    }}
                  />
                  <span className="text-fg-default">
                    확산 궤적 데이터{' '}
                    {oilTrajectory.length > 0 ? `(${oilTrajectory.length}개 입자)` : '없음'}
                  </span>
                </div>
              </div>

              {/* 알고리즘 설정 */}
              <div>
                <h4
                  className="text-label-2 font-bold text-fg-default mb-2"
                  style={{ letterSpacing: 'var(--letter-spacing-label)' }}
                >
                  📊 V자형 배치 알고리즘 설정
                </h4>
                <div className="flex flex-col gap-2">
                  {[
                    {
                      label: '해류 직교 보정',
                      key: 'currentOrthogonalCorrection' as const,
                      unit: '°',
                      value: algorithmSettings.currentOrthogonalCorrection,
                    },
                    {
                      label: '안전 마진 (도달시간)',
                      key: 'safetyMarginMinutes' as const,
                      unit: '분',
                      value: algorithmSettings.safetyMarginMinutes,
                    },
                    {
                      label: '최소 차단 효율',
                      key: 'minContainmentEfficiency' as const,
                      unit: '%',
                      value: algorithmSettings.minContainmentEfficiency,
                    },
                    {
                      label: '파고 보정 계수',
                      key: 'waveHeightCorrectionFactor' as const,
                      unit: 'x',
                      value: algorithmSettings.waveHeightCorrectionFactor,
                    },
                  ].map((setting) => (
                    <div
                      key={setting.key}
                      style={{
                        background: 'var(--bg-base)',
                        borderRadius: 'var(--radius-sm)',
                      }}
                      className="flex items-center justify-between px-2.5 py-1.5 border border-stroke"
                    >
                      <span className="flex-1 text-caption text-fg-default truncate">
                        ● {setting.label}
                      </span>
                      <div className="flex items-center gap-1 shrink-0 w-[80px] justify-end">
                        <input
                          type="number"
                          value={setting.value}
                          onChange={(e) => {
                            const val = parseFloat(e.target.value) || 0;
                            onAlgorithmSettingsChange({ ...algorithmSettings, [setting.key]: val });
                          }}
                          className="boom-setting-input"
                          step={setting.key === 'waveHeightCorrectionFactor' ? 0.1 : 1}
                        />
                        <span className="text-caption text-fg-default w-[14px]">
                          {setting.unit}
                        </span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* V자형 배치 + 시뮬레이션 실행 버튼 */}
              <button
                onClick={handleRunSimulation}
                disabled={oilTrajectory.length === 0}
                style={{
                  background: 'transparent',
                  border: '1px solid var(--color-accent)',
                  borderRadius: 'var(--radius-sm)',
                  color: oilTrajectory.length > 0 ? 'var(--color-accent)' : 'var(--fg-disabled)',
                  cursor: oilTrajectory.length > 0 ? 'pointer' : 'not-allowed',
                  opacity: oilTrajectory.length > 0 ? 1 : 0.4,
                  transition: '0.15s',
                }}
                className="w-full p-[10px] text-label-2 font-bold"
              >
                V자형 오일펜스 배치 + 시뮬레이션 실행
              </button>

              <p className="text-caption text-fg-default leading-relaxed font-korean">
                확산 궤적을 분석하여 해류 직교 방향 1차 방어선(V형), U형 포위 2차 방어선, 연안 보호
                3차 방어선을 자동 배치하고 차단 시뮬레이션을 실행합니다.
              </p>

              {/* 시뮬레이션 결과 */}
              {containmentResult && containmentResult.totalParticles > 0 && (
                <div className="flex flex-col gap-2.5">
                  {/* 전체 효율 */}
                  <div
                    style={{
                      padding: '16px',
                      background: 'rgba(6,182,212,0.05)',
                      border: '1px solid rgba(6,182,212,0.3)',
                      borderRadius: 'var(--radius-md)',
                      textAlign: 'center',
                    }}
                  >
                    <div className="text-heading-2 font-bold text-color-accent font-mono">
                      {containmentResult.overallEfficiency}%
                    </div>
                    <div className="text-label-2 text-fg-default mt-[2px]">전체 차단 효율</div>
                  </div>

                  {/* 차단/통과 카운트 */}
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6px' }}>
                    <div
                      style={{
                        padding: '10px',
                        background: 'var(--bg-base)',
                        borderRadius: 'var(--radius-sm)',
                        textAlign: 'center',
                      }}
                      className="border border-stroke"
                    >
                      <div className="text-title-2 font-bold text-color-success font-mono">
                        {containmentResult.blockedParticles}
                      </div>
                      <div className="text-caption text-fg-default">차단 입자</div>
                    </div>
                    <div
                      style={{
                        padding: '10px',
                        background: 'var(--bg-base)',
                        borderRadius: 'var(--radius-sm)',
                        textAlign: 'center',
                      }}
                      className="border border-stroke"
                    >
                      <div className="text-title-2 font-bold text-color-danger font-mono">
                        {containmentResult.passedParticles}
                      </div>
                      <div className="text-caption text-fg-default">통과 입자</div>
                    </div>
                  </div>

                  {/* 효율 바 */}
                  <div className="boom-eff-bar">
                    <div
                      className="boom-eff-fill"
                      style={{
                        width: `${containmentResult.overallEfficiency}%`,
                        background:
                          containmentResult.overallEfficiency >= 80
                            ? 'var(--color-success)'
                            : containmentResult.overallEfficiency >= 50
                              ? 'var(--color-warning)'
                              : 'var(--color-danger)',
                      }}
                    />
                  </div>

                  {/* 라인별 분석 */}
                  <div>
                    <h4 className="text-label-2 font-bold text-fg-sub mb-1.5">라인별 차단 분석</h4>
                    {containmentResult.perLineResults.map((r) => (
                      <div
                        key={r.boomLineId}
                        style={{ background: 'var(--bg-base)', borderRadius: 'var(--radius-sm)' }}
                        className="flex items-center justify-between p-[6px_8px] mb-1 border border-stroke text-caption"
                      >
                        <span className="text-fg-sub flex-1">{r.boomLineName}</span>
                        <span
                          style={{
                            color:
                              r.efficiency >= 50 ? 'var(--color-success)' : 'var(--color-warning)',
                            marginLeft: '8px',
                          }}
                          className="font-bold font-mono"
                        >
                          {r.blocked}차단 / {r.efficiency}%
                        </span>
                      </div>
                    ))}
                  </div>

                  {/* 배치된 방어선 카드 */}
                  {boomLines.map((line, idx) => {
                    const priorityColor =
                      line.priority === 'CRITICAL'
                        ? 'var(--color-danger)'
                        : line.priority === 'HIGH'
                          ? 'var(--color-warning)'
                          : 'var(--color-caution)';
                    const priorityLabel =
                      line.priority === 'CRITICAL'
                        ? '긴급'
                        : line.priority === 'HIGH'
                          ? '중요'
                          : '보통';
                    return (
                      <div
                        key={line.id}
                        style={{
                          padding: '10px',
                          background: 'var(--bg-base)',
                          borderLeft: `3px solid ${priorityColor}`,
                          borderRadius: 'var(--radius-sm)',
                        }}
                        className="border border-stroke"
                      >
                        <div className="flex items-center justify-between mb-2">
                          <span className="text-label-2 font-bold text-fg">
                            🛡 {idx + 1}차 방어선 ({line.type})
                          </span>
                          <span
                            style={{
                              padding: '2px 6px',
                              background: `${priorityColor}20`,
                              border: `1px solid ${priorityColor}`,
                              borderRadius: '3px',
                              color: priorityColor,
                            }}
                            className="text-caption font-bold"
                          >
                            {priorityLabel}
                          </span>
                        </div>
                        <div
                          style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6px' }}
                          className="mb-1.5"
                        >
                          <div>
                            <span className="text-caption text-fg-default">길이</span>
                            <div className="text-title-3 font-bold font-mono text-fg">
                              {line.length.toFixed(0)}m
                            </div>
                          </div>
                          <div>
                            <span className="text-caption text-fg-default">각도</span>
                            <div className="text-title-3 font-bold font-mono text-fg">
                              {line.angle.toFixed(0)}°
                            </div>
                          </div>
                        </div>
                        <div className="flex items-center gap-1">
                          <span
                            style={{
                              width: '6px',
                              height: '6px',
                              borderRadius: '50%',
                              background:
                                line.efficiency >= 80
                                  ? 'var(--color-success)'
                                  : 'var(--color-warning)',
                            }}
                          />
                          <span
                            style={{
                              color:
                                line.efficiency >= 80
                                  ? 'var(--color-success)'
                                  : 'var(--color-warning)',
                            }}
                            className="text-caption font-medium"
                          >
                            차단 효율 {line.efficiency}%
                          </span>
                        </div>
                      </div>
                    );
                  })}
                </div>
              )}
            </>
          )}
        </div>
      )}
    </div>
  );
};

export default OilBoomSection;
