'use client'
import authAxios from '@/utils/axios';
import { MapPin, Edit, Trash2 } from 'lucide-react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react';

const Addresses = () => {
  const [addresses, setAddresses] = useState([]);
  const [error, setError] = useState('');
  const [isDeleting, setIsDeleting] = useState(false);
  const router = useRouter();

  const fetchAddresses = async () => {
    try {
      const response = await authAxios.get('/account/addresses/');
      setAddresses(response.data);
    } catch (error) {
      setError('Failed to fetch addresses');
      console.error(error);
    }
  };

  const handleEdit = (id) => {
    router.push(`/accounts/profile/addresses/${id}`);
  };

  const handleDelete = async (id) => {
    if (!window.confirm('Are you sure you want to delete this address?')) return;
    
    setIsDeleting(true);
    try {
      await authAxios.delete(`/account/addresses/${id}/`);
      setAddresses(addresses.filter(address => address.id !== id));
    } catch (error) {
      setError('Failed to delete address');
      console.error(error);
    } finally {
      setIsDeleting(false);
    }
  };

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

  return (
    <div>
      <h1 className="text-3xl font-semibold border-b pb-4 text-zinc-700">Address</h1>
      
      <Link href='/accounts/profile/new-address'>
        <div className='p-6 hover:border-yellow-400 border rounded-md w-fit mt-4 flex justify-center items-center flex-col'>
          <MapPin className='text-[#AC8C6B]' />
          <h1>Add new address</h1>
        </div>
      </Link>

      {error && <p className="text-red-500 mt-4">{error}</p>}

      {addresses.map((address) => (
        <div key={address.id} className='border sm:p-6 p-2 w-3/6 mt-4 border-slate-800 relative'>
          <div className="absolute top-4 right-4 flex gap-2">
            <button
              onClick={() => handleEdit(address.id)}
              className="p-2 text-blue-600 hover:bg-blue-50 rounded-full"
              disabled={isDeleting}
            >
              <Edit size={18} />
            </button>
            <button
              onClick={() => handleDelete(address.id)}
              className="p-2 text-red-600 hover:bg-red-50 rounded-full"
              disabled={isDeleting}
            >
              <Trash2 size={18} />
            </button>
          </div>

          <h2 className='text-lg font-bold'>{address.first_name} {address.last_name}</h2>
          {address.company && <p className='text-md font-medium'>{address.company}</p>}
          <p className='text-md'>
            {address.address}
            {address.apartment && `, ${address.apartment}`}
          </p>
          <p className='text-md'>
            {address.city}, {address.country} - {address.zipcode}
          </p>
          <p className='text-md font-semibold'>Phone: {address.phone}</p>
        </div>
      ))}
    </div>
  );
};

export default Addresses;