import { useState } from 'react';
import { ChevronUp, ChevronDown } from 'lucide-react';
import { TableColumn, TableData } from '../../types';
import { clsx } from 'clsx';

interface TableProps {
    columns: TableColumn[];
    data: TableData[];
    loading?: boolean;
}

export const Table = ({ columns, data, loading = false }: TableProps) => {
    const [sortField, setSortField] = useState<string>('');
    const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');

    const handleSort = (field: string) => {
        if (sortField === field) {
            setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
        } else {
            setSortField(field);
            setSortDirection('asc');
        }
    };

    const sortedData = [...data].sort((a, b) => {
        if (!sortField) return 0;

        const aValue = a[sortField];
        const bValue = b[sortField];

        if (aValue < bValue) return sortDirection === 'asc' ? -1 : 1;
        if (aValue > bValue) return sortDirection === 'asc' ? 1 : -1;
        return 0;
    });

    if (loading) {
        return (
            <div className="animate-pulse">
                <div className="hidden md:block">
                    <div className="card overflow-hidden">
                        <div className="bg-gray-50 dark:bg-gray-700 px-6 py-3">
                            <div className="flex space-x-4">
                                {columns.map((_, index) => (
                                    <div key={index} className="h-4 bg-gray-300 dark:bg-gray-600 rounded flex-1"></div>
                                ))}
                            </div>
                        </div>
                        {[...Array(5)].map((_, index) => (
                            <div key={index} className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                                <div className="flex space-x-4">
                                    {columns.map((_, colIndex) => (
                                        <div key={colIndex} className="h-4 bg-gray-300 dark:bg-gray-600 rounded flex-1"></div>
                                    ))}
                                </div>
                            </div>
                        ))}
                    </div>
                </div>

                <div className="md:hidden space-y-4">
                    {[...Array(3)].map((_, index) => (
                        <div key={index} className="card p-4 space-y-3">
                            {columns.map((_, colIndex) => (
                                <div key={colIndex} className="space-y-1">
                                    <div className="h-3 bg-gray-300 dark:bg-gray-600 rounded w-1/3"></div>
                                    <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-2/3"></div>
                                </div>
                            ))}
                        </div>
                    ))}
                </div>
            </div>
        );
    }

    return (
        <>
            <div className="hidden md:block card overflow-x-auto">
                <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <thead className="bg-gray-50 dark:bg-gray-700">
                        <tr>
                            {columns.map((column) => (
                                <th
                                    key={column.key}
                                    className={clsx(
                                        'px-6 py-3 text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider',
                                        column.align === 'left' && 'text-left',
                                        column.align === 'center' && 'text-center',
                                        (!column.align || column.align === 'right') && 'text-right',
                                        column.sortable && 'cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600'
                                    )}
                                    onClick={() => column.sortable && handleSort(column.key)}
                                >
                                    <div className={clsx('flex items-center space-x-1',
                                        column.align === 'left' && 'justify-start',
                                        column.align === 'center' && 'justify-center',
                                        (!column.align || column.align === 'right') && 'justify-end'
                                    )}>
                                        <span style={{ width: '100%', textAlign: 'right' }}>{column.label}</span>
                                        {column.sortable && (
                                            <div className="flex flex-col ml-1">
                                                <ChevronUp
                                                    className={clsx(
                                                        'h-3 w-3',
                                                        sortField === column.key && sortDirection === 'asc'
                                                            ? 'text-primary-600'
                                                            : 'text-gray-400'
                                                    )}
                                                />
                                                <ChevronDown
                                                    className={clsx(
                                                        'h-3 w-3 -mt-1',
                                                        sortField === column.key && sortDirection === 'desc'
                                                            ? 'text-primary-600'
                                                            : 'text-gray-400'
                                                    )}
                                                />
                                            </div>
                                        )}
                                    </div>
                                </th>
                            ))}
                        </tr>
                    </thead>
                    <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                        {sortedData.map((row, rowIndex) => (
                            <tr key={rowIndex} className="hover:bg-gray-50 dark:hover:bg-gray-700">
                                {columns.map((column) => (
                                    <td key={column.key} className={clsx(
                                        'px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100',
                                        column.align === 'left' && 'text-left',
                                        column.align === 'center' && 'text-center',
                                        (!column.align || column.align === 'right') && 'text-right'
                                    )}>
                                        {column.render ? column.render(row[column.key], row) : row[column.key]}
                                    </td>
                                ))}
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>

            <div className="md:hidden space-y-4">
                {sortedData.map((row, rowIndex) => (
                    <div key={rowIndex} className="card p-4 space-y-3">
                        {columns.map((column) => (
                            <div key={column.key} className="flex justify-between items-start">
                                <span className="text-sm font-medium text-gray-500 dark:text-gray-400">
                                    {column.label}:
                                </span>
                                <span className="text-sm text-gray-900 dark:text-gray-100 text-right">
                                    {column.render ? column.render(row[column.key], row) : row[column.key]}
                                </span>
                            </div>
                        ))}
                    </div>
                ))}
            </div>
        </>
    );
}; 