import EventForm, { NormalizedEventPayload } from '@admin/components/addOns/addon-sidebars/events/EventForm';
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 } from '@inertiajs/react';
import axios from 'axios';
import { ArrowLeft, Calendar, Check, Clock, ExternalLinkIcon, MoreVertical, Pencil, Plus, Search, Star, Trash, X } from 'lucide-react';
import { useCallback, useEffect, useState } from 'react';
import { toast } from 'sonner';
import { EventDetails } from './EventDetails';
import { sampleEvent } from './event-details-modal';

export interface Event {
    id: string;
    name: string;
    description: string;
    date: string;
    time: string;
    type: 'Meeting' | 'Conference' | 'Workshop' | 'Webinar' | 'Other';
    location: string;
    attendees: string[];
    completed?: boolean;
    important?: boolean;
    deleted?: boolean;
}

const typeColors = {
    Meeting: 'bg-emerald-50 text-emerald-700 border-emerald-200',
    Conference: 'bg-blue-50 text-blue-700 border-blue-200',
    Workshop: 'bg-cyan-50 text-cyan-700 border-cyan-200',
    Webinar: 'bg-rose-50 text-rose-700 border-rose-200',
    Other: 'bg-amber-50 text-amber-700 border-amber-200',
};

type ActiveTab = 'all' | 'completed' | 'important' | 'trash';
type TypeFilter = 'all' | 'meeting' | 'conference' | 'workshop' | 'webinar' | 'other';

interface EventAddOnSidebarProps {
    title?: string;
    onClose?: () => void;
    onEventCreated?: () => void;
    isOpen?: boolean;
    onSuccess?: () => void;
    forceMode?: 'add' | 'edit'; // Force sidebar to open in specific mode
    mode?: 'list' | 'add' | 'edit' | 'details';
    initialEvent?: Event;
}

export function EventAddOnSidebar({
    title = 'Events',
    onClose,
    onEventCreated,
    isOpen = true,
    initialEvent,
    onSuccess,
    forceMode,
    mode = 'list',
}: EventAddOnSidebarProps) {
    const { addOnClose } = useAddOn();

    const [searchQuery, setSearchQuery] = useState('');
    const [activeTab, setActiveTab] = useState<ActiveTab>('all');
    const [typeFilter, setTypeFilter] = useState<TypeFilter>('all');

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

    // Default to 'add' mode when opened from addon sidebar (no forceMode), otherwise 'list'
    const [sidebarMode, setSidebarMode] = useState<'list' | 'add' | 'edit' | 'details'>(forceMode ? forceMode : mode);
    const [events, setEvents] = useState<Event[]>([]);
    const [activeEvent, setActiveEvent] = useState<Event | null>(initialEvent || 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' && initialEvent) {
                setActiveEvent(initialEvent);
            } else if (forceMode === 'add') {
                setActiveEvent(null);
            }
        }
    }, [forceMode, initialEvent]);

    // Fetch events from API
    const fetchEvents = useCallback(async () => {
        setLoading(true);
        setError(null);
        try {
            const response = await axios.get('/events', {
                headers: {
                    Accept: 'application/json',
                },
            });
            const eventsData = response.data.data || [];
            setEvents(eventsData);
        } catch (err: any) {
            console.error('Error fetching events:', err);
            setError('Failed to load events');
            toast.error('Failed to load events');
        } finally {
            setLoading(false);
        }
    }, []);

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

    const handleEventSubmit = useCallback(
        async (payload: NormalizedEventPayload) => {
            try {
                // Transform participants to the format expected by backend
                const participants =
                    payload.participants?.map((userId) => ({
                        user_id: parseInt(userId),
                        role: 'Participant',
                    })) || [];

                const eventData: any = {
                    title: payload.name || 'Untitled Event',
                    description: payload.description || '',
                    meeting_type: payload.type || 'client_meeting',
                    location: payload.location || '',
                    meeting_link: payload.meeting_link || '',
                    meeting_date_time: `${payload.date} ${payload.time || '00:00'}:00`,
                    duration: payload.duration || 60,
                    meeting_status: 'pending',
                };

                // Only add participants if there are any
                if (participants.length > 0) {
                    eventData.participants = participants;
                }

                if (sidebarMode === 'add') {
                    await axios.post('/events', eventData, {
                        headers: { Accept: 'application/json' },
                    });
                    toast.success('Event created successfully');
                } else if (sidebarMode === 'edit' && activeEvent) {
                    await axios.put(`/events/${activeEvent.uid || activeEvent.id}`, eventData, {
                        headers: { Accept: 'application/json' },
                    });
                    toast.success('Event updated successfully');
                }

                // Refresh events list
                await fetchEvents();

                // If standalone mode, call onSuccess and onClose
                if (isStandalone) {
                    onSuccess?.();
                    onClose?.();
                } else {
                    setSidebarMode('list');
                    setActiveEvent(null);
                }

                // Notify parent component
                if (onEventCreated) {
                    onEventCreated();
                }

                // Trigger a custom event to refresh the main calendar page
                window.dispatchEvent(new CustomEvent('event-created'));
            } catch (err: any) {
                console.error('Error saving event:', err);
                console.error('Error response:', err.response?.data);

                let errorMsg = 'Failed to save event';

                if (err.response?.data?.message) {
                    errorMsg = err.response.data.message;
                } else if (err.response?.data?.errors) {
                    const errors = err.response.data.errors;
                    if (typeof errors === 'object') {
                        // Get first error message
                        const firstError = Object.values(errors)[0];
                        errorMsg = Array.isArray(firstError) ? firstError[0] : firstError;
                    } else {
                        errorMsg = errors;
                    }
                }

                toast.error(typeof errorMsg === 'string' ? errorMsg : 'Failed to save event');
            }
        },
        [sidebarMode, activeEvent, fetchEvents, onEventCreated, onSuccess],
    );

    const getFilteredEvents = () => {
        let filtered = events;

        // Apply tab filter
        switch (activeTab) {
            case 'completed':
                filtered = events.filter((event) => event.completed);
                break;
            case 'important':
                filtered = events.filter((event) => event.important);
                break;
            case 'trash':
                filtered = events.filter((event) => event.deleted);
                break;
            case 'all':
            default:
                filtered = events.filter((event) => !event.deleted);
                break;
        }

        // Apply type filter
        if (typeFilter !== 'all') {
            filtered = filtered.filter((event) => event.type.toLowerCase() === typeFilter);
        }

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

        return filtered;
    };

    const filteredEvents = getFilteredEvents();

    if (!isOpen) return null;

    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 Event'
                                : sidebarMode === 'edit'
                                  ? 'Edit Event'
                                  : sidebarMode === 'details'
                                    ? 'Event Details'
                                    : title}
                        </h2>
                        {sidebarMode === 'list' && (
                            <Button
                                size="sm"
                                variant="outline"
                                onClick={() => {
                                    setSidebarMode('add');
                                    setActiveEvent(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/events">
                                    <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">
                    {sidebarMode === 'add' || sidebarMode === 'edit' ? (
                        <EventForm
                            mode={sidebarMode === 'add' ? 'add' : 'edit'}
                            initialEvent={activeEvent}
                            onSubmitEvent={handleEventSubmit}
                            onCancel={() => {
                                setSidebarMode('list');
                                setActiveEvent(null);
                            }}
                        />
                    ) : sidebarMode === 'details' && activeEvent ? (
                        <div className="px-2">
                            <EventDetails event={sampleEvent} onClose={() => console.log('Close clicked')} />
                        </div>
                    ) : filteredEvents.length === 0 ? (
                        <div className="flex h-full flex-col items-center justify-center text-center">
                            <div className="rounded-full bg-muted p-4">
                                <Calendar className="h-6 w-6 text-muted-foreground" />
                            </div>
                            <p className="mt-4 text-sm font-medium">No events found</p>
                            <p className="mt-1 text-xs text-muted-foreground">Try adjusting your filters</p>
                        </div>
                    ) : (
                        <div className="divide-y divide-border">
                            {filteredEvents.map((event) => (
                                <div
                                    key={event.id}
                                    className={cn('group w-full items-center p-2 transition-all hover:bg-muted/40', event.completed && 'opacity-60')}
                                >
                                    {/* Left: Checkbox + Event info */}
                                    <div className="flex min-w-0 items-start gap-3">
                                        {/* Checkbox */}
                                        <button
                                            onClick={(e) => {
                                                e.stopPropagation();
                                                setEvents((prev) => prev.map((t) => (t.id === event.id ? { ...t, completed: !t.completed } : t)));
                                            }}
                                            className={cn(
                                                'mt-1.5 flex h-4 w-4 items-center justify-center rounded border-2 transition-colors',
                                                event.completed
                                                    ? 'border-foreground bg-foreground text-background'
                                                    : 'border-muted-foreground/30 hover:border-foreground',
                                            )}
                                        >
                                            {event.completed && <Check className="h-3 w-3" />}
                                        </button>

                                        {/* Event Content - Clickable area for event details */}
                                        <div
                                            className="min-w-0 flex-1 cursor-pointer"
                                            onClick={() => {
                                                setActiveEvent(event);
                                                setSidebarMode('details');
                                            }}
                                        >
                                            <div className="flex items-center justify-between">
                                                <h4
                                                    className={cn(
                                                        'truncate text-sm leading-snug font-medium',
                                                        event.completed && 'line-through opacity-60',
                                                    )}
                                                >
                                                    {event.name}
                                                </h4>

                                                {/* Event Actions */}
                                                <div className="flex items-center gap-1">
                                                    <Button
                                                        variant="ghost"
                                                        size="sm"
                                                        className="h-7 w-7 p-0"
                                                        onClick={(e) => {
                                                            e.stopPropagation();
                                                            setEvents((prev) =>
                                                                prev.map((t) => (t.id === event.id ? { ...t, important: !t.important } : t)),
                                                            );
                                                        }}
                                                    >
                                                        <Star
                                                            className={cn(
                                                                'h-3.5 w-3.5',
                                                                event.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-[160px]">
                                                            <DropdownMenuItem
                                                                onClick={(e) => {
                                                                    e.stopPropagation();
                                                                    setActiveEvent(event);
                                                                    setSidebarMode('edit');
                                                                }}
                                                            >
                                                                <Pencil className="mr-2 h-3.5 w-3.5" />
                                                                Edit
                                                            </DropdownMenuItem>
                                                            <DropdownMenuItem
                                                                className="text-destructive focus:text-destructive"
                                                                onClick={(e) => {
                                                                    e.stopPropagation();
                                                                    setEvents((prev) =>
                                                                        prev.map((t) => (t.id === event.id ? { ...t, deleted: true } : t)),
                                                                    );
                                                                }}
                                                            >
                                                                <Trash className="mr-2 h-3.5 w-3.5" />
                                                                Delete
                                                            </DropdownMenuItem>
                                                        </DropdownMenuContent>
                                                    </DropdownMenu>
                                                </div>
                                            </div>

                                            {/* Description */}
                                            <p className="mt-0.5 truncate text-xs text-muted-foreground">{event.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',
                                                        typeColors[event.type],
                                                    )}
                                                >
                                                    {event.type}
                                                </span>

                                                <div className="flex items-center gap-1.5">
                                                    <Calendar className="h-3 w-3" />
                                                    <span>{event.date}</span>
                                                </div>

                                                <div className="flex items-center gap-1.5">
                                                    <Clock className="h-3 w-3" />
                                                    <span>{event.time}</span>
                                                </div>

                                                {event.attendees && event.attendees.length > 0 && (
                                                    <div className="flex items-center gap-1.5">
                                                        <div className="flex -space-x-2">
                                                            {event.attendees.slice(0, 3).map((attendee, index) => (
                                                                <Avatar key={index} className="h-5 w-5 border-2 border-background">
                                                                    <AvatarImage src={attendee || '/placeholder.svg'} />
                                                                    <AvatarFallback className="text-[9px]">U</AvatarFallback>
                                                                </Avatar>
                                                            ))}
                                                            {event.attendees.length > 3 && (
                                                                <div className="flex h-5 w-5 items-center justify-center rounded-full border-2 border-background bg-muted text-[9px] font-medium text-muted-foreground">
                                                                    +{event.attendees.length - 3}
                                                                </div>
                                                            )}
                                                        </div>
                                                    </div>
                                                )}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    )}
                </div>
            </div>
        </>
    );
}