import {
    CalendarClock,
    FileCheck,
    Layers,
    MoreVertical,
    Pencil,
    Play,
    RefreshCcw,
    Repeat,
    Trash2,
} from 'lucide-react';

import { AssigneeAvatarStack } from '@/components/AssigneeAvatarStack';
import { TaskPriorityBadge } from '@/components/TaskPriorityBadge';
import { TaskStatusBadge } from '@/components/TaskStatusBadge';
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';
import { describeDailyDays } from './DailyDaysSelect';

interface RecurringTemplatesCardListProps {
    tasks: RecurringTask[];
    /** Boleh mengubah template; kalau tidak, menu aksinya tidak ditampilkan. */
    canManage: boolean;
    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,
    canManage,
    onDelete,
    onEdit,
    onRunNow,
    onToggleStatus,
}: RecurringTemplatesCardListProps) {
    return (
        <ul className="flex flex-col gap-3 p-4">
            {tasks.map((task) => {
                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>
                            {canManage && (
                                <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-lg border shadow-xl"
                                    >
                                        {/* Template yang dijeda ditolak server, jadi aksinya tidak ditawarkan. */}
                                        {task.status === 'Active' && (
                                            <>
                                                <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>

                        <AssigneeAvatarStack
                            assignees={task.assignees}
                            max={2}
                            size="sm"
                        />

                        <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 === 'Daily'
                                        ? `Daily · ${describeDailyDays(task.schedule_days)}`
                                        : 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>
    );
}