import { useState, useEffect, useCallback } from 'react';

// TODO: 실제 API 연동 시 fetch 호출로 교체
interface VesselMonitorRow {
  institution: string;
  institutionCode: string;
  systemName: string;
  linkInfo: string;
  storagePlace: string;
  linkMethod: string;
  collectionCycle: string;
  collectionCount: string;
  isNormal: boolean;
  lastMessageTime: string;
}

/** 기관코드 → 원천기관명 매핑 */
const INSTITUTION_NAMES: Record<string, string> = {
  BS: '부산항',
  BSN: '부산신항',
  DH: '동해안',
  DS: '대산항',
  GI: '경인항',
  GIC: '경인연안',
  GS: '군산항',
  IC: '인천항',
  JDC: '진도연안',
  JJ: '제주항',
  MP: '목포항',
};

/** Mock 데이터 정의 (스크린샷 기반) */
const MOCK_DATA: Omit<VesselMonitorRow, 'institution'>[] = [
  {
    institutionCode: 'BS',
    systemName: 'VTS_AIS',
    linkInfo: 'VTS',
    storagePlace: 'signal.t_dynamic_all_reply',
    linkMethod: 'KAFKA',
    collectionCycle: '00:00:00',
    collectionCount: '439 / 499',
    isNormal: true,
    lastMessageTime: '2026-03-25 10:29:09',
  },
  {
    institutionCode: 'BS',
    systemName: 'VTS_RT',
    linkInfo: 'VTS',
    storagePlace: 'signal.t_dynamic_all_reply',
    linkMethod: 'KAFKA',
    collectionCycle: '00:00:00',
    collectionCount: '133 / 463',
    isNormal: true,
    lastMessageTime: '2026-03-25 10:29:09',
  },
  {
    institutionCode: 'BSN',
    systemName: 'VTS_AIS',
    linkInfo: 'VTS',
    storagePlace: 'signal.t_dynamic_all_reply',
    linkMethod: 'KAFKA',
    collectionCycle: '00:00:00',
    collectionCount: '255 / 278',
    isNormal: true,
    lastMessageTime: '2026-03-25 10:29:09',
  },
  {
    institutionCode: 'BSN',
    systemName: 'VTS_RT',
    linkInfo: 'VTS',
    storagePlace: 'signal.t_dynamic_all_reply',
    linkMethod: 'KAFKA',
    collectionCycle: '00:00:00',
    collectionCount: '133 / 426',
    isNormal: true,
    lastMessageTime: '2026-03-25 10:29:09',
  },
  {
    institutionCode: 'DH',
    systemName: 'VTS_AIS',
    linkInfo: 'VTS',
    storagePlace: 'signal.t_dynamic_all_reply',
    linkMethod: 'KAFKA',
    collectionCycle: '수신대기중',
    collectionCount: '0',
    isNormal: false,
    lastMessageTime: '',
  },
  {
    institutionCode: 'DH',
    systemName: 'VTS_RT',
    linkInfo: 'VTS',
    storagePlace: 'signal.t_dynamic_all_reply',
    linkMethod: 'KAFKA',
    collectionCycle: '수신대기중',
    collectionCount: '0',
    isNormal: false,
    lastMessageTime: '',
  },
  {
    institutionCode: 'DS',
    systemName: 'VTS_AIS',
    linkInfo: 'VTS',
    storagePlace: 'signal.t_dynamic_all_reply',
    linkMethod: 'KAFKA',
    collectionCycle: '00:00:00',
    collectionCount: '0',
    isNormal: false,
    lastMessageTime: '2026-03-15 15:38:57',
  },
  {
    institutionCode: 'DS',
    systemName: 'VTS_RT',
    linkInfo: 'VTS',
    storagePlace: 'signal.t_dynamic_all_reply',
    linkMethod: 'KAFKA',
    collectionCycle: '00:00:00',
    collectionCount: '0',
    isNormal: false,
    lastMessageTime: '2026-03-15 15:38:56',
  },
  {
    institutionCode: 'GI',
    systemName: 'VTS_AIS',
    linkInfo: 'VTS',
    storagePlace: 'signal.t_dynamic_all_reply',
    linkMethod: 'KAFKA',
    collectionCycle: '00:00:00',
    collectionCount: '120 / 136',
    isNormal: true,
    lastMessageTime: '2026-03-25 10:29:09',
  },
  {
    institutionCode: 'GI',
    systemName: 'VTS_RT',
    linkInfo: 'VTS',
    storagePlace: 'signal.t_dynamic_all_reply',
    linkMethod: 'KAFKA',
    collectionCycle: '00:00:00',
    collectionCount: '55 / 467',
    isNormal: true,
    lastMessageTime: '2026-03-25 10:29:09',
  },
  {
    institutionCode: 'GIC',
    systemName: 'VTS_AIS',
    linkInfo: 'VTS',
    storagePlace: 'signal.t_dynamic_all_reply',
    linkMethod: 'KAFKA',
    collectionCycle: '00:00:00',
    collectionCount: '180 / 216',
    isNormal: true,
    lastMessageTime: '2026-03-25 10:29:09',
  },
  {
    institutionCode: 'GIC',
    systemName: 'VTS_RT',
    linkInfo: 'VTS',
    storagePlace: 'signal.t_dynamic_all_reply',
    linkMethod: 'KAFKA',
    collectionCycle: '수신대기중',
    collectionCount: '0',
    isNormal: false,
    lastMessageTime: '',
  },
  {
    institutionCode: 'GS',
    systemName: 'VTS_AIS',
    linkInfo: 'VTS',
    storagePlace: 'signal.t_dynamic_all_reply',
    linkMethod: 'KAFKA',
    collectionCycle: '수신대기중',
    collectionCount: '0',
    isNormal: false,
    lastMessageTime: '',
  },
  {
    institutionCode: 'GS',
    systemName: 'VTS_RT',
    linkInfo: 'VTS',
    storagePlace: 'signal.t_dynamic_all_reply',
    linkMethod: 'KAFKA',
    collectionCycle: '수신대기중',
    collectionCount: '0',
    isNormal: false,
    lastMessageTime: '',
  },
  {
    institutionCode: 'IC',
    systemName: 'VTS_AIS',
    linkInfo: 'VTS',
    storagePlace: 'signal.t_dynamic_all_reply',
    linkMethod: 'KAFKA',
    collectionCycle: '00:00:00',
    collectionCount: '149 / 176',
    isNormal: true,
    lastMessageTime: '2026-03-25 10:29:09',
  },
  {
    institutionCode: 'IC',
    systemName: 'VTS_RT',
    linkInfo: 'VTS',
    storagePlace: 'signal.t_dynamic_all_reply',
    linkMethod: 'KAFKA',
    collectionCycle: '00:00:00',
    collectionCount: '55 / 503',
    isNormal: true,
    lastMessageTime: '2026-03-25 10:29:09',
  },
  {
    institutionCode: 'JDC',
    systemName: 'VTS_AIS',
    linkInfo: 'VTS',
    storagePlace: 'signal.t_dynamic_all_reply',
    linkMethod: 'KAFKA',
    collectionCycle: '00:00:00',
    collectionCount: '433 / 524',
    isNormal: true,
    lastMessageTime: '2026-03-25 10:29:09',
  },
  {
    institutionCode: 'JDC',
    systemName: 'VTS_RT',
    linkInfo: 'VTS',
    storagePlace: 'signal.t_dynamic_all_reply',
    linkMethod: 'KAFKA',
    collectionCycle: '00:00:00',
    collectionCount: '256 / 1619',
    isNormal: true,
    lastMessageTime: '2026-03-25 10:29:09',
  },
  {
    institutionCode: 'JJ',
    systemName: 'VTS_AIS',
    linkInfo: 'VTS',
    storagePlace: 'signal.t_dynamic_all_reply',
    linkMethod: 'KAFKA',
    collectionCycle: '00:00:00',
    collectionCount: '429 / 508',
    isNormal: true,
    lastMessageTime: '2026-03-25 10:29:09',
  },
  {
    institutionCode: 'JJ',
    systemName: 'VTS_RT',
    linkInfo: 'VTS',
    storagePlace: 'signal.t_dynamic_all_reply',
    linkMethod: 'KAFKA',
    collectionCycle: '00:00:00',
    collectionCount: '160 / 1592',
    isNormal: true,
    lastMessageTime: '2026-03-25 10:29:09',
  },
  {
    institutionCode: 'MP',
    systemName: 'VTS_AIS',
    linkInfo: 'VTS',
    storagePlace: 'signal.t_dynamic_all_reply',
    linkMethod: 'KAFKA',
    collectionCycle: '수신대기중',
    collectionCount: '0',
    isNormal: false,
    lastMessageTime: '',
  },
  {
    institutionCode: 'MP',
    systemName: 'VTS_RT',
    linkInfo: 'VTS',
    storagePlace: 'signal.t_dynamic_all_reply',
    linkMethod: 'KAFKA',
    collectionCycle: '수신대기중',
    collectionCount: '0',
    isNormal: false,
    lastMessageTime: '',
  },
];

/** Mock fetch — TODO: 실제 API 연동 시 fetch 호출로 교체 */
function fetchVesselMonitorData(): Promise<VesselMonitorRow[]> {
  return new Promise((resolve) => {
    setTimeout(() => {
      const rows: VesselMonitorRow[] = MOCK_DATA.map((d) => ({
        ...d,
        institution: INSTITUTION_NAMES[d.institutionCode] ?? d.institutionCode,
      }));
      resolve(rows);
    }, 400);
  });
}

/* ── 상태 뱃지 ── */
function StatusBadge({
  loading,
  onCount,
  total,
}: {
  loading: boolean;
  onCount: number;
  total: number;
}) {
  if (loading) {
    return (
      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-bg-elevated text-t2">
        <span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse" />
        조회 중...
      </span>
    );
  }
  const offCount = total - onCount;
  if (offCount === total) {
    return (
      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-red-500/10 text-red-400">
        <span className="w-1.5 h-1.5 rounded-full bg-red-400" />
        전체 OFF
      </span>
    );
  }
  if (offCount > 0) {
    return (
      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-yellow-500/10 text-yellow-400">
        <span className="w-1.5 h-1.5 rounded-full bg-yellow-400" />
        일부 OFF ({offCount}/{total})
      </span>
    );
  }
  return (
    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-emerald-500/10 text-emerald-400">
      <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
      전체 정상
    </span>
  );
}

/* ── 연결상태 셀 ── */
function ConnectionBadge({
  isNormal,
  lastMessageTime,
}: {
  isNormal: boolean;
  lastMessageTime: string;
}) {
  if (isNormal) {
    return (
      <div className="flex flex-col items-start gap-0.5">
        <span className="inline-flex items-center px-2 py-0.5 rounded text-label-2 font-semibold bg-blue-600 text-white">
          ON
        </span>
        {lastMessageTime && <span className="text-caption text-t3">{lastMessageTime}</span>}
      </div>
    );
  }
  return (
    <div className="flex flex-col items-start gap-0.5">
      <span className="inline-flex items-center px-2 py-0.5 rounded text-label-2 font-semibold bg-orange-500 text-white">
        OFF
      </span>
      {lastMessageTime && <span className="text-caption text-t3">{lastMessageTime}</span>}
    </div>
  );
}

/* ── 테이블 ── */
const HEADERS = [
  '번호',
  '원천기관',
  '기관코드',
  '정보시스템명',
  '연계정보',
  '저장장소',
  '연계방식',
  '수집주기',
  '선박건수/신호건수',
  '연결상태',
];

function VesselTable({ rows, loading }: { rows: VesselMonitorRow[]; loading: boolean }) {
  return (
    <div className="overflow-auto">
      <table className="w-full text-caption border-collapse">
        <thead>
          <tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
            {HEADERS.map((h) => (
              <th
                key={h}
                className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap"
              >
                {h}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {loading && rows.length === 0
            ? Array.from({ length: 8 }).map((_, i) => (
                <tr key={i} className="border-b border-stroke-1 animate-pulse">
                  {HEADERS.map((_, j) => (
                    <td key={j} className="px-3 py-2">
                      <div className="h-3 bg-bg-elevated rounded w-14" />
                    </td>
                  ))}
                </tr>
              ))
            : rows.map((row, idx) => (
                <tr
                  key={`${row.institutionCode}-${row.systemName}`}
                  className="border-b border-stroke-1 hover:bg-bg-surface/50"
                >
                  <td className="px-3 py-2 text-t2 text-center">{idx + 1}</td>
                  <td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">
                    {row.institution}
                  </td>
                  <td className="px-3 py-2 text-t2">{row.institutionCode}</td>
                  <td className="px-3 py-2 text-t2">{row.systemName}</td>
                  <td className="px-3 py-2 text-t2">{row.linkInfo}</td>
                  <td className="px-3 py-2 text-t2 whitespace-nowrap">{row.storagePlace}</td>
                  <td className="px-3 py-2 text-t2">{row.linkMethod}</td>
                  <td className="px-3 py-2 text-t2">{row.collectionCycle}</td>
                  <td className="px-3 py-2 text-t2 text-center">{row.collectionCount}</td>
                  <td className="px-3 py-2">
                    <ConnectionBadge
                      isNormal={row.isNormal}
                      lastMessageTime={row.lastMessageTime}
                    />
                  </td>
                </tr>
              ))}
        </tbody>
      </table>
    </div>
  );
}

/* ── 메인 패널 ── */
export default function MonitorVesselPanel() {
  const [rows, setRows] = useState<VesselMonitorRow[]>([]);
  const [loading, setLoading] = useState(false);
  const [lastUpdate, setLastUpdate] = useState<Date | null>(null);

  const fetchData = useCallback(async () => {
    setLoading(true);
    const data = await fetchVesselMonitorData();
    setRows(data);
    setLoading(false);
    setLastUpdate(new Date());
  }, []);

  useEffect(() => {
    let isMounted = true;
    if (rows.length === 0) {
      void Promise.resolve().then(() => {
        if (isMounted) void fetchData();
      });
    }
    return () => {
      isMounted = false;
    };
  }, [rows.length, fetchData]);

  const onCount = rows.filter((r) => r.isNormal).length;

  return (
    <div className="flex flex-col h-full overflow-hidden">
      {/* 헤더 */}
      <div className="flex items-center justify-between px-5 py-3 border-b border-stroke-1 shrink-0">
        <h2 className="text-body-2 font-semibold text-t1">선박위치정보 모니터링</h2>
        <div className="flex items-center gap-3">
          {lastUpdate && (
            <span className="text-caption text-t3">
              갱신:{' '}
              {lastUpdate.toLocaleTimeString('ko-KR', {
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
              })}
            </span>
          )}
          <button
            onClick={fetchData}
            disabled={loading}
            className="flex items-center gap-1.5 px-3 py-1.5 text-caption rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
          >
            <svg
              className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`}
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
              />
            </svg>
            새로고침
          </button>
        </div>
      </div>

      {/* 상태 표시줄 */}
      <div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-stroke-1 bg-bg-base">
        <StatusBadge loading={loading} onCount={onCount} total={rows.length} />
        <span className="text-caption text-t3">
          연계 채널 {rows.length}개 (ON: {onCount} / OFF: {rows.length - onCount})
        </span>
      </div>

      {/* 테이블 */}
      <div className="flex-1 overflow-auto p-5">
        <VesselTable rows={rows} loading={loading} />
      </div>
    </div>
  );
}
