import type { SubcableDetail } from '../../entities/subcable/model/types';

interface Props {
  detail: SubcableDetail;
  color?: string;
  onClose: () => void;
}

export function SubcableInfoPanel({ detail, color, onClose }: Props) {
  const landingCount = detail.landing_points.length;
  const countries = [...new Set(detail.landing_points.map((lp) => lp.country).filter(Boolean))];

  return (
    <div className="map-info" style={{ width: 320 }}>
      <button className="close-btn" onClick={onClose} aria-label="close">
        ✕
      </button>

      {/* ── Header ── */}
      <div style={{ marginBottom: 10, paddingRight: 20 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          {color && (
            <div
              style={{
                width: 14,
                height: 14,
                borderRadius: 3,
                backgroundColor: color,
                flexShrink: 0,
                border: '1px solid rgba(255,255,255,0.15)',
              }}
            />
          )}
          <div style={{ fontSize: 15, fontWeight: 800, color: 'var(--accent)', lineHeight: 1.3 }}>
            {detail.name}
          </div>
        </div>
        {detail.is_planned && (
          <span
            style={{
              display: 'inline-block',
              marginTop: 4,
              fontSize: 9,
              fontWeight: 700,
              color: '#F59E0B',
              background: 'rgba(245,158,11,0.12)',
              padding: '1px 6px',
              borderRadius: 3,
              letterSpacing: 0.5,
              textTransform: 'uppercase',
            }}
          >
            Planned
          </span>
        )}
      </div>

      {/* ── Info rows ── */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
        <InfoRow label="길이" value={detail.length} />
        <InfoRow label="개통" value={detail.rfs} />
        {detail.owners && <InfoRow label="운영사" value={detail.owners} wrap />}
        {detail.suppliers && <InfoRow label="공급사" value={detail.suppliers} wrap />}
      </div>

      {/* ── Landing Points ── */}
      {landingCount > 0 && (
        <div style={{ marginTop: 10 }}>
          <div
            style={{
              fontSize: 10,
              fontWeight: 700,
              color: 'var(--muted)',
              marginBottom: 6,
              display: 'flex',
              justifyContent: 'space-between',
            }}
          >
            <span>Landing Points</span>
            <span style={{ fontWeight: 400 }}>
              {landingCount}곳 · {countries.length}개국
            </span>
          </div>
          <div
            style={{
              maxHeight: 160,
              overflowY: 'auto',
              display: 'flex',
              flexDirection: 'column',
              gap: 2,
            }}
          >
            {detail.landing_points.map((lp) => (
              <div
                key={lp.id}
                style={{
                  display: 'flex',
                  alignItems: 'baseline',
                  gap: 6,
                  fontSize: 10,
                  lineHeight: 1.5,
                  padding: '1px 0',
                }}
              >
                <span
                  style={{
                    color: 'var(--muted)',
                    fontSize: 9,
                    flexShrink: 0,
                    minWidth: 28,
                  }}
                >
                  {lp.country}
                </span>
                <span style={{ fontWeight: 600, color: 'var(--text)' }}>{lp.name}</span>
                {lp.is_tbd && (
                  <span style={{ color: '#F59E0B', fontSize: 8, fontWeight: 700, flexShrink: 0 }}>
                    TBD
                  </span>
                )}
              </div>
            ))}
          </div>
        </div>
      )}

      {/* ── Notes ── */}
      {detail.notes && (
        <div
          style={{
            marginTop: 10,
            fontSize: 10,
            color: 'var(--muted)',
            fontStyle: 'italic',
            lineHeight: 1.5,
          }}
        >
          {detail.notes}
        </div>
      )}

      {/* ── Link ── */}
      {detail.url && (
        <div style={{ marginTop: 10 }}>
          <a
            href={detail.url}
            target="_blank"
            rel="noopener noreferrer"
            style={{ fontSize: 10, color: 'var(--accent)', textDecoration: 'none' }}
          >
            상세정보 ↗
          </a>
        </div>
      )}
    </div>
  );
}

function InfoRow({ label, value, wrap }: { label: string; value: string | null; wrap?: boolean }) {
  return (
    <div className="ir" style={wrap ? { alignItems: 'flex-start' } : undefined}>
      <span className="il">{label}</span>
      <span
        className="iv"
        style={wrap ? { textAlign: 'right', wordBreak: 'break-word', maxWidth: '65%' } : undefined}
      >
        {value || '-'}
      </span>
    </div>
  );
}
