import { useMemo } from 'react';
import { Marker, Tooltip } from 'react-leaflet';
import L from 'leaflet';
import type { CanvassLocation } from '@/types/canvass';
import { VISIT_OUTCOME_COLORS } from '@/types/canvass';

interface CanvassMarkerProps {
  location: CanvassLocation;
  isSelected: boolean;
  onClick: () => void;
}

function getMarkerColor(location: CanvassLocation): string {
  if (!location.lastVisit) return '#95a5a6'; // gray — unvisited
  return VISIT_OUTCOME_COLORS[location.lastVisit.outcome] ?? '#95a5a6';
}

// Inline SVG for house icon
function houseSvg(color: string, size: number, selected: boolean): string {
  const glow = selected ? `<circle cx="${size / 2}" cy="${size / 2}" r="${size / 2}" fill="none" stroke="white" stroke-width="3" opacity="0.6"/>` : '';
  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24">
    ${glow ? `<circle cx="12" cy="12" r="12" fill="none" stroke="white" stroke-width="2" opacity="0.5"/>` : ''}
    <path d="M12 3L4 10v10a1 1 0 001 1h4v-6h6v6h4a1 1 0 001-1V10z" fill="${color}" stroke="rgba(0,0,0,0.3)" stroke-width="0.5"/>
    <path d="M12 3L4 10h16z" fill="${color}" stroke="rgba(0,0,0,0.3)" stroke-width="0.5"/>
  </svg>`;
}

// Inline SVG for apartment/building icon
function apartmentSvg(color: string, size: number, selected: boolean): string {
  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24">
    ${selected ? `<circle cx="12" cy="12" r="12" fill="none" stroke="white" stroke-width="2" opacity="0.5"/>` : ''}
    <rect x="4" y="3" width="16" height="18" rx="1" fill="${color}" stroke="rgba(0,0,0,0.3)" stroke-width="0.5"/>
    <rect x="7" y="6" width="3" height="2.5" rx="0.3" fill="rgba(255,255,255,0.5)"/>
    <rect x="14" y="6" width="3" height="2.5" rx="0.3" fill="rgba(255,255,255,0.5)"/>
    <rect x="7" y="11" width="3" height="2.5" rx="0.3" fill="rgba(255,255,255,0.5)"/>
    <rect x="14" y="11" width="3" height="2.5" rx="0.3" fill="rgba(255,255,255,0.5)"/>
    <rect x="10" y="16" width="4" height="5" rx="0.3" fill="rgba(255,255,255,0.4)"/>
  </svg>`;
}

export default function CanvassMarker({ location, isSelected, onClick }: CanvassMarkerProps) {
  const color = getMarkerColor(location);
  const isApartment = !!location.unitNumber;
  const size = isSelected ? 34 : 26;

  const icon = useMemo(() => {
    const svgHtml = isApartment
      ? apartmentSvg(color, size, isSelected)
      : houseSvg(color, size, isSelected);

    return L.divIcon({
      html: `<div style="width:44px;height:44px;display:flex;align-items:center;justify-content:center">${svgHtml}</div>`,
      iconSize: [44, 44],
      iconAnchor: [22, 22],
      className: '',
    });
  }, [color, size, isSelected, isApartment]);

  return (
    <Marker
      position={[location.latitude, location.longitude]}
      icon={icon}
      eventHandlers={{ click: onClick }}
    >
      <Tooltip direction="top" offset={[0, -16]}>
        <div style={{ fontSize: 12 }}>
          <strong>{location.address || 'Unknown'}</strong>
          {location.unitNumber && <span> #{location.unitNumber}</span>}
          {location.lastVisit && (
            <div style={{ color: '#888' }}>
              Last: {location.lastVisit.outcome.replace('_', ' ')}
            </div>
          )}
        </div>
      </Tooltip>
    </Marker>
  );
}
