import { type FC, useState } from 'react'
import { useGetFines } from './hooks/usePaymentData';
import { type FineRule } from './types/Types';
import PageLoading from '../../components/PageLoading';
import Error from '../../components/Error';
import Td from '../../components/Td';
import Button from '@/components/Button';
import { Link } from 'react-router-dom';
import { Pages } from '@/config/Pages';
import DefaulModal from '../../components/DefaulModal';
import { Eye } from 'iconsax-react';

const Fines: FC = () => {

    const { data, isLoading, error } = useGetFines();
    const [selectedFine, setSelectedFine] = useState<FineRule | null>(null);
    const [isModalOpen, setIsModalOpen] = useState(false);

    const openModal = (fine: FineRule) => {
        setSelectedFine(fine);
        setIsModalOpen(true);
    };

    const closeModal = () => {
        setIsModalOpen(false);
        setSelectedFine(null);
    };

    if (isLoading) {
        return (
            <div className="flex justify-center items-center min-h-[400px]">
                <PageLoading />
            </div>
        );
    }

    if (error) {
        return (
            <div className="flex justify-center items-center min-h-[400px]">
                <Error errorText="خطا در بارگذاری قوانین جریمه" />
            </div>
        );
    }

    const fines = data?.results?.fineRules || [];

    const formatDate = (dateString: string) => {
        return new Date(dateString).toLocaleDateString('fa-IR', {
            year: 'numeric',
            month: 'long',
            day: 'numeric',
        });
    };

    return (
        <div>
            <div className='flex justify-end mt-5'>
                <Link to={Pages.financial.createFine}>
                    <Button
                        label='افزودن قانون جریمه'
                        className='w-fit'
                    />
                </Link>
            </div>

            <div className='relative overflow-x-auto rounded-3xl mt-5 w-full'>
                <table className='w-full text-sm'>
                    <thead className='thead'>
                        <tr>
                            <Td text={'عنوان'} />
                            <Td text={'درصد جریمه'} />
                            <Td text={'تاریخ ایجاد'} />
                            <Td text={'عملیات'} />
                        </tr>
                    </thead>
                    <tbody>
                        {fines.length === 0 ? (
                            <tr className='tr'>
                                <td colSpan={4} className="text-center py-8 text-gray-500">
                                    هیچ قانون جریمه‌ای یافت نشد
                                </td>
                            </tr>
                        ) : (
                            fines.map((fine: FineRule) => (
                                <tr key={fine._id} className='tr'>
                                    <Td text={fine.title} />
                                    <Td text={`${fine.fine_percentage}%`} />
                                    <Td text={formatDate(fine.createdAt)} />
                                    <Td text="">
                                        <div className="flex items-center gap-2">
                                            <Button
                                                onClick={() => openModal(fine)}
                                                className="h-8 text-xs w-fit"
                                                variant="outline"
                                            >
                                                <Eye color='#000' size={16} className="ml-1" />
                                                جزئیات
                                            </Button>

                                            {/* عملیات ویرایش - در صورت نیاز */}
                                            {/* <Link to={`${Pages.financial.updateFine}${fine._id}`}>
                                                <Edit color='#8C90A3' size={16} className="cursor-pointer hover:text-blue-500" />
                                            </Link> */}

                                            {/* عملیات حذف - در صورت نیاز */}
                                            {/* <TrashWithConfrim
                                                onDelete={() => {
                                                    console.log('Delete fine:', fine._id);
                                                }}
                                            /> */}
                                        </div>
                                    </Td>
                                </tr>
                            ))
                        )}
                    </tbody>
                </table>
            </div>

            <DefaulModal
                open={isModalOpen}
                close={closeModal}
                isHeader={true}
                title_header="جزئیات قانون جریمه"
                width={500}
            >
                {selectedFine && (
                    <div className="space-y-6 w-[400px]">
                        <div className="bg-gray-50 p-4 rounded-xl">
                            <h3 className="text-lg font-semibold mb-3 text-gray-800">اطلاعات قانون جریمه</h3>
                            <div className="grid grid-cols-1 gap-4">
                                <div>
                                    <label className="block text-sm font-medium text-gray-600">عنوان</label>
                                    <p className="text-gray-900">{selectedFine.title}</p>
                                </div>
                                <div>
                                    <label className="block text-sm font-medium text-gray-600">درصد جریمه</label>
                                    <p className="text-gray-900">{selectedFine.fine_percentage}%</p>
                                </div>
                                <div>
                                    <label className="block text-sm font-medium text-gray-600">وضعیت</label>
                                    <p className={`text-sm ${selectedFine.deleted ? 'text-red-600' : 'text-green-600'}`}>
                                        {selectedFine.deleted ? 'غیرفعال' : 'فعال'}
                                    </p>
                                </div>
                                <div>
                                    <label className="block text-sm font-medium text-gray-600">تاریخ ایجاد</label>
                                    <p className="text-gray-900">{formatDate(selectedFine.createdAt)}</p>
                                </div>
                                <div>
                                    <label className="block text-sm font-medium text-gray-600">آخرین بروزرسانی</label>
                                    <p className="text-gray-900">{formatDate(selectedFine.updatedAt)}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                )}
            </DefaulModal>
        </div>
    );
};

export default Fines;