"use client";

import { useState } from 'react';
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>
  }
);

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

export default function PolishOrthophotoTestPage() {
  const [activeMap, setActiveMap] = useState('basic');

  // 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 Integration
        </h1>
        
        {/* Map Type Selector */}
        <div className="mb-6 bg-white rounded-lg shadow-lg p-4">
          <h2 className="text-lg font-semibold text-gray-800 mb-3">
            Choose Map Implementation:
          </h2>
          <div className="flex space-x-4">
            <button
              onClick={() => setActiveMap('basic')}
              className={`px-4 py-2 rounded-lg transition-colors ${
                activeMap === 'basic'
                  ? 'bg-blue-600 text-white'
                  : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
              }`}
            >
              Basic Polish Orthophoto
            </button>
            <button
              onClick={() => setActiveMap('advanced')}
              className={`px-4 py-2 rounded-lg transition-colors ${
                activeMap === 'advanced'
                  ? 'bg-blue-600 text-white'
                  : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
              }`}
            >
              Advanced with WMS Overlays
            </button>
          </div>
        </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">
              {activeMap === 'basic' 
                ? 'Basic Polish Orthophoto Map' 
                : 'Advanced Polish Orthophoto with WMS Overlays'
              }
            </h2>
            <p className="text-blue-100 mt-2">
              {activeMap === 'basic'
                ? 'Demonstrates working Polish Geoportal orthophoto tiles with multiple base layer options.'
                : 'Advanced version includes Polish cadastral data (działki) and spatial planning (MPZT) as overlay layers.'
              }
            </p>
          </div>
          
          <div className="h-96 md:h-[600px]">
            {activeMap === 'basic' ? (
              <PolishOrthophotoMap 
                center={[50.0647, 19.9450]} // Centered on Krakow
                zoom={12}
                markers={testMarkers}
                showLayerControl={true}
              />
            ) : (
              <AdvancedPolishOrthophotoMap 
                center={[50.0647, 19.9450]} // Centered on Krakow
                zoom={12}
                markers={testMarkers}
                showLayerControl={true}
              />
            )}
          </div>
        </div>

        {/* Features Overview */}
        <div className="mt-8 grid md:grid-cols-2 gap-6">
          <div className="bg-white rounded-lg shadow-lg p-6">
            <h3 className="text-lg font-semibold text-gray-800 mb-4">
              Basic Map Features:
            </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>
                Polish Geoportal Orthophoto (Working)
              </li>
              <li className="flex items-center">
                <span className="w-3 h-3 bg-blue-500 rounded-full mr-3"></span>
                OpenStreetMap base layer
              </li>
              <li className="flex items-center">
                <span className="w-3 h-3 bg-red-500 rounded-full mr-3"></span>
                Google Satellite imagery
              </li>
              <li className="flex items-center">
                <span className="w-3 h-3 bg-yellow-500 rounded-full mr-3"></span>
                Google Roads overlay
              </li>
              <li className="flex items-center">
                <span className="w-3 h-3 bg-purple-500 rounded-full mr-3"></span>
                Esri World Imagery
              </li>
            </ul>
          </div>

          <div className="bg-white rounded-lg shadow-lg p-6">
            <h3 className="text-lg font-semibold text-gray-800 mb-4">
              Advanced Map Features:
            </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>
                Standard & High Resolution Orthophoto
              </li>
              <li className="flex items-center">
                <span className="w-3 h-3 bg-orange-500 rounded-full mr-3"></span>
                Polish Cadastral Data (WMS)
              </li>
              <li className="flex items-center">
                <span className="w-3 h-3 bg-teal-500 rounded-full mr-3"></span>
                Spatial Planning Data (MPZT)
              </li>
              <li className="flex items-center">
                <span className="w-3 h-3 bg-indigo-500 rounded-full mr-3"></span>
                Overlay layer support
              </li>
              <li className="flex items-center">
                <span className="w-3 h-3 bg-pink-500 rounded-full mr-3"></span>
                Multiple base layers
              </li>
            </ul>
          </div>
        </div>

        {/* Technical Implementation Details */}
        <div className="mt-8 bg-white rounded-lg shadow-lg p-6">
          <h3 className="text-lg font-semibold text-gray-800 mb-4">
            Technical Implementation:
          </h3>
          <div className="grid md:grid-cols-2 gap-6">
            <div>
              <h4 className="font-semibold text-gray-700 mb-2">Key Improvements:</h4>
              <ul className="text-sm text-gray-600 space-y-1">
                <li>• Uses REST tile service instead of WMTS for better compatibility</li>
                <li>• Proper tile size (512px) with zoomOffset=-1</li>
                <li>• proj4 integration for EPSG:2180 coordinate system</li>
                <li>• Multiple fallback layers for reliability</li>
                <li>• WMS overlay support for cadastral data</li>
              </ul>
            </div>
            <div>
              <h4 className="font-semibold text-gray-700 mb-2">Based on OpenLayers Code:</h4>
              <ul className="text-sm text-gray-600 space-y-1">
                <li>• Converted from OpenLayers to Leaflet implementation</li>
                <li>• Maintains same layer structure and URLs</li>
                <li>• Includes Polish projection definitions</li>
                <li>• Compatible with existing React/Next.js setup</li>
                <li>• Extensible for additional WMS services</li>
              </ul>
            </div>
          </div>
        </div>

        {/* Usage Instructions */}
        <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-2">
            How to Use:
          </h3>
          <div className="text-blue-700 space-y-2">
            <p><strong>1.</strong> Use the layer control (top-right) to switch between base layers</p>
            <p><strong>2.</strong> In advanced mode, enable overlay layers for cadastral/planning data</p>
            <p><strong>3.</strong> Click on markers to see location information</p>
            <p><strong>4.</strong> Zoom in to see high-resolution orthophoto details</p>
            <p><strong>5.</strong> Combine orthophoto with cadastral overlay for property boundaries</p>
          </div>
        </div>
      </div>
    </div>
  );
}