"use client";

import React, { useEffect, useState } from "react";
import BoldIcon from "@/components/ui/BoldIcon";
import { btnPrimary, btnDefault } from "@/lib/ui/buttonStyles";
import { cn } from "@/lib/utils";
import { useTranslation } from "react-i18next";

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 { t } = useTranslation("common");
  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="glass-modal-overlay fixed inset-0 z-50 flex items-center justify-center">
      <div className="glass-modal-panel glass-modal-panel--center mx-4 max-h-[80vh] w-full max-w-md scale-95 overflow-y-auto p-6 shadow-2xl animate-fadeIn">
        {/* 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">{t("models.location.title")}</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">{t("models.location.city")} </strong>
            {location?.city?.name || t("models.location.unknown")}،{" "}
            {location?.province?.name || t("models.location.unknown")}
          </p>
          {location?.address && location.address !== "hn y" && (
            <p className="mt-3">
              <strong className="text-gray-800">{t("models.location.address")} </strong>
              {location.address}
            </p>
          )}
        </div>

        {/* نقشه */}
        {coords ? (
          <div className="mb-6 rounded-lg overflow-hidden border border-gray-200">
            <iframe
              title={t("models.location.mapTitle")}
              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">
            {t("models.location.invalidCoords")}
          </p>
        )}

        {/* دکمه‌ها */}
        <div className="flex justify-end gap-3">
          <a
            href={googleMapsUrl}
            target="_blank"
            rel="noopener noreferrer"
            className={cn(btnPrimary, "px-4 py-2 text-sm font-medium")}
          >
            {t("models.location.directions")}
          </a>
          <button
            type="button"
            onClick={onClose}
            className={cn(btnDefault, "px-4 py-2 text-sm font-medium")}
          >
            {t("models.location.close")}
          </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>
  );
}
