import { Divider, Tag } from "antd";
import ProInputCard from "components/ProInputCard/ProInputCard";
import ProText from "components/ProText";
import { useTranslation } from "react-i18next";
import styles from "./LocationCard.module.css";
import { GoogleMap } from "components/CustomBottomSheet/GoogleMap";
import DirectionsIcon from "components/Icons/DirectionsIcon";
import { useGetRedeemDetailsQuery } from "redux/api/others";
import { useParams } from "react-router-dom";

export function LocationCard() {
  const { t } = useTranslation();
  const { voucherId } = useParams();
  const { data: redeemDetails } = useGetRedeemDetailsQuery(voucherId || "", {
    skip: !voucherId,
  });

  const handleGetDirections = () => {
    const lat = redeemDetails?.gift?.lat;
    const lng = redeemDetails?.gift?.lng;

    if (lat && lng) {
      // Google Maps URL that works on both mobile and desktop
      // On mobile devices, this will open the Google Maps app if installed
      const googleMapsUrl = `https://www.google.com/maps/dir/?api=1&destination=${lat},${lng}`;
      // Use window.location.href for better mobile compatibility (works in webviews)
      window.location.href = googleMapsUrl;
    }
  };

  return (
    <>
      <ProInputCard title={t("redeem.restaurantLocation")}>
        <div className={styles.mapContainer}>
          <GoogleMap
            readOnly={true}
            initialLocation={{
              lat: parseFloat(redeemDetails?.gift?.lat || "0"),
              lng: parseFloat(redeemDetails?.gift?.lng || "0"),
              address: "",
            }}
            height="160px"
          />
        </div>

        <Divider style={{ margin: "16px 0" }} />

        <div className={styles.orderNotes}>
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              gap: 4,
              width: "100%",
            }}
          >
            <ProText
              style={{
                fontWeight: 500,
                fontStyle: "Medium",
                fontSize: 14,
                lineHeight: "140%",
                letterSpacing: "0%",
                color: "#333333",
              }}
            >
              {redeemDetails?.gift?.restaurant}
            </ProText>

            <ProText
              style={{
                fontWeight: 500,
                fontStyle: "Medium",
                fontSize: 14,
                lineHeight: "140%",
                letterSpacing: "0%",
                color: "#777580",
              }}
            >
              {redeemDetails?.gift?.restaurant}
            </ProText>
          </div>
          <Tag
            onClick={handleGetDirections}
            style={{
              backgroundColor: "#FFF9E6",
              color: "#E8B400",
              display: "flex",
              alignItems: "center",
              gap: 4,
              cursor: "pointer",
            }}
          >
            <DirectionsIcon />
            <ProText
              style={{
                fontWeight: 500,
                fontStyle: "Medium",
                fontSize: 14,
                lineHeight: "140%",
                letterSpacing: "0%",
                color: "#E8B400",
              }}
            >
              {t("redeem.getDirections")}
            </ProText>
          </Tag>
        </div>
      </ProInputCard>
    </>
  );
}