"use client";

import "leaflet/dist/leaflet.css";
import { MapContainer, Polyline, TileLayer, CircleMarker, useMap } from "react-leaflet";
import type { RoutePoint } from "@/lib/models/running";

type FitBoundsProps = { points: RoutePoint[] };

function FitBounds({ points }: FitBoundsProps) {
  const map = useMap();
  map.fitBounds(points, { padding: [24, 24] });
  return null;
}

type RouteMapProps = { points: RoutePoint[] };

export function RouteMap({ points }: RouteMapProps) {
  if (points.length === 0) return null;

  const start = points[0];
  const end = points[points.length - 1];

  return (
    <MapContainer
      center={start}
      zoom={13}
      style={{ height: "100%", width: "100%", borderRadius: "inherit", background: "#2b2d42" }}
      zoomControl={false}
      attributionControl={false}
    >
      <TileLayer
        url="https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"
        subdomains="abcd"
        maxZoom={19}
      />
      <FitBounds points={points} />
      <Polyline
        positions={points}
        pathOptions={{ color: "#fb4617", weight: 3, opacity: 0.9 }}
      />
      <CircleMarker
        center={start}
        radius={6}
        pathOptions={{ color: "#f7f3e9", fillColor: "#fb4617", fillOpacity: 1, weight: 2 }}
      />
      <CircleMarker
        center={end}
        radius={6}
        pathOptions={{ color: "#f7f3e9", fillColor: "#2b2d42", fillOpacity: 1, weight: 2 }}
      />
    </MapContainer>
  );
}