import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@admin/components/ui/dropdown-menu';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@admin/components/ui/tabs';
import { useInfiniteScroll } from '@admin/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;

interface ContactDetails {
    source?: string;
    contact_group?: string;
    industry?: string;
    address?: string;
    city?: string;
    state?: string;
    country?: string;
    zip_code?: string;
    company?: string;
    designation?: string;
    website?: string;
    tax_id?: string;
    company_size?: string;
    founded_year?: string;
    department?: string;
    linkedin?: string;
    birthday?: string;
    notes?: string;
}

interface Contact {
    id: number;
    uid: string;
    name: string;
    email: string;
    phone: string;
    type: number;
    type_label?: string;
    category: number;
    status: number;
    avatar?: string;
    created_at?: string;
    details?: ContactDetails;
    company_details?: {
        logo?: string;
        website?: string;
        industry?: string;
        company_size?: string;
    };
    individual_details?: {
        profile_photo?: string;
        occupation?: string;
    };
    manager?: {
        id: number;
        uid: string;
        name: string;
        email: string;
        avatar?: string;
    };
    assigned_users?: Array<{
        id: number;
        uid: string;
        name: string;
        email: string;
        avatar?: string;
        type?: string;
        role?: string;
    }>;
}

interface ContactOption {
    id: number;
    name: string;
}

interface ContactDetailsPageProps {
    contact?: Contact;
    availableContacts?: ContactOption[];
    pageTitle?: string;
    contactType?: string;
    contactAbleType?: string;
}

interface ActivityState {
    data: any[];
    nextCursor: string | null;
    hasMore: boolean;
    isLoading: boolean;
}

export const ContactDetailsPage = ({
    contact,
    availableContacts = [],
    pageTitle = 'Contact Details',

    contactAbleType,
}: ContactDetailsPageProps) => {
    // Early return if contact is not available
    if (!contact) {
        return <div>Loading contact...</div>;
    }

    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'); // 'desc' = recent first, 'asc' = recent last
    const [refetcher, setRefetcher] = useState(false);
    // Determine the route prefix based on the current URL
    const getRoutePrefix = () => {
        const path = window.location.pathname;
        // Check more specific paths first to avoid substring matches
        if (path.includes('/crm/customers/')) return 'crm.customer';
        if (path.includes('/inventory-customers/')) return 'inventory-customer';
        if (path.includes('/companies/')) return 'company';
        if (path.includes('/customers/')) return 'customer';
        return 'contacts';
    };

    // Fetch activities with cursor pagination
    const fetchActivities = useCallback(
        async (cursor: string | null = null, reset: boolean = false) => {
            // Check if we should skip this fetch
            if (activities.isLoading) {
                return;
            }

            if (!cursor && !reset && activities.data.length > 0 && !activities.hasMore) {
                return;
            }

            // Set loading state
            setActivities((prev) => ({ ...prev, isLoading: true }));

            try {
                const routePrefix = getRoutePrefix();
                const identifier = contact.uid || contact.id;

                // Determine which endpoint to use based on active tab
                let routeName = `${routePrefix}.activities`;

                // Use specific endpoints for note, task, and reminder tabs
                if (activeSubTab === 'note') {
                    routeName = `${routePrefix}.notes`;
                } else if (activeSubTab === 'task') {
                    routeName = `${routePrefix}.tasks`;
                } else if (activeSubTab === 'reminders') {
                    routeName = `${routePrefix}.reminders`;
                }

                // Load more items per page to ensure we get all pinned items
                const perPage = 50;
                const params: any = { per_page: perPage, sort: sortOrder };
                if (cursor) {
                    params.cursor = cursor;
                }

                // Debug logging
                const fullUrl = route(routeName, identifier);
                console.log('🔍======= Fetching data with params:', {
                    routeName,
                    identifier,
                    activeSubTab,
                    params,
                    fullUrl,
                    pathname: window.location.pathname,
                    routePrefix: getRoutePrefix(),
                });

                // Skip fetching for tabs that don't have backend endpoints yet
                if (activeSubTab === 'emails' || activeSubTab === 'calls' || activeSubTab === 'meetings') {
                    setActivities({
                        data: [],
                        nextCursor: null,
                        hasMore: false,
                        isLoading: false,
                    });
                    return;
                }

                const response = await axios.get(fullUrl, { params });

                console.log('✅ Received response:', {
                    dataLength: response.data.data?.length || 0,
                    activeSubTab,
                    routeName,
                    response: response.data,
                });

                setActivities((prev) => {
                    const newData = cursor && !reset ? [...prev.data, ...response.data.data] : response.data.data;
                    console.log('🚀 ~ ContactDetailsPage ~ newData:', newData);

                    // Log pinned items count
                    const pinnedCount = newData.filter((item: any) => item.pinned || item.is_pinned).length;

                    console.log('📊 Setting activities state:', {
                        dataLength: newData.length,
                        pinnedCount,
                        activeSubTab,
                    });

                    return {
                        data: newData,
                        nextCursor: response.data.next_cursor,
                        hasMore: response.data.has_more,
                        isLoading: false,
                    };
                });
            } catch (error) {
                console.error('❌ Error fetching data:', error);
                if (axios.isAxiosError(error)) {
                    console.error('Response data:', error.response?.data);
                    console.error('Response status:', error.response?.status);
                }
                setActivities((prev) => ({ ...prev, isLoading: false }));
            }
        },
        [contact?.uid, contact?.id, sortOrder, activeSubTab, refetcher, activities.isLoading, activities.data.length, activities.hasMore],
    );

    // Load data when component mounts and when active tab or sub-tab changes
    useEffect(() => {
        console.log('🔄 useEffect triggered:', { activeTab, activeSubTab });
        if (activeTab === 'general') {
            // Reset and load activities when switching sub-tabs
            console.log('🔄 Resetting activities and fetching for subtab:', activeSubTab);
            setActivities({
                data: [],
                nextCursor: null,
                hasMore: false,
                isLoading: false,
            });
            fetchActivities(null, true);
        }
    }, [activeTab, activeSubTab, refetcher]);

    const dataRefetcher = () => {
        console.log('🚀 ~ ContactDetailsPage ~ refetcher:', refetcher);
        return 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 = (activityItems: any[]): TimelineGroup[] => {
        console.log('📊 Transforming activities:', {
            activityItems,
            count: activityItems?.length,
            activeSubTab,
            pinnedItems: activityItems?.filter((item) => item.pinned || item.is_pinned).length,
        });

        if (!activityItems || activityItems.length === 0) return [];

        // Sort activities by pinned status first, then by date to ensure proper ordering
        const sortedActivities = [...activityItems].sort((a, b) => {
            // Support both 'pinned' (from activity_logs) and 'is_pinned' (from source tables)
            const aPinned = a.pinned || a.is_pinned || false;
            const bPinned = b.pinned || b.is_pinned || false;

            // Pinned items first
            if (aPinned && !bPinned) return -1;
            if (!aPinned && bPinned) return 1;

            // Determine date field based on source
            // activity_logs uses 'activity_date', source tables use 'created_at'
            const dateField = a.activity_date ? 'activity_date' : 'created_at';
            const dateA = new Date(a[dateField]);
            const dateB = new Date(b[dateField]);

            // Sort by date first, then by id for consistent ordering
            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) => {
            // Determine date field and type based on source
            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] = [];
            }

            // Prepare metadata including actor and due date
            const metadata = [];

            // Add actor name if available (from activity_logs)
            if (item.actor_name && typeof item.actor_name === 'string') {
                metadata.push({
                    label: 'Created by',
                    value: item.actor_name,
                });
            }

            // Add due date if available (for tasks/reminders)
            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,
                });
            }

            // Add due date/time if available (for reminders)
            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,
                });
            }

            // Add assigned to name if available (for reminders)
            if (item.assigned_to_name && typeof item.assigned_to_name === 'string') {
                metadata.push({
                    label: 'Assigned to',
                    value: item.assigned_to_name,
                });
            }

            // Add priority if available (for tasks)
            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),
                });
            }

            // Add existing metadata
            if (item.metadata) {
                Object.entries(item.metadata).forEach(([key, value]: [string, any]) => {
                    // Skip already processed fields
                    if (key !== 'due_date' && key !== 'due_date_time') {
                        // Convert value to string if it's an object
                        let displayValue = value;
                        if (typeof value === 'object' && value !== null) {
                            // If it's a date-like object, try to format it
                            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,
                        });
                    }
                });
            }

            // Determine title and description based on source - ensure they are strings
            const title = String(item.title || 'Untitled');
            const description = String(item.description || item.content || item.body || item.notes || '');

            // Determine type: from activity_logs extract from 'action' (e.g., "task_created" -> "task"),
            // from source tables use activeSubTab
            let type = String(item.action || activeSubTab);
            // Extract type prefix from actions like "task_created", "note_created", "reminder_created"
            if (type.includes('_')) {
                type = type.split('_')[0];
            }
            // Normalize plural to singular for activityConfig (reminders -> reminder)
            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: title,
                description: description,
                type: type,
                timestamp: date.toISOString(),
                isPinned: Boolean(item.pinned || item.is_pinned), // Ensure boolean
                metadata: metadata,
                animationDelay: index * 50, // Stagger animation for smooth appearance
            });

            return acc;
        }, {});

        // Sort groups by date (most recent first or oldest first based on sortOrder)
        // But keep pinned items at the top within each group
        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();
        });

        const result = sortedGroups.map(([label, items]: [string, any]) => ({
            label,
            // Sort items within each group by pinned status first, then by timestamp and id for consistent ordering
            items: items.sort((a: any, b: any) => {
                // Pinned items first within each group
                if (a.isPinned && !b.isPinned) return -1;
                if (!a.isPinned && b.isPinned) return 1;

                // If both pinned or both unpinned, sort by timestamp
                const dateA = new Date(a.timestamp);
                const dateB = new Date(b.timestamp);
                // Sort by timestamp first, then by id for consistent ordering
                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();
            }),
        }));

        // Log the final transformed data with pinned items count
        const totalPinnedItems = result.flatMap((group) => group.items).filter((item) => item.isPinned).length;
        console.log('📈 Transformed timeline:', {
            result,
            activeSubTab,
            totalPinnedItems,
            pinnedItemsDetails: result
                .flatMap((group) => group.items)
                .filter((item) => item.isPinned)
                .map((item) => ({ id: item.id, title: item.title })),
        });
        return result;
    };

    // Transform activities - use the same data for all tabs since API filters by type
    const activityTimeline = transformActivitiesToTimeline(activities.data);
    const notesTimeline = transformActivitiesToTimeline(activities.data); // When on note tab, activities.data contains only notes
    const tasksTimeline = transformActivitiesToTimeline(activities.data); // When on task tab, activities.data contains only tasks
    const emailsTimeline = transformActivitiesToTimeline(activities.data); // When on emails tab, activities.data contains only emails
    const callsTimeline = transformActivitiesToTimeline(activities.data); // When on calls tab, activities.data contains only calls
    const meetingsTimeline = transformActivitiesToTimeline(activities.data); // When on meetings tab, activities.data contains only meetings
    const remindersTimeline = transformActivitiesToTimeline(activities.data); // When on reminders tab, activities.data contains only reminders

    return (
        <>
            <Head title={`${contact?.name || 'Contact'} - ${pageTitle}`} />
            <Tabs
                defaultValue="general"
                value={activeTab}
                onValueChange={setActiveTab}
                className="flex h-screen flex-col overflow-hidden bg-slate-50"
            >
                {/* Header - Fixed */}
                <div className="shrink-0 border-b bg-white">
                    {/* 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">
                            <TabsTrigger
                                value="general"
                                className="flex h-10 items-center gap-2 rounded-lg border-2 border-transparent px-3 py-2.5 text-xs 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 sm:text-sm"
                            >
                                <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 text-xs 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 sm:text-sm"
                            >
                                <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 text-xs 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 sm:text-sm"
                            >
                                <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 text-xs 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 sm:text-sm"
                            >
                                <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 text-xs 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 sm:text-sm"
                            >
                                <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 text-xs 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 sm:text-sm"
                            >
                                <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 text-xs 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 sm:text-sm"
                            >
                                <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 text-xs font-medium whitespace-nowrap text-slate-600 hover:text-slate-900 sm:px-4 sm:text-sm">
                                    <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>

                                {/* Main Content - Scrollable */}
                                <div className="flex-1">
                                    <ContactToolsTabs
                                        activityTimeline={activityTimeline}
                                        notesTimeline={notesTimeline}
                                        tasksTimeline={tasksTimeline}
                                        emailsTimeline={emailsTimeline}
                                        callsTimeline={callsTimeline}
                                        meetingsTimeline={meetingsTimeline}
                                        remindersTimeline={remindersTimeline}
                                        isLoadingActivities={activities.isLoading && activities.data.length === 0}
                                        hasMoreActivities={activities.hasMore}
                                        isLoadingMoreActivities={activities.isLoading && activities.data.length > 0}
                                        onLoadMore={handleLoadMore}
                                        sortOrder={sortOrder}
                                        onSortChange={setSortOrder}
                                        onTabChange={setActiveSubTab}
                                        sentinelRef={sentinelRef}
                                    />
                                </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>
        </>
    );
};