import {
    MoreVertical,
    Pencil,
    Play,
    Plus,
    RefreshCcw,
    Repeat,
    Search,
    SlidersHorizontal,
    Trash2,
    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,
    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 { describeDailyDays } from './DailyDaysSelect';
import { RecurringTemplatesCardList } from './RecurringTemplatesCardList';

interface RecurringTemplatesSectionProps {
    tasks: RecurringTask[];
    pagination: PaginationData;
    /**
     * Boleh membuat, mengubah, menjalankan, dan menghapus template.
     *
     * Terpisah dari sekadar boleh melihat seksi ini: super admin membukanya
     * read-only, dan server memang menolak aksi kelolanya lewat policy `manage`.
     */
    canManage: boolean;
    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,
    canManage,
    searchQuery,
    statusFilter,
    onCreate,
    onDelete,
    onEdit,
    onRunNow,
    onRunAll,
    onSearchChange,
    onStatusChange,
    onToggleStatus,
}: RecurringTemplatesSectionProps) {
    const hasActiveFilters = searchQuery !== '' || statusFilter !== 'all';

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

    return (
        <div className="space-y-3">
            <div className="space-y-3">
                <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: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 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">
                        {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="Active">
                                        Active
                                    </DropdownMenuRadioItem>
                                    <DropdownMenuRadioItem value="Paused">
                                        Paused
                                    </DropdownMenuRadioItem>
                                </DropdownMenuRadioGroup>
                            </DropdownMenuContent>
                        </DropdownMenu>
                        {canManage && (
                            <>
                                <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>

                {/* 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: {statusFilter}
                                <button
                                    onClick={() => onStatusChange('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">
                            <RecurringTemplatesCardList
                                tasks={tasks}
                                canManage={canManage}
                                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>
                                    {canManage && (
                                        <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}
                                                {/* Tanpa ini seluruh template
                                                    Daily terbaca sama saja,
                                                    padahal harinya bisa beda. */}
                                                {task.frequency === 'Daily' && (
                                                    <span className="block text-xs font-normal">
                                                        {describeDailyDays(
                                                            task.schedule_days,
                                                        )}
                                                    </span>
                                                )}
                                            </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>
                                                <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.required_proof_type &&
                                                task.required_proof_type !==
                                                    'none'
                                                    ? task.required_proof_type
                                                    : 'None'}
                                            </TableCell>
                                            {canManage && (
                                                <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-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>
                                                </TableCell>
                                            )}
                                        </TableRow>
                                    );
                                })}
                            </TableBody>
                        </Table>
                    </>
                ) : (
                    // Divisi yang belum punya template sama sekali tidak boleh
                    // disambut kalimat yang menyalahkan filter yang tidak pernah
                    // dipasang — di sanalah justru ajakan membuat yang pertama.
                    <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">
                            <Repeat className="h-6 w-6" />
                        </div>
                        {hasActiveFilters ? (
                            <p className="font-medium">
                                No recurring tasks found matching your filters.
                            </p>
                        ) : (
                            <>
                                <p className="font-medium">
                                    No recurring templates yet.
                                </p>
                                <p className="mt-1 text-sm">
                                    Templates generate routine work on a
                                    schedule.
                                </p>
                                {canManage && (
                                    <Button
                                        onClick={onCreate}
                                        className="mt-4 h-9 gap-2 rounded-lg"
                                    >
                                        <Plus size={16} />
                                        New Recurring Task
                                    </Button>
                                )}
                            </>
                        )}
                    </div>
                )}
            </div>
            <DataPagination pagination={pagination} only={['data']} />
        </div>
    );
}