'use client';

import { Address } from '@/app/[name]/(Profile)/profile/address/types/Types';
import PrimaryButton from '@/components/button/PrimaryButton';
import Modal from '@/components/utils/Modal';
import Link from 'next/link';
import { useEffect, useState } from 'react';
import { ef } from '@/lib/helpers/utfNumbers';

const formatAddress = (address: Address) => {
    return `${address.address}، ${address.city}، ${address.province}`;
};

interface AddressSelectionModalProps {
    visible: boolean;
    addresses: Address[];
    redirectUrl: string;
    name: string;
    selectedAddressId: string | null;
    onClose: () => void;
    onSelectAddress: (addressId: string) => void;
}

export const AddressSelectionModal = ({
    visible,
    addresses,
    redirectUrl,
    name,
    selectedAddressId: initialSelectedAddressId,
    onClose,
    onSelectAddress,
}: AddressSelectionModalProps) => {
    const [selectedAddressId, setSelectedAddressId] = useState<string | null>(initialSelectedAddressId);

    useEffect(() => {
        if (visible) {
            setSelectedAddressId(initialSelectedAddressId);
        } else {
            setSelectedAddressId(null);
        }
    }, [visible, initialSelectedAddressId]);

    const handleSelectAddress = (addressId: string) => {
        setSelectedAddressId(addressId);
        onSelectAddress(addressId);
    };

    return (
        <Modal
            visible={visible}
            onClick={onClose}
        >
            <div className='text-right'>
                <h2 className='text-base font-medium mb-6'>انتخاب آدرس</h2>
                <div className='max-h-[60vh] overflow-y-auto space-y-3'>
                    {addresses.map((address) => (
                        <div
                            key={address.id}
                            onClick={() => handleSelectAddress(address.id)}
                            className={`bg-background rounded-container p-4 cursor-pointer transition-all ${
                                selectedAddressId === address.id ? 'border border-primary' : ''
                            }`}
                        >
                            <div className="flex justify-between items-start mb-2">
                                <h3 className='text-sm font-medium'>{address.title}</h3>
                                {address.isDefault && (
                                    <span className='text-xs bg-primary/10 text-primary px-2 py-1 rounded-full'>
                                        پیش‌فرض
                                    </span>
                                )}
                            </div>
                            <p className='text-sm2 mt-2'>
                                {formatAddress(address)}
                            </p>
                            <p className='text-xs mt-2 text-disabled-text'>
                                کد پستی: {ef(address.postalCode || 'ثبت نشده')}
                            </p>
                            <p className='text-xs mt-2 text-disabled-text'>
                                تلفن: {ef(address.phone)}
                            </p>
                        </div>
                    ))}
                </div>
                <div className='mt-6'>
                    <Link href={`/${name}/profile/address/new?redirect=${encodeURIComponent(redirectUrl)}`}>
                        <PrimaryButton className='w-full'>
                            افزودن آدرس جدید
                        </PrimaryButton>
                    </Link>
                </div>
            </div>
        </Modal>
    );
};

