import { DataTable } from '@admin/components/datatable';
import GeneralHeader from '@admin/components/general-header';
import ReminderAddModal from '@admin/components/modals/reminder-add-modal';
import { Avatar, AvatarFallback, AvatarImage } from '@admin/components/ui/avatar';
import { Badge } from '@admin/components/ui/badge';
import { Button } from '@admin/components/ui/button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@admin/components/ui/dropdown-menu';
import { Input } from '@admin/components/ui/input';
import { mockTasks } from '@admin/data/static';
import AppLayout from '@admin/layouts/app-layout';
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 { MoreHorizontal, Plus } from 'lucide-react';
import { ReactNode, 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 statusColors = {
    Low: 'bg-success-100 text-success-800 hover:bg-success-200',
    Team: 'bg-blue-100 text-blue-800 hover:bg-blue-200',
    Update: 'bg-cyan-100 text-cyan-800 hover:bg-cyan-200',
    High: 'bg-red-100 text-red-800 hover:bg-red-200',
    Medium: 'bg-purple-100 text-purple-800 hover:bg-purple-200',
};

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

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

export function Index() {
    const [searchQuery, setSearchQuery] = useState('');
    const [activeTab, setActiveTab] = useState<ActiveTab>('all');
    const [isAddReminderModalOpen, setIsAddReminderModalOpen] = useState(false);
    const [modalMode, setModalMode] = useState<'add' | 'edit'>('add');
    const [reminders, setReminders] = useState<Task[]>(mockTasks);
    const [editingReminder, setEditingReminder] = useState<any | null>(null);

    const getFilteredReminder = () => {
        let filtered = reminders;

        switch (activeTab) {
            case 'completed':
                filtered = reminders.filter((task) => task.completed);
                break;
            case 'important':
                filtered = reminders.filter((task) => task.important);
                break;
            case 'trash':
                filtered = reminders.filter((task) => task.deleted);
                break;
            case 'all':
            default:
                filtered = reminders.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 = getFilteredReminder();

    // 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="w-full text-xs text-gray-500">{row.original.description}</div>
                </div>
            ),
        },
        {
            accessorKey: 'date',
            header: 'Date',
            enableSorting: true,
            cell: ({ row }) => <div className="text-sm text-gray-900">{row.original.date}</div>,
        },
        {
            accessorKey: 'status',
            header: 'Status',
            enableSorting: true,
            cell: ({ row }) => (
                <div className="flex gap-1">
                    <Badge className={cn('text-xs', statusColors[row.original.status])}>{row.original.status}</Badge>
                </div>
            ),
        },
        {
            accessorKey: 'assignType',
            header: 'Assign',
            enableSorting: true,
            cell: ({ row }) => <div className="text-sm text-gray-900">{row.original.assignType}</div>,
        },
        {
            accessorKey: 'people',
            header: 'People',
            enableSorting: false,
            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
                                setEditingReminder({
                                    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');
                                setIsAddReminderModalOpen(true);
                            }}
                        >
                            Edit
                        </DropdownMenuItem>
                        <DropdownMenuItem
                            onClick={() => {
                                const t = row.original as Task;
                                const copy = { ...t, id: String(Date.now()), name: `${t.name} (Copy)` } as Task;
                                setReminders((s) => [copy, ...s]);
                            }}
                        >
                            Duplicate
                        </DropdownMenuItem>
                        <DropdownMenuItem
                            className="text-red-600"
                            onClick={() => {
                                const t = row.original as Task;
                                setReminders((s) => s.filter((task) => task.id !== t.id));
                            }}
                        >
                            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: [],
    };

    return (
        <div className="flex h-full w-full flex-col bg-card">
            <Head title="Reminders" />
            <div className="border-b border-gray-200 bg-card">
                <GeneralHeader title="Reminders" description="Manage your reminders efficiently" page="Reminders" />
            </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-96 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');
                                setEditingReminder(null);
                                setIsAddReminderModalOpen(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="p-2">
                                <div className="space-y-3">
                                    <h3 className="text-sm font-medium text-gray-900">Tags</h3>
                                    <div className="space-y-2">
                                        {Object.entries(tagCounts).map(([tag, count]) => (
                                            <div key={tag} className="flex items-center justify-between">
                                                <Badge
                                                    variant="secondary"
                                                    className={cn(
                                                        'text-xs font-medium',
                                                        tag === 'Team' && 'bg-blue-100 text-blue-800',
                                                        tag === 'Update' && 'bg-cyan-100 text-cyan-800',
                                                        tag === 'Low' && 'bg-success-100 text-success-800',
                                                        tag === 'Medium' && 'bg-purple-100 text-purple-800',
                                                        tag === 'High' && 'bg-red-100 text-red-800',
                                                    )}
                                                >
                                                    {tag}
                                                </Badge>
                                                <span className="rounded-full bg-gray-100 px-2 py-1 text-xs text-gray-500">{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"
                            onClick={() => {
                                setModalMode('add');
                                setEditingReminder(null);
                                setIsAddReminderModalOpen(true);
                            }}
                        >
                            <Plus className="mr-2 h-4 w-4" />
                            Add New Reminder
                        </Button>
                    </div>

                    {/* Navigation */}
                    <div className="space-y-4 px-2">
                        <div className="flex items-center justify-between">
                            <Input placeholder="Search" className="h-9 w-full" value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} />
                        </div>
                        {/* Tags */}
                        <div className="space-y-5">
                            <h3 className="text-sm font-medium text-gray-900">Tags</h3>
                            <div className="space-y-5">
                                {Object.entries(tagCounts).map(([tag, count]) => (
                                    <div key={tag} className="flex items-center justify-between">
                                        <Badge
                                            variant="secondary"
                                            className={cn(
                                                'text-xs font-medium',
                                                tag === 'Team' && 'bg-blue-100 text-blue-800',
                                                tag === 'Update' && 'bg-cyan-100 text-cyan-800',
                                                tag === 'Low' && 'bg-success-100 text-success-800',
                                                tag === 'Medium' && 'bg-purple-100 text-purple-800',
                                                tag === 'High' && 'bg-red-100 text-red-800',
                                            )}
                                        >
                                            {tag}
                                        </Badge>
                                        <span className="rounded-full bg-gray-100 px-2 py-1 text-xs text-gray-500">{count}</span>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>

                {/* Main Content */}
                <div className="mt-4 w-96 sm:w-full">
                    <DataTable columns={columns} data={filteredTasks} paginatedData={paginatedData} tableKey="tasks-table" showToolbar={false} />
                </div>

                {/* Add / Edit Reminder Modal */}
                <ReminderAddModal
                    isAddReminderModalOpen={isAddReminderModalOpen}
                    setIsAddReminderModalOpen={(open) => {
                        setIsAddReminderModalOpen(open);
                        if (!open) {
                            setEditingReminder(null);
                            setModalMode('add');
                        }
                    }}
                    mode={modalMode}
                    initialTask={editingReminder || undefined}
                    onSubmit={(values: any) => {
                        if (modalMode === 'add') {
                            const id = String(Date.now());
                            const newTask: Task = {
                                id,
                                name: values.title || 'Untitled',
                                description: values.description || '',
                                date: values.date ? new Date(values.date).toDateString() : new Date().toDateString(),
                                status: (values.status as any) || 'Assign to Me',
                                assignType: (values.status as any) || 'Assign to Me',
                                people: values.people || [],
                            };
                            setReminders((s) => [newTask, ...s]);
                        } else if (modalMode === 'edit' && editingReminder) {
                            setReminders((s) =>
                                s.map((t) =>
                                    t.id === editingReminder.id
                                        ? { ...t, name: values.title || t.name, description: values.description || t.description }
                                        : t,
                                ),
                            );
                        }
                    }}
                />
            </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;