import React from 'react';
import type { HNSSearchSubstance } from '@interfaces/hns/HnsInterface';
import { InfoBoxRow } from './InfoBoxRow';

export function HmsDetailPanel({
  substance: s,
  activeTab,
  onTabChange,
}: {
  substance: HNSSearchSubstance;
  activeTab: number;
  onTabChange: (t: number) => void;
}) {
  const tabLabels = [
    '📊 물질특성·위험정보',
    '🛡 방제거리·PPE·MSDS',
    '⚓ IBC CODE·EmS 대응',
    '🔗 화물적부도·항구별 코드',
  ];
  const nfpa = s.nfpa;

  return (
    <div
      className="rounded-[10px] overflow-hidden bg-bg-card"
      style={{
        border: '1px solid rgba(6,182,212,.25)',
        boxShadow: '0 4px 20px rgba(6,182,212,.08)',
      }}
    >
      {/* Tab Navigation */}
      <div className="flex border-b border-stroke" style={{ background: 'rgba(6,182,212,.05)' }}>
        {tabLabels.map((label, i) => (
          <button
            key={i}
            onClick={() => onTabChange(i)}
            className="flex-1 py-2.5 px-1 text-caption cursor-pointer"
            style={{
              fontWeight: activeTab === i ? 700 : 600,
              border: 'none',
              borderBottom: `2px solid ${activeTab === i ? 'var(--color-accent)' : 'transparent'}`,
              background: activeTab === i ? 'rgba(6,182,212,.06)' : 'transparent',
              color: activeTab === i ? 'var(--color-accent)' : 'var(--fg-disabled)',
            }}
          >
            {label}
          </button>
        ))}
      </div>

      {/* TAB 0: 물질특성·위험정보 */}
      {activeTab === 0 && (
        <div className="p-4">
          {/* Header */}
          <div className="flex items-center gap-[14px] mb-4 pb-[14px] border-b border-stroke">
            <div
              className="flex items-center justify-center text-[22px] shrink-0"
              style={{
                width: 52,
                height: 52,
                borderRadius: 10,
                background: 'rgba(6,182,212,.12)',
                border: '1px solid rgba(6,182,212,.25)',
              }}
            >
              🧪
            </div>
            <div className="flex-1">
              <div className="text-title-2 font-extrabold">
                {s.nameKr}{' '}
                <span className="text-label-1 font-normal text-fg-disabled">({s.nameEn})</span>
              </div>
              <div className="flex flex-wrap gap-1.5 mt-1.5">
                <span
                  className="text-caption font-semibold font-mono text-color-accent rounded py-[2px] px-2"
                  style={{
                    background: 'rgba(6,182,212,.1)',
                    border: '1px solid rgba(6,182,212,.2)',
                  }}
                >
                  CAS: {s.casNumber}
                </span>
                <span
                  className="text-caption font-semibold font-mono text-color-accent rounded py-[2px] px-2"
                  style={{
                    background: 'rgba(6,182,212,.1)',
                    border: '1px solid rgba(6,182,212,.2)',
                  }}
                >
                  UN: {s.unNumber}
                </span>
                <span
                  className="text-caption font-semibold text-color-accent rounded py-[2px] px-2"
                  style={{
                    background: 'rgba(6,182,212,.1)',
                    border: '1px solid rgba(6,182,212,.2)',
                  }}
                >
                  운송방법: {s.transportMethod}
                </span>
                <span
                  className="text-caption font-semibold text-color-accent rounded py-[2px] px-2"
                  style={{
                    background: 'rgba(6,182,212,.1)',
                    border: '1px solid rgba(6,182,212,.2)',
                  }}
                >
                  SEBC: {s.sebc}
                </span>
              </div>
              <div className="text-caption text-fg-disabled mt-1">
                <b>유사명:</b> {s.synonymsKr} &nbsp;|&nbsp; <b>특성:</b> {s.hazardClass}
              </div>
            </div>
          </div>

          <div className="grid grid-cols-2 gap-[14px]">
            {/* Left: 물리·화학적 특성 */}
            <div>
              <div className="text-label-2 font-bold text-color-accent mb-2">
                ⚗️ 물리·화학적 특성
              </div>
              <div className="grid grid-cols-2 gap-1 text-caption">
                {(
                  [
                    ['용도', s.usage, 'var(--color-accent)'],
                    ['상태', s.state, 'var(--color-accent)'],
                    ['색상', s.color, 'var(--color-accent)'],
                    ['냄새', s.odor, 'var(--color-accent)'],
                    ['인화점', s.flashPoint, 'var(--color-accent)'],
                    ['발화점', s.autoIgnition, 'var(--color-accent)'],
                    ['끓는점', s.boilingPoint, 'var(--color-accent)'],
                    ['비중 (물=1)', s.density, 'var(--color-accent)'],
                    ['용해도', s.solubility, 'var(--color-accent)'],
                    ['증기압', s.vaporPressure, 'var(--color-accent)'],
                    ['증기밀도 (공기=1)', s.vaporDensity, 'var(--color-caution)'],
                    ['폭발범위', s.explosionRange, 'var(--color-caution)'],
                  ] as [string, string, string][]
                ).map(([label, value]) => (
                  <div
                    key={label}
                    style={{
                      padding: '6px 8px',
                      background: 'var(--bg-base)',
                      borderRadius: 4,
                    }}
                  >
                    <span className="text-fg-disabled">{label}</span>
                    <br />
                    <b
                      style={{
                        color:
                          label.includes('인화') || label.includes('폭발')
                            ? 'var(--color-accent)'
                            : label.includes('용해')
                              ? 'var(--color-accent)'
                              : 'var(--fg-default)',
                      }}
                    >
                      {value}
                    </b>
                  </div>
                ))}
              </div>
            </div>

            {/* Right: NFPA + 위험등급 */}
            <div>
              <div className="text-label-2 font-bold text-color-accent mb-2">
                ⚠️ 위험등급·농도기준
              </div>
              <div className="flex gap-[14px] items-start mb-3">
                <div className="relative shrink-0" style={{ width: 80, height: 80 }}>
                  <svg viewBox="0 0 100 100" width={80} height={80}>
                    <polygon
                      points="50,5 95,50 50,95 5,50"
                      fill="none"
                      stroke="rgba(255,255,255,.15)"
                      strokeWidth={1.5}
                    />
                    <polygon
                      points="50,5 72,28 50,50 28,28"
                      fill="rgba(6,182,212,.2)"
                      stroke="rgba(6,182,212,.5)"
                      strokeWidth={1}
                    />
                    <text
                      x={50}
                      y={32}
                      textAnchor="middle"
                      fill="var(--color-accent)"
                      fontSize={16}
                      fontWeight={800}
                      fontFamily="var(--font-mono)"
                    >
                      {nfpa.health}
                    </text>
                    <polygon
                      points="72,28 95,50 72,72 50,50"
                      fill="rgba(6,182,212,.2)"
                      stroke="rgba(6,182,212,.5)"
                      strokeWidth={1}
                    />
                    <text
                      x={77}
                      y={55}
                      textAnchor="middle"
                      fill="var(--color-accent)"
                      fontSize={16}
                      fontWeight={800}
                      fontFamily="var(--font-mono)"
                    >
                      {nfpa.fire}
                    </text>
                    <polygon
                      points="50,50 72,72 50,95 28,72"
                      fill="rgba(255,255,255,.08)"
                      stroke="rgba(255,255,255,.2)"
                      strokeWidth={1}
                    />
                    <text
                      x={50}
                      y={78}
                      textAnchor="middle"
                      fill="var(--fg-sub)"
                      fontSize={12}
                      fontWeight={700}
                      fontFamily="var(--font-korean)"
                    >
                      {nfpa.special}
                    </text>
                    <polygon
                      points="5,50 28,28 50,50 28,72"
                      fill="rgba(6,182,212,.2)"
                      stroke="rgba(6,182,212,.5)"
                      strokeWidth={1}
                    />
                    <text
                      x={23}
                      y={55}
                      textAnchor="middle"
                      fill="var(--color-accent)"
                      fontSize={16}
                      fontWeight={800}
                      fontFamily="var(--font-mono)"
                    >
                      {nfpa.reactivity}
                    </text>
                  </svg>
                  <div className="text-center text-caption font-semibold text-fg-disabled mt-0.5">
                    NFPA 704
                  </div>
                </div>
                <div className="flex-1 flex flex-col gap-1 text-caption">
                  <div
                    style={{
                      padding: '4px 8px',
                      background: 'rgba(6,182,212,.06)',
                      border: '1px solid rgba(6,182,212,.12)',
                      borderRadius: 4,
                    }}
                  >
                    <span style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
                      건강(적) {nfpa.health}
                    </span>{' '}
                    —{' '}
                    {nfpa.health >= 4
                      ? '치명적'
                      : nfpa.health >= 3
                        ? '중상'
                        : nfpa.health >= 2
                          ? '장해'
                          : nfpa.health >= 1
                            ? '경미한 손상'
                            : '무해'}
                  </div>
                  <div
                    style={{
                      padding: '4px 8px',
                      background: 'rgba(6,182,212,.06)',
                      border: '1px solid rgba(6,182,212,.12)',
                      borderRadius: 4,
                    }}
                  >
                    <span style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
                      인화성(황) {nfpa.fire}
                    </span>{' '}
                    —{' '}
                    {nfpa.fire >= 4
                      ? '93°F 미만'
                      : nfpa.fire >= 3
                        ? '100°F 미만'
                        : nfpa.fire >= 2
                          ? '200°F 미만'
                          : nfpa.fire >= 1
                            ? '200°F 이상'
                            : '비가연'}
                  </div>
                  <div
                    style={{
                      padding: '4px 8px',
                      background: 'rgba(6,182,212,.06)',
                      border: '1px solid rgba(6,182,212,.12)',
                      borderRadius: 4,
                    }}
                  >
                    <span style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
                      반응성(청) {nfpa.reactivity}
                    </span>{' '}
                    —{' '}
                    {nfpa.reactivity >= 3
                      ? '폭발 가능'
                      : nfpa.reactivity >= 2
                        ? '격렬 반응'
                        : nfpa.reactivity >= 1
                          ? '불안정 가능'
                          : '안정'}
                  </div>
                </div>
              </div>
              <div className="flex flex-col gap-1 text-caption">
                <InfoBoxRow
                  label="위험 분류"
                  value={s.hazardClass}
                  bg="rgba(6,182,212,.06)"
                  border="rgba(6,182,212,.12)"
                  labelColor="var(--color-accent)"
                  valueColor="var(--color-accent)"
                />
                <InfoBoxRow
                  label="ERG 번호"
                  value={s.ergNumber}
                  bg="rgba(6,182,212,.06)"
                  border="rgba(6,182,212,.12)"
                  labelColor="var(--color-accent)"
                  valueColor="var(--color-accent)"
                />
                <InfoBoxRow
                  label="IDLH"
                  value={s.idlh}
                  bg="rgba(6,182,212,.06)"
                  border="rgba(6,182,212,.12)"
                  labelColor="var(--color-accent)"
                  valueColor="var(--color-accent)"
                />
                <InfoBoxRow
                  label="AEGL-2 (60분)"
                  value={s.aegl2}
                  bg="rgba(6,182,212,.06)"
                  border="rgba(6,182,212,.12)"
                  labelColor="var(--color-accent)"
                  valueColor="var(--color-accent)"
                />
                <InfoBoxRow
                  label="ERPG-2"
                  value={s.erpg2}
                  bg="rgba(6,182,212,.06)"
                  border="rgba(6,182,212,.12)"
                  labelColor="var(--color-accent)"
                  valueColor="var(--color-accent)"
                />
              </div>
            </div>
          </div>
        </div>
      )}

      {/* TAB 1: 방제거리·PPE·MSDS */}
      {activeTab === 1 && (
        <div className="p-4">
          <div className="grid grid-cols-2 gap-[14px]">
            {/* 방제거리 */}
            <div
              className="rounded-md overflow-hidden"
              style={{ border: '1px solid rgba(6,182,212,.2)' }}
            >
              <div
                style={{
                  padding: '10px 12px',
                  background: 'rgba(6,182,212,.06)',
                  borderBottom: '1px solid rgba(6,182,212,.12)',
                }}
              >
                <div className="text-label-1 font-bold text-color-accent">
                  🚧 방제거리 (ERG {s.ergNumber})
                </div>
              </div>
              <div className="p-3 flex flex-col gap-2">
                <div
                  className="rounded-sm"
                  style={{
                    padding: 10,
                    background: 'rgba(6,182,212,.04)',
                    border: '1px solid rgba(6,182,212,.12)',
                  }}
                >
                  <div className="text-label-2 font-bold text-color-accent mb-1">🔥 화재 시</div>
                  <div className="text-caption text-fg-sub leading-[1.6]">
                    격리거리: <b className="text-color-accent">{s.responseDistanceFire}</b> 이상
                  </div>
                </div>
                <div
                  className="rounded-sm"
                  style={{
                    padding: 10,
                    background: 'rgba(6,182,212,.04)',
                    border: '1px solid rgba(6,182,212,.12)',
                  }}
                >
                  <div className="text-label-2 font-bold text-color-accent mb-1">
                    💨 유출 시 (비화재)
                  </div>
                  <div className="text-caption text-fg-sub leading-[1.6]">
                    주간 방호활동거리:{' '}
                    <b className="text-color-accent">{s.responseDistanceSpillDay}</b>
                    <br />
                    야간 방호활동거리:{' '}
                    <b className="text-color-accent">{s.responseDistanceSpillNight}</b>
                  </div>
                </div>
                <div
                  className="rounded-sm"
                  style={{
                    padding: 10,
                    background: 'rgba(6,182,212,.04)',
                    border: '1px solid rgba(6,182,212,.12)',
                  }}
                >
                  <div className="text-label-2 font-bold text-color-accent mb-1">
                    🌊 해상 유출 시
                  </div>
                  <div className="text-caption text-fg-sub leading-[1.6]">{s.marineResponse}</div>
                </div>
              </div>
            </div>

            <div>
              {/* PPE */}
              <div
                className="rounded-md overflow-hidden mb-3"
                style={{ border: '1px solid rgba(6,182,212,.2)' }}
              >
                <div
                  style={{
                    padding: '10px 12px',
                    background: 'rgba(6,182,212,.06)',
                    borderBottom: '1px solid rgba(6,182,212,.12)',
                  }}
                >
                  <div className="text-label-1 font-bold text-color-accent">
                    🛡 개인보호장구 (PPE) 추천
                  </div>
                </div>
                <div className="grid grid-cols-2 gap-1.5 text-caption p-3">
                  <div
                    className="text-center rounded"
                    style={{
                      padding: 8,
                      background: 'rgba(6,182,212,.04)',
                      border: '1px solid rgba(6,182,212,.1)',
                    }}
                  >
                    <div className="text-base mb-[3px]">🧑‍🚒</div>
                    <div className="font-bold text-color-accent">근거리</div>
                    <div className="text-caption text-fg-disabled mt-0.5">{s.ppeClose}</div>
                  </div>
                  <div
                    className="text-center rounded"
                    style={{
                      padding: 8,
                      background: 'rgba(6,182,212,.04)',
                      border: '1px solid rgba(6,182,212,.1)',
                    }}
                  >
                    <div className="text-base mb-[3px]">🦺</div>
                    <div className="font-bold text-color-accent">원거리</div>
                    <div className="text-caption text-fg-disabled mt-0.5">{s.ppeFar}</div>
                  </div>
                </div>
              </div>
              {/* MSDS */}
              <div
                className="rounded-md overflow-hidden"
                style={{ border: '1px solid rgba(6,182,212,.2)' }}
              >
                <div
                  className="flex items-center justify-between"
                  style={{
                    padding: '10px 12px',
                    background: 'rgba(6,182,212,.06)',
                    borderBottom: '1px solid rgba(6,182,212,.12)',
                  }}
                >
                  <div className="text-label-1 font-bold" style={{ color: 'var(--color-accent)' }}>
                    📄 MSDS 주요 정보
                  </div>
                  <button
                    className="text-caption font-semibold cursor-pointer rounded"
                    style={{
                      padding: '3px 10px',
                      background: 'rgba(6,182,212,.1)',
                      border: '1px solid rgba(6,182,212,.2)',
                      color: 'var(--color-accent)',
                    }}
                  >
                    📥 전문 다운로드
                  </button>
                </div>
                <div className="text-caption text-fg-sub leading-[1.7] p-2.5">
                  <b>§2 유해성·위험성:</b> {s.msds.hazard}
                  <br />
                  <b>§4 응급조치:</b> {s.msds.firstAid}
                  <br />
                  <b>§5 소화방법:</b> {s.msds.fireFighting}
                  <br />
                  <b>§6 누출대응:</b> {s.msds.spillResponse}
                  <br />
                  <b>§8 노출방지:</b> {s.msds.exposure}
                  <br />
                  <b>§15 법적규제:</b> {s.msds.regulation}
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* TAB 2: IBC CODE·EmS 대응 */}
      {activeTab === 2 && (
        <div className="p-4">
          <div className="grid grid-cols-2 gap-[14px]">
            {/* IBC CODE */}
            <div
              className="rounded-md overflow-hidden"
              style={{ border: '1px solid rgba(6,182,212,.2)' }}
            >
              <div
                style={{
                  padding: '10px 12px',
                  background: 'rgba(6,182,212,.06)',
                  borderBottom: '1px solid rgba(6,182,212,.12)',
                }}
              >
                <div className="text-label-1 font-bold text-color-accent">
                  ⚓ IBC CODE 기반 주요 내용
                </div>
              </div>
              <div className="p-3 flex flex-col gap-2 text-caption">
                <div style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: 4 }}>
                  {(
                    [
                      ['위험성', s.ibcHazard],
                      ['선박형식', s.ibcShipType],
                      ['탱크형식', s.ibcTankType],
                      ['탐지장비', s.ibcDetection],
                      ['소화설비', s.ibcFireFighting],
                      ['최소적재요건', s.ibcMinRequirement],
                    ] as [string, string][]
                  ).map(([label, value]) => (
                    <React.Fragment key={label}>
                      <div
                        className="rounded text-fg-disabled"
                        style={{ padding: '6px 8px', background: 'var(--bg-base)' }}
                      >
                        {label}
                      </div>
                      <div
                        className="rounded font-semibold"
                        style={{ padding: '6px 8px', background: 'var(--bg-base)' }}
                      >
                        {value}
                      </div>
                    </React.Fragment>
                  ))}
                </div>
                {/* Tank diagram SVG */}
                <div
                  className="rounded-sm text-center"
                  style={{ padding: 10, background: 'var(--bg-base)' }}
                >
                  <svg
                    viewBox="0 0 200 80"
                    width={200}
                    height={80}
                    style={{ display: 'inline-block' }}
                  >
                    <rect
                      x={10}
                      y={10}
                      width={180}
                      height={50}
                      rx={4}
                      fill="none"
                      stroke="rgba(6,182,212,.4)"
                      strokeWidth={1.5}
                    />
                    <line
                      x1={70}
                      y1={10}
                      x2={70}
                      y2={60}
                      stroke="rgba(6,182,212,.2)"
                      strokeWidth={1}
                      strokeDasharray="3"
                    />
                    <line
                      x1={130}
                      y1={10}
                      x2={130}
                      y2={60}
                      stroke="rgba(6,182,212,.2)"
                      strokeWidth={1}
                      strokeDasharray="3"
                    />
                    <text
                      x={40}
                      y={38}
                      textAnchor="middle"
                      fill="var(--color-accent)"
                      fontSize={7}
                      fontFamily="var(--font-korean)"
                    >
                      CARGO
                    </text>
                    <text
                      x={40}
                      y={48}
                      textAnchor="middle"
                      fill="var(--fg-disabled)"
                      fontSize={6}
                      fontFamily="var(--font-mono)"
                    >
                      Tank 1
                    </text>
                    <text
                      x={100}
                      y={38}
                      textAnchor="middle"
                      fill="var(--color-accent)"
                      fontSize={7}
                      fontFamily="var(--font-korean)"
                    >
                      CARGO
                    </text>
                    <text
                      x={100}
                      y={48}
                      textAnchor="middle"
                      fill="var(--fg-disabled)"
                      fontSize={6}
                      fontFamily="var(--font-mono)"
                    >
                      Tank 2
                    </text>
                    <text
                      x={160}
                      y={38}
                      textAnchor="middle"
                      fill="var(--color-accent)"
                      fontSize={7}
                      fontFamily="var(--font-korean)"
                    >
                      CARGO
                    </text>
                    <text
                      x={160}
                      y={48}
                      textAnchor="middle"
                      fill="var(--fg-disabled)"
                      fontSize={6}
                      fontFamily="var(--font-mono)"
                    >
                      Tank 3
                    </text>
                    <text
                      x={100}
                      y={75}
                      textAnchor="middle"
                      fill="var(--fg-disabled)"
                      fontSize={7}
                      fontFamily="var(--font-korean)"
                    >
                      {s.ibcShipType} — {s.ibcTankType}
                    </text>
                  </svg>
                </div>
              </div>
            </div>

            {/* EmS */}
            <div
              className="rounded-md overflow-hidden"
              style={{ border: '1px solid rgba(6,182,212,.2)' }}
            >
              <div
                style={{
                  padding: '10px 12px',
                  background: 'rgba(6,182,212,.06)',
                  borderBottom: '1px solid rgba(6,182,212,.12)',
                }}
              >
                <div className="text-label-1 font-bold text-color-accent">
                  🆘 비상대응핸드북 (EmS) — ERG {s.ergNumber}
                </div>
              </div>
              <div className="p-3 flex flex-col gap-2 text-caption">
                <div
                  className="rounded-sm"
                  style={{
                    padding: 8,
                    background: 'rgba(6,182,212,.04)',
                    border: '1px solid rgba(6,182,212,.1)',
                  }}
                >
                  <div className="font-bold text-color-accent mb-[3px]">🔥 화재 대응</div>
                  <div className="text-fg-sub leading-[1.6]">{s.emsFire}</div>
                </div>
                <div
                  className="rounded-sm"
                  style={{
                    padding: 8,
                    background: 'rgba(6,182,212,.04)',
                    border: '1px solid rgba(6,182,212,.1)',
                  }}
                >
                  <div className="font-bold text-color-accent mb-[3px]">💧 유출 대응</div>
                  <div className="text-fg-sub leading-[1.6]">{s.emsSpill}</div>
                </div>
                <div
                  className="rounded-sm"
                  style={{
                    padding: 8,
                    background: 'rgba(6,182,212,.04)',
                    border: '1px solid rgba(6,182,212,.1)',
                  }}
                >
                  <div className="font-bold text-color-accent mb-[3px]">🏥 응급조치</div>
                  <div className="text-fg-sub leading-[1.6]">{s.emsFirstAid}</div>
                </div>
                <div className="text-center">
                  <button
                    className="text-label-2 font-semibold cursor-pointer rounded-sm text-color-accent"
                    style={{
                      padding: '6px 16px',
                      background: 'rgba(6,182,212,.1)',
                      border: '1px solid rgba(6,182,212,.2)',
                    }}
                  >
                    📋 EmS 전문 보기
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* TAB 3: 화물적부도·항구별 코드 */}
      {activeTab === 3 && (
        <div className="p-4">
          <div className="grid grid-cols-2 gap-[14px]">
            {/* 화물적부도 */}
            <div
              className="rounded-lg overflow-hidden"
              style={{ border: '1px solid rgba(6,182,212,.2)' }}
            >
              <div
                style={{
                  padding: '10px 12px',
                  background: 'rgba(6,182,212,.06)',
                  borderBottom: '1px solid rgba(6,182,212,.12)',
                }}
              >
                <div className="text-label-1 font-bold text-color-accent">
                  📋 화물적부도 화물코드
                </div>
                <div className="text-caption text-fg-disabled">클릭 시 물질검색창으로 이동</div>
              </div>
              <div className="p-3">
                <table className="w-full border-collapse text-caption">
                  <thead>
                    <tr style={{ background: 'rgba(6,182,212,.05)' }}>
                      <th
                        className="text-color-accent text-left"
                        style={{
                          padding: '6px 8px',
                          borderBottom: '1px solid var(--stroke-light)',
                        }}
                      >
                        화물코드
                      </th>
                      <th
                        className="text-fg-sub text-left"
                        style={{
                          padding: '6px 8px',
                          borderBottom: '1px solid var(--stroke-light)',
                        }}
                      >
                        약자/제품명
                      </th>
                      <th
                        className="text-fg-sub text-left"
                        style={{
                          padding: '6px 8px',
                          borderBottom: '1px solid var(--stroke-light)',
                        }}
                      >
                        국적/회사
                      </th>
                      <th
                        className="text-fg-sub text-center"
                        style={{
                          padding: '6px 8px',
                          borderBottom: '1px solid var(--stroke-light)',
                        }}
                      >
                        출처
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    {s.cargoCodes.map((c, i) => {
                      const srcColor =
                        c.source === '적부도'
                          ? 'var(--color-accent)'
                          : c.source === '용선자'
                            ? 'var(--color-accent)'
                            : 'var(--color-accent)';
                      const srcBg =
                        c.source === '적부도'
                          ? 'rgba(6,182,212,.1)'
                          : c.source === '용선자'
                            ? 'rgba(6,182,212,.1)'
                            : 'rgba(6,182,212,.1)';
                      return (
                        <tr
                          key={i}
                          style={{
                            borderBottom:
                              i < s.cargoCodes.length - 1
                                ? '1px solid rgba(255,255,255,.04)'
                                : undefined,
                          }}
                        >
                          <td className="font-mono text-color-accent font-semibold cursor-pointer py-[5px] px-2">
                            {c.code}
                          </td>
                          <td className="py-[5px] px-2">{c.name}</td>
                          <td className="text-fg-disabled py-[5px] px-2">{c.company}</td>
                          <td className="text-center">
                            <span
                              style={{
                                padding: '1px 6px',
                                borderRadius: 3,
                                background: srcBg,
                                color: srcColor,
                                fontSize: 7,
                              }}
                            >
                              {c.source}
                            </span>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            </div>

            {/* 항구별 코드 */}
            <div
              className="rounded-lg overflow-hidden"
              style={{ border: '1px solid rgba(6,182,212,.2)' }}
            >
              <div
                style={{
                  padding: '10px 12px',
                  background: 'rgba(6,182,212,.06)',
                  borderBottom: '1px solid rgba(6,182,212,.12)',
                }}
              >
                <div className="text-label-1 font-bold text-color-accent">🏗 항구별 코드</div>
                <div className="text-caption text-fg-disabled">
                  Port-MIS 위험물반입신고현황 연동
                </div>
              </div>
              <div className="p-3">
                <table className="w-full border-collapse text-caption">
                  <thead>
                    <tr style={{ background: 'rgba(6,182,212,.05)' }}>
                      <th
                        className="text-color-accent text-left"
                        style={{
                          padding: '6px 8px',
                          borderBottom: '1px solid var(--stroke-light)',
                        }}
                      >
                        항구
                      </th>
                      <th
                        className="text-fg-sub text-left"
                        style={{
                          padding: '6px 8px',
                          borderBottom: '1px solid var(--stroke-light)',
                        }}
                      >
                        청코드
                      </th>
                      <th
                        className="text-fg-sub text-center"
                        style={{
                          padding: '6px 8px',
                          borderBottom: '1px solid var(--stroke-light)',
                        }}
                      >
                        최근 반입
                      </th>
                      <th
                        className="text-fg-sub text-center"
                        style={{
                          padding: '6px 8px',
                          borderBottom: '1px solid var(--stroke-light)',
                        }}
                      >
                        빈도
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    {s.portFrequency.map((p, i) => {
                      const freqColor =
                        p.frequency === '높음'
                          ? 'var(--color-accent)'
                          : p.frequency === '중간'
                            ? 'var(--color-accent)'
                            : 'var(--color-accent)';
                      const freqBg =
                        p.frequency === '높음'
                          ? 'rgba(6,182,212,.1)'
                          : p.frequency === '중간'
                            ? 'rgba(6,182,212,.1)'
                            : 'rgba(6,182,212,.1)';
                      return (
                        <tr
                          key={i}
                          style={{
                            borderBottom:
                              i < s.portFrequency.length - 1
                                ? '1px solid rgba(255,255,255,.04)'
                                : undefined,
                          }}
                        >
                          <td className="font-semibold py-[5px] px-2">{p.port}</td>
                          <td className="font-mono text-color-accent py-[5px] px-2">
                            {p.portCode}
                          </td>
                          <td className="text-center font-mono">{p.lastImport}</td>
                          <td className="text-center">
                            <span
                              style={{
                                padding: '1px 6px',
                                borderRadius: 3,
                                background: freqBg,
                                color: freqColor,
                                fontWeight: 600,
                                fontSize: 8,
                              }}
                            >
                              {p.frequency}
                            </span>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
                <div className="mt-2.5 text-center">
                  <button
                    className="text-color-accent text-label-2 font-semibold cursor-pointer rounded-sm"
                    style={{
                      padding: '6px 16px',
                      background: 'rgba(6,182,212,.1)',
                      border: '1px solid rgba(6,182,212,.2)',
                    }}
                  >
                    🔗 Port-MIS 화물적부도 조회
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
