"use client";

import { btnPrimary, btnDefault } from "@/lib/ui/buttonStyles";
import { cn } from "@/lib/utils";
import React, { useMemo, useRef } from "react";
import dynamic from "next/dynamic";
import Image from "next/image";
import { useTranslation } from "react-i18next";
import "mapbox-gl/dist/mapbox-gl.css";

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 { t } = useTranslation("common");
  const mapRef = useRef(null);
  const mapboxToken =
    "pk.eyJ1IjoiYWxkZjkyIiwiYSI6ImNscHh5ZG56dTByMXAycnJ2cDNmdDQ5M3YifQ.a_sUt1rLFMfA0jHrETcM7A";

  const navigationLink = `https://www.google.com/maps/dir/?api=1&destination=${lat},${lng}`;

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

  if (!mapboxToken) {
    return (
      <div className="glass-modal-overlay fixed inset-0 z-50 flex items-center justify-center">
        <div className="glass-modal-panel glass-modal-panel--center w-full max-w-md p-6 shadow-lg">
          <h2 className="text-lg font-bold mb-4">{t("billboards.location.error")}</h2>
          <p className="text-red-500">{t("billboards.location.mapboxMissing")}</p>
          <button
            type="button"
            className={cn(btnDefault, "mt-4 px-4 py-2")}
            onClick={() => setShowLocationModal(false)}
          >
            {t("billboards.location.close")}
          </button>
        </div>
      </div>
    );
  }

  return (
    <div
      className={`glass-modal-overlay fixed inset-0 flex items-center justify-center z-50 transition-opacity ${
        showLocationModal ? "opacity-100" : "opacity-0 pointer-events-none"
      }`}
    >
      <div className="glass-modal-panel glass-modal-panel--center w-full max-w-md p-6 shadow-lg">
        <h2 className="text-lg font-bold mb-4">{t("billboards.location.title")}</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={t("billboards.location.mapAria")}
          >
            <Marker latitude={lat} longitude={lng}>
              <Image
                alt={t("billboards.location.locationIconAlt")}
                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={cn(btnPrimary, "px-4 py-2")}
          >
            {t("billboards.location.googleMaps")}
          </a>
          <button
            type="button"
            className={cn(btnDefault, "px-4 py-2")}
            onClick={() => setShowLocationModal(false)}
          >
            {t("billboards.location.close")}
          </button>
        </div>
      </div>
    </div>
  );
}

export default BillboardLocationModal;
