"use client";
import React, { useState, useEffect } from "react";
import axios from "@/utils/axios-config";
import Image from "next/image";
import Link from "next/link";
import { useParams, useRouter } from "next/navigation";
import { useSelector, useDispatch } from "react-redux";
import { useTranslations, useLocale } from "next-intl";
import { IoIosArrowBack } from "react-icons/io";
import { IoMdCloseCircle } from "react-icons/io";
import { ArrowRightOutlined, ArrowLeftOutlined } from "@ant-design/icons";
import { useMutation } from "@tanstack/react-query";
import { Button, Select, Input, message, Form } from "antd";
import { useForm } from "antd/lib/form/Form";
import { FaArrowRightLong } from "react-icons/fa6";
import { useSearchParams } from "next/navigation";
import {
  fetchAddressIdSuccess,
  fetchAddressSuccess,
  updateLocation,
} from "@/store/address/actions";

import {
  IoBagCheckOutline,
  IoLocationSharp,
  IoCall,
  IoClose,
} from "react-icons/io5";
import type { CheckboxProps } from "antd";
import Map from "@/components/map";
import { fetchLatLngSuccess } from "@/store/map/actions";
import { GoogleMap, LoadScript, Marker } from "@react-google-maps/api";

const mapContainerStyle = {
  width: "100%",
  height: "400px",
};

const center = {
  lat: 25.276987, // Example: Dubai latitude
  lng: 55.296249, // Example: Dubai longitude
};

export interface city {
  id: number;
  name: string;
}
export interface address {
  city_id: string;
  address: string;
  governorate?: string;
  lat: string;
  lng: string;
}
export default function NewAddress() {
  const locale = useLocale();
  const [cityId,setCityId] = useState<string|undefined>(undefined)
  // edit address
  const editingAddress = useSelector(
    (state: { Address: any }) => state.Address.editingAddress
  );
   const { addEditAddressState } = useSelector((state: { Address: any }) => state.Address);
  // end edit

  const [cities, setCities] = useState<city[]>([]);
  const [governorates, setGovernorates] = useState<city[]>([]);
  const [cityLoading, setCityLoading] = useState(true);
  const [governorateLoading, setGovernorateLoading] = useState(true);
  const [address, setAddress] = useState("");
  const [showMap, setShowMap] = useState(false);
  const { TextArea } = Input;
  const t = useTranslations();
  const router = useRouter();
  const [form] = useForm();
  const dispatch = useDispatch();
  const { lat, lng } = useSelector(
    (state: { MapReducer: any }) => state.MapReducer
  );
  // useEffect(()=>{
  // console.log("addEditAddressState",addEditAddressState)
  //   },[addEditAddressState])

  const [mapLoaded, setMapLoaded] = useState(false);

  const [addAddressBtnClicked, setAddAddressBtnClicked] = useState(false);
  const [cityBounds, setCityBounds] = useState<number[] | null>(null);
  const [locationMismatch, setLocationMismatch] = useState(false);
  const [showMismatchPopup, setShowMismatchPopup] = useState(false);

  //console.log("Editing Address:", editingAddress);

  const [addressForm, setAddressForm] = useState({
    idValue: editingAddress.id || undefined,
    governorate: editingAddress.governorate || undefined,
    city_id: editingAddress.city || undefined,
    address: editingAddress.address || undefined,
    lat: editingAddress.lat,
    lng: editingAddress.lng,
  });

useEffect(() => {
  const fetchCities = async () => {
    if (governorates?.length > 0 && editingAddress?.governorate) {
      const governorate = governorates.find((gov:any) => gov.name === editingAddress.governorate);
      if (!governorate) return; // If no matching governorate, exit early
      console.log("governorateId", governorate.id);
      try {
        //setCityLoading(true);
        const response = await axios.get(`/cities?filter[governorate_id]=${governorate.id}`);
        const data = await response?.data?.data;
        setCities([...data]);

        const city = data.find((city:any) => city.name === editingAddress.city);
        setCityId(city?.id);
       // console.log("cityId", city);
        //setCityLoading(false);
      } catch (err: any) {
        message.error(err?.message);
      }
    }
  };
  fetchCities();
}, [governorates,editingAddress]);

 

  
  // console.log(lat, lng);
  const fetchCitiesData = async (id: any) => {
    try {
      setCityLoading(true);
      const response = await axios.get(`/cities?filter[governorate_id]=${id}`);
      const data = response?.data?.data;

      setCities([...data]);
      setCityLoading(false);
    } catch (err: any) {
      message.error(err?.message);
    }
  };
  const fetchGovernorateData = async () => {
    try {
      setGovernorateLoading(true);
      const response = await axios.get("/governorates");
      const data = response?.data?.data;

      setGovernorates([...data]);
      setGovernorateLoading(false);
    } catch (err: any) {
      //console.error(err?.data?.message);
      message.error(err?.message);
    }
  };
  useEffect(() => {
    fetchGovernorateData();
    // Reset lat/lng when adding a new address to prevent stale persisted values
    if (addEditAddressState !== "edit") {
      dispatch(fetchLatLngSuccess({ lat: "", lng: "" }));
    }
  }, []);
  
  const onGovernorateChange = (value: string) => {
    setAddressForm({ ...addressForm, governorate: value, city_id: undefined }); // Reset city_id when governorate changes
    setCityBounds(null);
    setLocationMismatch(false);
    fetchCitiesData(value);
  };

  useEffect(() => {
    if (addressForm.governorate) {
      fetchCitiesData(addressForm.governorate);
    }
  }, [addressForm.governorate]);

  useEffect(() => {
    form.setFieldsValue({
      governorate: addressForm.governorate,
      city_id: addressForm.city_id,
      address: addressForm.address,
    });
  }, [addressForm, form]);

  const onCityChange = (value: string) => {
    setCityId(value);
    setAddressForm({ ...addressForm, city_id: value });
  };

  // Geocode city to get bounding box for validation
  useEffect(() => {
    if (!cityId || cities.length === 0) return;
    const city = cities.find((c: any) => String(c.id) === String(cityId));
    const governorate = governorates.find(
      (g: any) => String(g.id) === String(addressForm.governorate)
    );
    if (!city) return;
    const query = governorate
      ? `${city.name}, ${governorate.name}, Saudi Arabia`
      : `${city.name}, Saudi Arabia`;
    fetch(
      `https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(query)}&format=json&limit=1&accept-language=ar`
    )
      .then((res) => res.json())
      .then((data) => {
        if (data.length > 0) {
          setCityBounds(data[0].boundingbox.map(Number));
        }
      })
      .catch((err) => console.error("Error geocoding city:", err));
  }, [cityId]);

  // Validate picked location against city bounds
  useEffect(() => {
    if (!lat || !lng || !cityBounds || cityBounds.length !== 4) {
      setLocationMismatch(false);
      return;
    }
    const [south, north, west, east] = cityBounds;
    const latNum = Number(lat);
    const lngNum = Number(lng);
    const latPadding = (north - south) * 0.2;
    const lngPadding = (east - west) * 0.2;
    const isWithin =
      latNum >= south - latPadding &&
      latNum <= north + latPadding &&
      lngNum >= west - lngPadding &&
      lngNum <= east + lngPadding;
    setLocationMismatch(!isWithin);
  }, [lat, lng, cityBounds]);

  const onSearch = (value: string) => {
    //console.log("search:", value);
  };
  //// add address func
  const addAddressMutation = useMutation({
    mutationFn: (values: any) =>
      axios["post"]("/addresses", values, {
        // headers: {
        //   "Accept-Language": `${locale === "en" ? "en-US" : "ar-SA"}`,
        // },
      }),
    onSuccess: (res) => {
      //console.log(res.data);

      message.success(res.data.message);
      dispatch(fetchLatLngSuccess({ lat: "", lng: "" }));
      router.push(`/${locale}/address`);
    },
    onError: (err) => {
      const {
        status,
        data: { message },
      } = (err as any).response;

      message.error(message, {
        position: "top-center",
        duration: 3000,
      });
    },
  });
  const addAddressFunc = (item: address) => {
    if (!lat || !lng) return;
    if (locationMismatch) {
      message.warning(t("location-mismatch-selected-city"));
      return;
    }
    setAddAddressBtnClicked(false);
    delete item.governorate;
    const addressObj = { ...item, lat, lng };
    addAddressMutation.mutate(addressObj);
  };

   //// edit address func
  const editAddressMutation = useMutation({
    mutationFn: (values: any) =>
      axios["post"](`/addresses/${addressForm?.idValue}`, values, {
        // headers: {
        //   "Accept-Language": `${locale === "en" ? "en-US" : "ar-SA"}`,
        // },
      }),
    onSuccess: (res) => {
      //console.log(res.data);

      message.success(res.data.message);
      router.push(`/${locale}/address`);
     // dispatch(fetchLatLngSuccess({ lat: "", lng: "" }));
    },
    onError: (err) => {
      const {
        status,
        data: { message },
      } = (err as any).response;

      message.error(message, {
        position: "top-center",
        duration: 3000,
      });
    },
  });
  const editAddressFunc = (item: address) => {
    if (locationMismatch) {
      message.warning(t("location-mismatch-selected-city"));
      return;
    }
    delete item.governorate;

    const addressObj = { ...item, city_id: cityId?cityId:'', lat: lat, lng: lng, _method: "PUT" };
//console.log("addressObj", addressObj);
    editAddressMutation.mutate(addressObj);
  };
  

  return (
    <>
      <div className="container mx-auto px-4    pt-[2rem]">
        <div
          className={`hover:text-primary hover:bg-white border-[1px] border-solid border-primary  mt-[20px] flex items-center justify-center w-fit py-1 px-2 cursor-pointer rounded-[10px] bg-primary text-white rotate-0 `}
          onClick={() => {
            router.back();
            window.scrollTo(0, 0);
          }}
        >
          <IoIosArrowBack
            className={`text-[24px] md:text-[30px] me-1 ${
              locale === "ar" ? "rotate-180" : ""
            }`}
          />{" "}
          <span className="inline-block me-2">{t("back")}</span>
        </div>
        <div className="my-[50px] mx-auto p-8 w-[90%] sm:w-[70%] md:w-[50%] rounded-md border-[1px] border-solid border-primary ">
          <div className="h-[80px] w-[80px] mx-auto rounded-[50%] bg-custom-gradient flex justify-center items-center">
            <div className="relative w-[40px] h-[60px]">
              <Image
                src="/images/location-logo.svg"
                fill
                style={{ objectFit: "contain" }}
                alt="location"
              />
            </div>
          </div>
          <div className="flex flex-col items-center justify-center">
            <p className=" text-[18px] py-2 md:text-[20px] font-semibold">
              {addEditAddressState==="edit" ? t("Edit-Address") : t("add-new-address")}
            </p>
            <Form
              form={form}
              className="w-full"
              onFinish={(values) =>
                addressForm.idValue
                  // ? handleUpdateAddress(values)
                  ? editAddressFunc(values)
                  : addAddressFunc(values)
              }
              initialValues={addressForm}
            >
              <div className="add-address flex flex-col w-full ">
                <Form.Item
                  name="governorate"
                  rules={[
                    {
                      required: true,
                      message: t("governorate-required"),
                    },
                  ]}
                >
                  <Select
                    value={addressForm.governorate} // Ensure correct value is used
                    showSearch
                    disabled={governorateLoading}
                    placeholder={t("governate")}
                    optionFilterProp="label"
                    onChange={onGovernorateChange}
                    onSearch={onSearch}
                    className="my-2"
                    options={governorates?.map((governate) => ({
                      value: governate.id,
                      label: governate.name,
                    }))}
                  />
                </Form.Item>
                <Form.Item
                  name="city_id"
                  rules={[
                    {
                      required: true,
                      message: t("city-required"),
                    },
                  ]}
                >
                  <Select
                    showSearch
                    disabled={cityLoading}
                    placeholder={t("city")}
                    optionFilterProp="label"
                    onChange={onCityChange}
                    onSearch={onSearch}
                    className="my-2"
                    options={cities?.map((city) => ({
                      value: city.id,
                      label: city.name,
                    }))}
                  />
                </Form.Item>
                <Form.Item
                  name="address"
                  rules={[
                    {
                      required: true,
                      message: t("address-required"),
                    },
                  ]}
                >
                  <TextArea
                  //  onChange={() => fetchLatLngSuccess({ lat: "", lng: "" })}
                    className="my-2"
                    rows={4}
                    placeholder={t("write-your-address-details")}
                  />
                </Form.Item>
                <div
                  className="flex items-center pt-2 text-primary underline w-fit cursor-pointer"
                  onClick={() => setShowMap(true)}
                >
                  {/* <Link
                  className="flex items-center"
                  href="/${locale}/address/new-address/location" locale={false}
                > */}
                  <IoLocationSharp className="text-primary text-[20px]" />
                  {t("pick-your-location")}
                  {/* </Link> */}
                </div>
                {addAddressBtnClicked && !lat && !lng && (
                  <p className="text-[14px] text-[#ff4d4f] p-0">
                    {t("location-required")}
                  </p>
                )}
                {locationMismatch && (
                  <p className="text-[14px] text-[#ff4d4f] p-0">
                   {t("location-mismatch-selected-city")}
                  </p>
                )}
              </div>

              <Button
                loading={addAddressMutation.isPending}
                htmlType="submit"
                onClick={() => {
                  setAddAddressBtnClicked(true);
                  // window.scrollTo(0, 100);
                }}
                className="!text-white my-[20px] !bg-primary !border-none !outline-none flex justify-center items-center text-[16px] lg:text-[20px] font-semibold mx-auto  min-h-[50px] w-[100%] md:w-[70%] !rounded-[12px]"
              >
                {t("save-address")}{" "}
                <FaArrowRightLong className={`${locale==='ar'?'rotate-180':''} text-[16px] lg:text-[20px] mx-1`} />
              </Button>
            </Form>
          </div>
        </div>
      </div>
      {/****map modal**** */}

      {showMap && (
        <div className="fixed top-0 left-0 z-[9999] bg-black/70 flex justify-center items-center w-full h-full">
          <IoMdCloseCircle
            className="absolute top-[20px] text-[30px] md:text-[50px] right-[20px] md:right-[50px] text-primary cursor-pointer"
            onClick={() => setShowMap(false)}
          />
          <div className="w-[90%] z-[999] p-4 border border-solid border-white/60 bg-white/90 backdrop-blur-lg rounded-md relative ">
            <div className="relative">
              <Map
                // lat={editingAddress.id ? editingAddress.lat : 0}
                // lng={editingAddress.id ? editingAddress.lng : 0}
                  lat={lat}
                 lng={lng}
                setAddress={setAddress}
                // addEditAddressState={addEditAddressState}
              />
              {showMismatchPopup && (
                <div className="absolute inset-0 z-[1000] flex items-center justify-center bg-black/50 rounded-md">
                  <div className="bg-white rounded-lg p-5 mx-4 max-w-[90%] w-[400px] text-center shadow-lg">
                    <div className="text-[#ff4d4f] text-[40px] mb-2">&#9888;</div>
                    <p className="text-[16px] font-bold text-[#ff4d4f] mb-3">
                      {t("location-mismatch-selected-city")}
                    </p>
                    <div className="text-[14px] text-start space-y-2 mb-4">
                      <p>
                        <span className="font-semibold">{t("city")}:</span>{" "}
                        <span className="text-primary">
                          {cities.find((c: any) => String(c.id) === String(cityId))?.name}
                        </span>
                      </p>
                      <p>
                        <span className="font-semibold">{t("picked-location")}:</span>{" "}
                        <span className="text-gray-600">{address}</span>
                      </p>
                    </div>
                    <Button
                      className="!bg-primary !border-none !text-white font-semibold w-full"
                      onClick={() => setShowMismatchPopup(false)}
                    >
                      {t("pick-again")}
                    </Button>
                  </div>
                </div>
              )}
            </div>
            <div className=" flex flex-col justify-center items-center rounded-md z-[9999] bottom-[-100px] w-full ">
              {/* <p>{address}</p> */}
              <Button
                className="w-[220px] font-semibold mt-4 !bg-primary !border-none !text-white"
                onClick={() => {
                  if (!lat || !lng || locationMismatch) {
                    setShowMismatchPopup(true);
                    return;
                  }
                  setShowMap(false);
                }}
              >
                {t("confirm-location")}
              </Button>
            </div>
            {/* <LoadScript
              googleMapsApiKey={
                process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY as string
              }
              onLoad={() => setMapLoaded(true)}
            >
              <div className="w-full flex justify-center items-center">
                {mapLoaded ? (
                  <GoogleMap
                    mapContainerStyle={mapContainerStyle}
                    center={center}
                    zoom={12}
                  >
                    <Marker position={center} />
                  </GoogleMap>
                ) : (
                  <p>Loading Map...</p>
                )}
              </div>
            </LoadScript> */}
          </div>
        </div>
      )}
    </>
  );
}