"use client";
/// <reference types="google.maps" />

import { useEffect, useRef } from "react";
import Script from "next/script";

declare global {
  interface Window {
    initMap?: () => void;
    google?: typeof google;
  }
}

type Props = { lat?: number; lng?: number; zoom?: number };

export default function GoogleMap({
  lat = 41.2628056, // rasmda ko‘rsatilgan koordinata (41°15'46.1"N 69°13'08.8"E)
  lng = 69.2191111,
  zoom = 17,
}: Props) {
  const mapRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    window.initMap = () => {
      if (!mapRef.current || !window.google) return;

      const center = new google.maps.LatLng(lat, lng);
      const map = new google.maps.Map(mapRef.current, {
        center,
        zoom,
        mapTypeControl: true,          // 🛰 Satellite tugmasi
        streetViewControl: true,      // Street View tugmasi
        fullscreenControl: true,      // Fullscreen
        zoomControl: true,            // Zoom tugmalari
        mapTypeControlOptions: {
          style: google.maps.MapTypeControlStyle.DEFAULT,
          position: google.maps.ControlPosition.RIGHT_BOTTOM, // Chap pastga Satellite
        },
      });

      // 📌 Marker
      new google.maps.Marker({
        position: center,
        map,
        title: "Bizning manzil",
      });

      // 🧭 Koordinata oynasini yaratamiz
      const coordDiv = document.createElement("div");
      coordDiv.style.background = "#fff";
      coordDiv.style.padding = "15px 30px";
      coordDiv.style.margin = "15px 30px";
      coordDiv.style.boxShadow = "0 2px 6px rgba(0,0,0,0.3)";
      coordDiv.innerHTML = `
        <div style="font-size: 14px; font-weight: 500;">
          41°15'46.1"N 69°13'08.8"E<br/>
          <a href="https://www.google.com/maps?q=${lat},${lng}" target="_blank" style="color: #1a73e8; text-decoration: none;">View larger map</a>
        </div>
      `;
      map.controls[google.maps.ControlPosition.TOP_LEFT].push(coordDiv);
    };

    if (window.google && window.google.maps && typeof window.initMap === "function") {
      window.initMap();
    }
  }, [lat, lng, zoom]);

  return (
    <>
      <Script
        src={`https://maps.googleapis.com/maps/api/js?key=${process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}&callback=initMap`}
        strategy="afterInteractive"
      />
      <div ref={mapRef} style={{ width: "100%", height: "500px", overflow: "hidden" }} />
    </>
  );
}