import { CalendarDays } from 'lucide-react';
import { TaskPriorityBadge } from '@/components/tasko/task-priority-badge';
import { TaskStatusBadge } from '@/components/tasko/task-status-badge';
import { formatDate } from '@/lib/utils';
import type { Task } from '@/types/_task';

interface TasksCardListProps {
    filteredTasks: Task[];
    onTaskClick: (task: Task) => 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;
};

/**
 * Tampilan kartu untuk daftar task pada layar mobile.
 *
 * Tabel `TasksTable` tidak nyaman dibaca di layar sempit (butuh scroll
 * horizontal), jadi di bawah breakpoint `md` setiap task ditampilkan sebagai
 * kartu yang menonjolkan info terpenting: nama, kode, status, prioritas,
 * assignee, dan rentang tanggal.
 */
export function TasksCardList({
    filteredTasks,
    onTaskClick,
}: TasksCardListProps) {
    return (
        <ul className="flex flex-col gap-3 p-4">
            {filteredTasks.map((task) => {
                const visibleAssignees = task.assignees?.slice(0, 3) ?? [];
                const hiddenAssigneesCount = Math.max(
                    (task.assignees?.length ?? 0) - visibleAssignees.length,
                    0,
                );

                return (
                    <li key={task.id}>
                        <button
                            type="button"
                            onClick={() => onTaskClick(task)}
                            className="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"
                        >
                            <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">
                                        {formatTaskCode(task.code)}
                                    </p>
                                    <p className="mt-0.5 line-clamp-2 font-medium">
                                        {task.name}
                                    </p>
                                </div>
                                <TaskStatusBadge
                                    status={task.status}
                                    className="shrink-0 text-[10px]"
                                />
                            </div>

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

                                {visibleAssignees.length > 0 ? (
                                    <div className="flex items-center -space-x-2">
                                        {visibleAssignees.map((assignee) => (
                                            <div
                                                key={assignee.user_id}
                                                title={assignee.user_name}
                                                className="flex size-7 shrink-0 items-center justify-center rounded-full border border-background bg-primary/10 text-[10px] font-medium text-primary"
                                            >
                                                {getInitials(
                                                    assignee.user_name,
                                                )}
                                            </div>
                                        ))}
                                        {hiddenAssigneesCount > 0 && (
                                            <div className="flex size-7 shrink-0 items-center justify-center rounded-full border border-background bg-muted text-[10px] font-medium text-muted-foreground">
                                                +{hiddenAssigneesCount}
                                            </div>
                                        )}
                                    </div>
                                ) : (
                                    <span className="text-xs font-medium text-muted-foreground italic">
                                        Unassigned
                                    </span>
                                )}
                            </div>

                            {(task.start_date || task.due_date) && (
                                <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
                                    <CalendarDays className="h-3.5 w-3.5 shrink-0" />
                                    <span className="truncate">
                                        {task.start_date
                                            ? formatDate(task.start_date)
                                            : '-'}
                                        {' – '}
                                        {task.due_date
                                            ? formatDate(task.due_date)
                                            : '-'}
                                    </span>
                                </div>
                            )}
                        </button>
                    </li>
                );
            })}
        </ul>
    );
}