// components/map/InteractiveMap.tsx
'use client';
 
import dynamic from 'next/dynamic';
 
// Leaflet touches window at module import time,
// so ssr: false is not an optimization — it's the only option that works.
const MapClient = dynamic(
  () => import('./MapClient').then((mod) => mod.MapClient),
  {
    ssr: false,
    loading: () => <MapSkeleton />,
  }
);
 
export function InteractiveMap({ className }: { className?: string }) {
  return <MapClient className={className} />;
}

// components/map/MapClient.tsx (simplified)
'use client';
 
import { useEffect, useRef, useState } from 'react';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
 
export function MapClient({ className }: { className?: string }) {
  const containerRef = useRef<HTMLDivElement>(null);
  const mapRef = useRef<L.Map | null>(null);
  const [isReady, setIsReady] = useState(false);
 
  useEffect(() => {
    if (!containerRef.current || mapRef.current) return;
 
    const map = L.map(containerRef.current, {
      center: [55.75, 37.6],
      zoom: 13,
      preferCanvas: true, // canvas renders faster than DOM for tracks with hundreds of points
    });
 
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; OpenStreetMap contributors',
      maxZoom: 19,
    }).addTo(map);
 
    mapRef.current = map;
    setIsReady(true);
 
    // Leaflet measures the container once, at init time. If the map
    // was hidden (inactive tab, an expanding panel animation), the
    // size will be zero — recalculate once layout has settled.
    requestAnimationFrame(() => map.invalidateSize());
 
    return () => {
      map.remove();
      mapRef.current = null;
    };
  }, []);
 
  return <div ref={containerRef} className={className} style={{ minHeight: 400 }} />;
}

// next.config.ts
import withPWAInit from '@ducanh2912/next-pwa';
 
const withPWA = withPWAInit({
  dest: 'public',
  disable: process.env.NODE_ENV === 'development',
  cacheOnFrontEndNav: true,
  fallbacks: { document: '/_offline' },
  workboxOptions: {
    runtimeCaching: [
      {
        // Map tiles are the heaviest and most stable resource: the same
        // tile almost never changes, so CacheFirst is the right call.
        urlPattern: /^https:\/\/[abc]\.tile\.openstreetmap\.org\/.*/i,
        handler: 'CacheFirst',
        options: {
          cacheName: 'osm-tiles',
          expiration: {
            maxEntries: 1000,
            maxAgeSeconds: 60 * 60 * 24 * 30,
          },
          cacheableResponse: { statuses: [0, 200] },
        },
      },
      {
        urlPattern: ({ request }) => request.mode === 'navigate',
        handler: 'NetworkFirst',
        options: { cacheName: 'pages', networkTimeoutSeconds: 10 },
      },
    ],
  },
});
 
export default withPWA({
  output: 'standalone',
});

// stores/routeStore.ts
import { create } from 'zustand';
 
interface RoutePoint {
  lat: number;
  lng: number;
  elevation: number | null;
}
 
interface RouteState {
  points: RoutePoint[];
  addPoint: (point: RoutePoint) => void;
  removePoint: (index: number) => void;
  undoLastPoint: () => void;
  clearRoute: () => void;
}
 
// The route lives only in the browser: no backend, no sessions,
// no risk of losing points on a dropped connection — state is local.
export const useRouteStore = create<RouteState>((set) => ({
  points: [],
  addPoint: (point) =>
    set((state) => ({ points: [...state.points, point] })),
  removePoint: (index) =>
    set((state) => ({
      points: state.points.filter((_, i) => i !== index),
    })),
  undoLastPoint: () =>
    set((state) => ({ points: state.points.slice(0, -1) })),
  clearRoute: () => set({ points: [] }),
}));

// lib/gpx/export.ts
interface TrackPoint {
  lat: number;
  lng: number;
  elevation: number | null;
}
 
// GPX is assembled as a string on the client — no API route, no server.
export function buildGpx(points: TrackPoint[], name: string): string {
  const trkpts = points
    .map((p) => {
      const ele = p.elevation !== null ? `<ele>${p.elevation}</ele>` : '';
      return `<trkpt lat="${p.lat}" lon="${p.lng}">${ele}</trkpt>`;
    })
    .join('\n');
 
  return `<?xml version="1.0" encoding="UTF-8"?>
<gpx version="1.1" creator="RunCalculator Pro">
  <trk>
    <name>${name}</name>
    <trkseg>
${trkpts}
    </trkseg>
  </trk>
</gpx>`;
}
 
export function downloadGpx(xml: string, filename: string) {
  const blob = new Blob([xml], { type: 'application/gpx+xml' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}