"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import Image from "next/image";
import BoldIcon from "@/components/ui/BoldIcon";
import { IMAGE_BASE_URL, staticIconUrl } from "@/components/main/BaseUrl";
import { btnPrimary, btnDefault } from "@/lib/ui/buttonStyles";
import { cn } from "@/lib/utils";
import { useTranslation } from "react-i18next";

type ShopInfo = {
  _id: string;
  name: string;
  logo?: string | null;
  has_physical_location?: boolean;
  province?: { name?: string } | null;
  city?: { name?: string } | null;
  address?: string | null;
  lat?: string | null;
  lng?: string | null;
};

type ShopInfoModalProps = {
  isOpen: boolean;
  onClose: () => void;
  shop?: ShopInfo | null;
};

export default function ShopInfoModal({ isOpen, onClose, shop }: ShopInfoModalProps) {
  const { t } = useTranslation("common");
  const [coords, setCoords] = useState<[number, number] | null>(null);

  useEffect(() => {
    if (!isOpen) {
      setCoords(null);
      return;
    }
    const lat = parseFloat(shop?.lat || "");
    const lng = parseFloat(shop?.lng || "");
    if (!isNaN(lat) && !isNaN(lng)) {
      setCoords([lat, lng]);
    } else {
      setCoords(null);
    }
  }, [shop, isOpen]);

  if (!isOpen || !shop) 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">
        <div className="mb-4 flex items-center gap-2">
          <BoldIcon name="shop" size={20} tinted className="text-blue-500" />
          <h2 className="text-lg font-semibold text-gray-800 dark:text-neutral-100">
            {t("shops.shopInfoTitle")}
          </h2>
        </div>

        <Link
          href={`/shops/profile/${shop._id}`}
          className="mb-3 flex items-center gap-2"
        >
          <span className="flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-neutral-100 dark:bg-neutral-800">
            {shop.logo ? (
              // eslint-disable-next-line @next/next/no-img-element
              <img
                src={IMAGE_BASE_URL + shop.logo}
                alt={shop.name}
                className="h-full w-full object-cover"
              />
            ) : (
              <Image
                src={staticIconUrl("/images/icons/vuesax/bold/shop.svg")}
                width={18}
                height={18}
                alt=""
                className="dark:invert"
              />
            )}
          </span>
          <span className="text-base font-bold text-gray-800 dark:text-neutral-100">
            {shop.name}
          </span>
        </Link>

        <div className="mb-4 text-sm text-gray-600 dark:text-neutral-300">
          {shop.has_physical_location && (
            <>
              <p className="mt-2">
                <strong className="text-gray-800 dark:text-neutral-100">
                  {t("models.location.city")}{" "}
                </strong>
                {shop.city?.name || t("models.location.unknown")}،{" "}
                {shop.province?.name || t("models.location.unknown")}
              </p>
              {shop.address && (
                <p className="mt-2">
                  <strong className="text-gray-800 dark:text-neutral-100">
                    {t("models.location.address")}{" "}
                  </strong>
                  {shop.address}
                </p>
              )}
            </>
          )}
        </div>

        <Link
          href={`/shops/profile/${shop._id}`}
          className={cn(btnDefault, "mb-4 block w-full px-4 py-2 text-center text-sm font-medium")}
        >
          {t("shops.viewShopProfileButton")}
        </Link>

        {shop.has_physical_location &&
          (coords ? (
            <div className="mb-6 overflow-hidden rounded-lg 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="mb-6 text-sm text-gray-500">{t("models.location.invalidCoords")}</p>
          ))}

        <div className="flex justify-end gap-3">
          {shop.has_physical_location && (
            <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>
  );
}
