import { Head, router, useForm } from '@inertiajs/react';
import {
    Plus,
    Trash2,
    Edit,
    ChevronDown,
    ChevronRight,
    CheckSquare,
    Layers,
    CornerDownRight,
    Search,
    FileDown,
    FileUp
} from 'lucide-react';
import { useState, useMemo } from 'react';
import { toast } from 'sonner';
import { store as storeTask, update as updateTask, destroy as destroyTask } from '@/routes/settings/tasks-master';
import { BulkImportModal } from '@/components/bulk-import-modal';
import { Pagination } from '@/components/pagination';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import AppLayout from '@/layouts/app-layout';

interface Subtask {
    id: number;
    parent_id: number;
    task: string;
    task_details: string | null;
    task_order: number | null;
}

interface TaskMaster {
    id: number;
    parent_id: number | null;
    task: string;
    task_details: string | null;
    task_order: number | null;
    children?: Subtask[];
}

interface Props {
    tasks: TaskMaster[];
}

export default function TasksMasterPage({ tasks }: Props) {
    const [isCreateOpen, setIsCreateOpen] = useState(false);
    const [createParentId, setCreateParentId] = useState<number | null>(null);
    const [editingTask, setEditingTask] = useState<TaskMaster | null>(null);
    const [expandedTasks, setExpandedTasks] = useState<Record<number, boolean>>(
        {},
    );
    const [searchQuery, setSearchQuery] = useState('');

    // Pagination & Bulk Import/Export State
    const [currentPage, setCurrentPage] = useState(1);
    const [pageSize, setPageSize] = useState(10);
    const [isImportOpen, setIsImportOpen] = useState(false);

    const createForm = useForm({
        task: '',
        task_details: '',
        parent_id: '' as string | number,
        task_order: '0',
    });

    const editForm = useForm({
        task: '',
        task_details: '',
        task_order: '0',
    });

    const toggleExpand = (id: number) => {
        setExpandedTasks((prev) => ({
            ...prev,
            [id]: !prev[id],
        }));
    };

    const handleCreateClick = (parentId: number | null = null) => {
        setCreateParentId(parentId);
        createForm.setData({
            task: '',
            task_details: '',
            parent_id: parentId || '',
            task_order: '0',
        });
        setIsCreateOpen(true);
    };

    const handleCreate = (e: React.FormEvent) => {
        e.preventDefault();
        createForm.post(storeTask.url(), {
            onSuccess: () => {
                setIsCreateOpen(false);
                createForm.reset();
                toast.success('Task Master item created successfully.');
            },
            onError: (errors) => {
                toast.error(
                    errors.task || 'Failed to create Task Master item.',
                );
            },
        });
    };

    const handleEditClick = (item: TaskMaster) => {
        setEditingTask(item);
        editForm.setData({
            task: item.task,
            task_details: item.task_details || '',
            task_order: String(item.task_order || 0),
        });
    };

    const handleUpdate = (e: React.FormEvent) => {
        e.preventDefault();

        if (!editingTask) {
            return;
        }

        editForm.put(updateTask.url(editingTask.id), {
            onSuccess: () => {
                setEditingTask(null);
                toast.success('Task Master item updated successfully.');
            },
            onError: (errors) => {
                toast.error(
                    errors.task || 'Failed to update Task Master item.',
                );
            },
        });
    };

    const handleDelete = (id: number) => {
        if (
            confirm(
                'Are you sure you want to delete this master item and all its children?',
            )
        ) {
            router.delete(destroyTask.url(id), {
                onSuccess: () => {
                    toast.success('Task Master item deleted successfully.');
                },
            });
        }
    };

    // Filter tasks tree by search query
    const filteredTasks = useMemo(() => {
        if (searchQuery.trim() === '') {
            return tasks;
        }

        const query = searchQuery.toLowerCase();

        return tasks
            .map((task) => {
                const children = task.children || [];
                const matchesParent =
                    task.task.toLowerCase().includes(query) ||
                    (task.task_details &&
                        task.task_details.toLowerCase().includes(query));

                const filteredChildren = children.filter(
                    (sub) =>
                        sub.task.toLowerCase().includes(query) ||
                        (sub.task_details &&
                            sub.task_details.toLowerCase().includes(query)),
                );

                if (filteredChildren.length > 0 && !expandedTasks[task.id]) {
                    setTimeout(() => {
                        setExpandedTasks((prev) => ({
                            ...prev,
                            [task.id]: true,
                        }));
                    }, 10);
                }

                if (matchesParent || filteredChildren.length > 0) {
                    return {
                        ...task,
                        children: filteredChildren,
                    } as TaskMaster;
                }

                return null;
            })
            .filter(Boolean) as TaskMaster[];
    }, [tasks, searchQuery, expandedTasks]);

    const paginatedTasks = useMemo(() => {
        const start = (currentPage - 1) * pageSize;

        return filteredTasks.slice(start, start + pageSize);
    }, [filteredTasks, currentPage, pageSize]);

    const handleSearchChange = (val: string) => {
        setSearchQuery(val);
        setCurrentPage(1);
    };

    const handleExportCSV = () => {
        const headers = ['Task Name', 'Details', 'Parent Task', 'Task Order'];
        const rows: any[] = [];
        
        filteredTasks.forEach(item => {
            rows.push([
                item.task,
                item.task_details ?? '',
                '',
                item.task_order ? String(item.task_order) : '0'
            ]);
            item.children?.forEach(sub => {
                rows.push([
                    sub.task,
                    sub.task_details ?? '',
                    item.task,
                    sub.task_order ? String(sub.task_order) : '0'
                ]);
            });
        });

        const csvContent = "data:text/csv;charset=utf-8," 
            + [headers.join(','), ...rows.map(e => e.map((val: string) => `"${val.replace(/"/g, '""')}"`).join(','))].join('\n');
        const encodedUri = encodeURI(csvContent);
        const link = document.createElement("a");
        link.setAttribute("href", encodedUri);
        link.setAttribute("download", "tasks_master_export.csv");
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        toast.success('Tasks Master exported successfully.');
    };

    return (
        <>
            <Head title="Tasks Master Registry" />
            <div className="from-zinc-550/20 min-h-screen w-full space-y-8 bg-gradient-to-b via-transparent to-transparent p-6 md:p-10">
                {/* Premium Gradient Header Banner */}
                <div className="relative flex flex-col items-start justify-between gap-6 overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-r from-orange-600 via-pink-600 to-indigo-600 p-8 text-white shadow-2xl md:flex-row md:items-center md:p-10">
                    <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(255,255,255,0.15),transparent_50%)]" />
                    <div className="relative max-w-2xl space-y-2">
                        <span className="rounded-full border border-white/20 bg-white/20 px-3 py-1 text-[10px] font-extrabold tracking-widest text-white/90 uppercase backdrop-blur-md">
                            Work breakdown structure
                        </span>
                        <h3 className="text-2xl font-extrabold tracking-tight md:text-3xl">
                            Tasks Master Definitions
                        </h3>
                        <p className="text-sm font-medium text-orange-100">
                            Establish standard parent deliverable blueprints,
                            assign subtask scopes, and define task hierarchy
                            templates globally.
                        </p>
                    </div>
                    <div className="flex flex-wrap gap-2.5 shrink-0">
                        <Button
                            variant="outline"
                            onClick={handleExportCSV}
                            className="relative flex items-center gap-2 rounded-xl border border-white/20 bg-white/10 hover:bg-white/20 px-4 py-6 font-bold text-white shadow-lg transition-all duration-300 hover:-translate-y-0.5"
                        >
                            <FileDown className="size-4" /> Export CSV
                        </Button>
                        <Button
                            variant="outline"
                            onClick={() => setIsImportOpen(true)}
                            className="relative flex items-center gap-2 rounded-xl border border-white/20 bg-white/10 hover:bg-white/20 px-4 py-6 font-bold text-white shadow-lg transition-all duration-300 hover:-translate-y-0.5"
                        >
                            <FileUp className="size-4" /> Bulk Import
                        </Button>
                        <Button
                            onClick={() => handleCreateClick(null)}
                            className="relative flex items-center gap-2 rounded-xl border border-white/20 bg-white px-5 py-6 font-bold text-orange-950 shadow-lg transition-all duration-300 hover:-translate-y-0.5 hover:bg-zinc-100 hover:shadow-orange-500/20"
                        >
                            <Plus className="size-4 stroke-[3px]" /> Add Master Task
                        </Button>
                    </div>
                </div>

                {/* Search input bar */}
                <div className="flex flex-col items-center gap-4 rounded-2xl border border-zinc-200/80 bg-white/60 p-5 shadow-sm backdrop-blur-2xl sm:flex-row dark:border-zinc-800/80 dark:bg-zinc-900/60">
                    <div className="relative w-full">
                        <Search className="absolute top-1/2 left-3.5 size-4 -translate-y-1/2 text-zinc-400" />
                        <Input
                            className="h-11 rounded-xl border-zinc-200 bg-white/80 pl-10 text-xs shadow-inner focus-visible:ring-orange-500/50 dark:border-zinc-800 dark:bg-zinc-950/80"
                            placeholder="Search tasks, deliverables, child subtasks..."
                            value={searchQuery}
                            onChange={(e) => handleSearchChange(e.target.value)}
                        />
                    </div>
                </div>

                {filteredTasks.length === 0 ? (
                    <Card className="flex flex-col items-center justify-center rounded-3xl border-2 border-dashed border-zinc-200 bg-white/30 p-16 text-center backdrop-blur-sm dark:border-zinc-800 dark:bg-zinc-950/10">
                        <div className="mb-4 animate-pulse rounded-full border border-orange-100 bg-orange-50 p-4 dark:border-orange-900 dark:bg-orange-950/50">
                            <CheckSquare className="size-8 text-orange-500" />
                        </div>
                        <p className="text-base font-bold text-zinc-800 dark:text-zinc-200">
                            No matching task definitions found
                        </p>
                    </Card>
                ) : (
                    <div className="space-y-4">
                        {paginatedTasks.map((task) => {
                            const isExpanded = !!expandedTasks[task.id];
                            const children = task.children || [];

                            return (
                                <div
                                    key={task.id}
                                    className="overflow-hidden rounded-3xl border border-zinc-200/80 bg-white/60 shadow-xl backdrop-blur-2xl transition-all duration-300 dark:border-zinc-800/80 dark:bg-zinc-900/60"
                                >
                                    {/* Header / Main Item */}
                                    <div className="flex items-center justify-between p-5 transition-colors hover:bg-zinc-50/50 dark:hover:bg-zinc-800/10">
                                        <div className="flex min-w-0 flex-1 items-center gap-4">
                                            {children.length > 0 ? (
                                                <button
                                                    onClick={() =>
                                                        toggleExpand(task.id)
                                                    }
                                                    className="rounded-lg p-1.5 text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-200"
                                                >
                                                    {isExpanded ? (
                                                        <ChevronDown className="size-4.5" />
                                                    ) : (
                                                        <ChevronRight className="size-4.5" />
                                                    )}
                                                </button>
                                            ) : (
                                                <div className="text-orange-550 flex size-8 shrink-0 items-center justify-center rounded-lg border border-orange-100 bg-orange-50 dark:border-orange-900/50 dark:bg-orange-950/50">
                                                    <Layers className="size-4" />
                                                </div>
                                            )}
                                            <div className="min-w-0 flex-1">
                                                <h4 className="truncate text-sm font-extrabold text-zinc-900 dark:text-zinc-100">
                                                    {task.task}
                                                </h4>
                                                {task.task_details && (
                                                    <p className="dark:text-zinc-455 mt-0.5 truncate text-xs font-medium text-zinc-500">
                                                        {task.task_details}
                                                    </p>
                                                )}
                                            </div>
                                        </div>

                                        {/* Action Buttons */}
                                        <div className="ml-4 flex items-center gap-1.5">
                                            <Button
                                                variant="ghost"
                                                size="sm"
                                                onClick={() =>
                                                    handleCreateClick(task.id)
                                                }
                                                className="flex h-8 items-center gap-1 rounded-xl border border-indigo-100 bg-white/80 px-3.5 text-xs font-extrabold text-indigo-600 shadow-sm hover:bg-indigo-50/80 dark:border-indigo-950/50 dark:bg-zinc-950/80 dark:text-indigo-400 dark:hover:bg-indigo-950/20"
                                            >
                                                <Plus className="size-3.5 stroke-[3px]" />{' '}
                                                Subtask
                                            </Button>
                                            <Button
                                                variant="ghost"
                                                size="icon"
                                                className="size-8 rounded-lg text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800"
                                                onClick={() =>
                                                    handleEditClick(task)
                                                }
                                            >
                                                <Edit className="size-3.5" />
                                            </Button>
                                            <Button
                                                variant="ghost"
                                                size="icon"
                                                className="size-8 rounded-lg text-red-500 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-950/20"
                                                onClick={() =>
                                                    handleDelete(task.id)
                                                }
                                            >
                                                <Trash2 className="size-3.5" />
                                            </Button>
                                        </div>
                                    </div>

                                    {/* Children Subtasks */}
                                    {isExpanded && children.length > 0 && (
                                        <div className="border-zinc-150/50 divide-y divide-zinc-100 border-t bg-zinc-50/20 py-1 pr-5 pl-8 dark:divide-zinc-800/50 dark:border-zinc-800/80 dark:bg-zinc-900/10">
                                            {children.map((subtask) => (
                                                <div
                                                    key={subtask.id}
                                                    className="flex items-center justify-between rounded-xl px-3 py-4 transition-colors hover:bg-zinc-50/80"
                                                >
                                                    <div className="flex min-w-0 flex-1 items-center gap-2.5">
                                                        <CornerDownRight className="size-4 shrink-0 text-zinc-400" />
                                                        <div className="min-w-0 flex-1">
                                                            <h5 className="truncate text-xs font-extrabold text-zinc-800 dark:text-zinc-200">
                                                                {subtask.task}
                                                            </h5>
                                                            {subtask.task_details && (
                                                                <p className="text-zinc-450 dark:text-zinc-550 mt-0.5 truncate text-[11px] font-medium">
                                                                    {
                                                                        subtask.task_details
                                                                    }
                                                                </p>
                                                            )}
                                                        </div>
                                                    </div>

                                                    <div className="ml-4 flex items-center gap-1">
                                                        <Button
                                                            variant="ghost"
                                                            size="icon"
                                                            className="size-8 rounded-lg text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800"
                                                            onClick={() =>
                                                                handleEditClick(
                                                                    subtask,
                                                                )
                                                            }
                                                        >
                                                            <Edit className="size-3.5" />
                                                        </Button>
                                                        <Button
                                                            variant="ghost"
                                                            size="icon"
                                                            className="size-8 rounded-lg text-red-500 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-950/20"
                                                            onClick={() =>
                                                                handleDelete(
                                                                    subtask.id,
                                                                )
                                                            }
                                                        >
                                                            <Trash2 className="size-3.5" />
                                                        </Button>
                                                    </div>
                                                </div>
                                            ))}
                                        </div>
                                    )}
                                </div>
                            );
                        })}
                        <Pagination
                            currentPage={currentPage}
                            pageSize={pageSize}
                            totalItems={filteredTasks.length}
                            onPageChange={setCurrentPage}
                            onPageSizeChange={setPageSize}
                        />
                    </div>
                )}

                {/* Create Dialog */}
                <Dialog open={isCreateOpen} onOpenChange={setIsCreateOpen}>
                    <DialogContent className="max-w-sm rounded-2xl">
                        <DialogHeader>
                            <DialogTitle>
                                {createParentId
                                    ? 'Add Subtask'
                                    : 'Add Master Task'}
                            </DialogTitle>
                            <DialogDescription>
                                Define a new{' '}
                                {createParentId
                                    ? 'child scope'
                                    : 'primary task scope'}
                                .
                            </DialogDescription>
                        </DialogHeader>
                        <form
                            onSubmit={handleCreate}
                            className="space-y-4 pt-2"
                        >
                            <div className="space-y-1">
                                <Label htmlFor="create-task">Task Title</Label>
                                <Input
                                    id="create-task"
                                    value={createForm.data.task}
                                    onChange={(e) =>
                                        createForm.setData(
                                            'task',
                                            e.target.value,
                                        )
                                    }
                                    placeholder="e.g. Code Review Setup"
                                    required
                                />
                            </div>
                            <div className="space-y-1">
                                <Label htmlFor="create-task-details">
                                    Details
                                </Label>
                                <Input
                                    id="create-task-details"
                                    value={createForm.data.task_details}
                                    onChange={(e) =>
                                        createForm.setData(
                                            'task_details',
                                            e.target.value,
                                        )
                                    }
                                    placeholder="Details about this task deliverable..."
                                />
                            </div>
                            <div className="space-y-1">
                                <Label htmlFor="create-task-order">
                                    Sort Order
                                </Label>
                                <Input
                                    id="create-task-order"
                                    type="number"
                                    value={createForm.data.task_order}
                                    onChange={(e) =>
                                        createForm.setData(
                                            'task_order',
                                            e.target.value,
                                        )
                                    }
                                />
                            </div>
                            <DialogFooter className="pt-2">
                                <Button
                                    type="button"
                                    variant="outline"
                                    onClick={() => setIsCreateOpen(false)}
                                    className="rounded-xl"
                                >
                                    Cancel
                                </Button>
                                <Button
                                    type="submit"
                                    disabled={createForm.processing}
                                    className="rounded-xl"
                                >
                                    Create
                                </Button>
                            </DialogFooter>
                        </form>
                    </DialogContent>
                </Dialog>

                {/* Edit Dialog */}
                <Dialog
                    open={!!editingTask}
                    onOpenChange={(open) => !open && setEditingTask(null)}
                >
                    <DialogContent className="max-w-sm rounded-2xl">
                        <DialogHeader>
                            <DialogTitle>Edit Task Master</DialogTitle>
                            <DialogDescription>
                                Update this task master deliverable scope.
                            </DialogDescription>
                        </DialogHeader>
                        <form
                            onSubmit={handleUpdate}
                            className="space-y-4 pt-2"
                        >
                            <div className="space-y-1">
                                <Label htmlFor="edit-task">Task Title</Label>
                                <Input
                                    id="edit-task"
                                    value={editForm.data.task}
                                    onChange={(e) =>
                                        editForm.setData('task', e.target.value)
                                    }
                                    required
                                />
                            </div>
                            <div className="space-y-1">
                                <Label htmlFor="edit-task-details">
                                    Details
                                </Label>
                                <Input
                                    id="edit-task-details"
                                    value={editForm.data.task_details}
                                    onChange={(e) =>
                                        editForm.setData(
                                            'task_details',
                                            e.target.value,
                                        )
                                    }
                                />
                            </div>
                            <div className="space-y-1">
                                <Label htmlFor="edit-task-order">
                                    Sort Order
                                </Label>
                                <Input
                                    id="edit-task-order"
                                    type="number"
                                    value={editForm.data.task_order}
                                    onChange={(e) =>
                                        editForm.setData(
                                            'task_order',
                                            e.target.value,
                                        )
                                    }
                                />
                            </div>
                            <DialogFooter className="pt-2">
                                <Button
                                    type="button"
                                    variant="outline"
                                    onClick={() => setEditingTask(null)}
                                    className="rounded-xl"
                                >
                                    Cancel
                                </Button>
                                <Button
                                    type="submit"
                                    disabled={editForm.processing}
                                    className="rounded-xl"
                                >
                                    Save Changes
                                </Button>
                            </DialogFooter>
                        </form>
                    </DialogContent>
                </Dialog>

                {/* Bulk Import Modal */}
                <BulkImportModal
                    isOpen={isImportOpen}
                    onClose={() => setIsImportOpen(false)}
                    importUrl="/settings/tasks-master/bulk-import"
                    sampleHeaders={['task', 'task_details', 'task_order', 'parent_task']}
                    sampleRows={[
                        ['Code Implementation', 'Write source code as per specifications', '1', ''],
                        ['Unit Testing', 'Run PHPUnit and Jest test cases', '2', 'Code Implementation'],
                        ['Deployment Preparation', 'Setup environment configurations', '3', '']
                    ]}
                    title="Import Work Breakdown Structure"
                />
            </div>
        </>
    );
}

TasksMasterPage.layout = (page: React.ReactNode) => (
    <AppLayout>{page}</AppLayout>
);