import { useState, useEffect } from 'react';
import type { IncidentListItem } from '../services/incidentsApi';
import { fetchIncidentsRaw } from '../services/incidentsApi';

export function IncidentTable() {
  const [incidents, setIncidents] = useState<IncidentListItem[]>([]);
  const [searchTerm, setSearchTerm] = useState('');

  useEffect(() => {
    fetchIncidentsRaw()
      .then(setIncidents)
      .catch(() => setIncidents([]));
  }, []);

  const filteredIncidents = incidents.filter((inc) => {
    if (!searchTerm) return true;
    return inc.acdntNm.toLowerCase().includes(searchTerm.toLowerCase());
  });

  return (
    <div className="flex flex-col h-full bg-bg-base">
      {/* 헤더 */}
      <div className="flex items-center justify-between px-5 py-4 border-b border-stroke">
        <div>
          <h1 className="text-xl font-bold text-fg">유출유 확산 예측 목록</h1>
          <p className="text-body-2 text-fg-disabled mt-1">총 {filteredIncidents.length}건</p>
        </div>
        <div className="flex items-center gap-3">
          <button className="px-4 py-2 text-body-2 font-semibold border border-stroke rounded-md bg-bg-card text-fg-sub hover:bg-bg-surface-hover hover:text-fg transition-all">
            시간별 검색
          </button>
          <div className="relative">
            <input
              type="text"
              placeholder="검색..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-64 px-4 py-2 text-body-2 bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none"
            />
          </div>
          <button className="px-4 py-2 text-body-2 font-semibold rounded-md bg-color-accent text-bg-0 hover:shadow-[0_0_16px_rgba(6,182,212,0.3)] transition-all">
            + 새 분석
          </button>
        </div>
      </div>

      {/* 테이블 */}
      <div className="flex-1 overflow-auto">
        <table className="w-full">
          <thead className="sticky top-0 bg-bg-surface border-b border-stroke z-10">
            <tr>
              <th className="px-4 py-3 text-left text-caption font-bold text-fg-disabled uppercase tracking-wider">
                번호
              </th>
              <th className="px-4 py-3 text-left text-caption font-bold text-fg-disabled uppercase tracking-wider">
                사고명
              </th>
              <th className="px-4 py-3 text-left text-caption font-bold text-fg-disabled uppercase tracking-wider">
                사고시각
              </th>
              <th className="px-4 py-3 text-left text-caption font-bold text-fg-disabled uppercase tracking-wider">
                선박유형
              </th>
              <th className="px-4 py-3 text-left text-caption font-bold text-fg-disabled uppercase tracking-wider">
                유종
              </th>
              <th className="px-4 py-3 text-right text-caption font-bold text-fg-disabled uppercase tracking-wider">
                유출량
              </th>
              <th className="px-4 py-3 text-left text-caption font-bold text-fg-disabled uppercase tracking-wider">
                사고유형
              </th>
              <th className="px-4 py-3 text-left text-caption font-bold text-fg-disabled uppercase tracking-wider">
                상태
              </th>
              <th className="px-4 py-3 text-left text-caption font-bold text-fg-disabled uppercase tracking-wider">
                분석자
              </th>
            </tr>
          </thead>
          <tbody className="divide-y divide-border">
            {filteredIncidents.map((incident) => (
              <tr
                key={incident.acdntSn}
                className="hover:bg-bg-elevated transition-colors cursor-pointer group"
              >
                <td className="px-4 py-3 text-body-2 text-fg-sub font-mono">{incident.acdntSn}</td>
                <td className="px-4 py-3">
                  <div className="flex items-center gap-2">
                    <span className="w-2 h-2 rounded-full bg-color-danger animate-pulse" />
                    <span className="text-body-2 font-semibold text-fg group-hover:text-color-accent transition-colors">
                      {incident.acdntNm}
                    </span>
                  </div>
                </td>
                <td className="px-4 py-3 text-body-2 text-fg-sub font-mono">{incident.occrnDtm}</td>
                <td className="px-4 py-3 text-body-2 text-fg-sub">{incident.vesselTp ?? '—'}</td>
                <td className="px-4 py-3 text-body-2 text-fg-sub">{incident.oilTpCd ?? '—'}</td>
                <td className="px-4 py-3 text-body-2 text-fg font-mono text-right font-semibold">
                  {incident.spilQty != null ? incident.spilQty.toFixed(2) : '—'}
                </td>
                <td className="px-4 py-3 text-body-2 text-fg-sub">{incident.acdntTpCd}</td>
                <td className="px-4 py-3">
                  <span className="px-2 py-1 text-caption font-semibold rounded-md bg-[rgba(168,85,247,0.15)] text-purple-400">
                    {incident.phaseCd}
                  </span>
                </td>
                <td className="px-4 py-3 text-body-2 text-fg-sub">{incident.analystNm ?? '—'}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
