import { TaskPriorityBadge } from '@/components/tasko/task-priority-badge';
import { TaskStatusBadge } from '@/components/tasko/task-status-badge';
import { TableCell, TableRow } from '@/components/ui/table';
import {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
} from '@/components/ui/tooltip';
import { formatDate } from '@/lib/utils';
import type { Task } from '@/types/_task';

interface TasksTableRowProps {
    task: Task;
    visibleColumns: {
        code: boolean;
        name: boolean;
        priority: boolean;
        assignee: boolean;
        start_date: boolean;
        due_date: boolean;
        status: boolean;
    };
    onClick: () => void;
}

const getInitials = (name: string) => {
    return name
        .split(' ')
        .map((n) => n[0])
        .join('')
        .toUpperCase()
        .slice(0, 2);
};

const formatTaskCode = (code?: string | null) => {
    const normalizedCode = code?.trim();

    if (!normalizedCode) {
        return 'TASK';
    }

    return normalizedCode.startsWith('-')
        ? `TASK${normalizedCode}`
        : normalizedCode;
};

export function TasksTableRow({
    task,
    visibleColumns,
    onClick,
}: TasksTableRowProps) {
    const visibleAssignees = task.assignees?.slice(0, 3) ?? [];
    const hiddenAssigneesCount = Math.max(
        (task.assignees?.length ?? 0) - visibleAssignees.length,
        0,
    );

    return (
        <TableRow className="group h-16 cursor-pointer" onClick={onClick}>
            {visibleColumns.code && (
                <TableCell className="h-16 px-6 font-mono font-medium text-muted-foreground">
                    <p className="truncate font-normal text-muted-foreground">
                        {formatTaskCode(task.code)}
                    </p>
                </TableCell>
            )}
            {visibleColumns.name && (
                <TableCell className="h-16 px-6">
                    <p className="truncate font-medium">{task.name}</p>
                </TableCell>
            )}
            {visibleColumns.status && (
                <TableCell className="h-16 px-6">
                    <div className="flex justify-center">
                        <TaskStatusBadge
                            status={task.status}
                            className="text-[10px]"
                        />
                    </div>
                </TableCell>
            )}
            {visibleColumns.priority && (
                <TableCell className="h-16 px-6 text-center">
                    <div className="flex justify-center">
                        <TaskPriorityBadge level={task.priority_level} />
                    </div>
                </TableCell>
            )}
            {visibleColumns.assignee && (
                <TableCell className="h-16 px-6">
                    <div className="flex h-8 items-center justify-center">
                        {visibleAssignees.length > 0 ? (
                            <div className="flex max-w-full items-center justify-center -space-x-2 overflow-hidden">
                                {visibleAssignees.map((assignee) => (
                                    <Tooltip key={assignee.user_id}>
                                        <TooltipTrigger asChild>
                                            <div className="flex size-8 shrink-0 items-center justify-center rounded-full border border-background bg-primary/10 text-xs font-medium text-primary">
                                                {getInitials(
                                                    assignee.user_name,
                                                )}
                                            </div>
                                        </TooltipTrigger>
                                        <TooltipContent>
                                            <p className="font-medium">
                                                {assignee.user_name}
                                            </p>
                                        </TooltipContent>
                                    </Tooltip>
                                ))}
                                {hiddenAssigneesCount > 0 && (
                                    <div className="flex size-8 shrink-0 items-center justify-center rounded-full border border-background bg-muted text-xs font-medium text-muted-foreground">
                                        +{hiddenAssigneesCount}
                                    </div>
                                )}
                            </div>
                        ) : (
                            <span className="block w-20 truncate text-center text-[.7em] font-medium text-muted-foreground italic">
                                Unassigned
                            </span>
                        )}
                    </div>
                </TableCell>
            )}
            {visibleColumns.start_date && (
                <TableCell className="h-16 px-6 text-muted-foreground">
                    <div className="grid place-items-center">
                        {task.start_date ? formatDate(task.start_date) : '-'}
                    </div>
                </TableCell>
            )}
            {visibleColumns.due_date && (
                <TableCell className="h-16 px-6 text-muted-foreground">
                    <div className="grid place-items-center">
                        {task.due_date ? formatDate(task.due_date) : '-'}
                    </div>
                </TableCell>
            )}
        </TableRow>
    );
}