import { SUPPORT_LEVEL_LABELS, SUPPORT_LEVEL_COLORS } from '@/types/api';
import type { SupportLevel } from '@/types/api';
import { NO_LEVEL_COLOR } from './mapUtils';
import { houseSvg, apartmentSvg } from './mapIcons';

const entries: { level: SupportLevel; label: string; color: string }[] = [
  { level: 'LEVEL_1', label: SUPPORT_LEVEL_LABELS.LEVEL_1, color: SUPPORT_LEVEL_COLORS.LEVEL_1 },
  { level: 'LEVEL_2', label: SUPPORT_LEVEL_LABELS.LEVEL_2, color: SUPPORT_LEVEL_COLORS.LEVEL_2 },
  { level: 'LEVEL_3', label: SUPPORT_LEVEL_LABELS.LEVEL_3, color: SUPPORT_LEVEL_COLORS.LEVEL_3 },
  { level: 'LEVEL_4', label: SUPPORT_LEVEL_LABELS.LEVEL_4, color: SUPPORT_LEVEL_COLORS.LEVEL_4 },
];

const VARIANT_BG = {
  public: 'rgba(27, 40, 56, 0.92)',
  admin: 'rgba(26, 16, 37, 0.92)',
};

interface Props {
  variant?: 'admin' | 'public';
}

export default function MapLegend({ variant = 'public' }: Props) {
  return (
    <div
      style={{
        position: 'absolute',
        bottom: 'max(24px, calc(24px + env(safe-area-inset-bottom, 0px)))',
        right: 12,
        zIndex: 1000,
        background: VARIANT_BG[variant],
        borderRadius: 8,
        padding: '10px 14px',
        backdropFilter: 'blur(8px)',
        border: '1px solid rgba(255,255,255,0.12)',
        minWidth: 140,
        maxWidth: 180,
      }}
    >
      {/* Building type icons */}
      <div style={{ display: 'flex', gap: 12, marginBottom: 12, paddingBottom: 8, borderBottom: '1px solid rgba(255,255,255,0.15)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <div dangerouslySetInnerHTML={{ __html: houseSvg('#888', 20) }} />
          <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.85)' }}>Single</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <div dangerouslySetInnerHTML={{ __html: apartmentSvg('#888', 20) }} />
          <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.85)' }}>Multi-Unit</span>
        </div>
      </div>

      <div style={{ fontSize: 12, fontWeight: 600, color: '#fff', marginBottom: 6 }}>
        Support Level
      </div>
      {entries.map((e) => (
        <div key={e.level} style={{ display: 'flex', alignItems: 'center', marginBottom: 3 }}>
          <span
            style={{
              display: 'inline-block',
              width: 12,
              height: 12,
              borderRadius: '50%',
              backgroundColor: e.color,
              marginRight: 8,
              flexShrink: 0,
            }}
          />
          <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.85)' }}>{e.label}</span>
        </div>
      ))}
      <div style={{ display: 'flex', alignItems: 'center', marginTop: 2 }}>
        <span
          style={{
            display: 'inline-block',
            width: 12,
            height: 12,
            borderRadius: '50%',
            backgroundColor: NO_LEVEL_COLOR,
            marginRight: 8,
            flexShrink: 0,
          }}
        />
        <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.85)' }}>No Level</span>
      </div>
    </div>
  );
}
