import {
    CalendarClock,
    FileCheck,
    Layers,
    MoreVertical,
    Pencil,
    Play,
    RefreshCcw,
    Repeat,
    Trash2,
} 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 { Button } from '@/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { formatDateTime } from '@/lib/utils';
import type { RecurringTask } from '@/types/recurring-task';

interface RecurringTemplatesCardListProps {
    tasks: RecurringTask[];
    onDelete: (task: RecurringTask) => void;
    onEdit: (task: RecurringTask) => void;
    onRunNow: (task: RecurringTask) => void;
    onToggleStatus: (task: RecurringTask) => void;
}

/**
 * Tampilan kartu untuk Recurring Templates pada layar mobile.
 *
 * Tabelnya punya 9 kolom (termasuk aksi) yang tidak muat di layar sempit,
 * jadi di bawah breakpoint `md` tiap template ditampilkan sebagai kartu
 * lengkap dengan menu aksi yang sama seperti di tabel desktop.
 */
export function RecurringTemplatesCardList({
    tasks,
    onDelete,
    onEdit,
    onRunNow,
    onToggleStatus,
}: RecurringTemplatesCardListProps) {
    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.required_proof_type &&
                    task.required_proof_type !== 'none';

                return (
                    <li
                        key={task.id}
                        className="flex flex-col gap-3 rounded-xl border bg-background p-4"
                    >
                        <div className="flex items-start justify-between gap-3">
                            <div className="min-w-0 flex-1">
                                <p className="line-clamp-2 font-medium">
                                    {task.name}
                                </p>
                                <div className="mt-1 flex flex-wrap items-center gap-2">
                                    <TaskStatusBadge status={task.status} />
                                    <TaskPriorityBadge
                                        level={task.priority_level}
                                    />
                                </div>
                            </div>
                            <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                    <Button
                                        variant="ghost"
                                        size="icon"
                                        className="h-8 w-8 shrink-0"
                                    >
                                        <MoreVertical className="h-4 w-4" />
                                    </Button>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent
                                    align="end"
                                    className="w-56 rounded-xl border shadow-xl"
                                >
                                    <DropdownMenuItem
                                        onClick={() => onRunNow(task)}
                                        className="cursor-pointer gap-2 py-2.5"
                                    >
                                        <Play className="h-4 w-4" /> Run Now
                                    </DropdownMenuItem>
                                    <DropdownMenuSeparator />
                                    <DropdownMenuItem
                                        onClick={() => onEdit(task)}
                                        className="cursor-pointer gap-2 py-2.5"
                                    >
                                        <Pencil className="h-4 w-4" /> Edit
                                        Schedule
                                    </DropdownMenuItem>
                                    <DropdownMenuItem
                                        onClick={() => onToggleStatus(task)}
                                        className="cursor-pointer gap-2 py-2.5"
                                    >
                                        <RefreshCcw className="h-4 w-4" />
                                        {task.status === 'Active'
                                            ? 'Pause Automation'
                                            : 'Resume Automation'}
                                    </DropdownMenuItem>
                                    <DropdownMenuSeparator />
                                    <DropdownMenuItem
                                        onClick={() => onDelete(task)}
                                        className="cursor-pointer gap-2 py-2.5 text-destructive focus:text-destructive"
                                    >
                                        <Trash2 className="h-4 w-4" /> Delete
                                        Automation
                                    </DropdownMenuItem>
                                </DropdownMenuContent>
                            </DropdownMenu>
                        </div>

                        {visibleAssignees.length > 0 ? (
                            <div className="flex flex-wrap items-center gap-1">
                                {visibleAssignees.map((assignee) => (
                                    <Badge
                                        key={assignee.user_id}
                                        variant="outline"
                                        className="rounded-lg text-[10px]"
                                    >
                                        {assignee.user_name}
                                    </Badge>
                                ))}
                                {hiddenAssigneesCount > 0 && (
                                    <Badge
                                        variant="secondary"
                                        className="rounded-lg text-[10px]"
                                    >
                                        +{hiddenAssigneesCount}
                                    </Badge>
                                )}
                            </div>
                        ) : (
                            <span className="text-xs font-medium text-muted-foreground italic">
                                Unassigned
                            </span>
                        )}

                        <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">
                                <Repeat className="h-3.5 w-3.5 shrink-0" />
                                <span className="truncate">
                                    {task.frequency}
                                </span>
                            </div>
                            <div className="flex items-center gap-1.5">
                                <CalendarClock className="h-3.5 w-3.5 shrink-0" />
                                <span className="truncate">
                                    {formatDateTime(task.next_run_at, 'N/A')}
                                </span>
                            </div>
                            <div className="flex items-center gap-1.5">
                                <Layers className="h-3.5 w-3.5 shrink-0" />
                                <span className="truncate">
                                    {task.generated_tasks_count ?? 0} generated
                                </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.required_proof_type}
                                    </span>
                                </div>
                            )}
                        </div>
                    </li>
                );
            })}
        </ul>
    );
}