"use client";

import dynamic from 'next/dynamic';

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

export default function ImprovedPolishOrthophotoPage() {
  const testMarkers = [
    {
      position: [50.0647, 19.9450], // Krakow
      popup: "Kraków - Testing WMTS"
    }
  ];

  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">
          Improved Polish WMTS Implementation
        </h1>
        
        <div className="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
          <h2 className="text-lg font-semibold text-green-800 mb-2">
            Custom WMTS Layer Implementation
          </h2>
          <p className="text-green-700">
            This version uses a custom WMTS layer that properly constructs KVP URLs based on the GetCapabilities response.
            Check the debug panel on the map to see the actual requests being made.
          </p>
        </div>

        <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">Custom WMTS Layer with Proper KVP URLs</h2>
            <p className="text-blue-100 mt-2">
              This implementation builds proper WMTS GetTile requests with all required parameters.
              Monitor the debug panel and browser network tab for request details.
            </p>
          </div>
          
          <div className="h-96 md:h-[600px]">
            <ImprovedPolishOrthophotoMap 
              center={[50.0647, 19.9450]}
              zoom={12}
              markers={testMarkers}
            />
          </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">
            WMTS Parameters Being Tested:
          </h3>
          <div className="grid md:grid-cols-2 gap-4 text-sm">
            <div className="bg-gray-50 p-3 rounded">
              <strong>Tile Matrix Sets Available:</strong>
              <ul className="mt-2 space-y-1">
                <li>• EPSG:3857 (Web Mercator)</li>
                <li>• EPSG:4326 (WGS84)</li>
                <li>• EPSG:2180 (Polish National Grid)</li>
              </ul>
            </div>
            
            <div className="bg-gray-50 p-3 rounded">
              <strong>Formats Available:</strong>
              <ul className="mt-2 space-y-1">
                <li>• image/jpeg (default)</li>
                <li>• image/png</li>
              </ul>
            </div>
          </div>
        </div>

        <div className="mt-6 bg-blue-50 border border-blue-200 rounded-lg p-6">
          <h3 className="text-lg font-semibold text-blue-800 mb-2">
            Testing Instructions:
          </h3>
          <ol className="text-blue-700 space-y-2">
            <li><strong>1.</strong> Open Browser Developer Tools (F12) → Network tab</li>
            <li><strong>2.</strong> Filter by "geoportal.gov.pl" to see WMTS requests</li>
            <li><strong>3.</strong> Switch between different Polish WMTS options</li>
            <li><strong>4.</strong> Check if requests return 200 OK or error codes</li>
            <li><strong>5.</strong> Compare with Google Satellite (known working)</li>
            <li><strong>6.</strong> Monitor the debug panel for request URLs</li>
          </ol>
        </div>

        <div className="mt-6 bg-yellow-50 border border-yellow-200 rounded-lg p-6">
          <h3 className="text-lg font-semibold text-yellow-800 mb-2">
            Expected Behavior:
          </h3>
          <p className="text-yellow-700">
            If the Polish orthophoto tiles appear, you should see aerial imagery of Poland. 
            If they don't load, check the network requests - they should show proper WMTS GetTile URLs 
            with all required parameters (SERVICE, REQUEST, LAYER, TILEMATRIXSET, etc.).
          </p>
        </div>
      </div>
    </div>
  );
}