dmail-admin/src/components/Table.tsx

import React, { Fragment, useState } from 'react';
import DefaultTableSkeleton from './DefaultTableSkeleton';
import Td from './Td';
import { TableProps, RowDataType, ColumnType } from './types/TableTypes';
import { Checkbox } from './ui/checkbox';
import RowActionsDropdown from './RowActionsDropdown';
import Pagination from './Pagination';

const Table = <T extends RowDataType>({
    columns,
    data,
    isLoading = false,
    onRowClick,
    className = '',
    rowClassName = '',
    noDataMessage = 'هیچ داده‌ای یافت نشد',
    headerClassName = 'bg-gray-50',
    emptyRowsCount = 5,
    showHeader = true,
    actions = null,
    actionsPosition = 'top',
    selectable = false,
    selectedActions = null,
    onSelectionChange,
    rowActions,
    pagination,
}: TableProps<T>): React.ReactElement => {

    const [selectedRows, setSelectedRows] = useState<T[]>([]);

    const getRowClassName = (item: T, index: number): string => {
        if (typeof rowClassName === 'function') {
            return rowClassName(item, index);
        }
        return rowClassName;
    };

    const getCellClassName = (column: ColumnType<T>): string => {
        const alignClass = column.align ? `text-${column.align}` : '';
        return `px-3 md:px-6 py-3 md:py-4 whitespace-nowrap text-xs ${alignClass} ${column.className || ''}`.trim();
    };

    const handleRowClick = (item: T) => {
        if (onRowClick) {
            onRowClick(item.id, item);
        }
    };

    const handleSelectAll = () => {
        const dataArray = data || [];
        const newSelectedRows = selectedRows.length === dataArray.length ? [] : [...dataArray];
        setSelectedRows(newSelectedRows);
        if (onSelectionChange) {
            onSelectionChange(newSelectedRows);
        }
    };

    const handleSingleRowSelect = (item: T, checked: boolean) => {
        const newSelectedRows = checked
            ? [...selectedRows, item]
            : selectedRows.filter((row) => row.id !== item.id);
        setSelectedRows(newSelectedRows);
        if (onSelectionChange) {
            onSelectionChange(newSelectedRows);
        }
    };

    const isRowSelected = (item: T): boolean => {
        return selectedRows.some((row) => row.id === item.id);
    };

    // Gmail-style layout برای وقتی header نمایش داده نمی‌شود
    const renderGmailStyleRows = () => {
        const hasActions = (actionsPosition === 'top' || actionsPosition === 'above-header') && (actions || (selectable && selectedRows.length > 0 && selectedActions));
        const roundedClass = hasActions ? 'rounded-b-2xl' : 'rounded-2xl';

        if (isLoading) {
            return (
                <div className={`bg-white ${roundedClass} overflow-hidden`}>
                    {Array.from({ length: emptyRowsCount }).map((_, index) => (
                        <div key={index} className={`h-[48px] bg-gray-100 animate-pulse ${index !== 0 ? 'border-t border-[#EAEDF5]' : ''}`}></div>
                    ))}
                </div>
            );
        }

        if (!data || data.length === 0) {
            return (
                <div className={`bg-white ${roundedClass} py-6 md:py-8 text-center text-gray-500`}>
                    {noDataMessage}
                </div>
            );
        }

        return (
            <div className={`bg-white ${roundedClass} overflow-hidden`}>
                {data.map((item, rowIndex) => (
                    <div
                        key={item.id}
                        className={`w-full min-h-[48px] hover:bg-[#F4F5F9] ${onRowClick ? 'cursor-pointer' : ''} ${getRowClassName(item, rowIndex)} px-4 py-3 flex items-center gap-3 ${rowIndex !== 0 ? 'border-t border-[#EAEDF5]' : ''}`}
                        onClick={() => handleRowClick(item)}
                    >
                        {selectable && (
                            <div
                                className="flex-shrink-0 relative z-[5]"
                                onClick={(e) => e.stopPropagation()}
                            >
                                <Checkbox
                                    checked={isRowSelected(item)}
                                    onCheckedChange={(checked) => handleSingleRowSelect(item, !!checked)}
                                />
                            </div>
                        )}

                        <div className="flex-1 min-w-0">
                            {/* محتوای اصلی - ستون اول */}
                            <div className="flex items-center mb-0.5 text-sm font-medium">
                                {columns[0]?.render ? columns[0].render(item) : (item[columns[0]?.key] as React.ReactNode)}
                            </div>

                            {/* اطلاعات اضافی - سه ستون آخر در یک خط */}
                            {columns.length > 1 && (
                                <div className="flex items-center gap-3 text-xs text-gray-500">
                                    {columns.slice(1).map((col) => (
                                        <div key={col.key} className="truncate">
                                            {col.render ? col.render(item) : (item[col.key] as React.ReactNode)}
                                        </div>
                                    ))}
                                </div>
                            )}
                        </div>

                        {rowActions && (
                            <div
                                className="flex-shrink-0 relative z-[5]"
                                onClick={(e) => e.stopPropagation()}
                            >
                                <RowActionsDropdown actions={rowActions(item)} />
                            </div>
                        )}
                    </div>
                ))}
            </div>
        );
    };

    const renderTableBody = () => {
        if (isLoading) {
            return (
                <Fragment>
                    <DefaultTableSkeleton tdCount={columns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0)} trCount={emptyRowsCount} />
                </Fragment>
            );
        }

        if (!data || data.length === 0) {
            return (
                <tr>
                    <td colSpan={columns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0)} className="px-3 md:px-6 py-6 md:py-8 text-center text-gray-500">
                        {noDataMessage}
                    </td>
                </tr>
            );
        }
        return (data || []).map((item, rowIndex) => (
            <tr
                key={item.id}
                className={`w-full h-[64px] md:h-[74px] bg-white border-t border-[#EAEDF5] hover:bg-[#F4F5F9] ${onRowClick ? 'cursor-pointer' : ''} ${getRowClassName(item, rowIndex)}`}
                onClick={() => handleRowClick(item)}
            >
                {selectable && (
                    <td
                        className="px-3 md:px-6 py-3 md:py-4 w-8 md:w-10 relative z-[5]"
                        onClick={(e) => e.stopPropagation()}
                    >
                        <Checkbox
                            checked={isRowSelected(item)}
                            onCheckedChange={(checked) => handleSingleRowSelect(item, !!checked)}
                        />
                    </td>
                )}
                {columns.map((col) => (
                    <td
                        key={`${item.id}-${col.key}`}
                        className={getCellClassName(col)}
                        style={{ width: col.width }}
                    >
                        {col.render ? col.render(item) : item[col.key] as React.ReactNode}
                    </td>
                ))}
                {rowActions && (
                    <td
                        className="px-3 md:px-6 py-3 md:py-4 w-8 md:w-10 relative z-[5]"
                        onClick={(e) => e.stopPropagation()}
                    >
                        <RowActionsDropdown actions={rowActions(item)} />
                    </td>
                )}
            </tr>
        ));
    };

    const renderHeader = () => {
        if (!showHeader || actionsPosition === 'header-replace') return null;

        return (
            <thead className={`h-[60px] md:h-[69px] bg-white text-sm text-[#8C90A3] ${headerClassName}`}>
                <tr>
                    {selectable && (
                        <th
                            className="px-3 md:px-6 py-3 md:py-4 w-8 md:w-10 relative z-[5] first:rounded-tr-2xl md:first:rounded-tr-3xl"
                            onClick={(e) => e.stopPropagation()}
                        >
                            <Checkbox
                                checked={(data?.length || 0) > 0 && selectedRows.length === (data?.length || 0)}
                                onCheckedChange={handleSelectAll}
                            />
                        </th>
                    )}
                    {columns.map((col) => (
                        <Td key={col.key} text={col.title} />
                    ))}
                    {rowActions && (
                        <th className="px-3 md:px-6 py-3 md:py-4 w-8 md:w-10 rounded-tl-2xl md:rounded-tl-3xl"></th>
                    )}
                </tr>
            </thead >
        );
    };

    const renderActions = () => {
        if (!actions && (!selectable || selectedRows.length === 0 || !selectedActions)) return null;

        return (
            <div className="h-[64px] rounded-t-2xl md:rounded-t-3xl md:h-[74px] bg-white flex items-center px-3 md:px-6">
                <div className='flex items-center gap-2 md:gap-4'>
                    {actions}
                    {selectable && selectedRows.length > 0 && selectedActions && selectedActions}
                </div>
            </div>
        );
    };

    // اگر header نشان داده نمی‌شود، از Gmail-style layout فقط در موبایل استفاده کن
    if (!showHeader) {
        return (
            <div className={`relative mt-6 md:mt-9 w-full ${className}`}>
                {/* نسخه موبایل - Gmail style */}
                <div className={`md:hidden`}>
                    {(actionsPosition === 'top' || actionsPosition === 'above-header') && (
                        <div className="h-[64px] bg-white flex items-center px-4 rounded-t-2xl border-b border-[#EAEDF5]">
                            <div className='flex items-center gap-2'>
                                {actions}
                                {selectable && selectedRows.length > 0 && selectedActions && selectedActions}
                            </div>
                        </div>
                    )}
                    {renderGmailStyleRows()}
                </div>

                {/* نسخه دسکتاپ - Table معمولی */}
                <div className={`hidden md:block`}>
                    {(actionsPosition === 'top' || actionsPosition === 'above-header') && (
                        <div className="h-[74px] bg-white flex items-center px-6 rounded-t-3xl">
                            <div className='flex items-center gap-4'>
                                {actions}
                                {selectable && selectedRows.length > 0 && selectedActions && selectedActions}
                            </div>
                        </div>
                    )}
                    <div className={`overflow-x-auto overflow-hidden ${(actionsPosition === 'top' || actionsPosition === 'above-header') && (actions || (selectable && selectedRows.length > 0 && selectedActions)) ? 'rounded-b-3xl' : 'rounded-3xl'} bg-white`}>
                        <table className="w-full text-sm border-collapse min-w-[600px]">
                            <tbody>
                                {renderTableBody()}
                            </tbody>
                        </table>
                    </div>
                </div>

                {pagination && (
                    <Pagination
                        currentPage={pagination.currentPage}
                        totalPages={pagination.totalPages}
                        onPageChange={pagination.onPageChange}
                    />
                )}
            </div>
        );
    }

    return (
        <div className={`relative mt-6 md:mt-9 w-full ${className}`}>
            {(actionsPosition === 'top' || actionsPosition === 'above-header') && renderActions()}

            <div className={`overflow-x-auto overflow-hidden ${showHeader && actionsPosition !== 'header-replace' ? 'rounded-2xl md:rounded-3xl' : 'rounded-b-2xl md:rounded-b-3xl'} bg-white`}>
                <table className="w-full text-sm border-collapse min-w-[600px]">
                    {renderHeader()}
                    {actionsPosition === 'header-replace' && (
                        <thead>
                            <tr>
                                <th colSpan={columns.length} className="p-0">
                                    {renderActions()}
                                </th>
                            </tr>
                        </thead>
                    )}
                    <tbody>
                        {renderTableBody()}
                    </tbody>
                </table>
            </div>

            {pagination && (
                <Pagination
                    currentPage={pagination.currentPage}
                    totalPages={pagination.totalPages}
                    onPageChange={pagination.onPageChange}
                />
            )}
        </div>
    );
};

export default Table;

/*
مثال استفاده با pagination:

import Table from '@/components/Table';
import { useState } from 'react';

const MyComponent = () => {
    const [currentPage, setCurrentPage] = useState(1);
    const totalPages = 10;

    const columns = [
        { title: 'نام', key: 'name' },
        { title: 'ایمیل', key: 'email' },
    ];

    const data = [
        { id: 1, name: 'علی', email: 'ali@example.com' },
        { id: 2, name: 'فاطمه', email: 'fateme@example.com' },
    ];

    const handlePageChange = (page: number) => {
        setCurrentPage(page);
        // اینجا می‌توانید API call جدید برای دریافت داده‌های صفحه جدید بزنید
    };

    return (
        <Table
            columns={columns}
            data={data}
            pagination={{
                currentPage,
                totalPages,
                onPageChange: handlePageChange
            }}
        />
    );
};
*/