import Filters, { FilterValues } from '../../components/Filters';
import { FC, ReactNode, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Table from '../../components/Table';
import { ColumnType } from '../../components/types/TableTypes';
import { InfoCircle, More, Refresh2 } from 'iconsax-react';

interface Message extends Record<string, unknown> {
    id: string;
    title: string | ReactNode;
    sender: string;
    date: string;
    read: boolean;
}

const List: FC = () => {
    const { t } = useTranslation();
    const [isLoading] = useState(false);

    const messageData: Message[] = [
        { id: '1', title: <div className='text-blue-500'>پیش نویس</div>, sender: 'علی محمدی', date: '1402/05/12', read: true },
        { id: '2', title: <div className='text-blue-500'>پیش نویس</div>, sender: 'زهرا احمدی', date: '1402/05/13', read: true },
        { id: '3', title: <div className='text-blue-500'>پیش نویس</div>, sender: 'مدیریت', date: '1402/05/14', read: true },
    ];

    const columns: ColumnType<Message>[] = [
        {
            key: 'title',
            title: 'عنوان پیام',
            render: (item) => (
                <div className="flex items-center">
                    {!item.read && <div className="w-2 h-2 rounded-full bg-blue-500 mr-2" />}
                    <span>{item.title}</span>
                </div>
            )
        },
        { key: 'sender', title: 'فرستنده' },
        { key: 'date', title: 'تاریخ', align: 'center' },
    ];

    const tableActions = (
        <div className='flex items-center gap-4'>
            <Refresh2 size={20} color='black' />
            <More size={20} color='black' className='rotate-90' />
        </div>
    );

    const handleFilterChange = (newFilters: FilterValues) => {
        console.log('Applied filters:', newFilters);
    };

    return (
        <div className='mt-4'>
            <h1>{t('draft.title')}</h1>

            <Filters
                fields={[
                    { type: 'date', name: 'from_date', placeholder: t('received.from_date') },
                    { type: 'date', name: 'to_date', placeholder: t('received.to_date') },
                    {
                        type: 'select',
                        name: 'status',
                        placeholder: t('received.all'),
                        options: [
                            { value: 'all', label: t('received.all') },
                            { value: 'read', label: t('received.read') },
                            { value: 'unread', label: t('received.unread') }
                        ]
                    },
                    { type: 'input', name: 'search', placeholder: t('received.search') }
                ]}
                onChange={handleFilterChange}
                className="mt-8 flex justify-between items-center"
                searchField="search"
            />

            <Table<Message>
                columns={columns}
                data={messageData}
                isLoading={isLoading}
                showHeader={false}
                actions={tableActions}
                onRowClick={(id) => console.log(`کلیک روی پیام با شناسه ${id}`)}
                noDataMessage={
                    <div className="flex flex-col items-center py-6">
                        <InfoCircle size={40} className="text-gray-300 mb-2" />
                        <div>هیچ پیامی یافت نشد</div>
                    </div>
                }
                selectable={true}
            />

        </div>
    )
}

export default List