---
import type { Map as Props } from '~/types';
import Headline from '~/components/ui/Headline.astro';
import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';

const {
  title = '',
  subtitle = '',
  tagline = '',
  location = '',
  height = 400,
  lat = 53.1234,
  lon = 18.0123,

  id,
  isDark = false,
  classes = {},
  bg = await Astro.slots.render('bg'),
} = Astro.props;

// Use provided coordinates or default to Bydgoszcz, Miedzyń
const coordinates = {
  lat: lat,
  lon: lon,
};

// Create map URL with proper coordinates
const mapUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${coordinates.lon - 0.01},${coordinates.lat - 0.01},${coordinates.lon + 0.01},${coordinates.lat + 0.01}&layer=mapnik&marker=${coordinates.lat},${coordinates.lon}`;
---

<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-7xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
  <Headline title={title} subtitle={subtitle} tagline={tagline} />

  <div class="mx-auto max-w-7xl p-4 md:px-8">
    <div class="relative overflow-hidden rounded-lg shadow-xl dark:shadow-none dark:border dark:border-slate-600">
      <div class="map-container relative" id="map-container">
        <iframe
          width="100%"
          height={height}
          frameborder="0"
          scrolling="no"
          marginheight="0"
          marginwidth="0"
          src={mapUrl}
          title="Mapa lokalizacji CustomWorks"
          class="w-full"
          id="map-iframe"
          style="pointer-events: none;"
        >
        </iframe>
        <div class="overlay absolute top-0 left-0 w-full h-full bg-white/50 dark:bg-slate-800/50 z-10 cursor-pointer flex items-center justify-center" id="map-overlay">
          <div class="text-center p-6 bg-white dark:bg-slate-800 rounded-lg shadow-lg">
            <div class="text-2xl mb-2">🗺️</div>
            <p class="text-slate-700 dark:text-slate-300 font-medium">Kliknij, aby włączyć mapę</p>
            <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">Click to enable map</p>
          </div>
        </div>
        <script>
          document.addEventListener('DOMContentLoaded', function () {
            const overlay = document.getElementById('map-overlay');
            const mapIframe = document.getElementById('map-iframe');

            if (overlay && mapIframe) {
              overlay.addEventListener('click', function() {
                this.style.display = 'none';
                mapIframe.style.pointerEvents = 'auto';
              });
            }
          });
        </script>
      </div>
      <div class="absolute bottom-4 right-4">
        <a
          href={`https://www.openstreetmap.org/search?query=${encodeURIComponent(location)}`}
          target="_blank"
          rel="noopener noreferrer"
          class="bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 px-3 py-2 rounded-md text-sm font-medium shadow-lg hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors duration-200"
        >
          Otwórz w OpenStreetMap
        </a>
      </div>
    </div>
  </div>
</WidgetWrapper>

<style>
  .map-container {
    position: relative;
  }
  
  .overlay {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    z-index: 10;
    cursor: pointer;
    transition: opacity 0.3s ease;
  }
  
  .overlay:hover {
    opacity: 0.8;
  }
  
  /* Dark mode overlay */
  .dark .overlay {
    background: rgba(30, 41, 59, 0.5);
  }
</style>