import { useState } from 'react'

/**
 * 해양환경관리법 제22조 기반 선박 발생 오염물 배출 규정
 * 영해기선으로부터의 거리에 따라 배출 가능 여부 결정
 *
 * 법률 근거:
 * https://lbox.kr/v2/statute/%ED%95%B4%EC%96%91%ED%99%98%EA%B2%BD%EA%B4%80%EB%A6%AC%EB%B2%95/%EB%B3%B8%EB%AC%B8%20%3E%20%EC%A0%9C3%EC%9E%A5%20%3E%20%EC%A0%9C1%EC%A0%88%20%3E%20%EC%A0%9C22%EC%A1%B0
 * 선박에서의 오염방지에 관한 규칙 제8조[별표 2] 및 제14조
 */

type Status = 'forbidden' | 'allowed' | 'conditional'

interface DischargeRule {
  category: string
  item: string
  zones: [Status, Status, Status, Status] // [~3NM, 3~12NM, 12~25NM, 25NM+]
  condition?: string
}

const RULES: DischargeRule[] = [
  // 폐기물
  { category: '폐기물', item: '플라스틱 제품', zones: ['forbidden', 'forbidden', 'forbidden', 'forbidden'] },
  { category: '폐기물', item: '포장유해물질·용기', zones: ['forbidden', 'forbidden', 'forbidden', 'forbidden'] },
  { category: '폐기물', item: '중금속 포함 쓰레기', zones: ['forbidden', 'forbidden', 'forbidden', 'forbidden'] },
  // 화물잔류물
  { category: '화물잔류물', item: '부유성 화물잔류물', zones: ['forbidden', 'forbidden', 'forbidden', 'allowed'] },
  { category: '화물잔류물', item: '침강성 화물잔류물', zones: ['forbidden', 'forbidden', 'allowed', 'allowed'] },
  { category: '화물잔류물', item: '화물창 세정수', zones: ['forbidden', 'forbidden', 'conditional', 'conditional'], condition: '해양환경에 해롭지 않은 일반세제 사용시' },
  // 음식물 찌꺼기
  { category: '음식물찌꺼기', item: '미분쇄', zones: ['forbidden', 'forbidden', 'allowed', 'allowed'] },
  { category: '음식물찌꺼기', item: '분쇄·연마', zones: ['forbidden', 'conditional', 'allowed', 'allowed'], condition: '크기 25mm 이하시' },
  // 분뇨
  { category: '분뇨', item: '분뇨저장장치', zones: ['forbidden', 'forbidden', 'conditional', 'conditional'], condition: '항속 4노트 이상시 서서히 배출' },
  { category: '분뇨', item: '분뇨마쇄소독장치', zones: ['forbidden', 'conditional', 'conditional', 'conditional'], condition: '항속 4노트 이상시 / 400톤 미만 국내항해 선박은 3해리 이내 가능' },
  { category: '분뇨', item: '분뇨처리장치', zones: ['allowed', 'allowed', 'allowed', 'allowed'], condition: '수산자원보호구역, 보호수면 및 육성수면은 불가' },
  // 중수
  { category: '중수', item: '거주구역 중수', zones: ['allowed', 'allowed', 'allowed', 'allowed'], condition: '수산자원보호구역, 보호수면, 수산자원관리수면, 지정해역 등은 불가' },
  // 수산동식물
  { category: '수산동식물', item: '자연기원물질', zones: ['allowed', 'allowed', 'allowed', 'allowed'], condition: '면허 또는 허가를 득한 자에 한하여 어업활동 수면' },
]

const ZONE_LABELS = ['~3해리', '3~12해리', '12~25해리', '25해리+']
const ZONE_COLORS = ['#ef4444', '#f97316', '#eab308', '#22c55e']

function getZoneIndex(distanceNm: number): number {
  if (distanceNm < 3) return 0
  if (distanceNm < 12) return 1
  if (distanceNm < 25) return 2
  return 3
}

function StatusBadge({ status }: { status: Status }) {
  if (status === 'forbidden') return <span className="text-[8px] font-bold px-1.5 py-0.5 rounded" style={{ background: 'rgba(239,68,68,0.15)', color: '#ef4444' }}>배출불가</span>
  if (status === 'allowed') return <span className="text-[8px] font-bold px-1.5 py-0.5 rounded" style={{ background: 'rgba(34,197,94,0.15)', color: '#22c55e' }}>배출가능</span>
  return <span className="text-[8px] font-bold px-1.5 py-0.5 rounded" style={{ background: 'rgba(234,179,8,0.15)', color: '#eab308' }}>조건부</span>
}

interface DischargeZonePanelProps {
  lat: number
  lon: number
  distanceNm: number
  onClose: () => void
}

export function DischargeZonePanel({ lat, lon, distanceNm, onClose }: DischargeZonePanelProps) {
  const zoneIdx = getZoneIndex(distanceNm)
  const [expandedCat, setExpandedCat] = useState<string | null>(null)

  const categories = [...new Set(RULES.map(r => r.category))]

  return (
    <div
      className="absolute top-4 right-4 z-[1000] rounded-lg overflow-hidden flex flex-col"
      style={{
        width: 320,
        maxHeight: 'calc(100% - 32px)',
        background: 'rgba(13,17,23,0.95)',
        border: '1px solid #30363d',
        boxShadow: '0 16px 48px rgba(0,0,0,0.5)',
        backdropFilter: 'blur(12px)',
      }}
    >
      {/* Header */}
      <div
        className="shrink-0 flex items-center justify-between"
        style={{
          padding: '10px 14px',
          borderBottom: '1px solid #30363d',
          background: 'linear-gradient(135deg, #1c2333, #161b22)',
        }}
      >
        <div>
          <div className="text-[11px] font-bold text-[#f0f6fc] font-korean">🚢 오염물 배출 규정</div>
          <div className="text-[8px] text-[#8b949e] font-korean">해양환경관리법 제22조</div>
        </div>
        <span onClick={onClose} className="text-[14px] cursor-pointer text-[#8b949e] hover:text-[#f0f6fc]">✕</span>
      </div>

      {/* Location Info */}
      <div className="shrink-0" style={{ padding: '8px 14px', borderBottom: '1px solid #21262d' }}>
        <div className="flex items-center justify-between mb-1.5">
          <span className="text-[9px] text-[#8b949e] font-korean">선택 위치</span>
          <span className="text-[9px] text-[#c9d1d9] font-mono">{lat.toFixed(4)}°N, {lon.toFixed(4)}°E</span>
        </div>
        <div className="flex items-center justify-between mb-2">
          <span className="text-[9px] text-[#8b949e] font-korean">영해기선 거리 (추정)</span>
          <span className="text-[11px] font-bold font-mono" style={{ color: ZONE_COLORS[zoneIdx] }}>
            {distanceNm.toFixed(1)} NM
          </span>
        </div>
        {/* Zone indicator */}
        <div className="flex gap-1">
          {ZONE_LABELS.map((label, i) => (
            <div
              key={label}
              className="flex-1 text-center rounded-sm"
              style={{
                padding: '3px 0',
                fontSize: 8,
                fontWeight: i === zoneIdx ? 700 : 400,
                color: i === zoneIdx ? '#fff' : '#8b949e',
                background: i === zoneIdx ? ZONE_COLORS[i] : 'rgba(255,255,255,0.04)',
                border: i === zoneIdx ? 'none' : '1px solid #21262d',
              }}
            >
              {label}
            </div>
          ))}
        </div>
      </div>

      {/* Rules */}
      <div className="flex-1 overflow-y-auto" style={{ scrollbarWidth: 'thin', scrollbarColor: '#30363d transparent' }}>
        {categories.map(cat => {
          const catRules = RULES.filter(r => r.category === cat)
          const isExpanded = expandedCat === cat
          const allForbidden = catRules.every(r => r.zones[zoneIdx] === 'forbidden')
          const allAllowed = catRules.every(r => r.zones[zoneIdx] === 'allowed')
          const summaryColor = allForbidden ? '#ef4444' : allAllowed ? '#22c55e' : '#eab308'

          return (
            <div key={cat} style={{ borderBottom: '1px solid #21262d' }}>
              <div
                className="flex items-center justify-between cursor-pointer"
                onClick={() => setExpandedCat(isExpanded ? null : cat)}
                style={{ padding: '8px 14px' }}
              >
                <div className="flex items-center gap-2">
                  <div style={{ width: 6, height: 6, borderRadius: '50%', background: summaryColor }} />
                  <span className="text-[10px] font-bold text-[#c9d1d9] font-korean">{cat}</span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-[8px] font-semibold" style={{ color: summaryColor }}>
                    {allForbidden ? '전체 불가' : allAllowed ? '전체 가능' : '항목별 상이'}
                  </span>
                  <span className="text-[9px] text-[#8b949e]">{isExpanded ? '▾' : '▸'}</span>
                </div>
              </div>

              {isExpanded && (
                <div style={{ padding: '0 14px 10px' }}>
                  {catRules.map((rule, i) => (
                    <div
                      key={i}
                      className="flex items-center justify-between"
                      style={{
                        padding: '5px 8px',
                        marginBottom: 2,
                        background: 'rgba(255,255,255,0.02)',
                        borderRadius: 4,
                      }}
                    >
                      <span className="text-[9px] text-[#c9d1d9] font-korean">{rule.item}</span>
                      <StatusBadge status={rule.zones[zoneIdx]} />
                    </div>
                  ))}
                  {catRules.some(r => r.condition && r.zones[zoneIdx] !== 'forbidden') && (
                    <div className="mt-1" style={{ padding: '4px 8px' }}>
                      {catRules.filter(r => r.condition && r.zones[zoneIdx] !== 'forbidden').map((r, i) => (
                        <div key={i} className="text-[7px] text-[#8b949e] font-korean leading-relaxed">
                          💡 {r.item}: {r.condition}
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              )}
            </div>
          )
        })}
      </div>

      {/* Footer */}
      <div className="shrink-0" style={{ padding: '6px 14px', borderTop: '1px solid #21262d' }}>
        <div className="text-[7px] text-[#8b949e] font-korean leading-relaxed">
          ※ 거리는 최근접 해안선 기준 추정치입니다. 실제 영해기선과 차이가 있을 수 있습니다.
        </div>
      </div>
    </div>
  )
}