import { useState, useRef, useEffect } from 'react'
import type { PredictionModel } from './OilSpillView'

interface RecalcModalProps {
  isOpen: boolean
  onClose: () => void
  oilType: string
  spillAmount: number
  spillType: string
  predictionTime: number
  incidentCoord: { lat: number; lon: number }
  selectedModels: Set<PredictionModel>
  onSubmit: (params: {
    oilType: string
    spillAmount: number
    spillType: string
    predictionTime: number
    incidentCoord: { lat: number; lon: number }
    selectedModels: Set<PredictionModel>
  }) => void
}

type RecalcPhase = 'editing' | 'running' | 'done'

const OIL_TYPES = ['벙커C유', '원유(중질)', '원유(경질)', '디젤유(경유)', '휘발유', '등유', '윤활유', 'HFO 380', 'HFO 180']
const SPILL_TYPES = ['연속', '순간', '점진적']
const PREDICTION_TIMES = [12, 24, 48, 72, 96, 120]

export function RecalcModal({
  isOpen,
  onClose,
  oilType: initOilType,
  spillAmount: initSpillAmount,
  spillType: initSpillType,
  predictionTime: initPredictionTime,
  incidentCoord: initCoord,
  selectedModels: initModels,
  onSubmit,
}: RecalcModalProps) {
  const backdropRef = useRef<HTMLDivElement>(null)

  const [oilType, setOilType] = useState(initOilType)
  const [spillAmount, setSpillAmount] = useState(initSpillAmount)
  const [spillUnit, setSpillUnit] = useState<'kl' | 'ton' | 'bbl'>('kl')
  const [spillType, setSpillType] = useState(initSpillType)
  const [predictionTime, setPredictionTime] = useState(initPredictionTime)
  const [lat, setLat] = useState(initCoord.lat)
  const [lon, setLon] = useState(initCoord.lon)
  const [models, setModels] = useState<Set<PredictionModel>>(new Set(initModels))
  const [phase, setPhase] = useState<RecalcPhase>('editing')

  // Sync when modal opens
  /* eslint-disable react-hooks/set-state-in-effect */
  useEffect(() => {
    if (isOpen) {
      setOilType(initOilType)
      setSpillAmount(initSpillAmount)
      setSpillType(initSpillType)
      setPredictionTime(initPredictionTime)
      setLat(initCoord.lat)
      setLon(initCoord.lon)
      setModels(new Set(initModels))
      setPhase('editing')
    }
  }, [isOpen, initOilType, initSpillAmount, initSpillType, initPredictionTime, initCoord.lat, initCoord.lon, initModels])
  /* eslint-enable react-hooks/set-state-in-effect */

  useEffect(() => {
    const handler = (e: MouseEvent) => {
      if (e.target === backdropRef.current) onClose()
    }
    if (isOpen) document.addEventListener('mousedown', handler)
    return () => document.removeEventListener('mousedown', handler)
  }, [isOpen, onClose])

  const toggleModel = (model: PredictionModel) => {
    setModels(prev => {
      const next = new Set(prev)
      if (next.has(model)) next.delete(model)
      else next.add(model)
      return next
    })
  }

  const handleRun = () => {
    setPhase('running')
    setTimeout(() => {
      setPhase('done')
      setTimeout(() => {
        onSubmit({
          oilType,
          spillAmount,
          spillType,
          predictionTime,
          incidentCoord: { lat, lon },
          selectedModels: models,
        })
        onClose()
      }, 1000)
    }, 2500)
  }

  if (!isOpen) return null

  return (
    <div
      ref={backdropRef}
      style={{
        inset: 0,
        background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(4px)',
      }}
      className="fixed z-[9999] flex items-center justify-center"
    >
      <div style={{
        width: '380px', maxHeight: 'calc(100vh - 120px)',
        background: 'var(--bg1)',
        borderRadius: '14px',
        boxShadow: '0 20px 60px rgba(0,0,0,0.5)',
      }} className="border border-border overflow-hidden flex flex-col">
        {/* Header */}
        <div style={{
          padding: '16px 20px',
        }} className="border-b border-border flex items-center gap-3">
          <div style={{
            width: '36px', height: '36px', borderRadius: '10px',
            background: 'linear-gradient(135deg, rgba(249,115,22,0.2), rgba(6,182,212,0.2))',
            border: '1px solid rgba(249,115,22,0.3)',
            fontSize: '16px',
          }} className="flex items-center justify-center">
            🔄
          </div>
          <div className="flex-1">
            <h2 className="text-[15px] font-bold m-0">
              확산예측 재계산
            </h2>
            <div className="text-[10px] text-text-3 mt-[2px]">
              유출유·유출량 등 파라미터를 수정하여 재실행
            </div>
          </div>
          <button
            onClick={onClose}
            style={{
              width: '28px', height: '28px', borderRadius: '6px',
              background: 'var(--bg3)',
              fontSize: '12px',
            }}
            className="border border-border text-text-3 cursor-pointer flex items-center justify-center"
          >
            ✕
          </button>
        </div>

        {/* Scrollable Content */}
        <div style={{
          padding: '16px 20px',
        }} className="flex-1 overflow-y-auto flex flex-col gap-[14px]">
          {/* 현재 분석 정보 */}
          <div style={{
            padding: '10px 12px', background: 'rgba(6,182,212,0.04)',
            border: '1px solid rgba(6,182,212,0.15)', borderRadius: '8px',
          }}>
            <div className="text-[9px] font-bold text-primary-cyan mb-1.5">
              현재 분석 정보
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '4px' }} className="text-[9px]">
              <InfoItem label="사고명" value="여수 앞바다 유류오염" />
              <InfoItem label="유종" value={initOilType} />
              <InfoItem label="유출량" value={`${initSpillAmount} kl`} />
              <InfoItem label="예측시간" value={`${initPredictionTime}시간`} />
            </div>
          </div>

          {/* 유종 */}
          <FieldGroup label="유종">
            <select
              className="prd-i"
              value={oilType}
              onChange={(e) => setOilType(e.target.value)}
            >
              {OIL_TYPES.map(t => (
                <option key={t} value={t}>{t}</option>
              ))}
            </select>
          </FieldGroup>

          {/* 유출량 */}
          <FieldGroup label="유출량">
            <div className="flex gap-1.5">
              <input
                type="number"
                className="prd-i flex-1"
                value={spillAmount}
                onChange={(e) => setSpillAmount(Number(e.target.value))}
              />
              <select
                className="prd-i"
                value={spillUnit}
                onChange={(e) => setSpillUnit(e.target.value as 'kl' | 'ton' | 'bbl')}
                style={{ width: '70px' }}
              >
                <option value="kl">kl</option>
                <option value="ton">ton</option>
                <option value="bbl">bbl</option>
              </select>
            </div>
          </FieldGroup>

          {/* 유출 형태 */}
          <FieldGroup label="유출 형태">
            <select
              className="prd-i"
              value={spillType}
              onChange={(e) => setSpillType(e.target.value)}
            >
              {SPILL_TYPES.map(t => (
                <option key={t} value={t}>{t}</option>
              ))}
            </select>
          </FieldGroup>

          {/* 예측 시간 */}
          <FieldGroup label="예측 시간">
            <select
              className="prd-i"
              value={predictionTime}
              onChange={(e) => setPredictionTime(Number(e.target.value))}
            >
              {PREDICTION_TIMES.map(h => (
                <option key={h} value={h}>{h}시간</option>
              ))}
            </select>
          </FieldGroup>

          {/* 유출 위치 */}
          <FieldGroup label="유출 위치 (좌표)">
            <div className="flex gap-1.5">
              <div className="flex-1">
                <div className="text-[8px] text-text-3 mb-[3px]">
                  위도 (N)
                </div>
                <input
                  type="number"
                  className="prd-i font-mono"
                  value={lat}
                  step={0.0001}
                  onChange={(e) => setLat(Number(e.target.value))}
                />
              </div>
              <div className="flex-1">
                <div className="text-[8px] text-text-3 mb-[3px]">
                  경도 (E)
                </div>
                <input
                  type="number"
                  className="prd-i font-mono"
                  value={lon}
                  step={0.0001}
                  onChange={(e) => setLon(Number(e.target.value))}
                />
              </div>
            </div>
          </FieldGroup>

          {/* 모델 선택 */}
          <FieldGroup label="예측 모델 선택">
            <div className="flex flex-wrap gap-1.5">
              {([
                { model: 'KOSPS' as PredictionModel, color: '#3b82f6' },
                { model: 'POSEIDON' as PredictionModel, color: '#22c55e' },
                { model: 'OpenDrift' as PredictionModel, color: '#f97316' },
              ]).map(({ model, color }) => (
                <button
                  key={model}
                  className={`prd-mc ${models.has(model) ? 'on' : ''}`}
                  onClick={() => toggleModel(model)}
                  style={{ fontSize: '11px', padding: '5px 10px' }}
                >
                  <span className="prd-md" style={{ background: color }} />
                  {model}
                </button>
              ))}
              <button
                className={`prd-mc ${models.size === 3 ? 'on' : ''}`}
                onClick={() => {
                  if (models.size === 3) setModels(new Set(['KOSPS']))
                  else setModels(new Set(['KOSPS', 'POSEIDON', 'OpenDrift']))
                }}
                style={{ fontSize: '11px', padding: '5px 10px' }}
              >
                앙상블
              </button>
            </div>
          </FieldGroup>
        </div>

        {/* Footer */}
        <div style={{
          padding: '14px 20px',
        }} className="border-t border-border flex gap-2">
          <button
            onClick={onClose}
            disabled={phase !== 'editing'}
            style={{
              padding: '10px',
              borderRadius: '8px',
              background: 'var(--bg3)',
              opacity: phase !== 'editing' ? 0.5 : 1,
            }}
            className="flex-1 text-[12px] font-semibold border border-border text-text-2 cursor-pointer"
          >
            취소
          </button>
          <button
            onClick={handleRun}
            disabled={phase !== 'editing' || models.size === 0}
            style={{
              padding: '10px',
              borderRadius: '8px',
              cursor: phase === 'editing' ? 'pointer' : 'wait',
              background: phase === 'done'
                ? 'rgba(34,197,94,0.15)'
                : phase === 'running'
                  ? 'var(--bg3)'
                  : 'linear-gradient(135deg, var(--orange), var(--cyan))',
              border: phase === 'done'
                ? '1px solid rgba(34,197,94,0.4)'
                : phase === 'running'
                  ? '1px solid var(--bd)'
                  : 'none',
              color: phase === 'done'
                ? 'var(--green)'
                : phase === 'running'
                  ? 'var(--orange)'
                  : '#fff',
              opacity: models.size === 0 && phase === 'editing' ? 0.5 : 1,
            }}
            className="flex-[2] text-[12px] font-bold"
          >
            {phase === 'done' ? '✅ 재계산 완료!' : phase === 'running' ? '⏳ 재계산 실행중...' : '🔄 재계산 실행'}
          </button>
        </div>
      </div>
    </div>
  )
}

function FieldGroup({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div>
      <div className="text-[10px] font-bold text-text-2 mb-1.5">
        {label}
      </div>
      {children}
    </div>
  )
}

function InfoItem({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex justify-between py-[2px]">
      <span className="text-text-3">{label}</span>
      <span className="font-semibold font-mono">{value}</span>
    </div>
  )
}
