import type { IncidentCompat } from '@interfaces/incidents/IncidentsInterface';
import { getStatusLabel } from '../IncidentsView';

export function IncidentPopupContent({
  incident: inc,
  onClose,
}: {
  incident: IncidentCompat;
  onClose: () => void;
}) {
  const dotColor: Record<string, string> = {
    active: 'var(--color-danger)',
    investigating: 'var(--color-warning)',
    closed: 'var(--fg-disabled)',
  };
  const stBg: Record<string, string> = {
    active: 'rgba(239,68,68,0.15)',
    investigating: 'rgba(249,115,22,0.15)',
    closed: 'rgba(100,116,139,0.15)',
  };
  const stColor: Record<string, string> = {
    active: 'var(--color-danger)',
    investigating: 'var(--color-warning)',
    closed: 'var(--fg-disabled)',
  };

  return (
    <div
      style={{
        width: 260,
        background: 'var(--bg-elevated)',
        border: '1px solid var(--stroke-default)',
        borderRadius: 10,
        boxShadow: '0 12px 40px rgba(0,0,0,0.5)',
        overflow: 'hidden',
      }}
    >
      {/* Header */}
      <div
        className="flex items-center gap-2 border-b border-stroke"
        style={{ padding: '10px 14px' }}
      >
        <span
          className="shrink-0"
          style={{
            width: 8,
            height: 8,
            borderRadius: '50%',
            background: dotColor[inc.status],
            boxShadow: inc.status !== 'closed' ? `0 0 6px ${dotColor[inc.status]}` : 'none',
          }}
        />
        <div className="flex-1 min-w-0 text-label-1 font-bold text-fg whitespace-nowrap overflow-hidden text-ellipsis">
          {inc.name}
        </div>
        <span
          onClick={onClose}
          className="cursor-pointer text-fg-disabled hover:text-fg flex items-center justify-center"
          style={{
            width: 22,
            height: 22,
            borderRadius: 'var(--radius-sm)',
            fontSize: 14,
            lineHeight: 1,
            transition: '0.15s',
          }}
        >
          ✕
        </span>
      </div>

      {/* Tags */}
      <div
        className="flex flex-wrap gap-1.5 border-b border-stroke"
        style={{ padding: '8px 14px' }}
      >
        <span
          className="text-caption font-semibold rounded-sm"
          style={{
            padding: '2px 8px',
            background: stBg[inc.status],
            border: `1px solid ${stColor[inc.status]}`,
            color: stColor[inc.status],
          }}
        >
          {getStatusLabel(inc.status)}
        </span>
        {inc.causeType && (
          <span
            className="text-caption font-medium text-fg-sub rounded-sm"
            style={{
              padding: '2px 8px',
              background: 'rgba(100,116,139,0.08)',
              border: '1px solid rgba(100,116,139,0.2)',
            }}
          >
            {inc.causeType}
          </span>
        )}
        {inc.oilType && (
          <span
            className="text-caption font-medium text-color-warning rounded-sm"
            style={{
              padding: '2px 8px',
              background: 'rgba(249,115,22,0.08)',
              border: '1px solid rgba(249,115,22,0.2)',
            }}
          >
            {inc.oilType}
          </span>
        )}
      </div>

      {/* Info rows */}
      <div style={{ padding: '4px 0' }}>
        <div
          className="flex justify-between text-caption"
          style={{ padding: '5px 14px', borderBottom: '1px solid rgba(48,54,61,0.4)' }}
        >
          <span className="text-fg-disabled">일시</span>
          <span className="text-fg-sub font-semibold font-mono">
            {inc.date} {inc.time}
          </span>
        </div>
        <div
          className="flex justify-between text-caption"
          style={{ padding: '5px 14px', borderBottom: '1px solid rgba(48,54,61,0.4)' }}
        >
          <span className="text-fg-disabled">관할</span>
          <span className="text-fg-sub font-semibold">{inc.office}</span>
        </div>
        <div className="flex justify-between text-caption" style={{ padding: '5px 14px' }}>
          <span className="text-fg-disabled">지역</span>
          <span className="text-fg-sub font-semibold">{inc.region}</span>
        </div>
      </div>

      {/* Prediction badge */}
      {inc.prediction && (
        <div className="border-t border-stroke" style={{ padding: '8px 14px' }}>
          <span
            className="text-caption font-semibold text-color-accent rounded-sm"
            style={{
              padding: '3px 10px',
              background: 'rgba(6,182,212,0.1)',
              border: '1px solid rgba(6,182,212,0.25)',
            }}
          >
            {inc.prediction}
          </span>
        </div>
      )}
    </div>
  );
}
