import TaskDetailsModal from '@admin/components/addOns/addon-sidebars/tasks/task-details-modal';
import { NormalizedTaskPayload } from '@admin/components/addOns/addon-sidebars/tasks/TaskForm';
import { DataTable } from '@admin/components/datatable';
import GeneralHeader from '@admin/components/general-header';
import TaskAddModal from '@admin/components/modals/task-add-modal';
import StatusSelector, { StatusOption } from '@admin/components/status-selector';
import { Avatar, AvatarFallback, AvatarImage } from '@admin/components/ui/avatar';
import { Button } from '@admin/components/ui/button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@admin/components/ui/dropdown-menu';
import { Label } from '@admin/components/ui/label';
import { RadioGroup, RadioGroupItem } from '@admin/components/ui/radio-group';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@admin/components/ui/select';
import { mockTasks } from '@admin/data/static';
import { cn } from '@admin/lib/utils';
import type { PaginatedData } from '@admin/types';
import { Head } from '@inertiajs/react';
import type { ColumnDef } from '@tanstack/react-table';
import { CheckCircle, CircleCheckBig, Edit, FileText, FolderSearch, MoreHorizontal, Plus, Trash2, Users, XCircle } from 'lucide-react';
import { ReactNode, useCallback, useState } from 'react';

interface Task {
    id: string;
    name: string;
    description: string;
    date: string;
    status: 'Low' | 'Team' | 'Update' | 'High' | 'Medium';
    assignType: 'Assign to Me' | 'Assign by Me' | 'Assign to Team';
    people: string[];
    completed?: boolean;
    important?: boolean;
    deleted?: boolean;
}

const tagCounts = {
    Team: 18,
    Update: 22,
    Low: 16,
    Medium: 5,
    High: 2,
};

type ActiveTab = 'all' | 'completed' | 'important' | 'trash';

function Index() {
    const [searchQuery, setSearchQuery] = useState('');
    const [activeTab, setActiveTab] = useState<ActiveTab>('all');
    const [isAddTaskModalOpen, setIsAddTaskModalOpen] = useState(false);
    const [isTaskDetailsModalOpen, setIsTaskDetailsModalOpen] = useState(false);
    const [modalMode, setModalMode] = useState<'add' | 'edit'>('add');
    const [tasks, setTasks] = useState<Task[]>(mockTasks);
    const [editingTask, setEditingTask] = useState<any | null>(null);

    const getFilteredTasks = () => {
        let filtered = tasks;

        switch (activeTab) {
            case 'completed':
                filtered = tasks.filter((task) => task.completed);
                break;
            case 'important':
                filtered = tasks.filter((task) => task.important);
                break;
            case 'trash':
                filtered = tasks.filter((task) => task.deleted);
                break;
            case 'all':
            default:
                filtered = tasks.filter((task) => !task.deleted);
                break;
        }

        // Apply search filter
        if (searchQuery) {
            filtered = filtered.filter(
                (task) =>
                    task.name.toLowerCase().includes(searchQuery.toLowerCase()) || task.description.toLowerCase().includes(searchQuery.toLowerCase()),
            );
        }

        return filtered;
    };

    const filteredTasks = getFilteredTasks();
    const handleUserStatus = (id: string, status: string) => {
        // router.get(route('users.status', id));
    };
    // Define DataTable columns
    const columns: ColumnDef<Task, any>[] = [
        {
            accessorKey: 'name',
            header: 'Name',
            enableSorting: true,
            cell: ({ row }) => (
                <div className="space-y-1">
                    <div className={cn('text-sm font-medium', row.original.completed && 'text-gray-500 line-through')}>{row.original.name}</div>
                    <div className="text-xs text-gray-500">{row.original.description}</div>
                </div>
            ),
        },
        {
            accessorKey: 'date',
            header: 'Due Date',
            enableSorting: true,
            cell: ({ row }) => <div className="text-sm text-gray-900">{row.original.date}</div>,
        },
        {
            accessorKey: 'status',
            header: 'Status',
            enableSorting: true,
            cell: ({ row }) => {
                // Map string status to numeric StatusEnum value
                const statusMap: Record<string, number> = {
                    'Low': 1,      // ACTIVE
                    'Team': 1,     // ACTIVE
                    'Update': 1,   // ACTIVE
                    'Medium': 1,   // ACTIVE
                    'High': 18,    // IMPORTANT
                };
                const status = typeof row.original.status === 'number' ? row.original.status : (statusMap[row.original.status] || 20);

                // Task status options - matching UserList pattern
                const taskStatusOptions: StatusOption[] = [
                    {
                        value: 20,
                        label: 'Todo',
                    },
                    {
                        value: 5,
                        label: 'Completed',
                    },
                    {
                        value: 11,
                        label: 'Archived',
                    },
                    {
                        value: 18,
                        label: 'Important',
                    },
                ];

                return (
                    <StatusSelector id={row.original.id} handleStatusUpdate={handleUserStatus} status={status} statusOptions={taskStatusOptions} />
                );
            },
        },
        {
            accessorKey: 'assignType',
            header: 'Assign',
            enableSorting: true,
            cell: ({ row }) => (
                <div className="flex -space-x-2">
                    {row.original.people.slice(0, 3).map((person, index) => (
                        <Avatar key={index} className="h-8 w-8 border-2 border-white">
                            <AvatarImage src={person || '/placeholder.svg'} />
                            <AvatarFallback>U</AvatarFallback>
                        </Avatar>
                    ))}
                    {row.original.people.length > 3 && (
                        <div className="flex h-8 w-8 items-center justify-center rounded-full border-2 border-white bg-gray-100 text-xs text-gray-600">
                            +{row.original.people.length - 3}
                        </div>
                    )}
                </div>
            ),
        },
        {
            id: 'actions',
            header: 'Action',
            enableSorting: false,
            cell: ({ row }) => (
                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="sm">
                            <MoreHorizontal className="h-4 w-4" />
                        </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                        <DropdownMenuItem
                            onClick={() => {
                                const t = row.original as Task;
                                // map existing task into form shape expected by TaskAddModal/Form
                                setEditingTask({
                                    id: t.id,
                                    title: t.name,
                                    description: t.description,
                                    status:
                                        t.assignType === 'Assign to Me'
                                            ? 'assign-to-me'
                                            : t.assignType === 'Assign by Me'
                                              ? 'assign-by-me'
                                              : 'assign-to-team',
                                    tag: (t.status || 'team').toLowerCase(),
                                    priority: t.important ? 'high' : 'medium',
                                } as any);
                                setModalMode('edit');
                                setIsAddTaskModalOpen(true);
                            }}
                        >
                            <Edit className="h-3 w-3 text-blue-500" />
                            Edit
                        </DropdownMenuItem>
                        <DropdownMenuItem
                            onClick={() => {
                                const t = row.original as Task;
                                // const copy = { ...t, id: String(Date.now()), name: `${t.name} (Copy)` } as Task;
                                // setTasks((s) => [copy, ...s]);
                            }}
                        >
                            <CircleCheckBig className="h-3 w-3 text-success" />
                            Mark as done
                        </DropdownMenuItem>
                        <DropdownMenuItem
                            className="text-red-600"
                            onClick={() => {
                                const t = row.original as Task;
                                setTasks((s) => s.filter((task) => task.id !== t.id));
                            }}
                        >
                            <Trash2 className="h-3 w-3 text-red-500" />
                            Delete
                        </DropdownMenuItem>
                    </DropdownMenuContent>
                </DropdownMenu>
            ),
        },
    ];

    // Create a client-side paginatedData object for the DataTable
    const perPage = 10;
    const currentPage = 1;
    const total = filteredTasks.length;
    const lastPage = Math.max(1, Math.ceil(total / perPage));
    const paginatedData: PaginatedData<Task> = {
        data: filteredTasks.slice((currentPage - 1) * perPage, currentPage * perPage),
        queryParams: { page: currentPage, per_page: perPage },
        meta: {
            from: total === 0 ? 0 : (currentPage - 1) * perPage + 1,
            to: Math.min(total, currentPage * perPage),
            total: total,
            current_page: currentPage,
            last_page: lastPage,
        },
        links: {
            prev: currentPage > 1 ? 'prev' : null,
            next: currentPage < lastPage ? 'next' : null,
        },
        userSummary: [],
    };
    const bulkActions = [
        {
            label: 'Mark all as done',
            icon: CircleCheckBig,
            confirm: false,
            className: 'text-success',
            onClick: (items: any) => {
                console.log('🚀 ~ items:', items);
            },
        },

        {
            label: 'Delete selected',
            icon: Trash2,
            confirm: true,
            className: 'text-red-600',
            onClick: (items: any) => {
                console.log('🚀 ~ items:', items);
            },
        },
    ].filter(Boolean);
    const handleTaskSubmit = useCallback(
        (payload: NormalizedTaskPayload) => {
            setTasks((s) => {
                if (modalMode === 'add') {
                    const id = String(Date.now());
                    const newTask: Task = {
                        id,
                        name: payload.name || 'Untitled',
                        description: payload.description || '',
                        date: payload.date || new Date().toDateString(),
                        status: (payload.status as any) || 'Low',
                        assignType: (payload.assignType as any) || 'Assign to Me',
                        people: payload.people || [],
                    };
                    return [newTask, ...s];
                }

                if (modalMode === 'edit' && editingTask) {
                    return s.map((t) =>
                        t.id === editingTask.id ? { ...t, name: payload.name || t.name, description: payload.description || t.description } : t,
                    );
                }

                return s;
            });

            setEditingTask(null);
        },
        [modalMode, editingTask],
    );
    return (
        <div className="flex h-full w-full flex-col bg-card">
            <Head title="Tasks" />
            <div className="border-b border-gray-200 bg-card">
                <GeneralHeader title="Tasks" description="Manage your tasks efficiently" page="Tasks" />
            </div>
            <div className="flex h-full min-h-0 flex-1 flex-col items-stretch overflow-hidden md:flex-row md:items-start">
                {/* Mobile: compact dropdown for small screens */}
                <div className="flex w-full items-center justify-between border-b border-muted p-2 md:hidden md:w-full">
                    <div className="flex items-center gap-2">
                        <Button
                            size="sm"
                            variant="outline"
                            className="flex items-center"
                            onClick={() => {
                                setModalMode('add');
                                setEditingTask(null);
                                setIsAddTaskModalOpen(true);
                            }}
                        >
                            <Plus className="mr-2 h-4 w-4" />
                            Add New
                        </Button>
                    </div>

                    <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                            <Button size="sm">Filters</Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end" className="w-64">
                            <div className="space-y-4 px-4">
                                <div className="space-y-2">
                                    <div
                                        className={cn(
                                            'flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2',
                                            activeTab === 'all' ? 'bg-gray-100 font-medium text-gray-900' : 'hover:bg-gray-50',
                                        )}
                                        onClick={() => setActiveTab('all')}
                                    >
                                        <FileText className="h-4 w-4" />
                                        <span className="text-sm font-medium">All Task</span>
                                    </div>
                                    <div
                                        className={cn(
                                            'flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2',
                                            activeTab === 'completed' ? 'bg-gray-100 font-medium text-gray-900' : 'hover:bg-gray-50',
                                        )}
                                        onClick={() => setActiveTab('completed')}
                                    >
                                        <FolderSearch className="h-4 w-4" />
                                        <span className="text-sm font-medium">Your Task</span>
                                    </div>
                                    <div
                                        className={cn(
                                            'flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2',
                                            activeTab === 'important' ? 'bg-gray-100 font-medium text-gray-900' : 'hover:bg-gray-50',
                                        )}
                                        onClick={() => setActiveTab('important')}
                                    >
                                        <Users className="h-4 w-4" />
                                        <span className="text-sm font-medium">Team Task</span>
                                    </div>
                                </div>

                                {/* Status Filter */}
                                <div className="my-6 space-y-2">
                                    <h3 className="text-sm font-semibold text-gray-900">Status</h3>
                                    <Select>
                                        <SelectTrigger>
                                            <SelectValue placeholder="Select Status" />
                                        </SelectTrigger>
                                        <SelectContent>
                                            <SelectItem value="low">Low</SelectItem>
                                            <SelectItem value="medium">Medium</SelectItem>
                                            <SelectItem value="high">High</SelectItem>
                                        </SelectContent>
                                    </Select>
                                </div>

                                {/* Assign To */}
                                <div className="my-6 space-y-2">
                                    <h3 className="text-sm font-semibold text-gray-900">Assign To</h3>
                                    <RadioGroup defaultValue="others">
                                        <div className="flex items-center gap-6">
                                            <div className="flex items-center gap-2">
                                                <RadioGroupItem value="self" id="self" className="h-4 w-4" />
                                                <Label htmlFor="self" className="text-sm font-normal">
                                                    Self
                                                </Label>
                                            </div>
                                            <div className="flex items-center gap-2">
                                                <RadioGroupItem value="others" id="others" className="h-4 w-4" />
                                                <Label htmlFor="others" className="text-sm font-normal">
                                                    Others
                                                </Label>
                                            </div>
                                        </div>
                                    </RadioGroup>
                                </div>

                                {/* Tags */}
                                <div className="space-y-3">
                                    <h3 className="border-b pb-2 text-sm font-semibold text-gray-900">Tags</h3>
                                    <div className="space-y-3">
                                        {Object.entries(tagCounts).map(([tag, count]) => (
                                            <div key={tag} className="flex items-center justify-between">
                                                <span
                                                    className={cn(
                                                        'py-1 text-sm font-medium',
                                                        tag === 'Team' && 'text-blue-800',
                                                        tag === 'Update' && 'text-cyan-800',
                                                        tag === 'Low' && 'text-success-800',
                                                        tag === 'Medium' && 'text-purple-800',
                                                        tag === 'High' && 'text-red-800',
                                                    )}
                                                >
                                                    {tag}
                                                </span>
                                                <span
                                                    className={cn(
                                                        'rounded-lg border px-2 py-1 text-xs',
                                                        tag === 'Team' && 'border-blue-200 bg-blue-100 text-blue-800',
                                                        tag === 'Update' && 'border-cyan-200 bg-cyan-100 text-cyan-800',
                                                        tag === 'Low' && 'bg-success-100 text-success-800 border-success-200',
                                                        tag === 'Medium' && 'border-purple-200 bg-purple-100 text-purple-800',
                                                        tag === 'High' && 'border-red-200 bg-red-100 text-red-800',
                                                        // fallback
                                                        !['Team', 'Update', 'Low', 'Medium', 'High'].includes(tag) &&
                                                            'border-gray-200 bg-gray-100 text-gray-600',
                                                    )}
                                                >
                                                    {count}
                                                </span>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            </div>
                        </DropdownMenuContent>
                    </DropdownMenu>
                </div>
                {/* Sidebar */}
                <div className="sticky top-0 hidden h-full w-80 flex-col self-start overflow-y-auto border-r border-muted md:flex">
                    {/* Header */}
                    <div className="p-2">
                        <Button
                            className="w-full bg-success text-white hover:bg-success/80"
                            onClick={() => {
                                setModalMode('add');
                                setEditingTask(null);
                                setIsAddTaskModalOpen(true);
                            }}
                        >
                            <Plus className="mr-2 h-4 w-4" />
                            Add New Task
                        </Button>
                    </div>
                    {/* Navigation */}
                    <div className="space-y-4 px-4">
                        <div className="space-y-2">
                            <div
                                className={cn(
                                    'flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2',
                                    activeTab === 'all' ? 'bg-gray-100 font-medium text-gray-900' : 'hover:bg-gray-50',
                                )}
                                onClick={() => setActiveTab('all')}
                            >
                                <FileText className="h-4 w-4" />
                                <span className="text-sm font-medium">All Task</span>
                            </div>
                            <div
                                className={cn(
                                    'flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2',
                                    activeTab === 'completed' ? 'bg-gray-100 font-medium text-gray-900' : 'hover:bg-gray-50',
                                )}
                                onClick={() => setActiveTab('completed')}
                            >
                                <FolderSearch className="h-4 w-4" />
                                <span className="text-sm font-medium">Your Task</span>
                            </div>
                            <div
                                className={cn(
                                    'flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2',
                                    activeTab === 'important' ? 'bg-gray-100 font-medium text-gray-900' : 'hover:bg-gray-50',
                                )}
                                onClick={() => setActiveTab('important')}
                            >
                                <Users className="h-4 w-4" />
                                <span className="text-sm font-medium">Team Task</span>
                            </div>
                        </div>

                        {/* Status Filter */}
                        <div className="my-6 space-y-2">
                            <h3 className="text-sm font-semibold text-gray-900">Status</h3>
                            <Select>
                                <SelectTrigger>
                                    <SelectValue placeholder="Select Status" />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="low">Low</SelectItem>
                                    <SelectItem value="medium">Medium</SelectItem>
                                    <SelectItem value="high">High</SelectItem>
                                </SelectContent>
                            </Select>
                        </div>

                        {/* Assign To */}
                        <div className="my-6 space-y-2">
                            <h3 className="text-sm font-semibold text-gray-900">Assign To</h3>
                            <RadioGroup defaultValue="others">
                                <div className="flex items-center gap-6">
                                    <div className="flex items-center gap-2">
                                        <RadioGroupItem value="self" id="self" className="h-4 w-4" />
                                        <Label htmlFor="self" className="text-sm font-normal">
                                            Self
                                        </Label>
                                    </div>
                                    <div className="flex items-center gap-2">
                                        <RadioGroupItem value="others" id="others" className="h-4 w-4" />
                                        <Label htmlFor="others" className="text-sm font-normal">
                                            Others
                                        </Label>
                                    </div>
                                </div>
                            </RadioGroup>
                        </div>

                        {/* Tags */}
                        <div className="space-y-3">
                            <h3 className="border-b pb-2 text-sm font-semibold text-gray-900">Tags</h3>
                            <div className="space-y-3">
                                {Object.entries(tagCounts).map(([tag, count]) => (
                                    <div key={tag} className="flex items-center justify-between">
                                        <span
                                            className={cn(
                                                'py-1 text-sm font-medium',
                                                tag === 'Team' && 'text-blue-800',
                                                tag === 'Update' && 'text-cyan-800',
                                                tag === 'Low' && 'text-success-800',
                                                tag === 'Medium' && 'text-purple-800',
                                                tag === 'High' && 'text-red-800',
                                            )}
                                        >
                                            {tag}
                                        </span>
                                        <span
                                            className={cn(
                                                'rounded-lg border px-2 py-1 text-xs',
                                                tag === 'Team' && 'border-blue-200 bg-blue-100 text-blue-800',
                                                tag === 'Update' && 'border-cyan-200 bg-cyan-100 text-cyan-800',
                                                tag === 'Low' && 'bg-success-100 text-success-800 border-success-200',
                                                tag === 'Medium' && 'border-purple-200 bg-purple-100 text-purple-800',
                                                tag === 'High' && 'border-red-200 bg-red-100 text-red-800',
                                                // fallback
                                                !['Team', 'Update', 'Low', 'Medium', 'High'].includes(tag) &&
                                                    'border-gray-200 bg-gray-100 text-gray-600',
                                            )}
                                        >
                                            {count}
                                        </span>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>

                {/* Main Content */}
                <div className="no-scrollbar h-full min-h-0 w-96 flex-1 overflow-y-auto px-2 sm:w-full">
                    {/* Table (using shared DataTable + pagination) */}
                    <div className="mt-4 w-96 sm:w-full">
                        <DataTable
                            columns={columns}
                            bulkActions={bulkActions}
                            data={filteredTasks}
                            paginatedData={paginatedData}
                            tableKey="tasks-table"
                            showToolbar={true}
                        />
                    </div>
                </div>

                {/* Add / Edit Task Modal */}
                <TaskAddModal
                    isAddTaskModalOpen={isAddTaskModalOpen}
                    setIsAddTaskModalOpen={(open) => {
                        setIsAddTaskModalOpen(open);
                        if (!open) {
                            setEditingTask(null);
                            setModalMode('add');
                        }
                    }}
                    mode={modalMode}
                    initialTask={editingTask || undefined}
                    onSubmit={handleTaskSubmit}
                />
                <TaskDetailsModal isTaskDetailsModalOpen={isTaskDetailsModalOpen} setIsTaskDetailsModalOpen={setIsTaskDetailsModalOpen} />
            </div>
        </div>
    );
}
Index.layout = (page: ReactNode) => (
    <AppLayout
        breadcrumbs={[
            { title: 'Tasks', href: '/tasks' },
            { title: 'Tasks', href: route('users.index') },
        ]}
        title="Tasks"
    >
        {page}
    </AppLayout>
);

export default Index;