import { Marker, Popup } from 'react-leaflet';
import L from 'leaflet';
import type { MapEvent } from '@/types/api';

const eventIcon = L.divIcon({
  className: '',
  html: `<div style="
    width: 28px; height: 28px;
    background: #e67e22;
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  ">&#128197;</div>`,
  iconSize: [28, 28],
  iconAnchor: [14, 14],
  popupAnchor: [0, -16],
});

function formatEventDate(iso: string): string {
  const d = new Date(iso);
  return d.toLocaleDateString('en-CA', {
    weekday: 'short',
    month: 'short',
    day: 'numeric',
  });
}

function formatEventTime(iso: string): string {
  const d = new Date(iso);
  return d.toLocaleTimeString('en-CA', {
    hour: 'numeric',
    minute: '2-digit',
  });
}

interface Props {
  events: MapEvent[];
}

export default function EventMarkers({ events }: Props) {
  return (
    <>
      {events.map((event) => (
        <Marker
          key={`event-${event.id}`}
          position={[event.latitude, event.longitude]}
          icon={eventIcon}
        >
          <Popup>
            <div style={{ minWidth: 200, maxWidth: 300 }}>
              <div style={{ fontWeight: 700, fontSize: 14, color: '#e67e22', marginBottom: 4 }}>
                {event.title}
              </div>
              <div style={{ fontSize: 12, color: '#555', marginBottom: 4 }}>
                {formatEventDate(event.startDatetime)}{' '}
                {formatEventTime(event.startDatetime)}
                {event.endDatetime && ` – ${formatEventTime(event.endDatetime)}`}
              </div>
              {event.placeName && (
                <div style={{ fontSize: 12, color: '#666', marginBottom: 4 }}>
                  {event.placeName}
                </div>
              )}
              {event.description && (
                <div style={{ fontSize: 11, color: '#777', marginBottom: 6, lineHeight: 1.4 }}>
                  {event.description}
                </div>
              )}
              {event.tags.length > 0 && (
                <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', marginBottom: event.shiftId ? 6 : 0 }}>
                  {event.tags.map((tag) => (
                    <span
                      key={tag}
                      style={{
                        fontSize: 10,
                        padding: '1px 6px',
                        borderRadius: 10,
                        background: 'rgba(230, 126, 34, 0.15)',
                        color: '#e67e22',
                        border: '1px solid rgba(230, 126, 34, 0.3)',
                      }}
                    >
                      {tag}
                    </span>
                  ))}
                </div>
              )}
              {event.shiftId && (
                <a
                  href="/shifts"
                  style={{
                    display: 'inline-block',
                    marginTop: 6,
                    fontSize: 12,
                    fontWeight: 600,
                    color: '#fff',
                    background: '#e67e22',
                    padding: '4px 12px',
                    borderRadius: 4,
                    textDecoration: 'none',
                  }}
                >
                  Sign Up &rarr;
                </a>
              )}
            </div>
          </Popup>
        </Marker>
      ))}
    </>
  );
}
