import { CheckCircle2, Search, SlidersHorizontal } 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,
    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, RoutineWorkTask } from '@/types/recurring-task';
import { RecurringTasksPagination } from './RecurringTasksPagination';
import { RoutineWorkCardList } from './RoutineWorkCardList';

interface RoutineWorkSectionProps {
    tasks: RoutineWorkTask[];
    pagination: PaginationData;
    searchQuery: string;
    statusFilter: string;
    priorityFilter: string;
    onSearchChange: (value: string) => void;
    onStatusChange: (value: string) => void;
    onPriorityChange: (value: string) => void;
    onViewTask: (taskId: string) => void;
}

export function RoutineWorkSection({
    tasks,
    pagination,
    searchQuery,
    statusFilter,
    priorityFilter,
    onSearchChange,
    onStatusChange,
    onPriorityChange,
    onViewTask,
}: RoutineWorkSectionProps) {
    return (
        <div className="space-y-3">
            <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <h1 className="text-xl font-bold tracking-tight text-foreground">
                        Routine Work
                    </h1>
                    <p className="text-sm text-muted-foreground">
                        Recurring tasks that are ready to be worked on.
                    </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 routine work..."
                            className="h-9 rounded-lg bg-background pl-9"
                            value={searchQuery}
                            onChange={(event) =>
                                onSearchChange(event.target.value)
                            }
                        />
                    </div>
                    <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="waiting">
                                    Waiting
                                </DropdownMenuRadioItem>
                                <DropdownMenuRadioItem value="in_progress">
                                    In Progress
                                </DropdownMenuRadioItem>
                                <DropdownMenuRadioItem value="review">
                                    Review
                                </DropdownMenuRadioItem>
                                <DropdownMenuRadioItem value="completed">
                                    Completed
                                </DropdownMenuRadioItem>
                            </DropdownMenuRadioGroup>
                            <DropdownMenuSeparator />
                            <DropdownMenuLabel className="text-[10px] font-bold tracking-wider text-muted-foreground uppercase">
                                Filter by Priority
                            </DropdownMenuLabel>
                            <DropdownMenuRadioGroup
                                value={priorityFilter}
                                onValueChange={onPriorityChange}
                            >
                                <DropdownMenuRadioItem value="all">
                                    All Priority
                                </DropdownMenuRadioItem>
                                <DropdownMenuRadioItem value="4">
                                    Critical
                                </DropdownMenuRadioItem>
                                <DropdownMenuRadioItem value="3">
                                    High
                                </DropdownMenuRadioItem>
                                <DropdownMenuRadioItem value="2">
                                    Medium
                                </DropdownMenuRadioItem>
                                <DropdownMenuRadioItem value="1">
                                    Low
                                </DropdownMenuRadioItem>
                            </DropdownMenuRadioGroup>
                        </DropdownMenuContent>
                    </DropdownMenu>
                </div>
            </div>

            <div className="overflow-hidden rounded-lg border bg-background">
                {tasks.length > 0 ? (
                    <>
                        <div className="md:hidden">
                            <RoutineWorkCardList
                                tasks={tasks}
                                onViewTask={onViewTask}
                            />
                        </div>
                        <Table className="hidden md:table">
                            <TableHeader>
                                <TableRow className="hover:bg-transparent">
                                    <TableHead>Code</TableHead>
                                    <TableHead>Work Name</TableHead>
                                    <TableHead>Status</TableHead>
                                    <TableHead>Priority</TableHead>
                                    <TableHead>Deadline</TableHead>
                                    <TableHead>Assigned To</TableHead>
                                    <TableHead>Proof</TableHead>
                                </TableRow>
                            </TableHeader>
                            <TableBody>
                                {tasks.map((task) => (
                                    <TableRow
                                        key={task.id}
                                        className="cursor-pointer hover:bg-muted/50"
                                        onClick={() => onViewTask(task.id)}
                                    >
                                        <TableCell className="font-mono text-xs text-muted-foreground">
                                            {task.code}
                                        </TableCell>
                                        <TableCell className="font-semibold text-foreground">
                                            {task.title}
                                        </TableCell>
                                        <TableCell>
                                            <TaskStatusBadge
                                                status={task.status}
                                            />
                                        </TableCell>
                                        <TableCell>
                                            <TaskPriorityBadge
                                                level={task.priorityLevel}
                                            />
                                        </TableCell>
                                        <TableCell className="text-sm font-medium text-muted-foreground">
                                            {formatDateTime(
                                                task.dueDate,
                                                'N/A',
                                            )}
                                        </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.id
                                                                }
                                                                variant="outline"
                                                                className="rounded-lg text-[10px]"
                                                            >
                                                                {assignee.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.requiredProofType &&
                                            task.requiredProofType !== 'none'
                                                ? task.requiredProofType
                                                : 'None'}
                                        </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">
                            <CheckCircle2 className="h-6 w-6" />
                        </div>
                        <p className="font-medium">
                            No routine work found matching your filters.
                        </p>
                    </div>
                )}
            </div>
            <RecurringTasksPagination pagination={pagination} />
        </div>
    );
}