import { Button } from '@/components/ui/button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { ArrowUpDown, Grid2x2 } from 'lucide-react';
import { useMemo } from 'react';
import ActivityTimeline from '../timeline/ActivityTimeline';
import { LoadingState, TAB_CONFIGS } from './EmptyState';
import PaginationControls from './PaginationControls';
import TabContentComponent from './TabContentComponent';

export const ContactToolsTabs = ({
    activityTimeline,
    notesTimeline,
    tasksTimeline,
    emailsTimeline,
    callsTimeline,
    meetingsTimeline,
    remindersTimeline,
    isLoadingActivities = false,
    hasMoreActivities = false,
    isLoadingMoreActivities = false,
    onLoadMore,
    sortOrder = 'desc',
    onSortChange,
    activeSubTab,
    onTabChange,
    sentinelRef,
    refetchData,
}: ContactActivityTabsProps) => {
    const timelineDataMap = useMemo(
        () => ({
            activity: activityTimeline,
            task: tasksTimeline,
            note: notesTimeline,
            reminders: remindersTimeline,
            emails: emailsTimeline,
            calls: callsTimeline,
            meetings: meetingsTimeline,
        }),
        [activityTimeline, tasksTimeline, notesTimeline, remindersTimeline, emailsTimeline, callsTimeline, meetingsTimeline],
    );
    return (
        <div className="w-full rounded-xl border border-muted bg-background shadow-sm">
            {/* Secondary Tabs */}
            <Tabs value={activeSubTab} onValueChange={onTabChange} className="w-full">
                <div className="overflow-x-auto border-b border-gray-200 px-6">
                    <div className="flex items-center justify-between gap-4">
                        <TabsList className="h-auto flex-nowrap gap-8 bg-transparent p-0 text-[15px] sm:gap-6 lg:gap-10">
                            <TabsTrigger
                                value="activity"
                                className="flex cursor-pointer items-center gap-2 rounded-none px-0 py-4 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"
                            >
                                <Grid2x2 className="h-4 w-4" />
                                <span className="hidden sm:inline">Activity</span>
                            </TabsTrigger>
                            {TAB_CONFIGS.map((config) => {
                                const Icon = config.icon;
                                return (
                                    <TabsTrigger
                                        key={config.value}
                                        value={config.value}
                                        className="flex cursor-pointer items-center gap-2 rounded-none px-0 py-4 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"
                                    >
                                        <Icon className="h-4 w-4" />
                                        <span className="hidden sm:inline">{config.label}</span>
                                    </TabsTrigger>
                                );
                            })}
                        </TabsList>

                        {/* Sort Dropdown */}
                        {onSortChange && (
                            <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                    <Button variant="outline" size="sm" className="flex items-center gap-2">
                                        <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>
                <TabsContent value="activity" className="mt-0 p-4">
                    {isLoadingActivities ? (
                        <LoadingState message={`Loading Activities...`} />
                    ) : activityTimeline?.length === 0 ? (
                        // <EmptyState config={config} showAddButton={showAddButton} />
                        <p>No Data Found</p>
                    ) : (
                        <>
                            <ActivityTimeline groups={activityTimeline} refetchData={refetchData} />
                            <PaginationControls
                                hasMoreActivities={hasMoreActivities}
                                isLoadingMoreActivities={isLoadingMoreActivities}
                                onLoadMore={onLoadMore}
                                sentinelRef={sentinelRef}
                                completionText={`All activities loaded`}
                                timelineLength={activityTimeline.length}
                                loadMoreText={'Load more'}
                            />
                        </>
                    )}
                </TabsContent>
                {/* Content */}
                {TAB_CONFIGS.map((config) => (
                    <TabContentComponent
                        key={config.value}
                        config={config}
                        timeline={timelineDataMap[config.value as keyof typeof timelineDataMap]}
                        isLoadingActivities={isLoadingActivities}
                        hasMoreActivities={hasMoreActivities}
                        isLoadingMoreActivities={isLoadingMoreActivities}
                        onLoadMore={onLoadMore}
                        sentinelRef={sentinelRef}
                        refetchData={refetchData}
                        showAddButton={config.value === 'note'}
                    />
                ))}
            </Tabs>
        </div>
    );
};