import { MediaPicker } from '@/../../Website/Gallery/resources/assets/js/components/MediaPicker';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { useInfiniteScroll } from '@/hooks/useInfiniteScroll';
import { Head, router } from '@inertiajs/react';
import axios from 'axios';
import {
    BarChart3,
    Bell,
    BriefcaseBusiness,
    CalendarCheck2,
    CalendarClock,
    Camera,
    Check,
    Clock,
    Copy,
    DollarSign,
    FileText,
    Grid2x2,
    Hash,
    Loader2,
    Mail,
    MapPin,
    NotebookPen,
    PenBoxIcon,
    Phone,
    ShieldCheck,
    StickyNote,
    UserIcon,
} from 'lucide-react';
import { useCallback, useEffect, useState } from 'react';
import ActivityTimeline from '../timeline/ActivityTimeline';
import { EmptyState, LoadingState } from '../contact-details/EmptyState';
import PaginationControls from '../contact-details/PaginationControls';
import { TimelineGroup } from '../Timeline';

declare const route: (...args: any[]) => string;
declare function can(permission: string): boolean;

// ─── Types ───────────────────────────────────────────────────────────────────

interface Role {
    id: number;
    name: string;
    slug: string;
    primary_access_level: number;
    access_level_label: string;
    access_level_scope: string;
    branch_ids?: string[];
}

interface Branch {
    id: number;
    title: string;
}

interface RoleAssignment {
    role_id: string;
    branch_ids: string[];
}

interface UserData {
    id: number;
    uid: string;
    staff_id?: string;
    name: string;
    email: string;
    phone?: string;
    address?: string;
    avatar?: string;
    status: number;
    type: number;
    is_admin: boolean;
    role: string[];
    role_assignments?: RoleAssignment[];
    roles_detail?: Role[];
    created_at?: string;
    media?: { file_url?: string };
}

interface UserDetailsPageProps {
    user: UserData;
    roles: Role[];
    branches: Branch[];
    entityLabel?: string;
}

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

// ─── Constants ───────────────────────────────────────────────────────────────

const STATUS_CONFIG: Record<number, { label: string; className: string; dot: string }> = {
    0:  { label: 'Inactive',   className: 'border-gray-300 bg-gray-100 text-gray-700',    dot: 'bg-gray-500' },
    1:  { label: 'Active',     className: 'border-green-300 bg-green-100 text-green-700', dot: 'bg-green-500' },
    16: { label: 'Freezed',    className: 'border-blue-300 bg-blue-100 text-blue-700',    dot: 'bg-blue-500' },
    17: { label: 'Terminated', className: 'border-red-300 bg-red-100 text-red-700',       dot: 'bg-red-500' },
};

const USER_TYPE_LABELS: Record<number, string> = {
    1: 'Employee', 2: 'Partner', 3: 'Teacher', 4: 'Board Member',
};

const ACCESS_LEVEL_COLORS: Record<number, string> = {
    1: 'bg-blue-100 text-blue-800 border-blue-300',
    2: 'bg-amber-100 text-amber-800 border-amber-300',
    3: 'bg-purple-100 text-purple-800 border-purple-300',
};

const HR_TAB_CONFIGS = [
    { value: 'performance', label: 'Performance', icon: BarChart3,       emptyIcon: BarChart3,       emptyMessage: 'No performance data yet', loadMoreText: 'Load More' },
    { value: 'attendance',  label: 'Attendance',  icon: CalendarCheck2,  emptyIcon: CalendarCheck2,  emptyMessage: 'No attendance records yet', loadMoreText: 'Load More' },
    { value: 'salary',      label: 'Salary',      icon: DollarSign,      emptyIcon: DollarSign,      emptyMessage: 'No salary records yet', loadMoreText: 'Load More' },
    { value: 'leave',       label: 'Leave',       icon: BriefcaseBusiness, emptyIcon: BriefcaseBusiness, emptyMessage: 'No leave records yet', loadMoreText: 'Load More' },
    { value: 'note',        label: 'Note',        icon: NotebookPen,     emptyIcon: StickyNote,      emptyMessage: 'No notes yet', loadMoreText: 'Load More Notes' },
];

// ─── Helpers ─────────────────────────────────────────────────────────────────

function CopyButton({ text, field, copiedField, onCopy }: { text: string; field: string; copiedField: string | null; onCopy: (t: string, f: string) => void }) {
    if (copiedField === field) {
        return (
            <div className="flex items-center gap-1 text-green-600">
                <Check className="h-3 w-3" />
                <span className="text-xs font-medium">Copied</span>
            </div>
        );
    }
    return (
        <button
            onClick={() => onCopy(text, field)}
            className="opacity-0 transition-opacity group-hover:opacity-100"
            title={`Copy ${field}`}
        >
            <Copy className="h-3 w-3 text-slate-400 hover:text-brand-900" />
        </button>
    );
}

function InfoRow({ icon: Icon, label, value }: { icon: React.ElementType; label: string; value?: string | null }) {
    if (!value) return null;
    return (
        <div className="flex items-center justify-between border-b border-gray-100 py-2.5">
            <div className="flex items-center gap-2 text-primary">
                <div className="rounded-full bg-muted p-2">
                    <Icon className="h-3 w-3" />
                </div>
                <span className="text-[14px] font-medium tracking-wide">{label}</span>
            </div>
            <div className="pl-5 text-sm font-medium text-slate-700">{value}</div>
        </div>
    );
}

// ─── UserSidebar ─────────────────────────────────────────────────────────────

function UserSidebar({ user, roles, branches, entityLabel, onAvatarUpdate }: {
    user: UserData;
    roles: Role[];
    branches: Branch[];
    entityLabel: string;
    onAvatarUpdate: (url: string) => void;
}) {
    const [copiedField, setCopiedField] = useState<string | null>(null);
    const [isUpdatingAvatar, setIsUpdatingAvatar] = useState(false);
    const [avatarUrl, setAvatarUrl] = useState<string>(
        user.media?.file_url || user.avatar || '/assets/avatar.png'
    );

    const statusCfg = STATUS_CONFIG[user.status] ?? STATUS_CONFIG[0];
    const userTypeSlug: Record<number, string> = { 1: 'employee', 2: 'partner', 3: 'teacher', 4: 'board_member' };
    const editPermission = `edit_${userTypeSlug[user.type] ?? 'employee'}`;

    const handleCopy = (text: string, field: string) => {
        navigator.clipboard.writeText(text).then(() => {
            setCopiedField(field);
            setTimeout(() => setCopiedField(null), 1500);
        });
    };

    const handleAvatarSelect = async (item: any) => {
        setIsUpdatingAvatar(true);
        try {
            await axios.put(route('users.avatar', user.uid || user.id), { media_id: item.id }, { headers: { Accept: 'application/json' } });
            setAvatarUrl(item.file_url);
            onAvatarUpdate(item.file_url);
        } catch {
            // silent
        } finally {
            setIsUpdatingAvatar(false);
        }
    };

    const branchMap = branches.reduce<Record<number, string>>((acc, b) => { acc[b.id] = b.title; return acc; }, {});
    const roleMap = roles.reduce<Record<number, Role>>((acc, r) => { acc[r.id] = r; return acc; }, {});
    const assignments: RoleAssignment[] = user.role_assignments ?? [];
    const rolesDetail: Role[] = user.roles_detail ?? [];

    const quickActions = [
        { icon: Mail,         label: 'Email',    iconColor: 'text-emerald-500', borderColor: 'border-emerald-500', onClick: () => router.visit(route('users.show', user.uid)) },
        { icon: NotebookPen,  label: 'Note',     iconColor: 'text-yellow-500',  borderColor: 'border-yellow-500',  onClick: () => {} },
        { icon: CalendarClock,label: 'Reminder', iconColor: 'text-orange-500',  borderColor: 'border-orange-500',  onClick: () => {} },
    ];

    return (
        <aside className="flex w-96 shrink-0 flex-col lg:max-h-[calc(100vh-8rem)]">
            {/* Header card */}
            <div className="mb-4 shrink-0 rounded-xl border border-slate-200/80 bg-background p-4 shadow-sm">
                <div className="mb-5 flex items-start gap-4">
                    {/* Avatar */}
                    <div className="relative shrink-0">
                        <Avatar className="h-20 w-20 rounded-2xl ring-2 ring-slate-100">
                            <AvatarImage src={avatarUrl} alt={user.name} />
                            <AvatarFallback className="rounded-2xl bg-primary/10 text-primary text-2xl font-bold">
                                {user.name?.charAt(0)?.toUpperCase() ?? 'U'}
                            </AvatarFallback>
                        </Avatar>
                        <MediaPicker
                            onSelect={handleAvatarSelect}
                            app_name="user"
                            app_module="user"
                            trigger={
                                <Button
                                    type="button"
                                    size="sm"
                                    className="absolute -right-1.5 -bottom-1.5 h-7 w-7 rounded-full p-1"
                                    variant="outline"
                                    disabled={isUpdatingAvatar}
                                >
                                    {isUpdatingAvatar ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Camera className="h-3.5 w-3.5" />}
                                </Button>
                            }
                        />
                    </div>

                    {/* Name + meta */}
                    <div className="min-w-0 flex-1 space-y-1">
                        <div className="flex items-start justify-between">
                            <div className="group mb-3 flex items-center gap-2">
                                <h2 className="truncate text-xl font-bold text-slate-900">{user.name}</h2>
                                <CopyButton text={user.name} field="name" copiedField={copiedField} onCopy={handleCopy} />
                            </div>
                            {can(editPermission) && (
                                <div
                                    className="cursor-pointer"
                                    onClick={() => router.visit(route('users.edit', user.uid))}
                                    title={`Edit ${entityLabel}`}
                                >
                                    <PenBoxIcon className="h-4.5 w-4.5 text-slate-500 hover:text-primary" />
                                </div>
                            )}
                        </div>

                        {/* Status badge */}
                        <div className="mb-1">
                            <Badge className={`border px-2 py-0.5 text-xs ${statusCfg.className}`}>
                                <span className={`mr-1.5 inline-block h-1.5 w-1.5 rounded-full ${statusCfg.dot}`} />
                                {statusCfg.label}
                            </Badge>
                        </div>

                        {/* UID */}
                        <div className="group flex items-center gap-2">
                            <Hash className="h-3.5 w-3.5 text-slate-400" />
                            <p className="truncate text-sm font-medium text-slate-600">UID: {user.uid}</p>
                            <CopyButton text={user.uid} field="uid" copiedField={copiedField} onCopy={handleCopy} />
                        </div>

                        {/* Email */}
                        <div className="group flex items-center gap-2">
                            <Mail className="h-3.5 w-3.5 text-slate-400" />
                            <p className="truncate text-sm font-medium text-slate-600">{user.email}</p>
                            <CopyButton text={user.email} field="email" copiedField={copiedField} onCopy={handleCopy} />
                        </div>
                    </div>
                </div>

                {/* Quick actions */}
                <div className="flex items-center gap-4">
                    {quickActions.map((action) => {
                        const Icon = action.icon;
                        return (
                            <div key={action.label} className="flex flex-col items-center gap-1.5" onClick={action.onClick}>
                                <button className={`flex h-10 w-10 items-center justify-center rounded-full border ${action.borderColor} bg-background text-slate-700 transition-all duration-200 hover:shadow-md`}>
                                    <Icon className={`h-4.5 w-4.5 ${action.iconColor}`} />
                                </button>
                                <span className="text-xs font-medium text-slate-600">{action.label}</span>
                            </div>
                        );
                    })}
                </div>
            </div>

            {/* Scrollable sections */}
            <div className="no-scrollbar flex-1 space-y-4 overflow-x-hidden overflow-y-auto">
                {/* About */}
                <div className="rounded-xl border border-muted bg-background p-4 shadow-sm">
                    <div className="pb-3">
                        <h3 className="text-lg font-semibold text-primary">About {entityLabel}</h3>
                    </div>
                    <div className="space-y-0 border-t border-gray-200 text-[14px] font-medium">
                        <InfoRow icon={UserIcon}   label="Type"     value={USER_TYPE_LABELS[user.type] ?? 'User'} />
                        <InfoRow icon={Hash}       label="Staff ID" value={user.staff_id} />
                        <InfoRow icon={Phone}      label="Phone"    value={user.phone} />
                        <InfoRow icon={MapPin}     label="Address"  value={user.address} />
                        {user.created_at && (
                            <InfoRow icon={Clock} label="Joined" value={new Date(user.created_at).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })} />
                        )}
                    </div>
                </div>

                {/* Roles & Access */}
                {(rolesDetail.length > 0 || assignments.length > 0) && (
                    <div className="rounded-xl border border-muted bg-background p-4 shadow-sm">
                        <div className="pb-3">
                            <h3 className="text-lg font-semibold text-primary">Roles & Access</h3>
                        </div>
                        <div className="space-y-3 border-t border-gray-200 pt-3">
                            {rolesDetail.length > 0
                                ? rolesDetail.map((role) => {
                                    const levelColor = ACCESS_LEVEL_COLORS[role.primary_access_level] ?? ACCESS_LEVEL_COLORS[1];
                                    const assignedBranches = (role.branch_ids ?? []).map((id) => branchMap[parseInt(id, 10)]).filter(Boolean);
                                    return (
                                        <div key={role.id} className="rounded-lg border border-gray-100 bg-gray-50 p-3">
                                            <div className="flex items-center justify-between">
                                                <div className="flex items-center gap-2">
                                                    <ShieldCheck className="h-4 w-4 text-slate-500" />
                                                    <span className="text-sm font-semibold text-slate-800 capitalize">{role.name}</span>
                                                </div>
                                                <Badge className={`border text-xs ${levelColor}`}>{role.access_level_label}</Badge>
                                            </div>
                                            <p className="mt-1 text-xs text-slate-400 capitalize">{role.access_level_scope} access</p>
                                            {assignedBranches.length > 0 && (
                                                <div className="mt-2 flex flex-wrap gap-1">
                                                    {assignedBranches.map((b) => (
                                                        <span key={b} className="rounded-full bg-white border border-slate-200 px-2 py-0.5 text-xs text-slate-600">{b}</span>
                                                    ))}
                                                </div>
                                            )}
                                        </div>
                                    );
                                })
                                : assignments.map((assignment) => {
                                    const roleId = parseInt(assignment.role_id, 10);
                                    const role = roleMap[roleId];
                                    if (!role) return null;
                                    const levelColor = ACCESS_LEVEL_COLORS[role.primary_access_level] ?? ACCESS_LEVEL_COLORS[1];
                                    const assignedBranches = (assignment.branch_ids ?? []).map((id) => branchMap[parseInt(id, 10)]).filter(Boolean);
                                    return (
                                        <div key={assignment.role_id} className="rounded-lg border border-gray-100 bg-gray-50 p-3">
                                            <div className="flex items-center justify-between">
                                                <div className="flex items-center gap-2">
                                                    <ShieldCheck className="h-4 w-4 text-slate-500" />
                                                    <span className="text-sm font-semibold text-slate-800 capitalize">{role.name}</span>
                                                </div>
                                                <Badge className={`border text-xs ${levelColor}`}>{role.access_level_label}</Badge>
                                            </div>
                                            <p className="mt-1 text-xs text-slate-400 capitalize">{role.access_level_scope} access</p>
                                            {assignedBranches.length > 0 && (
                                                <div className="mt-2 flex flex-wrap gap-1">
                                                    {assignedBranches.map((b) => (
                                                        <span key={b} className="rounded-full bg-white border border-slate-200 px-2 py-0.5 text-xs text-slate-600">{b}</span>
                                                    ))}
                                                </div>
                                            )}
                                        </div>
                                    );
                                })
                            }
                        </div>
                    </div>
                )}
            </div>
        </aside>
    );
}

// ─── UserToolsTabs ────────────────────────────────────────────────────────────

function UserToolsTabs({ userUid }: { userUid: string }) {
    const [activeSubTab, setActiveSubTab] = useState('activity');
    const [sortOrder, setSortOrder] = useState<'desc' | 'asc'>('desc');
    const [activities, setActivities] = useState<ActivityState>({ data: [], nextCursor: null, hasMore: false, isLoading: false });

    const fetchActivities = useCallback(async (cursor: string | null = null, reset = false) => {
        if (activities.isLoading) return;
        setActivities((prev) => ({ ...prev, isLoading: true }));
        try {
            const response = await axios.get(route('activity-log.show', userUid), {
                params: { per_page: 20, sort: sortOrder, ...(cursor ? { cursor } : {}) },
            });
            const { data, meta } = response.data;
            setActivities((prev) => ({
                data: cursor && !reset ? [...prev.data, ...data] : data,
                nextCursor: meta?.next_cursor ?? null,
                hasMore: meta?.has_more ?? false,
                isLoading: false,
            }));
        } catch {
            setActivities((prev) => ({ ...prev, isLoading: false }));
        }
    }, [userUid, sortOrder]);

    useEffect(() => {
        if (activeSubTab === 'activity') {
            setActivities({ data: [], nextCursor: null, hasMore: false, isLoading: false });
            fetchActivities(null, true);
        }
    }, [activeSubTab, sortOrder]);

    const handleLoadMore = useCallback(() => {
        if (activities.hasMore && !activities.isLoading && activities.nextCursor) {
            fetchActivities(activities.nextCursor);
        }
    }, [activities.hasMore, activities.isLoading, activities.nextCursor, fetchActivities]);

    const sentinelRef = useInfiniteScroll({
        hasMore: activities.hasMore,
        isLoading: activities.isLoading,
        onLoadMore: handleLoadMore,
        threshold: 300,
    }) as React.RefObject<HTMLDivElement>;

    // Transform raw activity log items into TimelineGroup format
    const timelineData: TimelineGroup[] = (() => {
        if (!activities.data.length) return [];
        const grouped = activities.data.reduce((acc: any, item: any, idx: number) => {
            const date = new Date(item.created_at);
            const key = date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
            if (!acc[key]) acc[key] = [];
            acc[key].push({
                id: item.id,
                date: date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric' }),
                title: item.description || item.action || 'Activity',
                description: item.description || '',
                type: String(item.action || 'activity').split('_')[0],
                timestamp: date.toISOString(),
                isPinned: false,
                metadata: item.actor ? [{ label: 'By', value: item.actor.name }] : [],
                animationDelay: idx * 50,
                data: item,
            });
            return acc;
        }, {});

        return Object.entries(grouped)
            .sort(([a], [b]) => (sortOrder === 'desc' ? new Date(b).getTime() - new Date(a).getTime() : new Date(a).getTime() - new Date(b).getTime()))
            .map(([label, items]) => ({ label, items: items as any[] }));
    })();

    const activityTabConfig = { value: 'activity', label: 'Activity', icon: Grid2x2, emptyIcon: Grid2x2, emptyMessage: 'No activity yet', loadMoreText: 'Load more activities' };

    return (
        <div className="w-full rounded-xl border border-muted bg-background shadow-sm">
            <Tabs value={activeSubTab} onValueChange={setActiveSubTab} 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-6 bg-transparent p-0 text-[15px] lg:gap-8">
                            <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-b-2 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>
                            {HR_TAB_CONFIGS.map((cfg) => {
                                const Icon = cfg.icon;
                                return (
                                    <TabsTrigger
                                        key={cfg.value}
                                        value={cfg.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-b-2 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">{cfg.label}</span>
                                    </TabsTrigger>
                                );
                            })}
                        </TabsList>
                    </div>
                </div>

                {/* Activity tab */}
                <TabsContent value="activity" className="mt-0 p-4">
                    {activities.isLoading && activities.data.length === 0 ? (
                        <LoadingState message="Loading activities..." />
                    ) : timelineData.length === 0 ? (
                        <EmptyState config={activityTabConfig} />
                    ) : (
                        <>
                            <ActivityTimeline groups={timelineData} refetchData={() => fetchActivities(null, true)} />
                            <PaginationControls
                                hasMoreActivities={activities.hasMore}
                                isLoadingMoreActivities={activities.isLoading && activities.data.length > 0}
                                onLoadMore={handleLoadMore}
                                sentinelRef={sentinelRef}
                                completionText="All activities loaded"
                                timelineLength={activities.data.length}
                                loadMoreText="Load more activities"
                            />
                        </>
                    )}
                </TabsContent>

                {/* HR tabs — placeholders */}
                {HR_TAB_CONFIGS.map((cfg) => {
                    const EmptyIcon = cfg.emptyIcon;
                    return (
                        <TabsContent key={cfg.value} value={cfg.value} className="mt-0 p-6">
                            <div className="py-12 text-center">
                                <EmptyIcon className="mx-auto mb-3 h-12 w-12 text-slate-300" />
                                <p className="text-sm font-medium text-slate-500">{cfg.label} module coming soon</p>
                            </div>
                        </TabsContent>
                    );
                })}
            </Tabs>
        </div>
    );
}

// ─── UserDetailsPage (main export) ───────────────────────────────────────────

export const UserDetailsPage = ({ user, roles, branches, entityLabel = 'Employee' }: UserDetailsPageProps) => {
    const [activeTab, setActiveTab] = useState('general');
    const [avatarUrl, setAvatarUrl] = useState<string>(
        user.media?.file_url || user.avatar || '/assets/avatar.png'
    );

    if (!user) return <div>Loading...</div>;

    return (
        <>
            <Head title={`${user.name} — ${entityLabel} Details`} />
            <Tabs
                defaultValue="general"
                value={activeTab}
                onValueChange={setActiveTab}
                className="flex h-screen flex-col overflow-hidden bg-background"
            >
                {/* Primary tab bar */}
                <div className="shrink-0 border-b bg-background">
                    <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.5 w-3.5" />
                                <span className="hidden sm:inline">General</span>
                            </TabsTrigger>
                        </TabsList>
                    </div>
                </div>

                {/* Scrollable content */}
                <div className="no-scrollbar flex-1 overflow-x-hidden overflow-y-auto">
                    <div className="h-full p-2 sm:p-4">
                        <main className="h-full">
                            <TabsContent value="general" className="mt-0 flex flex-col gap-4 lg:flex-row lg:gap-6">
                                {/* Sticky sidebar */}
                                <div className="lg:sticky lg:top-4 lg:h-fit lg:self-start">
                                    <UserSidebar
                                        user={user}
                                        roles={roles}
                                        branches={branches}
                                        entityLabel={entityLabel}
                                        onAvatarUpdate={setAvatarUrl}
                                    />
                                </div>

                                {/* Tools tabs */}
                                <div className="w-[50px] flex-1 overflow-x-auto">
                                    <UserToolsTabs userUid={user.uid} />
                                </div>
                            </TabsContent>
                        </main>
                    </div>
                </div>
            </Tabs>
        </>
    );
};