"use client";

import dynamic from 'next/dynamic';

const PolishOrthophotoMap = dynamic(
  () => import('../../components/ui/PolishOrthophotoMap'),
  {
    ssr: false,
    loading: () => <div className="flex items-center justify-center h-96">Loading map...</div>
  }
);

export default function TestPolishOrthophotoPage() {
  // Test markers - various locations in Poland
  const testMarkers = [
    {
      position: [50.0647, 19.9450], // Krakow
      popup: "Kraków - Main Market Square"
    },
    {
      position: [52.2297, 21.0122], // Warsaw
      popup: "Warszawa - Palace of Culture and Science"
    },
    {
      position: [54.3520, 18.6466], // Gdansk
      popup: "Gdańsk - Old Town"
    }
  ];

  return (
    <div className="min-h-screen bg-gray-100">
      <div className="container mx-auto px-4 py-8">
        <h1 className="text-3xl font-bold text-gray-800 mb-6">
          Polish Geoportal Orthophoto Map Test
        </h1>
        
        <div className="bg-white rounded-lg shadow-lg overflow-hidden">
          <div className="p-4 bg-blue-600 text-white">
            <h2 className="text-xl font-semibold">Interactive Map with Polish Orthophoto</h2>
            <p className="text-blue-100 mt-2">
              This map demonstrates working Polish Geoportal orthophoto tiles. 
              Use the layer control (top-right) to switch between different map layers.
            </p>
          </div>
          
          <div className="h-96 md:h-[600px]">
            <PolishOrthophotoMap 
              center={[50.0647, 19.9450]} // Centered on Krakow
              zoom={12}
              markers={testMarkers}
              showLayerControl={true}
            />
          </div>
        </div>

        <div className="mt-8 bg-white rounded-lg shadow-lg p-6">
          <h3 className="text-lg font-semibold text-gray-800 mb-4">
            Map Layers Available:
          </h3>
          <ul className="space-y-2 text-gray-600">
            <li className="flex items-center">
              <span className="w-3 h-3 bg-green-500 rounded-full mr-3"></span>
              <strong>Polish Geoportal Orthophoto:</strong> High-resolution aerial imagery from Polish Geoportal
            </li>
            <li className="flex items-center">
              <span className="w-3 h-3 bg-blue-500 rounded-full mr-3"></span>
              <strong>OpenStreetMap:</strong> Standard OpenStreetMap tiles
            </li>
            <li className="flex items-center">
              <span className="w-3 h-3 bg-red-500 rounded-full mr-3"></span>
              <strong>Google Satellite:</strong> Google satellite imagery
            </li>
            <li className="flex items-center">
              <span className="w-3 h-3 bg-yellow-500 rounded-full mr-3"></span>
              <strong>Google Roads:</strong> Google road overlay
            </li>
            <li className="flex items-center">
              <span className="w-3 h-3 bg-purple-500 rounded-full mr-3"></span>
              <strong>Esri Satellite:</strong> Esri world imagery
            </li>
          </ul>
        </div>

        <div className="mt-8 bg-yellow-50 border border-yellow-200 rounded-lg p-6">
          <h3 className="text-lg font-semibold text-yellow-800 mb-2">
            Implementation Notes:
          </h3>
          <div className="text-yellow-700 space-y-2">
            <p>
              • The Polish Geoportal orthophoto uses REST tile service instead of WMTS for better compatibility
            </p>
            <p>
              • Tile size is set to 512px with zoomOffset=-1 for proper tile alignment
            </p>
            <p>
              • proj4 library is included for coordinate system transformations (EPSG:2180)
            </p>
            <p>
              • Multiple fallback layers are provided for comparison and reliability
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}