import { ReminderDetails } from '@admin/components/addOns/addon-sidebars/reminders/ReminderDetails';
import ReminderForm, { NormalizedReminderPayload } from '@admin/components/addOns/addon-sidebars/reminders/ReminderForm';
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 useAddOn from '@/hooks/use-addons';
import { cn } from '@admin/lib/utils';
import { Link, usePage } from '@inertiajs/react';
import axios from 'axios';
import { ArrowLeft, Calendar, Check, Clock, ExternalLinkIcon, Loader2, MoreVertical, Pencil, Plus, Search, Star, Trash, X } from 'lucide-react';
import { useCallback, useEffect, useState } from 'react';

export interface Reminder {
    id: number;
    uid: string;
    title: string;
    description: string;
    due_date_time: string | null;
    assigned_to: number | null;
    assigned_user?: {
        id: number;
        name: string;
        email: string;
        avatar?: string | null;
    };
    created_by: number;
    creator?: {
        id: number;
        name: string;
    };
    status: number;
    status_name: string;
    remindable_type: string | null;
    remindable_id: number | null;
    created_at: string;
    updated_at: string;
    important?: boolean;
    deleted?: boolean;
    completed?: boolean;
}

const statusColors = {
    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',
    PENDING: 'bg-gray-50 text-gray-700 border-gray-200',
};

type ActiveTab = 'all' | 'upcoming' | 'completed' | 'important';
type StatusFilter = 'all' | 'planned' | 'in-progress' | 'completed';

interface ReminderAddOnSidebarProps {
    title?: string;
    onClose?: () => void;
    isOpen?: boolean;
    remindableType?: string | null;
    remindableId?: number | null;
    initialReminder?: any;
    onSuccess?: () => void;
    forceMode?: 'add' | 'edit';
    mode?: string;
    refetchReminders?: any;
    users?: any[];
    statuses?: any[];
    reminderTags?: any[];
    contactAbleType?: string | null;
    contactId?: number | null;
}

export function ReminderSidebar({
    title = 'Reminders',
    onClose,
    isOpen = true,
    remindableType,
    remindableId,
    initialReminder,
    onSuccess,
    forceMode,
    mode = 'list',
    refetchReminders,
    users: propUsers,
    statuses: propStatuses,
    reminderTags: propReminderTags,
    contactAbleType,
    contactId,
}: ReminderAddOnSidebarProps) {
    const page = usePage();

    const { addOnClose } = useAddOn();

    const [searchQuery, setSearchQuery] = useState('');
    const [activeTab, setActiveTab] = useState<ActiveTab>('all');
    const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
    const relationType = contactAbleType;
    const [sidebarMode, setSidebarMode] = useState(mode || 'list');
    const [reminders, setReminders] = useState<Reminder[]>([]);
    const [activeReminder, setActiveReminder] = useState<Reminder | null>(initialReminder || null);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);

    // When forceMode is set, open directly in that mode
    useEffect(() => {
        if (forceMode) {
            setSidebarMode(forceMode);
            if (forceMode === 'edit' && initialReminder) {
                setActiveReminder(initialReminder);
            } else if (forceMode === 'add') {
                setActiveReminder(null);
            }
        }
    }, [forceMode, initialReminder]);
    const [users, setUsers] = useState<any[]>(propUsers || []);
    const [statuses, setStatuses] = useState<any[]>(propStatuses || []);
    const [reminderTags, setReminderTags] = useState<any[]>(propReminderTags || []);

    // Update state if props change
    useEffect(() => {
        if (propUsers) setUsers(propUsers);
        if (propStatuses) setStatuses(propStatuses);
        if (propReminderTags) setReminderTags(propReminderTags);
    }, [propUsers, propStatuses, propReminderTags]);

    // Fetch reminders from API
    const fetchReminders = useCallback(async () => {
        setLoading(true);
        setError(null);
        try {
            const response = await axios.get('/reminders', {
                headers: {
                    Accept: 'application/json',
                },
                params: {
                    per_page: 100,
                },
            });
            setReminders(response.data.data || []);
            // Only update if not provided via props
            if (!propUsers) setUsers(response.data.users || []);
            if (!propStatuses) setStatuses(response.data.statuses || []);
            if (!propReminderTags) setReminderTags(response.data.reminderTags || []);
        } catch (err: any) {
            setError(err.response?.data?.message || 'Failed to load reminders');
            console.error('Error fetching reminders:', err);
        } finally {
            setLoading(false);
        }
    }, [propUsers, propStatuses, propReminderTags]);

    useEffect(() => {
        fetchReminders();
    }, [fetchReminders]);

    const handleReminderSubmit = useCallback(
        async (payload: NormalizedReminderPayload) => {
            try {
                if (sidebarMode === 'add') {
                    // Construct due_date_time from either due_date_time field or date+time
                    let dueDatetime = payload.due_date_time;
                    if (!dueDatetime && payload.date) {
                        dueDatetime = payload.time ? `${payload.date} ${payload.time}` : `${payload.date} 00:00:00`;
                    }
                    const postData = {
                        title: payload.title || 'Untitled',
                        description: payload.description || '',
                        due_date_time: dueDatetime,
                        status: payload?.status,
                        assigned_to: payload.assigned_to || null,
                        tags: payload.status || [], // Tags from multiselect
                        people: payload.people || [], // People IDs
                        remindable_type: remindableType || null,
                        remindable_id: remindableId || null,
                        relation_type: relationType || null,
                        relation_id: contactId || null,
                    };
                    await axios.post('/reminders', postData);
                } else if (sidebarMode === 'edit' && activeReminder) {
                    const updatedData = {
                        _method: 'PUT',
                        title: payload.title || activeReminder.title,
                        description: payload.description || activeReminder.description,
                        tags: payload.tags || [], // Tags array
                        due_date_time:
                            payload.due_date_time ||
                            (payload.date && payload.time ? `${payload.date} ${payload.time}` : payload.date) ||
                            activeReminder.due_date_time,
                        status: payload.status,
                        assigned_to: payload.assigned_to || activeReminder.assigned_to,
                        people: payload.people || [],
                        relation_type: relationType || null,
                        relation_id: contactId || null,
                    };
                    await axios.post(`/reminders/${activeReminder.id}`, updatedData);
                }
                await fetchReminders();
                refetchReminders();
                addOnClose();
                if (page.url == '/reminders') {
                    // @ts-ignore
                }

                // If standalone mode, call onSuccess and onClose
                const isStandalone = !!forceMode;
                if (isStandalone) {
                    onSuccess?.();
                    onClose?.();
                } else {
                    setSidebarMode('list');
                    setActiveReminder(null);
                }
            } catch (err: any) {
                console.error('Error saving reminder:', err);
                setError(err.response?.data?.message || 'Failed to save reminder');
            }
        },
        [sidebarMode, activeReminder, fetchReminders, remindableType, remindableId, onSuccess, onClose],
    );

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

        // Apply tab filter
        // StatusEnum: ACTIVE = 1, COMPLETED = 5, IMPORTANT = 18, ARCHIVED = 11
        switch (activeTab) {
            case 'completed':
                filtered = reminders.filter((reminder) => reminder.status === 5 || reminder.status_name === 'COMPLETED');
                break;
            case 'upcoming':
                filtered = reminders.filter((reminder) => {
                    if (!reminder.due_date_time) return false;
                    const reminderDate = new Date(reminder.due_date_time);
                    const today = new Date();
                    today.setHours(0, 0, 0, 0);
                    return reminderDate >= today && (reminder.status === 1 || reminder.status_name === 'ACTIVE');
                });
                break;
            case 'important':
                filtered = reminders.filter((reminder) => reminder.status === 18 || reminder.status_name === 'IMPORTANT');
                break;
            case 'all':
            default:
                filtered = reminders.filter((reminder) => reminder.status !== 11 && reminder.status_name !== 'ARCHIVED');
                break;
        }

        // Apply status filter
        if (statusFilter !== 'all') {
            filtered = filtered.filter((reminder) => {
                if (statusFilter === 'planned') return reminder.status === 1 || reminder.status_name === 'ACTIVE';
                if (statusFilter === 'in-progress') return reminder.status === 1 || reminder.status_name === 'ACTIVE';
                if (statusFilter === 'completed') return reminder.status === 5 || reminder.status_name === 'COMPLETED';
                return true;
            });
        }

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

        return filtered;
    };

    const filteredReminders = getFilteredReminders();

    // 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 Reminder'
                                : sidebarMode === 'edit'
                                  ? 'Edit Reminder'
                                  : sidebarMode === 'details'
                                    ? 'Reminder Details'
                                    : title}
                        </h2>
                        {sidebarMode === 'list' && (
                            <Button
                                size="sm"
                                variant="outline"
                                onClick={() => {
                                    setSidebarMode('add');
                                    setActiveReminder(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: 'upcoming', label: 'Upcoming' },
                                { key: 'completed', label: 'Completed' },
                                { key: 'important', label: 'Important' },
                            ].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-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 reminders...</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={fetchReminders} variant="outline" size="sm" className="mt-4">
                                Retry
                            </Button>
                        </div>
                    ) : sidebarMode === 'add' || sidebarMode === 'edit' ? (
                        <ReminderForm
                            mode={sidebarMode === 'add' ? 'add' : 'edit'}
                            initialReminder={
                                activeReminder && {
                                    ...activeReminder,
                                    title: activeReminder.title,
                                }
                            }
                            onSubmitReminder={handleReminderSubmit}
                            onCancel={() => {
                                setSidebarMode('list');
                                setActiveReminder(null);
                            }}
                            users={users}
                            statuses={statuses}
                            reminderTags={reminderTags}
                        />
                    ) : sidebarMode === 'details' && activeReminder ? (
                        <ReminderDetails
                            reminder={{
                                title: activeReminder.title,
                                description: activeReminder.description,
                                status: activeReminder.status_name as any,
                                priority: 'medium' as any,
                                date: activeReminder.due_date_time ? new Date(activeReminder.due_date_time).toLocaleDateString() : '',
                                time: activeReminder.due_date_time ? new Date(activeReminder.due_date_time).toLocaleTimeString() : undefined,
                                people: activeReminder.assigned_user ? [activeReminder.assigned_user.avatar || ''] : [],
                            }}
                            mode="sidebar"
                        />
                    ) : filteredReminders.length === 0 ? (
                        <div className="flex h-52 flex-col items-center justify-center">
                            <div className="rounded-full bg-primary/10 p-3">
                                <Search className="h-6 w-6 text-primary" />
                            </div>
                            <p className="mt-4 text-sm font-medium">No reminders found</p>
                        </div>
                    ) : (
                        <div className="space-y-3">
                            {filteredReminders.map((reminder) => (
                                <div
                                    key={reminder.id}
                                    className="group relative flex cursor-pointer flex-col gap-2 border-b bg-card px-3 pb-2 hover:bg-accent/40"
                                    onClick={() => {
                                        setActiveReminder(reminder);
                                        setSidebarMode('details');
                                    }}
                                >
                                    <div className="flex items-center justify-between">
                                        <div className="flex items-center gap-2">
                                            <button
                                                onClick={async (e) => {
                                                    e.stopPropagation();
                                                    try {
                                                        const isCompleted = reminder.status === 5 || reminder.status_name === 'COMPLETED';
                                                        const newStatus = isCompleted ? 1 : 5;
                                                        await axios.put(`/reminders/${reminder.id}`, {
                                                            ...reminder,
                                                            status: newStatus,
                                                        });
                                                        await fetchReminders();
                                                    } catch (err) {
                                                        console.error('Error updating reminder:', err);
                                                    }
                                                }}
                                                className={cn(
                                                    'flex h-5 w-5 items-center justify-center rounded-full border',
                                                    reminder.status === 5 || reminder.status_name === 'COMPLETED'
                                                        ? 'border-success bg-success'
                                                        : 'border-muted-foreground',
                                                )}
                                            >
                                                {(reminder.status === 5 || reminder.status_name === 'COMPLETED') && (
                                                    <Check className="h-3 w-3 text-white" />
                                                )}
                                            </button>
                                            <h3
                                                className={cn(
                                                    'text-base font-medium',
                                                    (reminder.status === 5 || reminder.status_name === 'COMPLETED') &&
                                                        'text-muted-foreground line-through',
                                                )}
                                            >
                                                {reminder.title}
                                            </h3>
                                        </div>
                                        <DropdownMenu>
                                            <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
                                                <Button variant="ghost" size="sm" className="h-6 w-6 opacity-0 group-hover:opacity-100">
                                                    <MoreVertical className="h-3 w-3" />
                                                </Button>
                                            </DropdownMenuTrigger>
                                            <DropdownMenuContent align="end" className="w-[180px]">
                                                <DropdownMenuItem
                                                    onClick={async (e) => {
                                                        e.stopPropagation();
                                                        try {
                                                            const isImportant = reminder.status === 18 || reminder.status_name === 'IMPORTANT';
                                                            const newStatus = isImportant ? 1 : 18;
                                                            await axios.put(`/reminders/${reminder.id}`, {
                                                                ...reminder,
                                                                status: newStatus,
                                                            });
                                                            await fetchReminders();
                                                        } catch (err) {
                                                            console.error('Error updating reminder:', err);
                                                        }
                                                    }}
                                                >
                                                    <Star className="mr-2 h-3.5 w-3.5" />
                                                    {reminder.status === 18 || reminder.status_name === 'IMPORTANT'
                                                        ? 'Remove importance'
                                                        : 'Mark as important'}
                                                </DropdownMenuItem>
                                                <DropdownMenuItem
                                                    onClick={async (e) => {
                                                        e.stopPropagation();
                                                        try {
                                                            const isCompleted = reminder.status === 5 || reminder.status_name === 'COMPLETED';
                                                            const newStatus = isCompleted ? 1 : 5;
                                                            await axios.put(`/reminders/${reminder.id}`, {
                                                                ...reminder,
                                                                status: newStatus,
                                                            });
                                                            await fetchReminders();
                                                        } catch (err) {
                                                            console.error('Error updating reminder:', err);
                                                        }
                                                    }}
                                                >
                                                    <Check className="mr-2 h-3.5 w-3.5" />
                                                    {reminder.status === 5 || reminder.status_name === 'COMPLETED'
                                                        ? 'Mark as incomplete'
                                                        : 'Mark as complete'}
                                                </DropdownMenuItem>
                                                {!(reminder.status === 11 || reminder.status_name === 'ARCHIVED') && (
                                                    <DropdownMenuItem
                                                        onClick={(e) => {
                                                            e.stopPropagation();
                                                            setActiveReminder(reminder);
                                                            setSidebarMode('edit');
                                                        }}
                                                    >
                                                        <Pencil className="mr-2 h-3.5 w-3.5" />
                                                        Edit
                                                    </DropdownMenuItem>
                                                )}
                                                {(reminder.status === 11 || reminder.status_name === 'ARCHIVED') && (
                                                    <DropdownMenuItem
                                                        onClick={async (e) => {
                                                            e.stopPropagation();
                                                            try {
                                                                await axios.put(`/reminders/${reminder.id}`, {
                                                                    ...reminder,
                                                                    status: 1,
                                                                });
                                                                await fetchReminders();
                                                            } catch (err) {
                                                                console.error('Error restoring reminder:', err);
                                                            }
                                                        }}
                                                    >
                                                        <ArrowLeft className="mr-2 h-3.5 w-3.5" />
                                                        Restore
                                                    </DropdownMenuItem>
                                                )}
                                                <DropdownMenuItem
                                                    onClick={async (e) => {
                                                        e.stopPropagation();
                                                        try {
                                                            const isArchived = reminder.status === 11 || reminder.status_name === 'ARCHIVED';
                                                            if (isArchived) {
                                                                // Permanently delete
                                                                await axios.delete(`/reminders/${reminder.id}`);
                                                            } else {
                                                                // Move to trash (archive)
                                                                await axios.put(`/reminders/${reminder.id}`, {
                                                                    ...reminder,
                                                                    status: 11,
                                                                });
                                                            }
                                                            await fetchReminders();
                                                        } catch (err) {
                                                            console.error('Error deleting reminder:', err);
                                                        }
                                                    }}
                                                    className="text-destructive focus:text-destructive"
                                                >
                                                    <Trash className="mr-2 h-3.5 w-3.5" />
                                                    {reminder.status === 11 || reminder.status_name === 'ARCHIVED'
                                                        ? 'Delete permanently'
                                                        : 'Move to trash'}
                                                </DropdownMenuItem>
                                            </DropdownMenuContent>
                                        </DropdownMenu>
                                    </div>
                                    <div className="flex flex-wrap items-center gap-2">
                                        <span
                                            className={cn('rounded-md border px-2 py-0.5 text-xs', statusColors[reminder.status_name] || 'bg-muted')}
                                        >
                                            {reminder.status_name}
                                        </span>
                                        {reminder.due_date_time && (
                                            <>
                                                <span className="flex items-center gap-1 text-xs text-muted-foreground">
                                                    <Calendar className="h-3 w-3" />
                                                    {new Date(reminder.due_date_time).toLocaleDateString()}
                                                </span>
                                                <span className="flex items-center gap-1 text-xs text-muted-foreground">
                                                    <Clock className="h-3 w-3" />
                                                    {new Date(reminder.due_date_time).toLocaleTimeString()}
                                                </span>
                                            </>
                                        )}
                                    </div>
                                    {reminder.description && <p className="line-clamp-2 text-xs text-muted-foreground">{reminder.description}</p>}
                                    {reminder.assigned_user && (
                                        <div className="flex -space-x-2">
                                            <Avatar className="size-6 border-2 border-background">
                                                <AvatarImage src={reminder.assigned_user.avatar || ''} />
                                                <AvatarFallback>{reminder.assigned_user.name.charAt(0)}</AvatarFallback>
                                            </Avatar>
                                        </div>
                                    )}
                                    {(reminder.status === 18 || reminder.status_name === 'IMPORTANT') && (
                                        <Star className="absolute top-7 right-4 h-3 w-3 fill-amber-500 text-amber-500" />
                                    )}
                                </div>
                            ))}
                        </div>
                    )}
                </div>
            </div>
        </>
    );
}

export default ReminderSidebar;