import type { VesselPosition } from '@/types/vessel';
import { getShipKindLabel } from '@components/common/map/VesselLayer';
import { formatDateTime } from '../IncidentsView';

export function VesselPopupPanel({
  vessel: v,
  onClose,
  onDetail,
}: {
  vessel: VesselPosition;
  onClose: () => void;
  onDetail: () => void;
}) {
  const statusText = v.status ?? '-';
  const isAccident = (v.status ?? '').includes('사고');
  const statusColor = isAccident ? 'var(--color-danger)' : 'var(--color-success)';
  const statusBg = isAccident
    ? 'color-mix(in srgb, var(--color-danger) 15%, transparent)'
    : 'color-mix(in srgb, var(--color-success) 10%, transparent)';
  const speed = v.sog !== undefined ? `${v.sog.toFixed(1)} kn` : '-';
  const heading = v.heading ?? v.cog;
  const headingText = heading !== undefined ? `${Math.round(heading)}°` : '-';
  const receivedAt = v.lastUpdate ? formatDateTime(v.lastUpdate) : '-';

  return (
    <div
      style={{
        position: 'absolute',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%,-50%)',
        zIndex: 9995,
        width: 300,
        background: 'rgba(13,17,23,0.97)',
        border: '1px solid rgba(48,54,61,0.8)',
        borderRadius: 12,
        boxShadow: '0 16px 48px rgba(0,0,0,0.7)',
        overflow: 'hidden',
      }}
    >
      {/* Header */}
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: 8,
          padding: '10px 14px',
          background: 'rgba(22,27,34,0.97)',
          borderBottom: '1px solid rgba(48,54,61,0.8)',
        }}
      >
        <div
          className="flex items-center justify-center text-title-2"
          style={{ width: 28, height: 20 }}
        >
          {v.nationalCode ?? '🚢'}
        </div>
        <div className="flex-1 min-w-0">
          <div
            className="text-label-1 font-[800] whitespace-nowrap overflow-hidden text-ellipsis"
            style={{ color: '#e6edf3' }}
          >
            {v.shipNm ?? '(이름 없음)'}
          </div>
          <div className="text-caption font-mono" style={{ color: '#8b949e' }}>
            MMSI: {v.mmsi}
          </div>
        </div>
        <span
          onClick={onClose}
          className="text-title-3 cursor-pointer p-[2px]"
          style={{ color: '#8b949e' }}
        >
          ✕
        </span>
      </div>

      {/* Ship Image */}
      <div
        className="w-full flex items-center justify-center text-[40px]"
        style={{
          height: 120,
          background: 'rgba(22,27,34,0.97)',
          borderBottom: '1px solid rgba(48,54,61,0.6)',
          color: '#484f58',
        }}
      >
        🚢
      </div>

      {/* Tags */}
      <div
        className="flex gap-2"
        style={{ padding: '6px 14px', borderBottom: '1px solid rgba(48,54,61,0.6)' }}
      >
        <span
          className="text-caption font-bold rounded text-color-info"
          style={{
            padding: '2px 8px',
            background: 'color-mix(in srgb, var(--color-info) 12%, transparent)',
            border: '1px solid color-mix(in srgb, var(--color-info) 25%, transparent)',
          }}
        >
          {getShipKindLabel(v.shipKindCode) ?? v.shipTy ?? '-'}
        </span>
        <span
          className="text-caption font-bold rounded"
          style={{
            padding: '2px 8px',
            background: statusBg,
            border: `1px solid color-mix(in srgb, ${statusColor} 40%, transparent)`,
            color: statusColor,
          }}
        >
          {statusText}
        </span>
      </div>

      {/* Data rows */}
      <div style={{ padding: '4px 0' }}>
        <PopupRow label="속도/항로" value={`${speed} / ${headingText}`} accent />
        <PopupRow label="흘수" value={v.draught !== undefined ? `${v.draught.toFixed(2)} m` : '-'} />
        <div
          className="flex flex-col gap-1"
          style={{
            padding: '6px 14px',
            borderBottom: '1px solid rgba(48,54,61,0.4)',
          }}
        >
          <div className="flex justify-between">
            <span className="text-caption" style={{ color: '#8b949e' }}>
              출항지
            </span>
            <span className="text-caption font-semibold font-mono" style={{ color: '#c9d1d9' }}>
              -
            </span>
          </div>
          <div className="flex justify-between">
            <span className="text-caption" style={{ color: '#8b949e' }}>
              입항지
            </span>
            <span className="text-caption font-semibold font-mono" style={{ color: '#c9d1d9' }}>
              {v.destination ?? '-'}
            </span>
          </div>
        </div>
        <PopupRow label="데이터 수신" value={receivedAt} muted />
      </div>

      {/* Buttons */}
      <div className="flex gap-1.5" style={{ padding: '10px 14px' }}>
        <button
          onClick={onDetail}
          className="flex-1 text-caption font-bold cursor-pointer text-center rounded-sm"
          style={{
            padding: 6,
            color: '#58a6ff',
            background: 'rgba(88,166,255,0.12)',
            border: '1px solid rgba(88,166,255,0.3)',
          }}
        >
          📋 상세정보
        </button>
        <button
          className="flex-1 text-caption font-bold cursor-pointer text-center rounded-sm"
          style={{
            padding: 6,
            color: '#a5d6ff',
            background: 'rgba(165,214,255,0.1)',
            border: '1px solid rgba(165,214,255,0.25)',
          }}
        >
          🔍 항적조회
        </button>
        <button
          className="flex-1 text-caption font-bold cursor-pointer text-center rounded-sm"
          style={{
            padding: 6,
            color: '#22d3ee',
            background: 'rgba(34,211,238,0.1)',
            border: '1px solid rgba(34,211,238,0.25)',
          }}
        >
          📐 항로예측
        </button>
      </div>
    </div>
  );
}

function PopupRow({
  label,
  value,
  accent,
  muted,
}: {
  label: string;
  value: string;
  accent?: boolean;
  muted?: boolean;
}) {
  return (
    <div
      className="flex justify-between text-caption"
      style={{
        padding: '6px 14px',
        borderBottom: '1px solid rgba(48,54,61,0.4)',
      }}
    >
      <span style={{ color: '#8b949e' }}>{label}</span>
      <span
        className="font-semibold font-mono"
        style={{
          color: muted ? '#8b949e' : accent ? '#22d3ee' : '#c9d1d9',
          fontSize: muted ? 9 : 10,
        }}
      >
        {value}
      </span>
    </div>
  );
}
