import { Search } from 'lucide-react';
import { Table, TableBody } from '@/components/ui/table';
import type { DivisionTask } from '@/types/task';
import { TasksCardList } from './TasksCardList';
import { TasksTableHeader } from './TasksTableHeader';
import { TasksTableRow } from './TasksTableRow';

interface TasksTableProps {
    filteredTasks: DivisionTask[];
    visibleColumns: {
        code: boolean;
        name: boolean;
        priority: boolean;
        assignee: boolean;
        start_date: boolean;
        due_date: boolean;
        status: boolean;
    };
    onTaskClick: (task: DivisionTask) => void;
}

export function TasksTable({
    filteredTasks,
    visibleColumns,
    onTaskClick,
}: TasksTableProps) {
    return (
        <div className="overflow-hidden bg-background">
            {filteredTasks.length > 0 ? (
                <>
                    <div className="md:hidden">
                        <TasksCardList
                            filteredTasks={filteredTasks}
                            onTaskClick={onTaskClick}
                        />
                    </div>
                    <Table className="hidden min-w-[1120px] table-fixed md:table">
                        <colgroup>
                            {visibleColumns.code && (
                                <col className="w-[11rem]" />
                            )}
                            {visibleColumns.name && <col />}
                            {visibleColumns.status && (
                                <col className="w-[9rem]" />
                            )}
                            {visibleColumns.priority && (
                                <col className="w-[8rem]" />
                            )}
                            {visibleColumns.assignee && (
                                <col className="w-[10rem]" />
                            )}
                            {visibleColumns.start_date && (
                                <col className="w-[9rem]" />
                            )}
                            {visibleColumns.due_date && (
                                <col className="w-[9rem]" />
                            )}
                        </colgroup>
                        <TasksTableHeader visibleColumns={visibleColumns} />
                        <TableBody>
                            {filteredTasks.map((task) => (
                                <TasksTableRow
                                    key={task.id}
                                    task={task}
                                    visibleColumns={visibleColumns}
                                    onClick={() => onTaskClick(task)}
                                />
                            ))}
                        </TableBody>
                    </Table>
                </>
            ) : (
                <div className="flex flex-col items-center justify-center py-12 text-center text-muted-foreground">
                    <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
                        <Search className="h-6 w-6" />
                    </div>
                    <p className="font-medium">
                        No tasks found matching your filters.
                    </p>
                </div>
            )}
        </div>
    );
}