import { CalendarDays, FileCheck } from 'lucide-react';

import { TaskPriorityBadge } from '@/components/tasko/task-priority-badge';
import { TaskStatusBadge } from '@/components/tasko/task-status-badge';
import { Badge } from '@/components/ui/badge';
import { formatDateTime } from '@/lib/utils';
import type { RoutineWorkTask } from '@/types/recurring-task';

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

/**
 * Tampilan kartu untuk Routine Work pada layar mobile.
 *
 * Tabelnya punya 7 kolom yang tidak muat di layar sempit, jadi di bawah
 * breakpoint `md` tiap task ditampilkan sebagai kartu yang bisa di-tap.
 */
export function RoutineWorkCardList({
    tasks,
    onViewTask,
}: RoutineWorkCardListProps) {
    return (
        <ul className="flex flex-col gap-3 p-4">
            {tasks.map((task) => {
                const visibleAssignees = task.assignees?.slice(0, 2) ?? [];
                const hiddenAssigneesCount = Math.max(
                    (task.assignees?.length ?? 0) - visibleAssignees.length,
                    0,
                );
                const hasProof =
                    task.requiredProofType && task.requiredProofType !== 'none';

                return (
                    <li key={task.id}>
                        <button
                            type="button"
                            onClick={() => onViewTask(task.id)}
                            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">
                                        {task.code}
                                    </p>
                                    <p className="mt-0.5 line-clamp-2 font-medium">
                                        {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 ? (
                                    visibleAssignees.map((assignee) => (
                                        <Badge
                                            key={assignee.id}
                                            variant="outline"
                                            className="rounded-lg text-[10px]"
                                        >
                                            {assignee.name}
                                        </Badge>
                                    ))
                                ) : (
                                    <span className="text-xs font-medium text-muted-foreground italic">
                                        Unassigned
                                    </span>
                                )}
                                {hiddenAssigneesCount > 0 && (
                                    <Badge
                                        variant="secondary"
                                        className="rounded-lg text-[10px]"
                                    >
                                        +{hiddenAssigneesCount}
                                    </Badge>
                                )}
                            </div>

                            <div className="flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-muted-foreground">
                                <div className="flex items-center gap-1.5">
                                    <CalendarDays className="h-3.5 w-3.5 shrink-0" />
                                    <span className="truncate">
                                        {formatDateTime(task.dueDate, 'N/A')}
                                    </span>
                                </div>
                                {hasProof && (
                                    <div className="flex items-center gap-1.5">
                                        <FileCheck className="h-3.5 w-3.5 shrink-0" />
                                        <span className="truncate">
                                            {task.requiredProofType}
                                        </span>
                                    </div>
                                )}
                            </div>
                        </button>
                    </li>
                );
            })}
        </ul>
    );
}