import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { useInfiniteScroll } from '@/hooks/useInfiniteScroll';
import { Head } from '@inertiajs/react';
import axios from 'axios';
import { ChevronDown, DollarSign, FileQuestion, FileText, History, Paperclip, Receipt, ShoppingCart } from 'lucide-react';
import { useCallback, useEffect, useState } from 'react';
import { TimelineGroup } from '../Timeline';
import { ContactSidebar } from './ContactSidebar';
import { ContactToolsTabs } from './ContactToolsTabs';

// Project globals (Ziggy / Inertia route helper)
declare const route: (...args: any[]) => string;

export const ContactDetailsPage = ({ contact, availableContacts = [], pageTitle = 'Contact Details', contactAbleType }: ContactDetailsPageProps) => {
    const [activeTab, setActiveTab] = useState('general');
    const [activities, setActivities] = useState<ActivityState>({
        data: [],
        nextCursor: null,
        hasMore: false,
        isLoading: false,
    });

    const [activeSubTab, setActiveSubTab] = useState('activity');
    const [sortOrder, setSortOrder] = useState<'desc' | 'asc'>('desc');
    const [refetcher, setRefetcher] = useState(false);

    // Early return if contact is not available
    if (!contact) {
        return <div>Loading contact...</div>;
    }

    const fetchActivities = useCallback(
        async (cursor: string | null = null, reset: boolean = false) => {
            if (activities.isLoading || (!cursor && !reset && activities.data.length > 0 && !activities.hasMore)) {
                return;
            }

            setActivities((prev) => ({ ...prev, isLoading: true }));

            try {
                let routeName = 'contacts.activities';

                if (activeSubTab === 'note') {
                    routeName = 'contacts.notes';
                } else if (activeSubTab === 'task') {
                    routeName = 'contacts.tasks';
                } else if (activeSubTab === 'reminders') {
                    routeName = 'contacts.reminders';
                }

                // Skip fetching for tabs without backend endpoints
                if (['emails', 'calls', 'meetings'].includes(activeSubTab)) {
                    setActivities({
                        data: [],
                        nextCursor: null,
                        hasMore: false,
                        isLoading: false,
                    });
                    return;
                }

                const params: any = {
                    per_page: 50,
                    sort: sortOrder,
                    contact: contact,
                };

                if (cursor) {
                    params.cursor = cursor;
                }

                const fullUrl = route(routeName, contact.uid);
                const response = await axios.get(fullUrl, { params });

                setActivities((prev) => {
                    const newData = cursor && !reset ? [...prev.data, ...response.data.data] : response.data.data;

                    return {
                        data: newData,
                        nextCursor: response.data.next_cursor,
                        hasMore: response.data.has_more,
                        isLoading: false,
                    };
                });
            } catch (error) {
                setActivities((prev) => ({ ...prev, isLoading: false }));
            }
        },
        [contact.uid, sortOrder, activeSubTab, refetcher],
    );
    // Load data when component mounts and when active tab or sub-tab changes
    useEffect(() => {
        if (activeTab === 'general') {
            // Reset and load activities when switching sub-tabs
            setActivities({
                data: [],
                nextCursor: null,
                hasMore: false,
                isLoading: false,
            });
            fetchActivities(null, true);
        }
    }, [activeTab, activeSubTab, refetcher]);

    const dataRefetcher = useCallback(() => {
        setRefetcher((prev) => !prev);
    }, []);

    // Reload activities when sort order changes
    useEffect(() => {
        if (activeTab === 'general' && activities.data.length > 0) {
            setActivities({
                data: [],
                nextCursor: null,
                hasMore: false,
                isLoading: false,
            });
            fetchActivities(null, true);
        }
    }, [sortOrder]);

    // Handler for Load More button
    const handleLoadMore = useCallback(() => {
        if (activities.hasMore && !activities.isLoading && activities.nextCursor) {
            fetchActivities(activities.nextCursor);
        }
    }, [activities.hasMore, activities.isLoading, activities.nextCursor, fetchActivities]);

    // Infinite scroll sentinel ref
    const sentinelRef = useInfiniteScroll({
        hasMore: activities.hasMore,
        isLoading: activities.isLoading,
        onLoadMore: handleLoadMore,
        threshold: 300, // Trigger 300px before reaching the sentinel
    }) as React.RefObject<HTMLDivElement>;

    // Transform activities from the new API format
    const transformActivitiesToTimeline = useCallback(
        (activityItems: any[]): TimelineGroup[] => {
            if (!activityItems || activityItems.length === 0) return [];

            const sortedActivities = [...activityItems].sort((a, b) => {
                const aPinned = a.pinned || a.is_pinned || false;
                const bPinned = b.pinned || b.is_pinned || false;

                if (aPinned && !bPinned) return -1;
                if (!aPinned && bPinned) return 1;

                const dateField = a.activity_date ? 'activity_date' : 'created_at';
                const dateA = new Date(a[dateField]);
                const dateB = new Date(b[dateField]);

                if (dateA.getTime() === dateB.getTime()) {
                    return sortOrder === 'desc' ? b.id - a.id : a.id - b.id;
                }
                return sortOrder === 'desc' ? dateB.getTime() - dateA.getTime() : dateA.getTime() - dateB.getTime();
            });

            const grouped = sortedActivities.reduce((acc: any, item: any, index: number) => {
                const dateField = item.activity_date ? 'activity_date' : 'created_at';
                const date = new Date(item[dateField]);
                const dateKey = date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });

                if (!acc[dateKey]) {
                    acc[dateKey] = [];
                }

                const metadata = [];

                if (item.actor_name && typeof item.actor_name === 'string') {
                    metadata.push({ label: 'Created by', value: item.actor_name });
                }

                if (item.due_date) {
                    const dueDateStr =
                        typeof item.due_date === 'string'
                            ? new Date(item.due_date).toLocaleDateString('en-US', {
                                  month: 'short',
                                  day: 'numeric',
                                  year: 'numeric',
                              })
                            : String(item.due_date);
                    metadata.push({ label: 'Due date', value: dueDateStr });
                }

                if (item.due_date_time) {
                    const dueDateTimeStr =
                        typeof item.due_date_time === 'string'
                            ? new Date(item.due_date_time).toLocaleString('en-US', {
                                  month: 'short',
                                  day: 'numeric',
                                  year: 'numeric',
                                  hour: 'numeric',
                                  minute: 'numeric',
                              })
                            : String(item.due_date_time);
                    metadata.push({ label: 'Due date/time', value: dueDateTimeStr });
                }

                if (item.assigned_to_name && typeof item.assigned_to_name === 'string') {
                    metadata.push({ label: 'Assigned to', value: item.assigned_to_name });
                }

                if (item.priority) {
                    const priorityLabels: { [key: number]: string } = {
                        1: 'Low',
                        2: 'Medium',
                        3: 'High',
                        4: 'Urgent',
                    };
                    metadata.push({ label: 'Priority', value: priorityLabels[item.priority] || String(item.priority) });
                }

                if (item.metadata) {
                    Object.entries(item.metadata).forEach(([key, value]: [string, any]) => {
                        if (key !== 'due_date' && key !== 'due_date_time') {
                            let displayValue = value;
                            if (typeof value === 'object' && value !== null) {
                                if (value instanceof Date || (typeof value === 'string' && !isNaN(Date.parse(value)))) {
                                    displayValue = new Date(value).toLocaleString('en-US');
                                } else {
                                    displayValue = JSON.stringify(value);
                                }
                            }
                            metadata.push({
                                label: key.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase()),
                                value: displayValue,
                            });
                        }
                    });
                }

                const title = String(item.title || 'Untitled');
                const description = String(item.description || item.content || item.body || item.notes || '');

                let type = String(item.action || activeSubTab);
                if (type.includes('_')) {
                    type = type.split('_')[0];
                }
                if (type === 'reminders') {
                    type = 'reminder';
                }

                acc[dateKey].push({
                    id: item.id,
                    date: date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric' }),
                    title,
                    description,
                    type,
                    timestamp: date.toISOString(),
                    isPinned: Boolean(item.pinned || item.is_pinned),
                    metadata,
                    animationDelay: index * 50,
                    data: item,
                });

                return acc;
            }, {});

            const sortedGroups = Object.entries(grouped).sort(([dateA], [dateB]) => {
                const dateObjA = new Date(dateA);
                const dateObjB = new Date(dateB);
                return sortOrder === 'desc' ? dateObjB.getTime() - dateObjA.getTime() : dateObjA.getTime() - dateObjB.getTime();
            });

            return sortedGroups.map(([label, items]: [string, any]) => ({
                label,
                items: items.sort((a: any, b: any) => {
                    if (a.isPinned && !b.isPinned) return -1;
                    if (!a.isPinned && b.isPinned) return 1;

                    const dateA = new Date(a.timestamp);
                    const dateB = new Date(b.timestamp);
                    if (dateA.getTime() === dateB.getTime()) {
                        return sortOrder === 'desc' ? b.id - a.id : a.id - b.id;
                    }
                    return sortOrder === 'desc' ? dateB.getTime() - dateA.getTime() : dateA.getTime() - dateB.getTime();
                }),
            }));
        },
        [sortOrder, activeSubTab],
    );

    // Transform activities once and reuse for all timeline views
    const timelineData = transformActivitiesToTimeline(activities.data);

    return (
        <>
            <Head title={`${contact?.name || 'Contact'} - ${pageTitle}`} />
            <Tabs
                defaultValue="general"
                value={activeTab}
                onValueChange={setActiveTab}
                className="flex h-screen flex-col overflow-hidden bg-background"
            >
                {/* Header - Fixed */}
                <div className="shrink-0 border-b bg-background">
                    {/* Primary Tabs */}
                    <div className="flex items-center gap-1 overflow-x-auto border-b">
                        <TabsList className="my-2 h-auto flex-nowrap gap-1 bg-transparent p-0 px-3 text-[15px]">
                            <TabsTrigger
                                value="general"
                                className="flex h-10 items-center gap-2 rounded-lg border-2 border-transparent px-3 py-2.5 font-medium whitespace-nowrap data-[state=active]:border-primary data-[state=active]:bg-primary data-[state=active]:text-white data-[state=inactive]:text-slate-600 sm:px-4"
                            >
                                <FileText className="h-3 w-3 sm:h-4 sm:w-4" />
                                <span className="hidden sm:inline">General</span>
                            </TabsTrigger>
                            <TabsTrigger
                                value="deals"
                                className="flex h-10 items-center gap-2 rounded-xl border-2 border-transparent px-3 py-2.5 font-medium whitespace-nowrap data-[state=active]:border-primary data-[state=active]:bg-primary data-[state=active]:text-white data-[state=inactive]:text-slate-600 sm:px-4"
                            >
                                <DollarSign className="h-3 w-3 sm:h-4 sm:w-4" />
                                <span className="hidden sm:inline">Deals</span>
                            </TabsTrigger>
                            <TabsTrigger
                                value="orders"
                                className="flex h-10 items-center gap-2 rounded-xl border-2 border-transparent px-3 py-2.5 font-medium whitespace-nowrap data-[state=active]:border-primary data-[state=active]:bg-primary data-[state=active]:text-white data-[state=inactive]:text-slate-600 sm:px-4"
                            >
                                <ShoppingCart className="h-3 w-3 sm:h-4 sm:w-4" />
                                <span className="hidden sm:inline">Order</span>
                            </TabsTrigger>
                            <TabsTrigger
                                value="quotes"
                                className="flex h-10 items-center gap-2 rounded-xl border-2 border-transparent px-3 py-2.5 font-medium whitespace-nowrap data-[state=active]:border-primary data-[state=active]:bg-primary data-[state=active]:text-white data-[state=inactive]:text-slate-600 sm:px-4"
                            >
                                <FileQuestion className="h-3 w-3 sm:h-4 sm:w-4" />
                                <span className="hidden sm:inline">Quotes</span>
                            </TabsTrigger>
                            <TabsTrigger
                                value="history"
                                className="flex h-10 items-center gap-2 rounded-xl border-2 border-transparent px-3 py-2.5 font-medium whitespace-nowrap data-[state=active]:border-primary data-[state=active]:bg-primary data-[state=active]:text-white data-[state=inactive]:text-slate-600 sm:px-4"
                            >
                                <History className="h-3 w-3 sm:h-4 sm:w-4" />
                                <span className="hidden sm:inline">History</span>
                            </TabsTrigger>
                            <TabsTrigger
                                value="invoices"
                                className="flex h-10 items-center gap-2 rounded-xl border-2 border-transparent px-3 py-2.5 font-medium whitespace-nowrap data-[state=active]:border-primary data-[state=active]:bg-primary data-[state=active]:text-white data-[state=inactive]:text-slate-600 sm:px-4"
                            >
                                <Receipt className="h-3 w-3 sm:h-4 sm:w-4" />
                                <span className="hidden sm:inline">Invoices</span>
                            </TabsTrigger>
                            <TabsTrigger
                                value="attachments"
                                className="flex h-10 items-center gap-2 rounded-xl border-2 border-transparent px-3 py-2.5 font-medium whitespace-nowrap data-[state=active]:border-primary data-[state=active]:bg-primary data-[state=active]:text-white data-[state=inactive]:text-slate-600 sm:px-4"
                            >
                                <Paperclip className="h-3 w-3 sm:h-4 sm:w-4" />
                                <span className="hidden sm:inline">Attachments</span>
                            </TabsTrigger>
                        </TabsList>
                        <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                                <button className="flex items-center gap-1 px-3 py-2.5 font-medium whitespace-nowrap text-slate-600 hover:text-slate-900 sm:px-4">
                                    <span className="hidden sm:inline">More</span>
                                    <ChevronDown className="h-3 w-3 sm:h-4 sm:w-4" />
                                </button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end">
                                <DropdownMenuItem>Projects</DropdownMenuItem>
                                <DropdownMenuItem>Contracts</DropdownMenuItem>
                            </DropdownMenuContent>
                        </DropdownMenu>
                    </div>
                </div>

                {/* Scrollable Content Area */}
                <div className="no-scrollbar flex-1 overflow-x-hidden overflow-y-auto">
                    <div className="h-full p-2 sm:p-4">
                        {/* Main Content */}
                        <main className="h-full">
                            <TabsContent value="general" className="mt-0 flex flex-col gap-4 lg:flex-row lg:gap-6">
                                {/* Sidebar - Sticky on large screens */}
                                <div className="lg:sticky lg:top-4 lg:h-fit lg:self-start">
                                    <ContactSidebar
                                        contact={contact}
                                        availableContacts={availableContacts}
                                        contactAbleType={contactAbleType}
                                        refetchData={dataRefetcher}
                                    />
                                </div>

                                <div className="w-[50px] flex-1 overflow-x-auto">
                                    <ContactToolsTabs
                                        activityTimeline={timelineData}
                                        notesTimeline={timelineData}
                                        tasksTimeline={timelineData}
                                        emailsTimeline={timelineData}
                                        callsTimeline={timelineData}
                                        meetingsTimeline={timelineData}
                                        remindersTimeline={timelineData}
                                        isLoadingActivities={activities.isLoading && activities.data.length === 0}
                                        hasMoreActivities={activities.hasMore}
                                        isLoadingMoreActivities={activities.isLoading && activities.data.length > 0}
                                        onLoadMore={handleLoadMore}
                                        sortOrder={sortOrder}
                                        onSortChange={setSortOrder}
                                        activeSubTab={activeSubTab}
                                        onTabChange={setActiveSubTab}
                                        sentinelRef={sentinelRef}
                                        refetchData={dataRefetcher}
                                    />
                                </div>
                            </TabsContent>

                            <TabsContent value="deals" className="mt-0">
                                <div className="rounded-lg border border-slate-200 bg-white p-6 text-center sm:p-12">
                                    <DollarSign className="mx-auto mb-4 h-16 w-16 text-slate-300" />
                                    <h3 className="mb-2 text-lg font-medium text-slate-900">Deals</h3>
                                    <p className="text-sm text-slate-500">Content for deals will be displayed here</p>
                                </div>
                            </TabsContent>

                            <TabsContent value="orders" className="mt-0">
                                <div className="rounded-lg border border-slate-200 bg-white p-6 text-center sm:p-12">
                                    <ShoppingCart className="mx-auto mb-4 h-16 w-16 text-slate-300" />
                                    <h3 className="mb-2 text-lg font-medium text-slate-900">Orders</h3>
                                    <p className="text-sm text-slate-500">Content for orders will be displayed here</p>
                                </div>
                            </TabsContent>

                            <TabsContent value="quotes" className="mt-0">
                                <div className="rounded-lg border border-slate-200 bg-white p-6 text-center sm:p-12">
                                    <FileQuestion className="mx-auto mb-4 h-16 w-16 text-slate-300" />
                                    <h3 className="mb-2 text-lg font-medium text-slate-900">Quotes</h3>
                                    <p className="text-sm text-slate-500">Content for quotes will be displayed here</p>
                                </div>
                            </TabsContent>

                            <TabsContent value="history" className="mt-0">
                                <div className="rounded-lg border border-slate-200 bg-white p-6 text-center sm:p-12">
                                    <History className="mx-auto mb-4 h-16 w-16 text-slate-300" />
                                    <h3 className="mb-2 text-lg font-medium text-slate-900">History</h3>
                                    <p className="text-sm text-slate-500">Content for history will be displayed here</p>
                                </div>
                            </TabsContent>

                            <TabsContent value="invoices" className="mt-0">
                                <div className="rounded-lg border border-slate-200 bg-white p-6 text-center sm:p-12">
                                    <Receipt className="mx-auto mb-4 h-16 w-16 text-slate-300" />
                                    <h3 className="mb-2 text-lg font-medium text-slate-900">Invoices</h3>
                                    <p className="text-sm text-slate-500">Content for invoices will be displayed here</p>
                                </div>
                            </TabsContent>

                            <TabsContent value="attachments" className="mt-0">
                                <div className="rounded-lg border border-slate-200 bg-white p-6 text-center sm:p-12">
                                    <Paperclip className="mx-auto mb-4 h-16 w-16 text-slate-300" />
                                    <h3 className="mb-2 text-lg font-medium text-slate-900">Attachments</h3>
                                    <p className="text-sm text-slate-500">Content for attachments will be displayed here</p>
                                </div>
                            </TabsContent>
                        </main>
                    </div>
                </div>
            </Tabs>
        </>
    );
};