import TaskForm, { NormalizedTaskPayload } from '@/components/addOns/addon-sidebars/tasks/TaskForm';
import { Button } from '@/components/ui/button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import useAddOn from '@/hooks/use-addons';
import { cn } from '@/lib/utils';
import { Link, usePage } from '@inertiajs/react';
import axios from 'axios';
import { ArrowLeft, Calendar, Check, ExternalLinkIcon, Loader2, MoreVertical, Pencil, Plus, Search, Star, Trash, X } from 'lucide-react';
import { useCallback, useEffect, useState } from 'react';
import { TaskDetails } from './TaskDetails';
import { sampleTask } from './task-details-modal';
export interface Task {
    id: number;
    uid: string;
    title: string;
    description: string;
    priority: 'low' | 'medium' | 'high' | number;
    due_date: string | null;
    assigned_user_ids?: number[]; // Multiple assignment field
    assigned_users?: Array<{
        id: number;
        name: string;
        email: string;
        avatar?: string | null;
    }>;
    tags?: Array<{ id: number; name: string; color?: string }>;
    created_by: number;
    creator?: {
        id: number;
        name: string;
        avatar?: string | null;
    };
    status: number;
    status_name: string;
    contactAbleType: string | null;
    relation_id: number | null;
    created_at: string;
    updated_at: string;
    completed?: boolean;
    important?: boolean;
    deleted?: boolean;
}

const priorityColors = {
    low: 'bg-emerald-50 text-emerald-700 border-emerald-200',
    medium: 'bg-amber-50 text-amber-700 border-amber-200',
    high: 'bg-rose-50 text-rose-700 border-rose-200',
};

const statusColors: Record<string, string> = {
    ACTIVE: 'bg-green-50 text-green-700 border-green-200',
    COMPLETED: 'bg-blue-50 text-blue-700 border-blue-200',
    IMPORTANT: 'bg-amber-50 text-amber-700 border-amber-200',
    ARCHIVED: 'bg-gray-50 text-gray-700 border-gray-200',
};

type ActiveTab = 'all' | 'completed' | 'important' | 'trash';
type PriorityFilter = 'all' | 'low' | 'medium' | 'high';

interface TaskAddOnSidebarProps {
    title?: string;
    onClose?: () => void;
    isOpen?: boolean;
    contactAbleType?: string | null;
    contactId?: number | null;
    initialTask?: any;
    onSuccess?: () => void;
    forceMode?: 'add' | 'edit'; // Force sidebar to open in specific mode
    mode?: 'list' | 'add' | 'edit' | 'details';
    refetchTasks?: () => void;
}

// Inline form moved to `components/addOns/forms/TaskForm.tsx`

export function TaskAddOnSidebar({
    title = 'Tasks',
    onClose,
    isOpen = true,
    contactAbleType,
    contactId,
    initialTask,
    onSuccess,
    forceMode,
    mode = 'list',
    refetchTasks,
}: TaskAddOnSidebarProps) {
    const page = usePage();

    const { addOnClose } = useAddOn();

    const [searchQuery, setSearchQuery] = useState('');
    const [activeTab, setActiveTab] = useState<ActiveTab>('all');
    const [priorityFilter, setPriorityFilter] = useState<PriorityFilter>('all');
    const relationType = contactAbleType;
    const [sidebarMode, setSidebarMode] = useState<'list' | 'add' | 'edit' | 'details'>(mode);
    const [tasks, setTasks] = useState<Task[]>([]);
    const [activeTask, setActiveTask] = useState<Task | null>(initialTask || null);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);
    const [users, setUsers] = useState<Array<{ label: string; value: string }>>([]);
    const [availableTags, setAvailableTags] = useState<Array<{ label: string; value: string; color?: string }>>([]);

    // When forceMode is set, open directly in that mode
    useEffect(() => {
        if (forceMode) {
            setSidebarMode(forceMode);
            if (forceMode === 'edit' && initialTask) {
                setActiveTask(initialTask);
            } else if (forceMode === 'add') {
                setActiveTask(null);
            }
        }
    }, [forceMode, initialTask, contactAbleType]);

    // Fetch tasks and users from API
    const fetchTasks = useCallback(async () => {
        setLoading(true);
        setError(null);
        try {
            const response = await axios.get('/tasks', {
                headers: {
                    Accept: 'application/json',
                },
                params: {
                    per_page: 100,
                    relation_type: relationType,
                    relation_id: contactId,
                },
            });
            setTasks(response.data.data || []);
        } catch (err: any) {
            setError(err.response?.data?.message || 'Failed to load tasks');
            console.error('Error fetching tasks:', err);
        } finally {
            setLoading(false);
        }
    }, [relationType, contactId]);

    const fetchUsers = useCallback(async () => {
        try {
            const response = await axios.get('/users/all-ids', {
                headers: {
                    Accept: 'application/json',
                },
            });
            const usersData = response.data.data || [];
            setUsers(
                usersData.map((user: any) => ({
                    label: user.name,
                    value: String(user.id),
                })),
            );
        } catch (err: any) {
            console.error('Error fetching users:', err);
        }
    }, []);

    const fetchTags = useCallback(async () => {
        try {
            const response = await axios.get('/tags', {
                headers: {
                    Accept: 'application/json',
                },
            });
            const tagsData = response.data.data || [];
            setAvailableTags(
                tagsData.map((tag: any) => ({
                    label: tag.name,
                    value: tag.name,
                    color: tag.color,
                })),
            );
        } catch (err: any) {
            console.error('Error fetching tags:', err);
        }
    }, []);

    useEffect(() => {
        fetchTasks();
        fetchUsers();
        fetchTags();
    }, [fetchTasks, fetchUsers, fetchTags]);

    const handleTaskSubmit = useCallback(
        async (payload: NormalizedTaskPayload) => {
            try {
                // Convert priority string to integer
                const priorityMap: Record<string, number> = {
                    low: 1,
                    medium: 2,
                    high: 3,
                };
                const priorityInt = priorityMap[payload.priority?.toLowerCase() || 'medium'] || 2;

                if (sidebarMode === 'add') {
                    const addPayload = {
                        title: payload.title || 'Untitled',
                        description: payload.description || '',
                        priority: priorityInt,
                        status: payload.status || 20, // Default to Todo (20)
                        due_date: payload.due_date || null,
                        assigned_user_ids: payload.assigned_user_ids || [],
                        tags: payload.tags || [],
                        relation_type: relationType || null,
                        relation_id: contactId || null,
                    };
                    await axios.post('/tasks', addPayload);
                } else if (sidebarMode === 'edit' && activeTask) {
                    const updatePayload: Record<string, any> = {
                        title: payload.title || activeTask.title,
                        description: payload.description || activeTask.description,
                        priority: priorityInt,
                        status: payload.status || activeTask.status,
                        due_date: payload.due_date || activeTask.due_date,
                        assigned_user_ids: payload.assigned_user_ids || [],
                        tags: payload.tags || [],
                    };
                    // Only include relation fields if they have values
                    if (relationType) {
                        updatePayload.relation_type = relationType;
                    }
                    if (contactId) {
                        updatePayload.relation_id = contactId;
                    }
                    await axios.put(`/tasks/${activeTask.id}`, updatePayload);
                }
                await fetchTasks();
                refetchTasks?.();
                addOnClose();
                // if (page.url == '/tasks') {
                // }
                // Standalone mode: fixed overlay from right (when forceMode is used)
                if (isStandalone) {
                    onSuccess?.();
                    onClose?.();
                } else {
                    setSidebarMode('list');
                    setActiveTask(null);
                }
            } catch (err: any) {
                console.error('Error saving task:', err);
                setError(err.response?.data?.message || 'Failed to save task');
            }
        },
        [sidebarMode, activeTask, fetchTasks, relationType, contactId, onSuccess, onClose],
    );

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

        // Apply tab filter
        // StatusEnum: COMPLETED = 5, IMPORTANT = 18, ARCHIVED = 11
        switch (activeTab) {
            case 'completed':
                filtered = tasks.filter((task) => task.status === 5 || task.status_name === 'COMPLETED');
                break;
            case 'important':
                filtered = tasks.filter((task) => task.status === 18 || task.status_name === 'IMPORTANT');
                break;
            case 'trash':
                filtered = tasks.filter((task) => task.status === 11 || task.status_name === 'ARCHIVED');
                break;
            case 'all':
            default:
                filtered = tasks.filter((task) => task.status !== 11 && task.status_name !== 'ARCHIVED');
                break;
        }

        // Apply priority filter
        if (priorityFilter !== 'all') {
            filtered = filtered.filter((task) => task.priority === priorityFilter);
        }

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

        return filtered;
    };

    const filteredTasks = getFilteredTasks();

    // Support controlled visibility for standalone usage
    if (!isOpen) return null;

    // Standalone mode: fixed overlay from right (when forceMode is used)
    const isStandalone = !!forceMode;

    return (
        <>
            {isStandalone && <div className="fixed inset-0 z-40 bg-black/50" onClick={onClose} />}
            <div className={cn('flex flex-col bg-card', isStandalone ? 'fixed inset-y-0 right-0 z-50 w-full border-l shadow-lg' : 'h-full w-full')}>
                <div className="flex items-center justify-between border-b px-2 py-3">
                    <div className="flex items-center gap-3 px-1">
                        {sidebarMode !== 'list' && !isStandalone && (
                            <Button variant="ghost" size="sm" onClick={() => setSidebarMode('list')} className="h-8 w-8 p-0">
                                <ArrowLeft className="h-4 w-4" />
                            </Button>
                        )}
                        <h2 className="text-xl font-semibold tracking-tight">
                            {sidebarMode === 'add'
                                ? 'Add Task'
                                : sidebarMode === 'edit'
                                  ? 'Edit Task'
                                  : sidebarMode === 'details'
                                    ? 'Task Details'
                                    : title}
                        </h2>
                        {sidebarMode === 'list' && (
                            <Button
                                size="sm"
                                variant="outline"
                                onClick={() => {
                                    setSidebarMode('add');
                                    setActiveTask(null);
                                }}
                                className="size-5 rounded-full"
                            >
                                <Plus className="h-3 w-3" />
                            </Button>
                        )}
                    </div>
                    <div className="flex items-center gap-2">
                        {sidebarMode === 'list' && !isStandalone && (
                            <div className="relative">
                                <Search className="absolute top-1/2 left-2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                                <input
                                    type="text"
                                    placeholder="Search..."
                                    value={searchQuery}
                                    onChange={(e) => setSearchQuery(e.target.value)}
                                    className="h-8 w-62 rounded-md border border-input bg-transparent pr-3 pl-8 text-sm"
                                />
                            </div>
                        )}
                        {!isStandalone && (
                            <>
                                <Link href="/tools/tasks">
                                    <Button variant="ghost" size="sm" onClick={onClose} className="size-6">
                                        <ExternalLinkIcon className="h-3 w-3 text-success" />
                                    </Button>
                                </Link>
                                <Button variant="ghost" size="sm" onClick={addOnClose} className="size-6 rounded-full border">
                                    <X className="h-3 w-3" />
                                </Button>
                            </>
                        )}
                        {isStandalone && (
                            <Button variant="ghost" size="sm" onClick={onClose} className="h-8 w-8 p-0">
                                <X className="h-4 w-4" />
                            </Button>
                        )}
                    </div>
                </div>

                {sidebarMode === 'list' && (
                    <div className="border-b px-4">
                        <div className="flex gap-6">
                            {[
                                { key: 'all', label: 'All' },
                                { key: 'completed', label: 'Completed' },
                                { key: 'important', label: 'Important' },
                                { key: 'trash', label: 'Trash' },
                            ].map(({ key, label }) => (
                                <button
                                    key={key}
                                    onClick={() => setActiveTab(key as ActiveTab)}
                                    className={cn(
                                        'relative py-3 text-sm font-medium transition-colors',
                                        activeTab === key
                                            ? 'text-foreground after:absolute after:right-0 after:bottom-0 after:left-0 after:h-0.5 after:bg-foreground'
                                            : 'text-muted-foreground hover:text-foreground',
                                    )}
                                >
                                    {label}
                                </button>
                            ))}
                        </div>
                    </div>
                )}

                <div className="flex-1 overflow-y-auto p-2">
                    {loading ? (
                        <div className="flex h-full flex-col items-center justify-center text-center">
                            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
                            <p className="mt-4 text-sm text-muted-foreground">Loading tasks...</p>
                        </div>
                    ) : error ? (
                        <div className="flex h-full flex-col items-center justify-center text-center">
                            <div className="rounded-full bg-destructive/10 p-4">
                                <X className="h-6 w-6 text-destructive" />
                            </div>
                            <p className="mt-4 text-sm font-medium text-destructive">{error}</p>
                            <Button onClick={fetchTasks} variant="outline" size="sm" className="mt-4">
                                Retry
                            </Button>
                        </div>
                    ) : sidebarMode === 'add' || sidebarMode === 'edit' ? (
                        <TaskForm
                            mode={sidebarMode === 'add' ? 'add' : 'edit'}
                            initialTask={activeTask}
                            onSubmitTask={handleTaskSubmit}
                            onCancel={() => {
                                setSidebarMode('list');
                                setActiveTask(null);
                            }}
                            users={users}
                            availableTags={availableTags}
                        />
                    ) : sidebarMode === 'details' && activeTask ? (
                        <div className="px-2">
                            <TaskDetails task={sampleTask} onClose={() => console.log('Close clicked')} />
                        </div>
                    ) : filteredTasks.length === 0 ? (
                        <div className="flex h-full flex-col items-center justify-center text-center">
                            <div className="rounded-full bg-muted p-4">
                                <Check className="h-6 w-6 text-muted-foreground" />
                            </div>
                            <p className="mt-4 text-sm font-medium">No tasks found</p>
                            <p className="mt-1 text-xs text-muted-foreground">Try adjusting your filters</p>
                        </div>
                    ) : (
                        <div className="divide-y divide-border">
                            {filteredTasks.map((task) => (
                                <div
                                    key={task.id}
                                    className={cn(
                                        'group w-full items-center p-2 transition-all hover:bg-muted/40',
                                        (task.status === 5 || task.status_name === 'COMPLETED') && 'opacity-60',
                                    )}
                                >
                                    {/* Left: Checkbox + Task info */}
                                    <div className="flex min-w-0 items-start gap-3">
                                        {/* Checkbox */}
                                        <button
                                            onClick={async (e) => {
                                                e.stopPropagation();
                                                try {
                                                    const isCompleted = task.status === 5 || task.status_name === 'COMPLETED';
                                                    // Toggle between COMPLETED (5) and ACTIVE (1)
                                                    const newStatus = isCompleted ? 1 : 5;
                                                    await axios.put(`/tasks/${task.id}`, {
                                                        ...task,
                                                        status: newStatus,
                                                    });
                                                    await fetchTasks();
                                                } catch (err) {
                                                    console.error('Error updating task:', err);
                                                }
                                            }}
                                            className={cn(
                                                'mt-1.5 flex h-4 w-4 items-center justify-center rounded border-2 transition-colors',
                                                task.status === 5 || task.status_name === 'COMPLETED'
                                                    ? 'border-foreground bg-foreground text-background'
                                                    : 'border-muted-foreground/30 hover:border-foreground',
                                            )}
                                        >
                                            {(task.status === 5 || task.status_name === 'COMPLETED') && <Check className="h-3 w-3" />}
                                        </button>

                                        {/* Task Content - Clickable area for task details */}
                                        <div
                                            className="min-w-0 flex-1 cursor-pointer"
                                            onClick={() => {
                                                setActiveTask(task);
                                                setSidebarMode('details');
                                            }}
                                        >
                                            <div className="flex items-center justify-between">
                                                <h4
                                                    className={cn(
                                                        'truncate text-sm leading-snug font-medium',
                                                        (task.status === 5 || task.status_name === 'COMPLETED') && 'line-through opacity-60',
                                                    )}
                                                >
                                                    {task.title}
                                                </h4>

                                                {/* Task Actions */}
                                                <div className="flex items-center gap-1">
                                                    <Button
                                                        variant="ghost"
                                                        size="sm"
                                                        className="h-7 w-7 p-0"
                                                        onClick={async (e) => {
                                                            e.stopPropagation();
                                                            try {
                                                                const isImportant = task.status === 18 || task.status_name === 'IMPORTANT';
                                                                // Toggle between IMPORTANT (18) and ACTIVE (1)
                                                                const newStatus = isImportant ? 1 : 18;
                                                                await axios.put(`/tasks/${task.id}`, {
                                                                    ...task,
                                                                    status: newStatus,
                                                                });
                                                                await fetchTasks();
                                                            } catch (err) {
                                                                console.error('Error updating task:', err);
                                                            }
                                                        }}
                                                    >
                                                        <Star
                                                            className={cn(
                                                                'h-3.5 w-3.5',
                                                                task.status === 18 || task.status_name === 'IMPORTANT'
                                                                    ? 'fill-amber-400 text-amber-400'
                                                                    : 'text-muted-foreground',
                                                            )}
                                                        />
                                                    </Button>

                                                    {/* Dropdown Menu */}
                                                    <DropdownMenu>
                                                        <DropdownMenuTrigger asChild>
                                                            <Button
                                                                variant="ghost"
                                                                size="sm"
                                                                className="h-7 w-7 p-0"
                                                                onClick={(e) => e.stopPropagation()}
                                                            >
                                                                <MoreVertical className="h-3.5 w-3.5 text-muted-foreground" />
                                                            </Button>
                                                        </DropdownMenuTrigger>
                                                        <DropdownMenuContent align="end" className="w-[180px]">
                                                            <DropdownMenuItem
                                                                onClick={async (e) => {
                                                                    e.stopPropagation();
                                                                    try {
                                                                        const isImportant = task.status === 18 || task.status_name === 'IMPORTANT';
                                                                        const newStatus = isImportant ? 1 : 18;
                                                                        await axios.put(`/tasks/${task.id}`, {
                                                                            ...task,
                                                                            status: newStatus,
                                                                        });
                                                                        await fetchTasks();
                                                                    } catch (err) {
                                                                        console.error('Error updating task:', err);
                                                                    }
                                                                }}
                                                            >
                                                                <Star className="mr-2 h-3.5 w-3.5" />
                                                                {task.status === 18 || task.status_name === 'IMPORTANT'
                                                                    ? 'Remove importance'
                                                                    : 'Mark as important'}
                                                            </DropdownMenuItem>
                                                            <DropdownMenuItem
                                                                onClick={async (e) => {
                                                                    e.stopPropagation();
                                                                    try {
                                                                        const isCompleted = task.status === 5 || task.status_name === 'COMPLETED';
                                                                        const newStatus = isCompleted ? 1 : 5;
                                                                        await axios.put(`/tasks/${task.id}`, {
                                                                            ...task,
                                                                            status: newStatus,
                                                                        });
                                                                        await fetchTasks();
                                                                    } catch (err) {
                                                                        console.error('Error updating task:', err);
                                                                    }
                                                                }}
                                                            >
                                                                <Check className="mr-2 h-3.5 w-3.5" />
                                                                {task.status === 5 || task.status_name === 'COMPLETED'
                                                                    ? 'Mark as incomplete'
                                                                    : 'Mark as complete'}
                                                            </DropdownMenuItem>
                                                            {!(task.status === 11 || task.status_name === 'ARCHIVED') && (
                                                                <DropdownMenuItem
                                                                    onClick={(e) => {
                                                                        e.stopPropagation();
                                                                        setActiveTask(task);
                                                                        setSidebarMode('edit');
                                                                    }}
                                                                >
                                                                    <Pencil className="mr-2 h-3.5 w-3.5" />
                                                                    Edit
                                                                </DropdownMenuItem>
                                                            )}
                                                            {(task.status === 11 || task.status_name === 'ARCHIVED') && (
                                                                <DropdownMenuItem
                                                                    onClick={async (e) => {
                                                                        e.stopPropagation();
                                                                        try {
                                                                            await axios.put(`/tasks/${task.id}`, {
                                                                                ...task,
                                                                                status: 1,
                                                                            });
                                                                            await fetchTasks();
                                                                        } catch (err) {
                                                                            console.error('Error restoring task:', err);
                                                                        }
                                                                    }}
                                                                >
                                                                    <ArrowLeft className="mr-2 h-3.5 w-3.5" />
                                                                    Restore
                                                                </DropdownMenuItem>
                                                            )}
                                                            <DropdownMenuItem
                                                                className="text-destructive focus:text-destructive"
                                                                onClick={async (e) => {
                                                                    e.stopPropagation();
                                                                    try {
                                                                        const isArchived = task.status === 11 || task.status_name === 'ARCHIVED';
                                                                        if (isArchived) {
                                                                            // Permanently delete
                                                                            await axios.delete(`/tasks/${task.id}`);
                                                                        } else {
                                                                            // Move to trash (archive)
                                                                            await axios.put(`/tasks/${task.id}`, {
                                                                                ...task,
                                                                                status: 11,
                                                                            });
                                                                        }
                                                                        await fetchTasks();
                                                                    } catch (err) {
                                                                        console.error('Error deleting task:', err);
                                                                    }
                                                                }}
                                                            >
                                                                <Trash className="mr-2 h-3.5 w-3.5" />
                                                                {task.status === 11 || task.status_name === 'ARCHIVED'
                                                                    ? 'Delete permanently'
                                                                    : 'Move to trash'}
                                                            </DropdownMenuItem>
                                                        </DropdownMenuContent>
                                                    </DropdownMenu>
                                                </div>
                                            </div>

                                            {/* Description */}
                                            <p className="mt-0.5 truncate text-xs text-muted-foreground">{task.description}</p>

                                            {/* Meta Info */}
                                            <div className="mt-2 flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
                                                <span
                                                    className={cn(
                                                        'inline-flex items-center rounded-md border px-2 py-0.5 font-medium capitalize',
                                                        typeof task.priority === 'string' ? priorityColors[task.priority] : priorityColors.medium,
                                                    )}
                                                >
                                                    {typeof task.priority === 'number'
                                                        ? task.priority === 1
                                                            ? 'low'
                                                            : task.priority === 3
                                                              ? 'high'
                                                              : 'medium'
                                                        : task.priority}
                                                </span>

                                                <span
                                                    className={cn(
                                                        'inline-flex items-center rounded-md border px-2 py-0.5 font-medium',
                                                        statusColors[task.status_name] || 'bg-muted',
                                                    )}
                                                >
                                                    {task.status_name}
                                                </span>

                                                {task.due_date && (
                                                    <div className="flex items-center gap-1.5">
                                                        <Calendar className="h-3 w-3" />
                                                        <span>{new Date(task.due_date).toLocaleDateString()}</span>
                                                    </div>
                                                )}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    )}
                </div>
            </div>
        </>
    );
}