import { useRef, useEffect, useState } from 'react'
import type { BacktrackPhase, BacktrackVessel, BacktrackConditions, BacktrackInputConditions } from '@common/types/backtrack'

interface BacktrackModalProps {
  isOpen: boolean
  onClose: () => void
  phase: BacktrackPhase
  conditions: BacktrackConditions
  vessels: BacktrackVessel[]
  onRunAnalysis: (input: BacktrackInputConditions) => void
  onStartReplay: () => void
}

const toDateTimeLocalValue = (raw: string): string => {
  if (!raw) return ''
  const d = new Date(raw)
  if (isNaN(d.getTime())) return ''
  const pad = (n: number) => String(n).padStart(2, '0')
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`
}

const nowDateTimeLocalValue = (): string => {
  const d = new Date()
  const pad = (n: number) => String(n).padStart(2, '0')
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`
}

export function BacktrackModal({
  isOpen,
  onClose,
  phase,
  conditions,
  vessels,
  onRunAnalysis,
  onStartReplay,
}: BacktrackModalProps) {
  const backdropRef = useRef<HTMLDivElement>(null)

  const [inputTimeOverride, setInputTime] = useState<string | undefined>(undefined)
  const inputTime = inputTimeOverride ?? toDateTimeLocalValue(conditions.estimatedSpillTime) ?? nowDateTimeLocalValue()
  const [inputRange, setInputRange] = useState('12')
  const [inputRadius, setInputRadius] = useState(10)

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

  if (!isOpen) return null

  const inputDisabled = phase !== 'conditions'

  const inputStyle: React.CSSProperties = {
    width: '100%',
    padding: '6px 8px',
    background: 'var(--bg3)',
    border: '1px solid var(--bd)',
    borderRadius: '6px',
    color: 'var(--t1)',
    fontSize: '11px',
    fontFamily: 'var(--fM)',
    outline: 'none',
    opacity: inputDisabled ? 0.6 : 1,
  }

  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: '580px', 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: '20px 24px',
        }} className="border-b border-border flex items-center gap-[14px]">
          <div style={{
            width: '40px', height: '40px', borderRadius: '10px',
            background: 'linear-gradient(135deg, rgba(168,85,247,0.2), rgba(6,182,212,0.2))',
            border: '1px solid rgba(168,85,247,0.3)',
            fontSize: '18px',
          }} className="flex items-center justify-center">
            🔍
          </div>
          <div className="flex-1">
            <h2 className="text-base font-bold m-0">
              유출유 역추적 분석
            </h2>
            <div className="text-[11px] text-text-3 mt-[2px]">
              AIS 항적 기반 유출 선박 추정
            </div>
          </div>
          <button
            onClick={onClose}
            style={{
              width: '32px', height: '32px', borderRadius: '8px',
              background: 'var(--bg3)',
              fontSize: '14px',
            }}
            className="border border-border text-text-3 cursor-pointer flex items-center justify-center"
          >
            ✕
          </button>
        </div>

        {/* Scrollable Content */}
        <div style={{
          padding: '20px 24px',
        }} className="flex-1 overflow-y-auto flex flex-col gap-4">
          {/* Analysis Conditions */}
          <div>
            <h3 className="text-[12px] font-bold text-text-2 mb-[10px]">
              분석 조건
            </h3>
            <div style={{
              display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px',
            }}>
              {/* 유출 추정 시각 */}
              <div style={{
                padding: '10px 12px', background: 'var(--bg3)',
                borderRadius: '8px',
              }} className="border border-border">
                <div className="text-[9px] text-text-3 mb-1">
                  유출 추정 시각
                </div>
                <input
                  type="datetime-local"
                  value={inputTime}
                  onChange={e => setInputTime(e.target.value)}
                  disabled={inputDisabled}
                  style={inputStyle}
                />
              </div>

              {/* 분석 범위 */}
              <div style={{
                padding: '10px 12px', background: 'var(--bg3)',
                borderRadius: '8px',
              }} className="border border-border">
                <div className="text-[9px] text-text-3 mb-1">
                  분석 범위
                </div>
                <select
                  value={inputRange}
                  onChange={e => setInputRange(e.target.value)}
                  disabled={inputDisabled}
                  style={inputStyle}
                >
                  <option value="6">±6시간</option>
                  <option value="12">±12시간</option>
                  <option value="24">±24시간</option>
                </select>
              </div>

              {/* 탐색 반경 */}
              <div style={{
                padding: '10px 12px', background: 'var(--bg3)',
                borderRadius: '8px',
              }} className="border border-border">
                <div className="text-[9px] text-text-3 mb-1">
                  탐색 반경
                </div>
                <div className="flex items-center gap-1">
                  <input
                    type="number"
                    value={inputRadius}
                    onChange={e => setInputRadius(Number(e.target.value))}
                    disabled={inputDisabled}
                    min={1}
                    max={100}
                    step={0.5}
                    style={{ ...inputStyle, flex: 1 }}
                  />
                  <span className="text-[10px] text-text-3 shrink-0">NM</span>
                </div>
              </div>

              {/* 유출 위치 */}
              <div style={{
                padding: '10px 12px', background: 'var(--bg3)',
                borderRadius: '8px',
              }} className="border border-border">
                <div className="text-[9px] text-text-3 mb-1">
                  유출 위치
                </div>
                <div className="text-[12px] font-semibold font-mono">
                  {conditions.spillLocation.lat.toFixed(4)}°N, {conditions.spillLocation.lon.toFixed(4)}°E
                </div>
              </div>

              {/* 분석 대상 선박 */}
              <div style={{
                padding: '10px 12px', background: 'var(--bg3)',
                border: '1px solid rgba(168,85,247,0.3)', borderRadius: '8px',
                gridColumn: '1 / -1',
              }}>
                <div className="text-[9px] text-text-3 mb-1">
                  분석 대상 선박
                </div>
                <div className="text-sm font-bold text-primary-purple font-mono">
                  {conditions.totalVessels}척 <span className="text-[10px] font-medium text-text-3">(AIS 수신)</span>
                </div>
              </div>
            </div>
          </div>

          {/* Results */}
          {phase === 'results' && vessels.length > 0 && (
            <div>
              <div className="flex items-center justify-between mb-3">
                <h3 className="text-[12px] font-bold text-text-2 m-0">
                  분석 결과
                </h3>
                <div style={{
                  padding: '4px 10px', borderRadius: '12px',
                  background: 'rgba(239,68,68,0.1)', border: '1px solid rgba(239,68,68,0.3)',
                }} className="text-[10px] font-bold text-status-red">
                  {conditions.totalVessels}척 중 {vessels.length}척 의심
                </div>
              </div>

              <div className="flex flex-col gap-2.5">
                {vessels.map((v) => (
                  <VesselCard key={v.imo} vessel={v} />
                ))}
              </div>
            </div>
          )}
        </div>

        {/* Footer */}
        <div style={{
          padding: '16px 24px',
        }} className="border-t border-border flex gap-2">
          {phase === 'conditions' && (
            <button
              onClick={() => onRunAnalysis({ estimatedSpillTime: inputTime, analysisRange: inputRange, searchRadius: inputRadius })}
              style={{
                padding: '12px',
                borderRadius: '8px',
                background: 'linear-gradient(135deg, var(--purple), var(--cyan))',
                border: 'none', color: '#fff',
              }}
              className="flex-1 text-[13px] font-bold cursor-pointer"
            >
              🔍 역추적 분석 실행
            </button>
          )}
          {phase === 'analyzing' && (
            <button
              disabled
              style={{
                padding: '12px',
                borderRadius: '8px',
                background: 'var(--bg3)',
                color: 'var(--purple)', cursor: 'wait',
              }}
              className="flex-1 text-[13px] font-bold border border-border"
            >
              ⏳ AIS 항적 분석중...
            </button>
          )}
          {phase === 'results' && (
            <button
              onClick={onStartReplay}
              style={{
                padding: '12px',
                borderRadius: '8px',
                background: 'linear-gradient(135deg, var(--purple), var(--cyan))',
                border: 'none', color: '#fff',
              }}
              className="flex-1 text-[13px] font-bold cursor-pointer"
            >
              🗺 지도에서 리플레이 보기
            </button>
          )}
        </div>
      </div>
    </div>
  )
}

function VesselCard({ vessel }: { vessel: BacktrackVessel }) {
  const probColor = vessel.probability >= 80 ? 'var(--red)' :
    vessel.probability >= 20 ? 'var(--orange)' : 'var(--t3)'

  return (
    <div style={{
      padding: '14px', background: 'var(--bg0)',
      borderLeft: `4px solid ${vessel.color}`,
      borderRadius: '10px',
    }} className="border border-border">
      {/* Header row */}
      <div className="flex items-center gap-[10px] mb-[10px]">
        <div style={{
          width: '28px', height: '28px', borderRadius: '50%',
          background: `${vessel.color}20`, border: `2px solid ${vessel.color}`,
          fontSize: '12px', fontWeight: 800, color: vessel.color,
        }} className="flex items-center justify-center font-mono">
          {vessel.rank}
        </div>
        <div className="flex-1">
          <div className="text-[13px] font-bold font-mono">
            {vessel.name}
          </div>
          <div className="text-[9px] text-text-3 font-mono mt-[2px]">
            IMO: {vessel.imo} · {vessel.type} · {vessel.flag}
          </div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: '22px', color: probColor, lineHeight: 1 }} className="font-bold font-mono">
            {vessel.probability}%
          </div>
          <div className="text-[8px] text-text-3">유출 확률</div>
        </div>
      </div>

      {/* Stats grid */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: '6px', marginBottom: vessel.description ? '8px' : 0 }}>
        {[
          { label: '최근접 시각', value: vessel.closestTime },
          { label: '최근접 거리', value: `${vessel.closestDistance} NM` },
          { label: '속도 변화', value: vessel.speedChange, highlight: vessel.speedChange === '급감속' },
          { label: 'AIS 상태', value: vessel.aisStatus, highlight: vessel.aisStatus === '충돌신호' },
        ].map((s, i) => (
          <div key={i} style={{
            padding: '6px', background: 'var(--bg3)', borderRadius: '6px',
            border: s.highlight ? '1px solid rgba(239,68,68,0.3)' : '1px solid var(--bd)',
          }}>
            <div className="text-[8px] text-text-3 mb-[2px]">
              {s.label}
            </div>
            <div style={{
              color: s.highlight ? 'var(--red)' : 'var(--t1)',
            }} className="text-[10px] font-semibold font-mono">
              {s.value}
            </div>
          </div>
        ))}
      </div>

      {/* Description */}
      {vessel.description && (
        <div style={{
          padding: '8px 10px', background: 'rgba(239,68,68,0.05)',
          border: '1px solid rgba(239,68,68,0.15)', borderRadius: '6px',
          lineHeight: '1.5',
        }} className="text-[9px] text-text-2">
          {vessel.description}
        </div>
      )}
    </div>
  )
}