import { CheckCircle2, Search, SlidersHorizontal, XCircle } from 'lucide-react';

import { AssigneeAvatarStack } from '@/components/AssigneeAvatarStack';
import { DataPagination } from '@/components/DataPagination';
import { TaskPriorityBadge } from '@/components/TaskPriorityBadge';
import { TaskStatusBadge } from '@/components/TaskStatusBadge';
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 { 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) {
    const hasActiveFilters =
        searchQuery !== '' ||
        statusFilter !== 'all' ||
        priorityFilter !== 'all';

    const clearAllFilters = () => {
        onSearchChange('');
        onStatusChange('all');
        onPriorityChange('all');
    };

    const getStatusLabel = (status: string) => {
        const labels: Record<string, string> = {
            waiting: 'Waiting',
            in_progress: 'In Progress',
            review: 'Review',
            completed: 'Completed',
        };

        return labels[status] || status;
    };

    const getPriorityLabel = (priority: string) => {
        const labels: Record<string, string> = {
            '4': 'Urgent',
            '3': 'High',
            '2': 'Medium',
            '1': 'Low',
        };

        return labels[priority] || priority;
    };

    return (
        <div className="space-y-3">
            <div className="space-y-3">
                <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:flex-row sm:items-center">
                    <div className="relative flex-1">
                        <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>
                    <div className="flex shrink-0 items-center gap-2">
                        {hasActiveFilters && (
                            <Button
                                variant="secondary"
                                size="sm"
                                className="h-9 gap-2 rounded-lg px-3 text-xs font-bold"
                                onClick={clearAllFilters}
                            >
                                <XCircle size={14} />
                                Clear Filters
                            </Button>
                        )}
                        <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">
                                        Urgent
                                    </DropdownMenuRadioItem>
                                    <DropdownMenuRadioItem value="3">
                                        High
                                    </DropdownMenuRadioItem>
                                    <DropdownMenuRadioItem value="2">
                                        Medium
                                    </DropdownMenuRadioItem>
                                    <DropdownMenuRadioItem value="1">
                                        Low
                                    </DropdownMenuRadioItem>
                                </DropdownMenuRadioGroup>
                            </DropdownMenuContent>
                        </DropdownMenu>
                    </div>
                </div>

                {/* Active Filter Indicators */}
                {hasActiveFilters && (
                    <div className="flex flex-wrap gap-2">
                        {searchQuery && (
                            <Badge
                                variant="secondary"
                                className="gap-1 px-2 py-1 text-xs"
                            >
                                Search: "{searchQuery}"
                                <button
                                    onClick={() => onSearchChange('')}
                                    className="ml-1 cursor-pointer hover:text-foreground"
                                >
                                    <XCircle size={12} />
                                </button>
                            </Badge>
                        )}
                        {statusFilter !== 'all' && (
                            <Badge
                                variant="secondary"
                                className="gap-1 px-2 py-1 text-xs"
                            >
                                Status: {getStatusLabel(statusFilter)}
                                <button
                                    onClick={() => onStatusChange('all')}
                                    className="ml-1 cursor-pointer hover:text-foreground"
                                >
                                    <XCircle size={12} />
                                </button>
                            </Badge>
                        )}
                        {priorityFilter !== 'all' && (
                            <Badge
                                variant="secondary"
                                className="gap-1 px-2 py-1 text-xs"
                            >
                                Priority: {getPriorityLabel(priorityFilter)}
                                <button
                                    onClick={() => onPriorityChange('all')}
                                    className="ml-1 cursor-pointer hover:text-foreground"
                                >
                                    <XCircle size={12} />
                                </button>
                            </Badge>
                        )}
                    </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>
                                            <AssigneeAvatarStack
                                                assignees={task.assignees}
                                                max={2}
                                                size="sm"
                                                withTooltip
                                                emptyClassName="not-italic font-normal"
                                            />
                                        </TableCell>
                                        <TableCell className="text-xs font-medium text-muted-foreground">
                                            {task.requiredProofType &&
                                            task.requiredProofType !== 'none'
                                                ? task.requiredProofType
                                                : 'None'}
                                        </TableCell>
                                    </TableRow>
                                ))}
                            </TableBody>
                        </Table>
                    </>
                ) : (
                    // Daftar kosong bukan selalu salah filter: sebelum template
                    // pertama menerbitkan sesuatu, seksi ini memang kosong.
                    <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>
                        {hasActiveFilters ? (
                            <p className="font-medium">
                                No routine work found matching your filters.
                            </p>
                        ) : (
                            <>
                                <p className="font-medium">
                                    No routine work yet.
                                </p>
                                <p className="mt-1 text-sm">
                                    Work appears here once a recurring template
                                    runs.
                                </p>
                            </>
                        )}
                    </div>
                )}
            </div>
            <DataPagination pagination={pagination} only={['data']} />
        </div>
    );
}