"use client";
import React, { useEffect, useState } from "react";
import DashboardLayout from "@/components/layout/DashboardLayout";
import { Modal } from "@/components/ui/modal";
import AddAddress from "@/components/addAddress/page";
import { Button } from "@/components/ui/button";
import apis from "@/utils/apis";
import { Plus } from "lucide-react";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "@/store/store";
import { updateAddress } from "@/store/actions/user/userAction";

const Address = () => {
  const dispatch: AppDispatch = useDispatch();
  const selectedAddress = useSelector(
    (state: RootState) => state.user.profile.selectedAddress
  );

  const [locate, setLocate] = useState({
    lat: 30.7069892,
    long: 76.6870682,
  });
  const [addresses, setAddresses] = useState([]);
  const [isOpen, setIsOpen] = useState(false);
  const [add, setAdd] = useState(true);
  const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
  const [confirmOpen, setConfirmOpen] = useState(false);

  const getAdress = async () => {
    try {
      const apires = await apis.Profile.getAddress();
      if (apires) {
        setAddresses(apires?.data);
      }
    } catch (error) {
      console.error("Failed to get addresses", error);
    }
  };

  useEffect(() => {
    getAdress();
  }, []);

  useEffect(() => {
    if (!add) {
      getAdress();
      setAdd(true);
    }
  }, [add]);

  const deleteAddress = async (id: string) => {
    try {
      const apires = await apis.Profile.deleteAddress(id);
      if (apires) {
        setAddresses((prev) => prev.filter((item: any) => item._id !== id));
        if (selectedAddress && selectedAddress._id === id) {
          dispatch(updateAddress(null));
        }
        window.dispatchEvent(new Event("addresses-updated"));
      }
    } catch (error) {
      console.error("Delete failed", error);
    }
  };

  const handleDeleteClick = (id: string) => {
    setConfirmDeleteId(id);
    setConfirmOpen(true);
  };

  const confirmDelete = async () => {
    if (confirmDeleteId) {
      try {
        await deleteAddress(confirmDeleteId);
        setConfirmDeleteId(null);
        setConfirmOpen(false);
      } catch (error) {
        console.error("Delete failed", error);
      }
    }
  };

  return (
    <div className="flex flex-col min-h-screen p-5 max-w-7xl mx-auto">
      {isOpen ? (
        <div className="w-full">
          <h2 className="text-2xl font-semibold mb-6">Add New Address</h2>
          <AddAddress
            title="new address"
            isOpen={isOpen}
            setIsOpen={setIsOpen}
            setAdd={setAdd}
            defaultCenter={{ lat: locate?.lat, lng: locate?.long }}
          />
        </div>
      ) : (
        <>
          <h2 className="text-2xl font-semibold mb-6">My addresses</h2>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {/* Add Address Card */}
            <div
              className="border border-gray-200 rounded-lg p-6 bg-white flex flex-col items-center justify-center cursor-pointer min-h-[200px] hover:shadow-md transition-shadow group"
              onClick={() => setIsOpen(true)}
            >
              <div className="w-10 h-10 rounded-full border border-primary flex items-center justify-center mb-3 text-primary group-hover:bg-brand-50 transition-colors">
                <Plus className="w-6 h-6" />
              </div>
              <span className="text-gray-700 font-medium group-hover:text-primary transition-colors">
                Add address
              </span>
            </div>

            {/* Address Cards */}
            {addresses?.length > 0 &&
              addresses.map((item: any) => (
                <div
                  key={item._id}
                  className="border border-gray-200 rounded-lg p-6 bg-white flex flex-col justify-between min-h-[200px] hover:shadow-md transition-shadow"
                >
                  <div>
                    <h3 className="font-semibold text-lg capitalize text-gray-800 mb-3">
                      {item.type}
                    </h3>
                    <p className="text-gray-500 text-sm leading-relaxed line-clamp-4">
                      {item.name}
                    </p>
                  </div>
                  <div className="flex items-center gap-4 mt-4 pt-4 border-t border-gray-50">
                    <button
                      className="text-red-500 text-sm font-medium hover:underline"
                      onClick={() => handleDeleteClick(item?._id)}
                    >
                      Remove
                    </button>
                  </div>
                </div>
              ))}
          </div>
        </>
      )}

      {/* Confirm Delete Modal */}
      <Modal
        isOpen={confirmOpen}
        onClose={() => {
          setConfirmOpen(false);
          setConfirmDeleteId(null);
        }}
        title="Confirm Delete"
        description="Are you sure you want to delete this address? This action cannot be undone."
      >
        <div className="flex justify-end gap-4 mt-4">
          <Button
            variant="ghost"
            onClick={() => {
              setConfirmOpen(false);
              setConfirmDeleteId(null);
            }}
          >
            Cancel
          </Button>
          <Button
            className="bg-red-500 text-white hover:bg-red-600"
            onClick={confirmDelete}
          >
            Delete
          </Button>
        </div>
      </Modal>
    </div>

  );
};

export default function JobAutomationPage() {
  return (
    <DashboardLayout>
      <Address />
    </DashboardLayout>
  );
}