import { type FC, useState } from 'react'
import Button from '@/components/Button'
import Table from '@/components/Table'
import Filters from '@/components/Filters'
import { Add, Eye } from 'iconsax-react'
import type { RowDataType, ActionType } from '@/components/types/TableTypes'
import type { FilterValues } from '@/components/Filters'
import { Link } from 'react-router-dom'
import { Pages } from '@/config/Pages'

interface OrderData extends RowDataType {
    id: number
    orderNumber: string
    customerName: string
    orderAmount: string
    orderTime: string
    deliveryType: string
    paymentType: string
    status: string
}

const OrdersList: FC = () => {
    const [currentPage, setCurrentPage] = useState(1)
    const totalPages = 2

    const handlePageChange = (page: number) => {
        setCurrentPage(page)
    }

    const handleFiltersChange = (newFilters: FilterValues) => {
        console.log('فیلترها:', newFilters)
    }

    const handleRowActions = (item: OrderData): ActionType[] => {
        return [
            {
                label: 'ویرایش',
                onClick: () => {
                    console.log('ویرایش سفارش:', item.id)
                },
            },
            {
                label: 'حذف',
                onClick: () => {
                    console.log('حذف سفارش:', item.id)
                },
            },
        ]
    }

    const getStatusColor = (status: string) => {
        switch (status) {
            case 'در حال آماده سازی':
                return 'text-orange-500'
            case 'تایید نشده':
                return 'text-red-500'
            case 'تحویل داده شده':
                return 'text-green-500'
            default:
                return ''
        }
    }

    const columns = [
        {
            key: 'orderNumber',
            title: 'شماره سفارش',
        },
        {
            key: 'customerName',
            title: 'نام مشتری',
        },
        {
            key: 'orderAmount',
            title: 'مبلغ سفارش',
        },
        {
            key: 'orderTime',
            title: 'زمان سفارش',
        },
        {
            key: 'deliveryType',
            title: 'نوع تحویل',
        },
        {
            key: 'paymentType',
            title: 'نوع پرداخت',
        },
        {
            key: 'status',
            title: 'وضعیت',
            render: (item: OrderData) => {
                return (
                    <span className={getStatusColor(item.status)}>
                        {item.status}
                    </span>
                )
            },
        },
        {
            key: 'details',
            title: 'جزییات',
            render: (item: OrderData) => {
                return (
                    <Link to={Pages.orders.detail + item.id}>
                        <Eye size={20} color="#8C90A3" />
                    </Link>
                )
            },
        },
    ]

    const data: OrderData[] = [
        {
            id: 1,
            orderNumber: '12345',
            customerName: 'مهرداد مظفری',
            orderAmount: '۴۲۰۰۰۰ تومان',
            orderTime: '۱۴۰۳/۱۱/۲۵ ۱۳:۰۰:۰۰',
            deliveryType: 'تحویل با پیک',
            paymentType: 'پرداخت آنلاین',
            status: 'در حال آماده سازی',
        },
        {
            id: 2,
            orderNumber: '12345',
            customerName: 'مهرداد مظفری',
            orderAmount: '۴۲۰۰۰۰ تومان',
            orderTime: '۱۴۰۳/۱۱/۲۵ ۱۳:۰۰:۰۰',
            deliveryType: 'تحویل با پیک',
            paymentType: 'پرداخت آنلاین',
            status: 'در انتظار تایید',
        },
        {
            id: 3,
            orderNumber: '12345',
            customerName: 'مهرداد مظفری',
            orderAmount: '۴۲۰۰۰۰ تومان',
            orderTime: '۱۴۰۳/۱۱/۲۵ ۱۳:۰۰:۰۰',
            deliveryType: 'تحویل با پیک',
            paymentType: 'پرداخت آنلاین',
            status: 'تایید نشده',
        },
        {
            id: 4,
            orderNumber: '12345',
            customerName: 'مهرداد مظفری',
            orderAmount: '۴۲۰۰۰۰ تومان',
            orderTime: '۱۴۰۳/۱۱/۲۵ ۱۳:۰۰:۰۰',
            deliveryType: 'تحویل با پیک',
            paymentType: 'پرداخت با کیف پول',
            status: 'تحویل داده شده',
        },
        {
            id: 5,
            orderNumber: '12345',
            customerName: 'مهرداد مظفری',
            orderAmount: '۴۲۰۰۰۰ تومان',
            orderTime: '۱۴۰۳/۱۱/۲۵ ۱۳:۰۰:۰۰',
            deliveryType: 'سرو در رستوران',
            paymentType: 'پرداخت در محل',
            status: 'تحویل داده شده',
        },
        {
            id: 6,
            orderNumber: '12345',
            customerName: 'مهرداد مظفری',
            orderAmount: '۴۲۰۰۰۰ تومان',
            orderTime: '۱۴۰۳/۱۱/۲۵ ۱۳:۰۰:۰۰',
            deliveryType: 'تحویل در ماشین',
            paymentType: 'پرداخت آنلاین',
            status: 'تحویل داده شده',
        },
    ]

    return (
        <div className='mt-5'>
            <div className='flex justify-between items-center'>
                <h1 className='text-lg font-light'>لیست سفارشات</h1>
                <Button className='w-fit px-6'>
                    <div className='flex gap-2 items-center'>
                        <Add color='#fff' size={20} />
                        <span>افزودن سفارش</span>
                    </div>
                </Button>
            </div>

            <div className='mt-8'>
                <Filters
                    fields={[
                        {
                            type: 'input',
                            name: 'search',
                            placeholder: 'جستجو',
                        },
                        {
                            type: 'select',
                            name: 'status',
                            placeholder: 'وضعیت',
                            options: [
                                { value: '', label: 'همه' },
                                { value: 'در حال آماده سازی', label: 'در حال آماده سازی' },
                                { value: 'در انتظار تایید', label: 'در انتظار تایید' },
                                { value: 'تایید نشده', label: 'تایید نشده' },
                                { value: 'تحویل داده شده', label: 'تحویل داده شده' },
                            ],
                        },
                        {
                            type: 'select',
                            name: 'deliveryType',
                            placeholder: 'نوع تحویل',
                            options: [
                                { value: '', label: 'همه' },
                                { value: 'تحویل با پیک', label: 'تحویل با پیک' },
                                { value: 'سرو در رستوران', label: 'سرو در رستوران' },
                                { value: 'تحویل در ماشین', label: 'تحویل در ماشین' },
                            ],
                        },
                    ]}
                    onChange={handleFiltersChange}
                    searchField="search"
                />
            </div>

            <Table
                columns={columns}
                data={data}
                rowActions={handleRowActions}
                pagination={{
                    currentPage,
                    totalPages,
                    onPageChange: handlePageChange,
                }}
            />
        </div>
    )
}

export default OrdersList