import { Button } from '@admin/components/ui/button';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@admin/components/ui/tabs';
import { Bell, Calendar, CheckCircle2, FileText, Loader2, Mail, NotebookPen, Phone, Plus, StickyNote, ArrowUpDown } from 'lucide-react';
import Timeline, { TimelineGroup } from '../Timeline';
import { RefObject } from 'react';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@admin/components/ui/dropdown-menu';

interface ContactActivityTabsProps {
    activityTimeline: TimelineGroup[];
    notesTimeline: TimelineGroup[];
    tasksTimeline: TimelineGroup[];
    emailsTimeline: TimelineGroup[];
    callsTimeline: TimelineGroup[];
    meetingsTimeline: TimelineGroup[];
    remindersTimeline: TimelineGroup[];
    isLoadingActivities?: boolean;
    hasMoreActivities?: boolean;
    isLoadingMoreActivities?: boolean;
    onLoadMore?: () => void;
    sortOrder?: 'desc' | 'asc';
    onSortChange?: (order: 'desc' | 'asc') => void;
    onTabChange?: (tab: string) => void;
    sentinelRef?: RefObject<HTMLDivElement>;
}

export const ContactToolsTabs = ({
    activityTimeline,
    notesTimeline,
    tasksTimeline,
    emailsTimeline,
    callsTimeline,
    meetingsTimeline,
    remindersTimeline,
    isLoadingActivities = false,
    hasMoreActivities = false,
    isLoadingMoreActivities = false,
    onLoadMore,
    sortOrder = 'desc',
    onSortChange,
    onTabChange,
    sentinelRef,
}: ContactActivityTabsProps) => {
    return (
        <div className="w-full rounded-xl border border-slate-200/80 bg-white shadow-sm">
            {/* Secondary Tabs */}
            <Tabs defaultValue="activity" onValueChange={onTabChange} className="w-full">
                <div className="overflow-x-auto border-b border-slate-200/80 bg-gradient-to-b from-slate-50/50 to-white px-6">
                    <div className="flex items-center justify-between gap-4">
                        <TabsList className="h-auto flex-nowrap gap-8 bg-transparent p-0 sm:gap-6 lg:gap-10">
                            <TabsTrigger
                                value="activity"
                                className="flex items-center gap-2 rounded-none border-b-[3px] border-transparent px-0 py-4 text-xs font-semibold whitespace-nowrap transition-colors hover:text-slate-700 data-[state=active]:border-slate-900 data-[state=active]:bg-transparent data-[state=active]:text-slate-900 data-[state=inactive]:text-slate-500 sm:text-sm"
                            >
                                <FileText className="h-4 w-4" />
                                <span className="hidden sm:inline">Activity</span>
                            </TabsTrigger>
                            <TabsTrigger
                                value="note"
                                className="flex items-center gap-2 rounded-none border-b-[3px] border-transparent px-0 py-4 text-xs font-semibold whitespace-nowrap transition-colors hover:text-slate-700 data-[state=active]:border-slate-900 data-[state=active]:bg-transparent data-[state=active]:text-slate-900 data-[state=inactive]:text-slate-500 sm:text-sm"
                            >
                                <NotebookPen className="h-4 w-4" />
                                <span className="hidden sm:inline">Note</span>
                            </TabsTrigger>
                            <TabsTrigger
                                value="task"
                                className="flex items-center gap-2 rounded-none border-b-[3px] border-transparent px-0 py-4 text-xs font-semibold whitespace-nowrap transition-colors hover:text-slate-700 data-[state=active]:border-slate-900 data-[state=active]:bg-transparent data-[state=active]:text-slate-900 data-[state=inactive]:text-slate-500 sm:text-sm"
                            >
                                <CheckCircle2 className="h-4 w-4" />
                                <span className="hidden sm:inline">Task</span>
                            </TabsTrigger>
                            <TabsTrigger
                                value="emails"
                                className="flex items-center gap-2 rounded-none border-b-[3px] border-transparent px-0 py-4 text-xs font-semibold whitespace-nowrap transition-colors hover:text-slate-700 data-[state=active]:border-slate-900 data-[state=active]:bg-transparent data-[state=active]:text-slate-900 data-[state=inactive]:text-slate-500 sm:text-sm"
                            >
                                <Mail className="h-4 w-4" />
                                <span className="hidden sm:inline">Emails</span>
                            </TabsTrigger>
                            <TabsTrigger
                                value="calls"
                                className="flex items-center gap-2 rounded-none border-b-[3px] border-transparent px-0 py-4 text-xs font-semibold whitespace-nowrap transition-colors hover:text-slate-700 data-[state=active]:border-slate-900 data-[state=active]:bg-transparent data-[state=active]:text-slate-900 data-[state=inactive]:text-slate-500 sm:text-sm"
                            >
                                <Phone className="h-4 w-4" />
                                <span className="hidden sm:inline">Calls</span>
                            </TabsTrigger>
                            <TabsTrigger
                                value="meetings"
                                className="flex items-center gap-2 rounded-none border-b-[3px] border-transparent px-0 py-4 text-xs font-semibold whitespace-nowrap transition-colors hover:text-slate-700 data-[state=active]:border-slate-900 data-[state=active]:bg-transparent data-[state=active]:text-slate-900 data-[state=inactive]:text-slate-500 sm:text-sm"
                            >
                                <Calendar className="h-4 w-4" />
                                <span className="hidden sm:inline">Meetings</span>
                            </TabsTrigger>
                            <TabsTrigger
                                value="reminders"
                                className="flex items-center gap-2 rounded-none border-b-[3px] border-transparent px-0 py-4 text-xs font-semibold whitespace-nowrap transition-colors hover:text-slate-700 data-[state=active]:border-slate-900 data-[state=active]:bg-transparent data-[state=active]:text-slate-900 data-[state=inactive]:text-slate-500 sm:text-sm"
                            >
                                <Bell className="h-4 w-4" />
                                <span className="hidden sm:inline">Reminders</span>
                            </TabsTrigger>
                        </TabsList>

                        {/* Sort Dropdown */}
                        {onSortChange && (
                            <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                    <Button variant="outline" size="sm" className="flex items-center gap-2 text-xs">
                                        <ArrowUpDown className="h-3 w-3" />
                                        <span className="hidden sm:inline">{sortOrder === 'desc' ? 'Recent First' : 'Recent Last'}</span>
                                    </Button>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent align="end">
                                    <DropdownMenuItem onClick={() => onSortChange('desc')}>
                                        <span className={sortOrder === 'desc' ? 'font-semibold' : ''}>Recent First</span>
                                    </DropdownMenuItem>
                                    <DropdownMenuItem onClick={() => onSortChange('asc')}>
                                        <span className={sortOrder === 'asc' ? 'font-semibold' : ''}>Recent Last</span>
                                    </DropdownMenuItem>
                                </DropdownMenuContent>
                            </DropdownMenu>
                        )}
                    </div>
                </div>

                {/* Content */}
                <TabsContent value="activity" className="mt-0 p-6">
                    {isLoadingActivities ? (
                        <div className="flex items-center justify-center py-12">
                            <Loader2 className="h-8 w-8 animate-spin text-primary" />
                            <span className="ml-2 text-sm text-slate-600">Loading activities...</span>
                        </div>
                    ) : activityTimeline.length === 0 ? (
                        <div className="py-16 text-center">
                            <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-slate-100">
                                <FileText className="h-8 w-8 text-slate-400" />
                            </div>
                            <p className="text-sm font-medium text-slate-600">No activity yet</p>
                            <p className="mt-1 text-xs text-slate-500">Activity will appear here as it happens</p>
                        </div>
                    ) : (
                        <>
                            <Timeline groups={activityTimeline} />

                            {/* Infinite scroll sentinel */}
                            {hasMoreActivities && <div ref={sentinelRef} className="h-px" />}

                            {/* Loading indicator */}
                            {isLoadingMoreActivities && (
                                <div className="flex items-center justify-center py-8">
                                    <Loader2 className="h-6 w-6 animate-spin text-primary" />
                                    <span className="ml-2 text-sm text-slate-600">Loading more...</span>
                                </div>
                            )}

                            {/* Load More Button (fallback) */}
                            {hasMoreActivities && !isLoadingMoreActivities && (
                                <div className="flex justify-center py-8">
                                    <Button
                                        onClick={onLoadMore}
                                        disabled={isLoadingMoreActivities}
                                        variant="outline"
                                        size="lg"
                                        className="min-w-[200px]"
                                    >
                                        Load More Activities
                                    </Button>
                                </div>
                            )}

                            {/* End of results indicator */}
                            {!hasMoreActivities && activityTimeline.length > 0 && (
                                <div className="py-8 text-center">
                                    <div className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-4 py-2">
                                        <div className="h-1.5 w-1.5 rounded-full bg-slate-400"></div>
                                        <p className="text-xs font-medium text-slate-500">All activities loaded</p>
                                        <div className="h-1.5 w-1.5 rounded-full bg-slate-400"></div>
                                    </div>
                                </div>
                            )}
                        </>
                    )}
                </TabsContent>

                <TabsContent value="note" className="mt-0 p-3 sm:p-6">
                    {isLoadingActivities ? (
                        <div className="flex items-center justify-center py-12">
                            <Loader2 className="h-8 w-8 animate-spin text-primary" />
                            <span className="ml-2 text-sm text-slate-600">Loading notes...</span>
                        </div>
                    ) : notesTimeline.length === 0 ? (
                        <div className="py-12 text-center">
                            <StickyNote className="mx-auto mb-3 h-12 w-12 text-slate-300" />
                            <p className="text-sm text-slate-500">No notes yet</p>
                            <Button size="sm" className="mt-4">
                                <Plus className="mr-1.5 h-4 w-4" />
                                Add Note
                            </Button>
                        </div>
                    ) : (
                        <>
                            <Timeline groups={notesTimeline} />

                            {/* Infinite scroll sentinel */}
                            {hasMoreActivities && <div ref={sentinelRef} className="h-px" />}

                            {/* Loading indicator */}
                            {isLoadingMoreActivities && (
                                <div className="flex items-center justify-center py-8">
                                    <Loader2 className="h-6 w-6 animate-spin text-primary" />
                                    <span className="ml-2 text-sm text-slate-600">Loading more...</span>
                                </div>
                            )}

                            {/* Load More Button (fallback) */}
                            {hasMoreActivities && !isLoadingMoreActivities && (
                                <div className="flex justify-center py-8">
                                    <Button onClick={onLoadMore} disabled={isLoadingMoreActivities} variant="outline" size="lg">
                                        Load More Notes
                                    </Button>
                                </div>
                            )}

                            {!hasMoreActivities && notesTimeline.length > 0 && (
                                <div className="py-8 text-center text-xs text-slate-400">All notes loaded</div>
                            )}
                        </>
                    )}
                </TabsContent>

                <TabsContent value="task" className="mt-0 p-3 sm:p-6">
                    {isLoadingActivities ? (
                        <div className="flex items-center justify-center py-12">
                            <Loader2 className="h-8 w-8 animate-spin text-primary" />
                        </div>
                    ) : tasksTimeline.length === 0 ? (
                        <div className="py-12 text-center">
                            <CheckCircle2 className="mx-auto mb-3 h-12 w-12 text-slate-300" />
                            <p className="text-sm text-slate-500">No tasks yet</p>
                        </div>
                    ) : (
                        <>
                            <Timeline groups={tasksTimeline} />
                            {hasMoreActivities && <div ref={sentinelRef} className="h-px" />}
                            {isLoadingMoreActivities && (
                                <div className="flex items-center justify-center py-8">
                                    <Loader2 className="h-6 w-6 animate-spin text-primary" />
                                    <span className="ml-2 text-sm text-slate-600">Loading more...</span>
                                </div>
                            )}
                            {hasMoreActivities && !isLoadingMoreActivities && (
                                <div className="flex justify-center py-8">
                                    <Button onClick={onLoadMore} disabled={isLoadingMoreActivities} variant="outline" size="lg">
                                        Load More Tasks
                                    </Button>
                                </div>
                            )}
                            {!hasMoreActivities && tasksTimeline.length > 0 && <div className="py-8 text-center text-xs text-slate-400">All tasks loaded</div>}
                        </>
                    )}
                </TabsContent>

                <TabsContent value="emails" className="mt-0 p-3 sm:p-6">
                    {isLoadingActivities ? (
                        <div className="flex items-center justify-center py-12">
                            <Loader2 className="h-8 w-8 animate-spin text-primary" />
                        </div>
                    ) : emailsTimeline.length === 0 ? (
                        <div className="py-12 text-center">
                            <Mail className="mx-auto mb-3 h-12 w-12 text-slate-300" />
                            <p className="text-sm text-slate-500">No emails yet</p>
                        </div>
                    ) : (
                        <>
                            <Timeline groups={emailsTimeline} />
                            {hasMoreActivities && <div ref={sentinelRef} className="h-px" />}
                            {isLoadingMoreActivities && (
                                <div className="flex items-center justify-center py-8">
                                    <Loader2 className="h-6 w-6 animate-spin text-primary" />
                                    <span className="ml-2 text-sm text-slate-600">Loading more...</span>
                                </div>
                            )}
                            {hasMoreActivities && !isLoadingMoreActivities && (
                                <div className="flex justify-center py-8">
                                    <Button onClick={onLoadMore} disabled={isLoadingMoreActivities} variant="outline" size="lg">
                                        Load More Emails
                                    </Button>
                                </div>
                            )}
                            {!hasMoreActivities && emailsTimeline.length > 0 && <div className="py-8 text-center text-xs text-slate-400">All emails loaded</div>}
                        </>
                    )}
                </TabsContent>

                <TabsContent value="calls" className="mt-0 p-3 sm:p-6">
                    {isLoadingActivities ? (
                        <div className="flex items-center justify-center py-12">
                            <Loader2 className="h-8 w-8 animate-spin text-primary" />
                        </div>
                    ) : callsTimeline.length === 0 ? (
                        <div className="py-12 text-center">
                            <Phone className="mx-auto mb-3 h-12 w-12 text-slate-300" />
                            <p className="text-sm text-slate-500">No calls yet</p>
                        </div>
                    ) : (
                        <>
                            <Timeline groups={callsTimeline} />
                            {hasMoreActivities && <div ref={sentinelRef} className="h-px" />}
                            {isLoadingMoreActivities && (
                                <div className="flex items-center justify-center py-8">
                                    <Loader2 className="h-6 w-6 animate-spin text-primary" />
                                    <span className="ml-2 text-sm text-slate-600">Loading more...</span>
                                </div>
                            )}
                            {hasMoreActivities && !isLoadingMoreActivities && (
                                <div className="flex justify-center py-8">
                                    <Button onClick={onLoadMore} disabled={isLoadingMoreActivities} variant="outline" size="lg">
                                        Load More Calls
                                    </Button>
                                </div>
                            )}
                            {!hasMoreActivities && callsTimeline.length > 0 && <div className="py-8 text-center text-xs text-slate-400">All calls loaded</div>}
                        </>
                    )}
                </TabsContent>

                <TabsContent value="meetings" className="mt-0 p-3 sm:p-6">
                    {isLoadingActivities ? (
                        <div className="flex items-center justify-center py-12">
                            <Loader2 className="h-8 w-8 animate-spin text-primary" />
                        </div>
                    ) : meetingsTimeline.length === 0 ? (
                        <div className="py-12 text-center">
                            <Calendar className="mx-auto mb-3 h-12 w-12 text-slate-300" />
                            <p className="text-sm text-slate-500">No meetings yet</p>
                        </div>
                    ) : (
                        <>
                            <Timeline groups={meetingsTimeline} />
                            {hasMoreActivities && <div ref={sentinelRef} className="h-px" />}
                            {isLoadingMoreActivities && (
                                <div className="flex items-center justify-center py-8">
                                    <Loader2 className="h-6 w-6 animate-spin text-primary" />
                                    <span className="ml-2 text-sm text-slate-600">Loading more...</span>
                                </div>
                            )}
                            {hasMoreActivities && !isLoadingMoreActivities && (
                                <div className="flex justify-center py-8">
                                    <Button onClick={onLoadMore} disabled={isLoadingMoreActivities} variant="outline" size="lg">
                                        Load More Meetings
                                    </Button>
                                </div>
                            )}
                            {!hasMoreActivities && meetingsTimeline.length > 0 && <div className="py-8 text-center text-xs text-slate-400">All meetings loaded</div>}
                        </>
                    )}
                </TabsContent>

                <TabsContent value="reminders" className="mt-0 p-3 sm:p-6">
                    {isLoadingActivities ? (
                        <div className="flex items-center justify-center py-12">
                            <Loader2 className="h-8 w-8 animate-spin text-primary" />
                        </div>
                    ) : remindersTimeline.length === 0 ? (
                        <div className="py-12 text-center">
                            <Bell className="mx-auto mb-3 h-12 w-12 text-slate-300" />
                            <p className="text-sm text-slate-500">No reminders yet</p>
                        </div>
                    ) : (
                        <>
                            <Timeline groups={remindersTimeline} />
                            {hasMoreActivities && <div ref={sentinelRef} className="h-px" />}
                            {isLoadingMoreActivities && (
                                <div className="flex items-center justify-center py-8">
                                    <Loader2 className="h-6 w-6 animate-spin text-primary" />
                                    <span className="ml-2 text-sm text-slate-600">Loading more...</span>
                                </div>
                            )}
                            {hasMoreActivities && !isLoadingMoreActivities && (
                                <div className="flex justify-center py-8">
                                    <Button onClick={onLoadMore} disabled={isLoadingMoreActivities} variant="outline" size="lg">
                                        Load More Reminders
                                    </Button>
                                </div>
                            )}
                            {!hasMoreActivities && remindersTimeline.length > 0 && <div className="py-8 text-center text-xs text-slate-400">All reminders loaded</div>}
                        </>
                    )}
                </TabsContent>
            </Tabs>
        </div>
    );
};