"use client";

import React, { useMemo, useRef } from "react";
import dynamic from "next/dynamic";
import Image from "next/image";
import "mapbox-gl/dist/mapbox-gl.css";

// Lazy load Map and Marker
const Map = dynamic(() => import("react-map-gl").then((mod) => mod.Map), { ssr: false });
const Marker = dynamic(() => import("react-map-gl").then((mod) => mod.Marker), { ssr: false });

interface BillboardLocationModalProps {
  showLocationModal: boolean;
  setShowLocationModal: (show: boolean) => void;
  lat: number;
  lng: number;
  address?: string;
}

function BillboardLocationModal({
  showLocationModal,
  setShowLocationModal,
  lat,
  lng,
  address,
}: BillboardLocationModalProps) {
  const mapRef = useRef(null);
  const mapboxToken ="pk.eyJ1IjoiYWxkZjkyIiwiYSI6ImNscHh5ZG56dTByMXAycnJ2cDNmdDQ5M3YifQ.a_sUt1rLFMfA0jHrETcM7A"

  // لینک مسیریابی به Google Maps
  const navigationLink = `https://www.google.com/maps/dir/?api=1&destination=${lat},${lng}`;

  // Memoize initial view state
  const initialViewState = useMemo(
    () => ({
      latitude: lat,
      longitude: lng,
      zoom: 14,
    }),
    [lat, lng]
  );

  if (!mapboxToken) {
    return (
      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div className="bg-white p-6 rounded-lg shadow-lg max-w-md w-full">
          <h2 className="text-lg font-bold mb-4">خطا</h2>
          <p className="text-red-500">توکن Mapbox تنظیم نشده است.</p>
          <button
            className="mt-4 bg-blue-500 text-white px-4 py-2 rounded"
            onClick={() => setShowLocationModal(false)}
          >
            بستن
          </button>
        </div>
      </div>
    );
  }

  return (
    <div
      className={`fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 transition-opacity ${
        showLocationModal ? "opacity-100" : "opacity-0 pointer-events-none"
      }`}
    >
      <div className="bg-white dark:bg-neutral-800 p-6 rounded-lg shadow-lg max-w-md w-full">
        <h2 className="text-lg font-bold mb-4">آدرس و لوکیشن</h2>
        {address && <p className="mb-4 text-sm">{address}</p>}
        <div style={{ height: "300px", width: "100%", position: "relative" }}>
          <Map
            ref={mapRef}
            initialViewState={initialViewState}
            mapboxAccessToken={mapboxToken}
            mapStyle="mapbox://styles/mapbox/streets-v11"
            style={{ height: "100%", width: "100%" }}
            aria-label="نقشه لوکیشن"
          >
            <Marker latitude={lat} longitude={lng}>
              <Image
                alt="آیکون مکان"
                className="-mt-5"
                width={25}
                height={25}
                src="/images/icons/location.svg"
              />
            </Marker>
          </Map>
        </div>
        <div className="mt-4 flex justify-between">
          <a
            href={navigationLink}
            target="_blank"
            rel="noopener noreferrer"
            className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600"
          >
            مسیریابی با Google Maps
          </a>
          <button
            className="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600"
            onClick={() => setShowLocationModal(false)}
          >
            بستن
          </button>
        </div>
      </div>
    </div>
  );
}

export default BillboardLocationModal;