"use client";

import { useState } from 'react';
import dynamic from 'next/dynamic';

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

export default function ComprehensivePolishMapPage() {
  const [selectedLocation, setSelectedLocation] = useState('krakow');

  // Different locations to test the layers
  const locations = {
    krakow: {
      center: [50.0647, 19.9450],
      zoom: 14,
      name: "Kraków",
      description: "Historic city center with good cadastral data coverage"
    },
    warsaw: {
      center: [52.2297, 21.0122],
      zoom: 14,
      name: "Warszawa",
      description: "Capital city with extensive planning data"
    },
    gdansk: {
      center: [54.3520, 18.6466],
      zoom: 14,
      name: "Gdańsk",
      description: "Port city with detailed property boundaries"
    },
    wroclaw: {
      center: [51.1079, 17.0385],
      zoom: 14,
      name: "Wrocław",
      description: "University city with good orthophoto coverage"
    },
    poznan: {
      center: [52.4064, 16.9252],
      zoom: 14,
      name: "Poznań",
      description: "Industrial center with road network data"
    }
  };

  const currentLocation = locations[selectedLocation];

  // Test markers for selected location
  const testMarkers = [
    {
      position: currentLocation.center,
      popup: `${currentLocation.name} - ${currentLocation.description}`
    }
  ];

  return (
    <div className="min-h-screen bg-gray-100">
      <div className="container mx-auto px-4 py-8">
        <h1 className="text-4xl font-bold text-gray-800 mb-6">
          🇵🇱 Comprehensive Polish Geospatial Data Platform
        </h1>
        
        <div className="bg-green-50 border border-green-200 rounded-lg p-6 mb-6">
          <h2 className="text-xl font-semibold text-green-800 mb-3">
            All Polish Layers Implementation Complete! 🎉
          </h2>
          <p className="text-green-700 mb-4">
            This comprehensive map includes all layers from your OpenLayers implementation, 
            converted to work seamlessly with your Leaflet-based React/Next.js project.
          </p>
          <div className="grid md:grid-cols-2 gap-4 text-sm">
            <div>
              <strong className="text-green-800">Base Layers:</strong>
              <ul className="mt-1 text-green-700">
                <li>• Polish Orthophoto (Standard & High Resolution)</li>
                <li>• OpenStreetMap, Google Maps, Esri Satellite</li>
              </ul>
            </div>
            <div>
              <strong className="text-green-800">Overlay Layers:</strong>
              <ul className="mt-1 text-green-700">
                <li>• Cadastral Data, Spatial Planning</li>
                <li>• LP-Portal Roads, Street Names, Parcels, Surveys</li>
              </ul>
            </div>
          </div>
        </div>

        {/* Location Selector */}
        <div className="bg-white rounded-lg shadow-lg p-4 mb-6">
          <h3 className="text-lg font-semibold text-gray-800 mb-3">
            🎯 Select Test Location:
          </h3>
          <div className="grid grid-cols-2 md:grid-cols-5 gap-2">
            {Object.entries(locations).map(([key, location]) => (
              <button
                key={key}
                onClick={() => setSelectedLocation(key)}
                className={`px-3 py-2 rounded-lg text-sm transition-colors ${
                  selectedLocation === key
                    ? 'bg-blue-600 text-white'
                    : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
                }`}
              >
                {location.name}
              </button>
            ))}
          </div>
          <p className="text-sm text-gray-600 mt-2">
            <strong>Current:</strong> {currentLocation.description}
          </p>
        </div>

        {/* Map Container */}
        <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: {currentLocation.name}
            </h2>
            <p className="text-blue-100 mt-2">
              Use the layer control (top-right) to toggle between base layers and enable overlay layers. 
              Combine orthophoto with cadastral data for detailed property analysis.
            </p>
          </div>
          
          <div className="h-96 md:h-[700px]">
            <ComprehensivePolishMap 
              key={selectedLocation} // Force re-render when location changes
              center={currentLocation.center}
              zoom={currentLocation.zoom}
              markers={testMarkers}
              showLayerControl={true}
            />
          </div>
        </div>

        {/* Layer Information */}
        <div className="mt-8 grid md:grid-cols-2 gap-6">
          {/* Base Layers */}
          <div className="bg-white rounded-lg shadow-lg p-6">
            <h3 className="text-lg font-semibold text-gray-800 mb-4 flex items-center">
              🗺️ Base Layers
            </h3>
            <div className="space-y-3 text-sm">
              <div className="flex items-start">
                <span className="w-4 h-4 bg-green-500 rounded-full mr-3 mt-0.5 flex-shrink-0"></span>
                <div>
                  <strong>Polish Orthophoto (Standard)</strong>
                  <p className="text-gray-600 mt-1">High-quality aerial imagery from Polish Geoportal</p>
                </div>
              </div>
              <div className="flex items-start">
                <span className="w-4 h-4 bg-emerald-500 rounded-full mr-3 mt-0.5 flex-shrink-0"></span>
                <div>
                  <strong>Polish Orthophoto (High Resolution)</strong>
                  <p className="text-gray-600 mt-1">Ultra-high resolution aerial imagery for detailed analysis</p>
                </div>
              </div>
              <div className="flex items-start">
                <span className="w-4 h-4 bg-blue-500 rounded-full mr-3 mt-0.5 flex-shrink-0"></span>
                <div>
                  <strong>OpenStreetMap</strong>
                  <p className="text-gray-600 mt-1">Community-driven map data</p>
                </div>
              </div>
              <div className="flex items-start">
                <span className="w-4 h-4 bg-red-500 rounded-full mr-3 mt-0.5 flex-shrink-0"></span>
                <div>
                  <strong>Google Maps</strong>
                  <p className="text-gray-600 mt-1">Satellite imagery and road overlay</p>
                </div>
              </div>
            </div>
          </div>

          {/* Overlay Layers */}
          <div className="bg-white rounded-lg shadow-lg p-6">
            <h3 className="text-lg font-semibold text-gray-800 mb-4 flex items-center">
              📊 Overlay Layers
            </h3>            <div className="space-y-3 text-sm">
              <div className="flex items-start">
                <span className="w-4 h-4 bg-orange-500 rounded-full mr-3 mt-0.5 flex-shrink-0"></span>
                <div>
                  <strong>📋 Polish Cadastral Data</strong>
                  <p className="text-gray-600 mt-1">Property boundaries, parcels, and building outlines</p>
                  <p className="text-xs text-gray-500">Opacity: 80% - Semi-transparent overlay</p>
                </div>
              </div>
              <div className="flex items-start">
                <span className="w-4 h-4 bg-purple-500 rounded-full mr-3 mt-0.5 flex-shrink-0"></span>
                <div>
                  <strong>🏗️ Polish Spatial Planning</strong>
                  <p className="text-gray-600 mt-1">Zoning data and urban planning information</p>
                  <p className="text-xs text-gray-500">Opacity: 70% - Semi-transparent overlay</p>
                </div>
              </div>
              <div className="flex items-start">
                <span className="w-4 h-4 bg-teal-500 rounded-full mr-3 mt-0.5 flex-shrink-0"></span>
                <div>
                  <strong>🛣️ LP-Portal Roads</strong>
                  <p className="text-gray-600 mt-1">Detailed road network data</p>
                  <p className="text-xs text-gray-500">Opacity: 90% - Mostly opaque for visibility</p>
                </div>
              </div>
              <div className="flex items-start">
                <span className="w-4 h-4 bg-indigo-500 rounded-full mr-3 mt-0.5 flex-shrink-0"></span>
                <div>
                  <strong>🏷️ LP-Portal Street Names</strong>
                  <p className="text-gray-600 mt-1">Street names and road descriptions</p>
                  <p className="text-xs text-gray-500">Opacity: 100% - Fully opaque for readability</p>
                </div>
              </div>
              <div className="flex items-start">
                <span className="w-4 h-4 bg-pink-500 rounded-full mr-3 mt-0.5 flex-shrink-0"></span>
                <div>
                  <strong>📐 LP-Portal Parcels & Surveys</strong>
                  <p className="text-gray-600 mt-1">Property parcels and survey markers</p>
                  <p className="text-xs text-gray-500">Opacity: 60-80% - Variable transparency</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Transparency Information */}
        <div className="mt-8 bg-green-50 border border-green-200 rounded-lg p-6">
          <h3 className="text-lg font-semibold text-green-800 mb-4">
            🎨 Layer Transparency Handling
          </h3>
          <div className="grid md:grid-cols-2 gap-6 text-sm">
            <div>
              <h4 className="font-semibold text-green-700 mb-3">Base Layers (Opaque):</h4>
              <div className="space-y-2">
                <div className="flex justify-between">
                  <span>Polish Orthophoto</span>
                  <span className="bg-green-200 px-2 py-1 rounded text-xs">100% Opaque</span>
                </div>
                <div className="flex justify-between">
                  <span>Google Satellite/Roads</span>
                  <span className="bg-green-200 px-2 py-1 rounded text-xs">100% Opaque</span>
                </div>
              </div>
            </div>
            
            <div>
              <h4 className="font-semibold text-green-700 mb-3">Overlay Layers (Transparent):</h4>
              <div className="space-y-2">
                <div className="flex justify-between">
                  <span>📋 Cadastral Data</span>
                  <span className="bg-yellow-200 px-2 py-1 rounded text-xs">80% Opacity</span>
                </div>
                <div className="flex justify-between">
                  <span>🏗️ Spatial Planning</span>
                  <span className="bg-yellow-200 px-2 py-1 rounded text-xs">70% Opacity</span>
                </div>
                <div className="flex justify-between">
                  <span>🛣️ Roads</span>
                  <span className="bg-blue-200 px-2 py-1 rounded text-xs">90% Opacity</span>
                </div>
                <div className="flex justify-between">
                  <span>🏷️ Street Names</span>
                  <span className="bg-green-200 px-2 py-1 rounded text-xs">100% Opacity</span>
                </div>
                <div className="flex justify-between">
                  <span>📐 Parcels</span>
                  <span className="bg-orange-200 px-2 py-1 rounded text-xs">60% Opacity</span>
                </div>
                <div className="flex justify-between">
                  <span>📍 Survey Markers</span>
                  <span className="bg-yellow-200 px-2 py-1 rounded text-xs">80% Opacity</span>
                </div>
              </div>
            </div>
          </div>
          
          <div className="mt-4 p-3 bg-green-100 rounded">
            <p className="text-green-800 text-sm">
              <strong>Smart Transparency:</strong> Each overlay layer has been optimized with appropriate transparency levels. 
              Property boundaries are semi-transparent (60-80%) so you can see the underlying imagery, 
              while text labels are fully opaque (100%) for maximum readability.
            </p>
          </div>
        </div>

        {/* Usage Guide */}
        <div className="mt-8 bg-blue-50 border border-blue-200 rounded-lg p-6">
          <h3 className="text-lg font-semibold text-blue-800 mb-4">
            📋 How to Use This Comprehensive Map
          </h3>
          <div className="grid md:grid-cols-2 gap-6">
            <div>
              <h4 className="font-semibold text-blue-700 mb-2">Basic Navigation:</h4>
              <ul className="text-blue-600 space-y-1 text-sm">
                <li>• Use mouse wheel to zoom in/out</li>
                <li>• Click and drag to pan around</li>
                <li>• Use layer control (top-right) to switch layers</li>
                <li>• Select different Polish cities above to test</li>
              </ul>
            </div>
            <div>
              <h4 className="font-semibold text-blue-700 mb-2">Advanced Features:</h4>
              <ul className="text-blue-600 space-y-1 text-sm">
                <li>• Combine orthophoto with cadastral overlay</li>
                <li>• Enable multiple overlays simultaneously</li>
                <li>• Use high-resolution orthophoto for detail work</li>
                <li>• Compare with Google/OSM base layers</li>
              </ul>
            </div>
          </div>
        </div>

        {/* Technical Implementation */}
        <div className="mt-8 bg-gray-50 border border-gray-200 rounded-lg p-6">
          <h3 className="text-lg font-semibold text-gray-800 mb-4">
            ⚙️ Technical Implementation Details
          </h3>
          <div className="grid md:grid-cols-3 gap-6 text-sm">
            <div>
              <h4 className="font-semibold text-gray-700 mb-2">WMTS Integration:</h4>
              <ul className="text-gray-600 space-y-1">
                <li>• Proper KVP URL construction</li>
                <li>• EPSG:3857 coordinate system</li>
                <li>• Standard and high-res orthophoto</li>
                <li>• Multiple format support (JPEG/PNG)</li>
              </ul>
            </div>
            <div>
              <h4 className="font-semibold text-gray-700 mb-2">WMS Overlays:</h4>
              <ul className="text-gray-600 space-y-1">
                <li>• Polish government services</li>
                <li>• LP-Portal municipal data</li>
                <li>• Transparent overlay support</li>
                <li>• Multiple layer combinations</li>
              </ul>
            </div>
            <div>
              <h4 className="font-semibold text-gray-700 mb-2">React/Leaflet:</h4>
              <ul className="text-gray-600 space-y-1">
                <li>• React-Leaflet component integration</li>
                <li>• Dynamic layer switching</li>
                <li>• Responsive design</li>
                <li>• Performance optimized</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}