import { useState, useEffect, useCallback } from 'react'
import type { Dispatch, SetStateAction } from 'react'
import { fetchHnsAnalyses, type HnsAnalysisItem } from '../services/hnsApi'

interface HNSAnalysisListTableProps {
  onTabChange: Dispatch<SetStateAction<'analysis' | 'list'>>
}

const RISK_LABEL: Record<string, string> = {
  CRITICAL: '심각',
  HIGH: '위험',
  MEDIUM: '경고',
  LOW: '관찰',
}

const RISK_STYLE: Record<string, { bg: string; color: string }> = {
  CRITICAL: { bg: 'rgba(239,68,68,0.2)', color: 'var(--red)' },
  HIGH: { bg: 'rgba(239,68,68,0.15)', color: 'var(--red)' },
  MEDIUM: { bg: 'rgba(249,115,22,0.15)', color: 'var(--orange)' },
  LOW: { bg: 'rgba(34,197,94,0.15)', color: 'var(--green)' },
}

function formatDate(dtm: string | null, mode: 'full' | 'date') {
  if (!dtm) return '—'
  const d = new Date(dtm)
  if (mode === 'date') return d.toISOString().slice(0, 10)
  return d.toISOString().slice(0, 16).replace('T', ' ')
}

function substanceTag(sbstNm: string | null): string {
  if (!sbstNm) return '—'
  const match = sbstNm.match(/\(([^)]+)\)/)
  if (match) return match[1]
  return sbstNm.length > 6 ? sbstNm.slice(0, 6) : sbstNm
}

export function HNSAnalysisListTable({ onTabChange }: HNSAnalysisListTableProps) {
  const [analyses, setAnalyses] = useState<HnsAnalysisItem[]>([])
  const [loading, setLoading] = useState(true)

  const loadData = useCallback(async () => {
    setLoading(true)
    try {
      const items = await fetchHnsAnalyses()
      setAnalyses(items)
    } catch (err) {
      console.error('[hns] 분석 목록 조회 실패:', err)
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => {
    loadData()
  }, [loadData])

  return (
    <div className="flex flex-col h-full bg-bg-0">
      {/* Header */}
      <div className="px-5 py-4 border-b border-border flex justify-between items-center bg-bg-1">
        <div className="flex items-center gap-3">
          <div className="text-base font-bold flex items-center gap-2">
            <span className="text-[18px]">📋</span>
            HNS 대기확산 분석 목록
          </div>
          <span className="text-[10px] text-text-3 bg-bg-3 font-mono px-[10px] py-1 rounded-xl">
            총 {analyses.length}건
          </span>
        </div>
        <div className="flex gap-2 items-center">
          <input
            type="text"
            placeholder="검색..."
            className="bg-bg-3 border border-border rounded-sm text-[11px] px-3 py-2 w-[200px]"
          />
          <button
            onClick={() => onTabChange('analysis')}
            className="text-status-orange text-[11px] font-semibold cursor-pointer flex items-center gap-1 px-4 py-2 rounded-sm"
            style={{
              border: '1px solid rgba(249,115,22,0.3)',
              background: 'linear-gradient(135deg, rgba(249,115,22,0.15), rgba(239,68,68,0.1))',
            }}
          >
            <span className="text-sm">+</span> 새 분석
          </button>
        </div>
      </div>

      {/* Table */}
      <div className="flex-1 overflow-auto">
        {loading ? (
          <div className="text-center text-text-3 text-[12px] py-20">로딩 중...</div>
        ) : (
        <table className="w-full text-[11px] border-collapse">
          <thead className="sticky top-0 z-10">
            <tr className="bg-bg-2 border-b border-border">
              <th className="text-center text-[10px] font-semibold text-text-2 px-4 py-3 w-[50px]">번호</th>
              <th className="text-left text-[10px] font-semibold text-text-2 px-4 py-3 min-w-[180px]">분석명</th>
              <th className="text-center text-[10px] font-semibold text-text-2 px-4 py-3 min-w-[100px]">물질</th>
              <th className="text-center text-[10px] font-semibold text-text-2 px-4 py-3 min-w-[130px]">사고일시</th>
              <th className="text-center text-[10px] font-semibold text-text-2 px-4 py-3 min-w-[100px]">분석날짜</th>
              <th className="text-center text-[10px] font-semibold text-text-2 px-4 py-3 min-w-[120px]">사고지점</th>
              <th className="text-center text-[10px] font-semibold text-text-2 px-4 py-3 min-w-[90px]">유출량</th>
              <th className="text-center text-[10px] font-semibold text-text-2 px-4 py-3 min-w-[80px]">알고리즘</th>
              <th className="text-center text-[10px] font-semibold text-text-2 px-4 py-3 w-[70px]">예측시간</th>
              <th className="text-center text-[10px] font-semibold text-text-2 px-4 py-3 w-[70px]">
                <div className="flex flex-col items-center gap-0.5">
                  <span>AEGL-3</span>
                  <span className="text-[8px] text-text-3">생명위협</span>
                </div>
              </th>
              <th className="text-center text-[10px] font-semibold text-text-2 px-4 py-3 w-[70px]">
                <div className="flex flex-col items-center gap-0.5">
                  <span>AEGL-2</span>
                  <span className="text-[8px] text-text-3">건강피해</span>
                </div>
              </th>
              <th className="text-center text-[10px] font-semibold text-text-2 px-4 py-3 w-[70px]">
                <div className="flex flex-col items-center gap-0.5">
                  <span>AEGL-1</span>
                  <span className="text-[8px] text-text-3">불쾌감</span>
                </div>
              </th>
              <th className="text-center text-[10px] font-semibold text-text-2 px-4 py-3 min-w-[80px]">위험등급</th>
              <th className="text-center text-[10px] font-semibold text-text-2 px-4 py-3 min-w-[90px]">피해반경</th>
              <th className="text-center text-[10px] font-semibold text-text-2 px-4 py-3 min-w-[120px]">분석자</th>
            </tr>
          </thead>
          <tbody>
            {analyses.map((item, index) => {
              const rslt = item.rsltData as Record<string, unknown> | null
              const riskLabel = RISK_LABEL[item.riskCd || ''] || item.riskCd || '—'
              const riskStyle = RISK_STYLE[item.riskCd || ''] || { bg: 'rgba(100,100,100,0.1)', color: 'var(--t3)' }
              const aegl3 = rslt?.aegl3 as boolean | undefined
              const aegl2 = rslt?.aegl2 as boolean | undefined
              const aegl1 = rslt?.aegl1 as boolean | undefined
              const damageRadius = (rslt?.damageRadius as string) || '—'
              const amount = item.spilQty != null ? `${item.spilQty} ${item.spilUnitCd || 'KL'}` : '—'

              return (
              <tr
                key={item.hnsAnlysSn}
                className="border-b border-border cursor-pointer"
                style={{
                  transition: 'background 0.15s',
                  background: index % 2 === 0 ? 'transparent' : 'rgba(255,255,255,0.01)'
                }}
                onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg2)'}
                onMouseLeave={(e) => e.currentTarget.style.background = index % 2 === 0 ? 'transparent' : 'rgba(255,255,255,0.01)'}
              >
                <td className="text-center text-text-3 font-mono px-4 py-3">{item.hnsAnlysSn}</td>
                <td className="font-medium px-4 py-3">{item.anlysNm}</td>
                <td className="text-center px-4 py-3">
                  <span
                    className="text-[9px] font-semibold text-status-orange px-2 py-1 rounded"
                    style={{ background: 'rgba(249,115,22,0.12)' }}
                  >
                    {substanceTag(item.sbstNm)}
                  </span>
                </td>
                <td className="text-center text-text-2 font-mono text-[10px] px-4 py-3">{formatDate(item.acdntDtm, 'full')}</td>
                <td className="text-center text-text-3 font-mono text-[10px] px-4 py-3">{formatDate(item.regDtm, 'date')}</td>
                <td className="text-center text-text-2 px-4 py-3">{item.locNm || '—'}</td>
                <td className="text-center text-text-2 font-mono px-4 py-3">{amount}</td>
                <td className="text-center px-4 py-3">
                  <span
                    className="text-[9px] font-semibold text-primary-cyan px-2 py-1 rounded"
                    style={{ background: 'rgba(6,182,212,0.12)' }}
                  >
                    {item.algoCd || '—'}
                  </span>
                </td>
                <td className="text-center text-text-2 font-mono px-4 py-3">{item.fcstHr ? `${item.fcstHr}H` : '—'}</td>
                <td className="text-center px-4 py-3">
                  <div
                    className="w-6 h-6 rounded-full mx-auto"
                    style={{
                      background: aegl3 ? 'rgba(239,68,68,0.8)' : 'rgba(255,255,255,0.1)',
                      border: aegl3 ? 'none' : '1px solid var(--bd)'
                    }}
                  />
                </td>
                <td className="text-center px-4 py-3">
                  <div
                    className="w-6 h-6 rounded-full mx-auto"
                    style={{
                      background: aegl2 ? 'rgba(249,115,22,0.8)' : 'rgba(255,255,255,0.1)',
                      border: aegl2 ? 'none' : '1px solid var(--bd)'
                    }}
                  />
                </td>
                <td className="text-center px-4 py-3">
                  <div
                    className="w-6 h-6 rounded-full mx-auto"
                    style={{
                      background: aegl1 ? 'rgba(234,179,8,0.8)' : 'rgba(255,255,255,0.1)',
                      border: aegl1 ? 'none' : '1px solid var(--bd)'
                    }}
                  />
                </td>
                <td className="text-center px-4 py-3">
                  <span
                    className="text-[9px] font-semibold px-[10px] py-1 rounded"
                    style={{ background: riskStyle.bg, color: riskStyle.color }}
                  >
                    {riskLabel}
                  </span>
                </td>
                <td className="text-center text-text-2 font-mono px-4 py-3">{damageRadius}</td>
                <td className="text-center text-text-3 text-[10px] px-4 py-3">{item.analystNm || '—'}</td>
              </tr>
              )
            })}
          </tbody>
        </table>
        )}

        {!loading && analyses.length === 0 && (
          <div className="text-center text-text-3 text-[12px] py-20">분석 데이터가 없습니다.</div>
        )}
      </div>
    </div>
  )
}