"use client";

import dynamic from 'next/dynamic';

// Import dynamique pour éviter les erreurs SSR avec Leaflet
const PortRouteMap = dynamic(() => import('@/components/PortRouteMap'), {
  ssr: false,
  loading: () => (
    <div className="h-96 bg-gray-100 rounded-lg flex items-center justify-center">
      <div className="text-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
        <p className="text-gray-600">Chargement de la carte...</p>
      </div>
    </div>
  ),
});

export default function DemoPage() {
  const portA = { lat: 43.2965, lng: 5.3698 }; // Marseille
  const portB = { lat: 41.3851, lng: 2.1734 }; // Barcelone

  return (
    <div className="w-full min-h-screen p-8 bg-gray-50">
      <div className="max-w-7xl mx-auto">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">Démo Carte Maritime</h1>
          <p className="text-gray-600">
            Visualisation de la route entre Marseille et Barcelone
          </p>
        </div>

        <div className="bg-white rounded-lg shadow-lg overflow-hidden">
          <div className="bg-blue-600 px-6 py-4">
            <h2 className="text-white text-lg font-semibold">
              Route: Port de Marseille → Port de Barcelone
            </h2>
            <p className="text-blue-100 text-sm mt-1">
              Distance approximative: ~350 km par la mer
            </p>
          </div>

          <PortRouteMap portA={portA} portB={portB} height="600px" />

          <div className="px-6 py-4 bg-gray-50 border-t">
            <div className="grid grid-cols-2 gap-4 text-sm">
              <div>
                <h3 className="font-semibold text-gray-900 mb-2">📍 Port d'origine</h3>
                <p className="text-gray-600">Marseille, France</p>
                <p className="text-gray-500 text-xs">Lat: {portA.lat}, Lng: {portA.lng}</p>
              </div>
              <div>
                <h3 className="font-semibold text-gray-900 mb-2">📍 Port de destination</h3>
                <p className="text-gray-600">Barcelone, Espagne</p>
                <p className="text-gray-500 text-xs">Lat: {portB.lat}, Lng: {portB.lng}</p>
              </div>
            </div>
          </div>
        </div>

        <div className="mt-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
          <h3 className="text-blue-900 font-semibold mb-2">ℹ️ Informations</h3>
          <ul className="text-blue-800 text-sm space-y-1">
            <li>• Carte interactive OpenStreetMap</li>
            <li>• Marqueurs positionnés sur les ports</li>
            <li>• Ligne bleue représentant la route maritime</li>
            <li>• Zoom et navigation disponibles</li>
          </ul>
        </div>
      </div>
    </div>
  );
}