"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,
  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,
        streetViewControl: true,
        fullscreenControl: true,
        zoomControl: true,
        mapTypeControlOptions: {
          style: google.maps.MapTypeControlStyle.DEFAULT,
          position: google.maps.ControlPosition.RIGHT_BOTTOM,
        },
      });

      // ✅ Yangi marker usuli
      new google.maps.marker.AdvancedMarkerElement({
        map,
        position: center,
        title: "Bizning manzil",
      });

      // 🧭 Qo‘shimcha koordinata oynasi
      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);
    };
  }, [lat, lng, zoom]);

  return (
    <>
      <Script
        async
        defer
        src={`https://maps.googleapis.com/maps/api/js?key=AIzaSyARZe3FPgMT0p-CwDD-iYvpz2Mh8jkUxR0&callback=initMap&libraries=marker`}
        strategy="afterInteractive"
      />
      <div ref={mapRef} style={{ width: "100%", height: "600px" }} />
    </>
  );
}