"use client";
import React, { useState, useEffect } from "react";
import DialogModal from "@/app/components/common/DialogModal";
import AddAddress from "@/app/components/user-dashboard/AddAddress";

type ModalKey = string | null;

interface Address {
  address_id: number;
  postal_code: string;
  delivery_mode: string;
  full_address: string;
  loc_object: {
    lat: number;
    lng: number;
    ["ISO3166-2"]: string;
    placeName: string;
    adminCode1?: string | null;
  };
  mobile_code: string;
  mobile: string;
  full_name: string;
}



export default function DashboardAddress() {
  const [openModal, setOpenModal] = useState<ModalKey>(null);
  const [addresses, setAddresses] = useState<Address[]>([]);
  const [editAddressData, setEditAddressData] = useState<Address | null>(null);
  const [editModalKey, setEditModalKey] = useState<ModalKey>(null);


  const fetchAddresses = async () => {
    try {
      const response = await fetch('/api/address/list', {
       method: 'GET',
        headers: {
          "Content-Type": "application/json",
        },
      });

      const result = await response.json();

      if (result.success) {
        setAddresses(result.data);
      } else {
        console.error('Failed to fetch addresses:', result.message);
      }
    } catch (error) {
      console.error('Error:', error);
    }
  };

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


  const closeAllModals = () => {
    setOpenModal(null);
  };

  const handleAddressAdded = () => {
    setTimeout(() => {
      fetchAddresses();
      closeAllModals();
    }, 1000);
  };


  const openSpecificModal = (modalKey: ModalKey) => {
    closeAllModals();
    setTimeout(() => {
      setOpenModal(modalKey);
    }, 50);
  };

  const handleEditAddress = (address: Address) => {
    setEditAddressData(address);
    openSpecificModal("EditAddressModal");
  };



  const handleRemoveAddress = async (addressId: number) => {
    const confirmDelete = window.confirm("Are you sure you want to remove this address?");
    if (!confirmDelete) return;

    try {
      const response = await fetch(`/api/address/delete/${addressId}`, {
        method: "DELETE",
        headers: {
          "Content-Type": "application/json",
        },
      });

      const result = await response.json();

      if (response.ok && result.success) {
        setAddresses(prev => prev.filter(addr => addr.address_id !== addressId));
      } else {
        console.error("Failed to delete address:", result.message);
      }
    } catch (error) {
      console.error("Error deleting address:", error);
    }
  };

  return (
    <div className="flex w-full flex-1 flex-col gap-4">
      <div className="flex flex-col">
        <div className="flex flex-col justify-between gap-2 align-middle md:grid-cols-2 md:flex-row md:justify-between">
          <div className="flex flex-col">
            <h1 className="med">Address</h1>
            <p className="text-xs">
              You can add up to 10 addresses for you and your favourite
              person.
            </p>
          </div>
          <div className="flex justify-start md:justify-end">
            <button
              onClick={() => openSpecificModal("AddAddressModal")}
              className="btn-outline font-medium"
            >
              Add new Address
            </button>
          </div>
        </div>
        <div className="flex w-full flex-col">
          <DialogModal
            name="AddAddressModal"
            isOpen={openModal === "AddAddressModal"}
            onClose={closeAllModals}
            size="xl"
            title="Add new Address"
            subtitle=""
            showFooter={false}
          >
            <AddAddress onClose={handleAddressAdded} />
          </DialogModal>
          <DialogModal
            name="EditAddressModal"
            isOpen={openModal === "EditAddressModal"}
            onClose={closeAllModals}
            size="xl"
            title="Edit Address"
            subtitle=""
            showFooter={false}
          >
            {editAddressData && (
              <AddAddress
                onClose={handleAddressAdded}
                editMode={true}
                addressData={editAddressData}
              />
            )}
          </DialogModal>

        </div>

        <div className="mt-8 grid grid-cols-1 gap-10 lg:grid-cols-2">
          {addresses.map((item) => (
            <div
              key={item.address_id}
              className="rounded-sm border-2 border-gray-950 bg-white p-10"
            >
              <div>
                <p className="font-bogart text-xl">{item.full_name}</p>
                <p className="text-sm font-medium">{item.mobile_code} {item.mobile}</p>
              </div>
              <div className="py-4">
                <address className="text-xs font-normal not-italic">
                  {item.full_address}
                  <br />
                  {item.loc_object?.placeName}
                  <br />
                  {item.loc_object?.["ISO3166-2"]} {item.postal_code} India
                </address>

              </div>
              <div className="flex w-full items-center justify-between align-middle">
                <button className="btn-link" onClick={() => handleEditAddress(item)}>
                  Edit
                </button>
                <button className="btn-link" onClick={() => handleRemoveAddress(item.address_id)}>
                  Remove
                </button>
                <p className="py-4 text-xs font-medium">Default address</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}