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

interface CustomerData extends RowDataType {
    id: number
    name: string
    phone: string
    email: string
    customerCode: string
    ordersCount: number
    ticketsCount: number
}

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

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

    const handleFiltersChange = (newFilters: FilterValues) => {
        // اینجا می‌توانید API call جدید برای فیلتر کردن داده‌ها بزنید
        console.log('فیلترها:', newFilters)
    }

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

    const columns = [
        {
            key: 'name',
            title: 'نام',
        },
        {
            key: 'phone',
            title: 'شماره تماس',
        },
        {
            key: 'email',
            title: 'ایمیل',
        },
        {
            key: 'customerCode',
            title: 'کد مشتری',
        },
        {
            key: 'ordersCount',
            title: 'سفارشات',
            render: (item: CustomerData) => {
                return (
                    <button
                        className="text-blue-600 hover:text-blue-800"
                        onClick={(e) => {
                            e.stopPropagation()
                            console.log('مشاهده سفارشات:', item.id)
                        }}
                    >
                        {item.ordersCount} سفارش
                    </button>
                )
            },
        },
        {
            key: 'ticketsCount',
            title: 'تیکت‌ها',
            render: (item: CustomerData) => {
                return (
                    <button
                        className="text-blue-600 hover:text-blue-800"
                        onClick={(e) => {
                            e.stopPropagation()
                            console.log('مشاهده تیکت‌ها:', item.id)
                        }}
                    >
                        {item.ticketsCount} تیکت
                    </button>
                )
            },
        },
        {
            key: 'details',
            title: 'جزییات',
            render: (item: CustomerData) => {
                return (
                    <Link to={Pages.customers.detail + item.id}>
                        <Eye size={20} color="#8C90A3" />
                    </Link>
                )
            },
        },
    ]

    const data: CustomerData[] = [
        {
            id: 1,
            name: 'مهرداد مظفری',
            phone: '۰۹۱۲۹۲۸۳۳۹۵',
            email: 'info@example.com',
            customerCode: '۱۲۲',
            ordersCount: 4,
            ticketsCount: 4,
        },
        {
            id: 2,
            name: 'مهرداد مظفری',
            phone: '۰۹۱۲۹۲۸۳۳۹۵',
            email: 'info@example.com',
            customerCode: '۱۲۲',
            ordersCount: 4,
            ticketsCount: 4,
        },
        {
            id: 3,
            name: 'مهرداد مظفری',
            phone: '۰۹۱۲۹۲۸۳۳۹۵',
            email: 'info@example.com',
            customerCode: '۱۲۲',
            ordersCount: 4,
            ticketsCount: 4,
        },
        {
            id: 4,
            name: 'مهرداد مظفری',
            phone: '۰۹۱۲۹۲۸۳۳۹۵',
            email: 'info@example.com',
            customerCode: '۱۲۲',
            ordersCount: 4,
            ticketsCount: 4,
        },
        {
            id: 5,
            name: 'مهرداد مظفری',
            phone: '۰۹۱۲۹۲۸۳۳۹۵',
            email: 'info@example.com',
            customerCode: '۱۲۲',
            ordersCount: 4,
            ticketsCount: 4,
        },
        {
            id: 6,
            name: 'مهرداد مظفری',
            phone: '۰۹۱۲۹۲۸۳۳۹۵',
            email: 'info@example.com',
            customerCode: '۱۲۲',
            ordersCount: 4,
            ticketsCount: 4,
        },
    ]

    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: 'جستجو',
                        },
                    ]}
                    onChange={handleFiltersChange}
                    searchField="search"
                />
            </div>

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

export default CustomersList