"use client";

import dynamic from 'next/dynamic';

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

export const dynamicParams = true;

export default function DebugPolishOrthophotoPage() {
  // Test marker in Poland
  const testMarkers = [
    {
      position: [50.0647, 19.9450], // Krakow
      popup: "Kraków - Test Location"
    }
  ];

  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">
          Debug Polish Geoportal Orthophoto
        </h1>
        
        <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
          <h2 className="text-lg font-semibold text-red-800 mb-2">
            Debug Mode Active
          </h2>
          <p className="text-red-700">
            This page tests multiple URL formats for Polish Geoportal orthophoto tiles.
            Check the browser console and the debug panel on the map for network request information.
          </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">Debug Map with Multiple Orthophoto Options</h2>
            <p className="text-blue-100 mt-2">
              Try switching between different Polish orthophoto options using the layer control.
              Google layers are included as working references.
            </p>
          </div>
          
          <div className="h-96 md:h-[600px]">
            <DebugPolishOrthophotoMap 
              center={[50.0647, 19.9450]} // Centered on Krakow
              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">
            URL Formats Being Tested:
          </h3>
          <div className="space-y-4 text-sm">            <div className="bg-gray-50 p-3 rounded">
              <strong>Option 1 (WMTS KVP EPSG:3857):</strong>
              <code className="block mt-1 text-xs">
                ?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTO&STYLE=default&TILEMATRIXSET=EPSG:3857&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=image/jpeg
              </code>
              <span className="text-gray-600">Standard Web Mercator projection</span>
            </div>
            
            <div className="bg-gray-50 p-3 rounded">
              <strong>Option 2 (WMTS KVP EPSG:2180):</strong>
              <code className="block mt-1 text-xs">
                ?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTO&STYLE=default&TILEMATRIXSET=EPSG:2180&TILEMATRIX=EPSG:2180:{z}&TILEROW={y}&TILECOL={x}&FORMAT=image/jpeg
              </code>
              <span className="text-gray-600">Polish coordinate system</span>
            </div>
            
            <div className="bg-gray-50 p-3 rounded">
              <strong>Option 3 (Alternative TILEMATRIXSET):</strong>
              <code className="block mt-1 text-xs">
                ?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTO&STYLE=default&TILEMATRIXSET=GoogleMapsCompatible&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=image/jpeg
              </code>
              <span className="text-gray-600">Google Maps compatible matrix</span>
            </div>
            
            <div className="bg-gray-50 p-3 rounded">
              <strong>Option 4 (PNG format):</strong>
              <code className="block mt-1 text-xs">
                ?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTO&STYLE=default&TILEMATRIXSET=EPSG:3857&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=image/png
              </code>
              <span className="text-gray-600">PNG format instead of JPEG</span>
            </div>
          </div>
        </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">
            Debug Instructions:
          </h3>
          <ol className="text-yellow-700 space-y-2">
            <li><strong>1.</strong> Open browser Developer Tools (F12) and go to Network tab</li>
            <li><strong>2.</strong> Switch between different Polish orthophoto options in the layer control</li>
            <li><strong>3.</strong> Look for requests to geoportal.gov.pl in the Network tab</li>
            <li><strong>4.</strong> Check the debug panel on the map for request/response info</li>
            <li><strong>5.</strong> Note which options return 200 OK vs 404/403 errors</li>
            <li><strong>6.</strong> Compare with working Google layers</li>
          </ol>
        </div>
      </div>
    </div>
  );
}