"use client";

import React, { useEffect, useState } from "react";
import BoldIcon from "@/components/ui/BoldIcon";

interface LocationModalProps {
  isOpen: boolean;
  onClose: () => void;
  location?: {
    address?: string;
    lat?: string;
    lng?: string;
    city?: { name: string };
    province?: { name: string };
  };
}

export default function LocationModal({
  isOpen,
  onClose,
  location,
}: LocationModalProps) {
  const [coords, setCoords] = useState<[number, number] | null>(null);

  useEffect(() => {
    if (!isOpen) {
      setCoords(null);
      return;
    }

    // تنظیم مختصات برای اردستان (اصلاح سواپ lat/lng)
    const lat = parseFloat(location?.lat || "33.3761");
    const lng = parseFloat(location?.lng || "52.3694");
    if (!isNaN(lat) && !isNaN(lng)) {
      setCoords([lat, lng]);
    } else {
      setCoords(null);
    }
  }, [location, isOpen]);

  if (!isOpen) return null;

  const googleMapsUrl = coords
    ? `https://www.google.com/maps/dir/?api=1&destination=${coords[0]},${coords[1]}`
    : "https://www.google.com/maps";

  return (
    <div className="fixed inset-0 flex items-center justify-center z-50 bg-black/60 backdrop-blur-sm">
      <div className="bg-white dark:bg-neutral-800 rounded-2xl p-6 max-w-md w-full mx-4 shadow-2xl transform transition-all duration-300 scale-95 animate-fadeIn overflow-y-auto max-h-[80vh]">
        {/* Header */}
        <div className="flex items-center gap-2 mb-4">
          <BoldIcon name="location" size={20} tinted className="text-blue-500" />
          <h2 className="text-lg font-semibold dark:text-neutral-100 text-gray-800">لوکیشن کاربر</h2>
        </div>

        {/* Info */}
        <div className="mb-6 text-sm dark:text-neutral-300 text-gray-600">
          <p> 
            <strong className="dark:text-neutral-100 text-gray-800">شهر: </strong>
            {location?.city?.name || "نامشخص"}،{" "}
            {location?.province?.name || "نامشخص"}
          </p>
          {location?.address && location.address !== "hn y" && (
            <p className="mt-3">
              <strong className="text-gray-800">آدرس: </strong>
              {location.address}
            </p>
          )}
        </div>

        {/* نقشه */}
        {coords ? (
          <div className="mb-6 rounded-lg overflow-hidden border border-gray-200">
            <iframe
              title="نقشه لوکیشن"
              width="100%"
              height="200"
              frameBorder="0"
              style={{ border: 0 }}
              src={`https://maps.google.com/maps?q=${coords[0]},${coords[1]}&z=15&output=embed`}
              allowFullScreen
              loading="lazy"
            ></iframe>
          </div>
        ) : (
          <p className="text-sm text-gray-500 mb-6">
            مختصات نامعتبر — نقشه در دسترس نیست.
          </p>
        )}

        {/* دکمه‌ها */}
        <div className="flex justify-end gap-3">
          <a
            href={googleMapsUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="bg-blue-500 text-white px-4 py-2 rounded-full hover:bg-blue-600 transition-transform transform hover:scale-105 text-sm font-medium"
          >
            مسیریابی در Google Maps
          </a>
          <button
            onClick={onClose}
            className="bg-gray-200 text-gray-800 px-4 py-2 rounded-full hover:bg-gray-300 transition-transform transform hover:scale-105 text-sm font-medium"
          >
            بستن
          </button>
        </div>
      </div>

      <style jsx>{`
        @keyframes fadeIn {
          from {
            opacity: 0;
            transform: scale(0.95);
          }
          to {
            opacity: 1;
            transform: scale(1);
          }
        }
        .animate-fadeIn {
          animation: fadeIn 0.3s ease-out;
        }
      `}</style>
    </div>
  );
}
