import {
    MoreVertical,
    Pencil,
    Play,
    Plus,
    RefreshCcw,
    Search,
    SlidersHorizontal,
    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,
    DropdownMenuLabel,
    DropdownMenuRadioGroup,
    DropdownMenuRadioItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Input } from '@/components/ui/input';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import { formatDateTime } from '@/lib/utils';
import type { PaginationData, RecurringTask } from '@/types/recurring-task';
import { RecurringTasksPagination } from './RecurringTasksPagination';
import { RecurringTemplatesCardList } from './RecurringTemplatesCardList';

interface RecurringTemplatesSectionProps {
    tasks: RecurringTask[];
    pagination: PaginationData;
    searchQuery: string;
    statusFilter: string;
    onCreate: () => void;
    onDelete: (task: RecurringTask) => void;
    onEdit: (task: RecurringTask) => void;
    onRunNow: (task: RecurringTask) => void;
    onRunAll: () => void;
    onSearchChange: (value: string) => void;
    onStatusChange: (value: string) => void;
    onToggleStatus: (task: RecurringTask) => void;
}

export function RecurringTemplatesSection({
    tasks,
    pagination,
    searchQuery,
    statusFilter,
    onCreate,
    onDelete,
    onEdit,
    onRunNow,
    onRunAll,
    onSearchChange,
    onStatusChange,
    onToggleStatus,
}: RecurringTemplatesSectionProps) {
    return (
        <div className="space-y-3">
            <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <h2 className="text-xl font-bold tracking-tight text-foreground">
                        Recurring Templates
                    </h2>
                    <p className="text-sm text-muted-foreground">
                        Schedules that generate routine work.
                    </p>
                </div>
                <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center">
                    <div className="relative flex-1 sm:w-80">
                        <Search
                            className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground"
                            size={16}
                        />
                        <Input
                            placeholder="Search recurring tasks..."
                            className="h-9 rounded-lg bg-background pl-9"
                            value={searchQuery}
                            onChange={(event) =>
                                onSearchChange(event.target.value)
                            }
                        />
                    </div>
                    <div className="flex shrink-0 items-center gap-2">
                        <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                                <Button
                                    variant="outline"
                                    className="h-9 gap-2 rounded-lg bg-background"
                                >
                                    <SlidersHorizontal size={16} />
                                    Filters
                                </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent
                                align="end"
                                className="w-56 rounded-lg"
                            >
                                <DropdownMenuLabel className="text-[10px] font-bold tracking-wider text-muted-foreground uppercase">
                                    Filter by Status
                                </DropdownMenuLabel>
                                <DropdownMenuRadioGroup
                                    value={statusFilter}
                                    onValueChange={onStatusChange}
                                >
                                    <DropdownMenuRadioItem value="all">
                                        All Status
                                    </DropdownMenuRadioItem>
                                    <DropdownMenuRadioItem value="Active">
                                        Active
                                    </DropdownMenuRadioItem>
                                    <DropdownMenuRadioItem value="Paused">
                                        Paused
                                    </DropdownMenuRadioItem>
                                </DropdownMenuRadioGroup>
                            </DropdownMenuContent>
                        </DropdownMenu>
                        <Button
                            variant="outline"
                            onClick={onRunAll}
                            className="h-9 gap-2 rounded-lg bg-background"
                            title="Run All Active"
                        >
                            <Play size={16} />
                            <span className="hidden sm:inline">
                                Run All Active
                            </span>
                        </Button>
                        <Button
                            onClick={onCreate}
                            className="h-9 gap-2 rounded-lg"
                            title="New Recurring Task"
                        >
                            <Plus size={16} />
                            <span className="hidden sm:inline">
                                New Recurring Task
                            </span>
                        </Button>
                    </div>
                </div>
            </div>

            <div className="overflow-hidden rounded-lg border bg-background">
                {tasks.length > 0 ? (
                    <>
                        <div className="md:hidden">
                            <RecurringTemplatesCardList
                                tasks={tasks}
                                onDelete={onDelete}
                                onEdit={onEdit}
                                onRunNow={onRunNow}
                                onToggleStatus={onToggleStatus}
                            />
                        </div>
                        <Table className="hidden md:table">
                            <TableHeader>
                                <TableRow className="hover:bg-transparent">
                                    <TableHead>Task Name</TableHead>
                                    <TableHead className="w-[10em]">
                                        Status
                                    </TableHead>
                                    <TableHead>Frequency</TableHead>
                                    <TableHead>Next Run</TableHead>
                                    <TableHead>Priority</TableHead>
                                    <TableHead>Generated</TableHead>
                                    <TableHead>Assigned To</TableHead>
                                    <TableHead>Proof</TableHead>
                                    <TableHead className="w-12.5 text-right">
                                        Actions
                                    </TableHead>
                                </TableRow>
                            </TableHeader>
                            <TableBody>
                                {tasks.map((task) => {
                                    return (
                                        <TableRow
                                            key={task.id}
                                            className="group hover:bg-muted/50"
                                        >
                                            <TableCell className="font-semibold text-foreground">
                                                {task.name}
                                            </TableCell>
                                            <TableCell>
                                                <TaskStatusBadge
                                                    status={task.status}
                                                />
                                            </TableCell>
                                            <TableCell className="text-sm font-medium text-muted-foreground">
                                                {task.frequency}
                                            </TableCell>
                                            <TableCell className="text-sm font-medium text-muted-foreground">
                                                {formatDateTime(
                                                    task.next_run_at,
                                                    'N/A',
                                                )}
                                            </TableCell>
                                            <TableCell>
                                                <TaskPriorityBadge
                                                    level={task.priority_level}
                                                />
                                            </TableCell>
                                            <TableCell className="font-mono text-xs text-muted-foreground">
                                                {task.generated_tasks_count ??
                                                    0}
                                            </TableCell>
                                            <TableCell>
                                                <div className="flex max-w-52 flex-wrap gap-1">
                                                    {task.assignees?.length ? (
                                                        task.assignees
                                                            .slice(0, 2)
                                                            .map((assignee) => (
                                                                <Badge
                                                                    key={
                                                                        assignee.user_id
                                                                    }
                                                                    variant="outline"
                                                                    className="rounded-lg text-[10px]"
                                                                >
                                                                    {
                                                                        assignee.user_name
                                                                    }
                                                                </Badge>
                                                            ))
                                                    ) : (
                                                        <span className="text-xs text-muted-foreground">
                                                            Unassigned
                                                        </span>
                                                    )}
                                                    {(task.assignees?.length ??
                                                        0) > 2 && (
                                                        <Badge
                                                            variant="secondary"
                                                            className="rounded-lg text-[10px]"
                                                        >
                                                            +
                                                            {task.assignees
                                                                .length - 2}
                                                        </Badge>
                                                    )}
                                                </div>
                                            </TableCell>
                                            <TableCell className="text-xs font-medium text-muted-foreground">
                                                {task.required_proof_type &&
                                                task.required_proof_type !==
                                                    'none'
                                                    ? task.required_proof_type
                                                    : 'None'}
                                            </TableCell>
                                            <TableCell className="text-right">
                                                <DropdownMenu>
                                                    <DropdownMenuTrigger
                                                        asChild
                                                    >
                                                        <Button
                                                            variant="ghost"
                                                            size="icon"
                                                            className="h-8 w-8 opacity-0 transition-opacity group-hover:opacity-100"
                                                        >
                                                            <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>
                                            </TableCell>
                                        </TableRow>
                                    );
                                })}
                            </TableBody>
                        </Table>
                    </>
                ) : (
                    <div className="flex flex-col items-center justify-center py-12 text-center text-muted-foreground">
                        <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
                            <Search className="h-6 w-6" />
                        </div>
                        <p className="font-medium">
                            No recurring tasks found matching your filters.
                        </p>
                    </div>
                )}
            </div>
            <RecurringTasksPagination pagination={pagination} />
        </div>
    );
}