import { CalendarDays } from 'lucide-react';

import { TaskPriorityBadge } from '@/components/TaskPriorityBadge';
import { TaskStatusBadge } from '@/components/TaskStatusBadge';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { cn } from '@/lib/utils';
import type { Task } from '@/types/task';
import { getDeadlineState } from './ProjectTasks';

interface ProjectTasksCardListProps {
    tasks: Task[];
    onViewTask: (taskId: string) => void;
}

/**
 * Tampilan kartu untuk daftar task project pada layar mobile.
 *
 * Tabelnya punya 6 kolom yang tidak muat di layar sempit, jadi di bawah
 * breakpoint `md` tiap task ditampilkan sebagai kartu yang bisa di-tap.
 */
export function ProjectTasksCardList({
    tasks,
    onViewTask,
}: ProjectTasksCardListProps) {
    return (
        <ul className="flex flex-col gap-3 p-4">
            {tasks.map((task) => {
                const deadlineState = getDeadlineState(task);
                const assignees = task.assignees ?? [];
                const visibleAssignees = assignees.slice(0, 3);
                const isCompleted = task.status === 'completed';

                return (
                    <li key={task.id}>
                        <button
                            type="button"
                            onClick={() => onViewTask(task.id)}
                            className={cn(
                                'flex w-full flex-col gap-3 rounded-xl border bg-background p-4 text-left transition-colors hover:border-primary/60 active:bg-muted/50',
                                deadlineState.rowClassName,
                            )}
                        >
                            <div className="flex items-start justify-between gap-3">
                                <div className="min-w-0 flex-1">
                                    <p className="truncate font-mono text-[11px] text-muted-foreground">
                                        {task.code || '-'}
                                    </p>
                                    <p
                                        className={cn(
                                            'mt-0.5 line-clamp-2 font-medium',
                                            isCompleted &&
                                                'text-muted-foreground line-through',
                                        )}
                                    >
                                        {task.title}
                                    </p>
                                </div>
                                <TaskStatusBadge
                                    status={task.status}
                                    className="shrink-0 text-[10px]"
                                />
                            </div>

                            <div className="flex flex-wrap items-center gap-2">
                                <TaskPriorityBadge level={task.priorityLevel} />

                                {visibleAssignees.length > 0 ? (
                                    <div className="flex items-center gap-1.5">
                                        <div className="flex -space-x-1.5 overflow-hidden">
                                            {visibleAssignees.map((u, idx) => (
                                                <Avatar
                                                    key={idx}
                                                    className="h-5 w-5 ring-1 ring-background"
                                                >
                                                    <AvatarFallback className="text-[8px]">
                                                        {u.name?.charAt(0) ||
                                                            '?'}
                                                    </AvatarFallback>
                                                </Avatar>
                                            ))}
                                            {assignees.length > 3 && (
                                                <div className="flex h-5 w-5 items-center justify-center rounded-full bg-muted text-[8px] font-bold text-muted-foreground ring-1 ring-background">
                                                    +{assignees.length - 3}
                                                </div>
                                            )}
                                        </div>
                                        <span className="max-w-32 truncate text-xs text-muted-foreground">
                                            {assignees.length === 1
                                                ? assignees[0].name
                                                : `${assignees.length} Pelaksana`}
                                        </span>
                                    </div>
                                ) : (
                                    <span className="text-xs text-muted-foreground italic">
                                        Unassigned
                                    </span>
                                )}
                            </div>

                            <div className="flex items-center gap-1.5 text-xs">
                                <CalendarDays className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
                                <span
                                    className={cn(
                                        'truncate',
                                        deadlineState.className,
                                    )}
                                >
                                    {deadlineState.label}
                                </span>
                            </div>
                        </button>
                    </li>
                );
            })}
        </ul>
    );
}