import { ProfileActivityLog } from '@admin/components/activity-log/ProfileActivityLog';
import EventCalendar from '@admin/components/dashboard/eventCalendar';
import { UserModal } from '@admin/components/modals/UserModal';
import StatisticCardLarge from '@admin/components/dashboard/StatisticCardLarge';
import { Avatar, AvatarImage } from '@admin/components/ui/avatar';
import { Badge } from '@admin/components/ui/badge';
import { Button } from '@admin/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@admin/components/ui/card';
import { useModal } from '@admin/components/ui/modal';
import AppLayout from '@admin/layouts/app-layout';
import { User } from '@admin/types';
import { Head, router, usePage } from '@inertiajs/react';
import axios from 'axios';
import { BookmarkCheck, Calendar, Camera, DollarSign, Paperclip, Shield, SquarePen, User as UserIcon, Users } from 'lucide-react';
import { ReactNode, useEffect, useState } from 'react';

// Define the ProfileWidget type
interface ProfileWidget {
    id: number;
    module_id: number;
    name: string;
    slug: string;
    status: number;
    is_available_to_profile: number;
    created_at: string;
    updated_at: string;
}

// Skeleton Components (keep these the same)
const SkeletonCard = () => (
    <Card className="bg-brand-50">
        <CardContent className="p-2">
            <div className="flex items-center justify-between">
                <div className="w-full space-y-4">
                    <div className="h-3 w-3/4 animate-pulse rounded bg-gray-200"></div>
                    <div className="h-5 w-1/2 animate-pulse rounded bg-gray-200"></div>
                    <div className="h-3 w-2/3 animate-pulse rounded bg-gray-200"></div>
                </div>
                <div className="h-10 w-10 animate-pulse rounded-full bg-gray-200 p-3"></div>
            </div>
        </CardContent>
    </Card>
);

const SkeletonPersonCard = () => (
    <Card>
        <CardHeader className="pb-4">
            <div className="flex items-center justify-between">
                <div className="h-6 w-1/4 animate-pulse rounded bg-gray-300"></div>
                <div className="h-4 w-1/6 animate-pulse rounded bg-gray-300"></div>
            </div>
        </CardHeader>
        <CardContent>
            <div className="flex items-start space-x-4">
                <div className="relative">
                    <div className="h-20 w-20 animate-pulse rounded-full bg-gray-300"></div>
                    <div className="absolute -right-1 -bottom-1 h-8 w-8 animate-pulse rounded-full bg-gray-300"></div>
                </div>
                <div className="flex-1 space-y-3">
                    {[...Array(7)].map((_, i) => (
                        <div key={i}>
                            <div className="mb-1 h-4 w-1/4 animate-pulse rounded bg-gray-300"></div>
                            <div className="h-5 w-3/4 animate-pulse rounded bg-gray-300"></div>
                        </div>
                    ))}
                </div>
            </div>
        </CardContent>
    </Card>
);

const SkeletonWorkingFormatCard = () => (
    <Card>
        <CardHeader className="pb-4">
            <div className="flex items-center justify-between">
                <div className="h-6 w-1/3 animate-pulse rounded bg-gray-300"></div>
            </div>
        </CardHeader>
        <CardContent>
            <div className="mb-6 flex justify-center">
                <div className="h-32 w-32 animate-pulse rounded-full bg-gray-300"></div>
            </div>
            <div className="space-y-3">
                {[...Array(3)].map((_, i) => (
                    <div key={i} className="flex items-center space-x-2">
                        <div className="h-3 w-3 animate-pulse rounded-full bg-gray-300"></div>
                        <div className="h-4 w-1/6 animate-pulse rounded bg-gray-300"></div>
                        <div className="h-4 w-1/4 animate-pulse rounded bg-gray-300"></div>
                    </div>
                ))}
            </div>
        </CardContent>
    </Card>
);

const SkeletonNotesCard = () => (
    <Card>
        <CardHeader className="pb-4">
            <div className="flex items-center justify-between">
                <div className="h-6 w-1/4 animate-pulse rounded bg-gray-300"></div>
            </div>
        </CardHeader>
        <CardContent className="space-y-4">
            {[...Array(3)].map((_, i) => (
                <div key={i} className="flex items-start space-x-3">
                    <div className="mt-2 h-2 w-2 animate-pulse rounded-full bg-gray-300"></div>
                    <div className="flex-1 space-y-2">
                        <div className="h-4 w-3/4 animate-pulse rounded bg-gray-300"></div>
                        <div className="h-4 w-full animate-pulse rounded bg-gray-300"></div>
                        <div className="h-6 w-1/4 animate-pulse rounded bg-gray-300"></div>
                    </div>
                </div>
            ))}
        </CardContent>
    </Card>
);

const SkeletonCalendarCard = () => (
    <Card>
        <CardHeader className="pb-4">
            <div className="flex items-center justify-between">
                <div className="h-6 w-1/3 animate-pulse rounded bg-gray-300"></div>
            </div>
        </CardHeader>
        <CardContent>
            <div className="space-y-4">
                <div className="flex items-center justify-between">
                    <div className="h-8 w-8 animate-pulse rounded bg-gray-300"></div>
                    <div className="h-6 w-1/3 animate-pulse rounded bg-gray-300"></div>
                    <div className="h-8 w-8 animate-pulse rounded bg-gray-300"></div>
                </div>
                <div className="grid grid-cols-7 gap-1 text-center">
                    {[...Array(7)].map((_, i) => (
                        <div key={i} className="h-8 animate-pulse rounded bg-gray-300"></div>
                    ))}
                </div>
                <div className="grid grid-cols-7 gap-1">
                    {[...Array(42)].map((_, i) => (
                        <div key={i} className="h-8 animate-pulse rounded bg-gray-300"></div>
                    ))}
                </div>
            </div>
        </CardContent>
    </Card>
);

const ROLE_ICONS = {
    admin: Shield,
    manager: UserIcon,
    user: UserIcon,
};

const Show = ({ user }: { user: User }) => {
    const { roles } = usePage().props as any;

    const [currentDate, setCurrentDate] = useState(new Date());
    const { isOpen: isUserModalOpen, openModal: openUserModal, closeModal: closeUserModal } = useModal();

    const [profileWidgets, setProfileWidgets] = useState<ProfileWidget[]>([]);
    const [isLoading, setIsLoading] = useState(true);

    // Fetch from Laravel API
    useEffect(() => {
        setIsLoading(true);
        axios
            .get('/settings/profile/get-profile-widget-data')
            .then((response) => {
                setProfileWidgets(response.data);
                setIsLoading(false);
            })
            .catch((error) => {
                console.error('Error fetching profile widgets:', error);
                setIsLoading(false);
            });
    }, []);

    // JSON example data structure for user dashboard
    const dashboardData = {
        user: {
            ...user,
            uid: user?.uid || `uid-${user?.id || 'N/A'}`,
            phone: user?.phone || '+1 (555) 123-4567',
            status: user?.status || 'active',
            position: 'Senior Backend Developer',
            avatar: user?.avatar || 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face',
        },
        metrics: {
            daysInCompany: 418,
            projectsInProgress: 6,
            completedProjects: 28,
            salary: 85000,
            growth: {
                daysInCompany: '+7% last month',
                projectsInProgress: '+1 last month',
                completedProjects: '+4 last month',
                salary: '+25% last year',
            },
        },
        workingFormat: {
            totalDays: 418,
            distribution: {
                office: { percentage: 60, color: '#22c55e' },
                hybrid: { percentage: 30, color: '#f59e0b' },
                remote: { percentage: 10, color: '#3b82f6' },
            },
        },
        notes: [
            {
                id: 2,
                title: 'Lunch with Alex',
                description: 'Sushi Place, Oak Makki Street 12',
                date: 'Aug 03',
                tags: [
                    { label: 'Life', color: 'bg-red-100 text-red-800' },
                    { label: 'Eat', color: 'bg-green-100 text-green-800' },
                ],
                status: 'pending',
            },
            {
                id: 3,
                title: 'Bug Fixing Sprint',
                description: 'Review focus on business logic improvements',
                date: 'Aug 02',
                tags: [],
                status: 'active',
            },
            {
                id: 1,
                title: 'Meeting with Arthur Taylor',
                description: 'Discuss about refactoring code architecture and implementation strategies',
                date: 'Aug 03',
                tags: [
                    { label: 'Work', color: 'bg-orange-100 text-orange-800' },
                    { label: 'Meeting', color: 'bg-blue-100 text-blue-800' },
                ],
                status: 'pending',
            },
        ],
        timeTracking: {
            currentProject: 'Slack refactoring',
            currentStatus: 'Awaiting',
            totalTime: '02:35:51',
            date: 'Today, May 18',
            tasks: [
                {
                    id: 1,
                    title: 'Develop API endpoint',
                    duration: '0:45:21',
                    status: 'completed',
                    color: 'bg-green-100',
                },
                {
                    id: 2,
                    title: 'Develop automated testing',
                    duration: '1:23:15',
                    status: 'in-progress',
                    color: 'bg-orange-100',
                },
            ],
        },
        schedule: {
            date: '18 May, 2024',
            appointments: [
                {
                    id: 1,
                    time: '10:00',
                    title: 'Head of Marketing',
                    description: 'Product Demo',
                },
                {
                    id: 2,
                    time: '11:30',
                    title: 'Creative Director',
                    description: 'Marketing Campaign Brainstorm',
                },
                {
                    id: 3,
                    time: '14:20',
                    title: 'CEO',
                    description: 'Quarterly Review Meeting',
                },
            ],
        },
    };

    // Handle role as array or string
    const userRole = Array.isArray(user?.role) ? user?.role[0] : user?.role;

    // Generate calendar for current month
    const generateCalendarDays = () => {
        const year = currentDate.getFullYear();
        const month = currentDate.getMonth();
        const firstDay = new Date(year, month, 1);
        const lastDay = new Date(year, month + 1, 0);
        const daysInMonth = lastDay.getDate();
        const startingDayOfWeek = firstDay.getDay();

        const days = [];

        // Previous month days
        for (let i = 0; i < startingDayOfWeek; i++) {
            const prevDate = new Date(year, month, -startingDayOfWeek + i + 1);
            days.push({ date: prevDate.getDate(), isCurrentMonth: false, isToday: false });
        }

        // Current month days
        for (let i = 1; i <= daysInMonth; i++) {
            const isToday = new Date().getDate() === i && new Date().getMonth() === month && new Date().getFullYear() === year;
            days.push({ date: i, isCurrentMonth: true, isToday });
        }

        return days;
    };
    const avatarUrl = user.avatar?.startsWith('https://via.placeholder.com') ? '/assets/avatar.png' : user.avatar;
    return (
        <>
            <Head title={`${dashboardData.user?.name || 'N/A'} - User Dashboard`} />
            <div className="min-h-screen">
                {/* Top Metrics Cards */}
                <div className="flex h-full flex-col px-2 py-4">
                    <div>
                        {isLoading ? (
                            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
                                <SkeletonCard />
                                <SkeletonCard />
                                <SkeletonCard />
                                <SkeletonCard />
                            </div>
                        ) : (
                            <>
                                <div className="mb-4 grid grid-cols-1 gap-4 rounded-lg border bg-card sm:grid-cols-2 md:grid-cols-4">
                                    <StatisticCardLarge
                                        title="Active days in company"
                                        value={dashboardData?.metrics?.daysInCompany}
                                        iconbg="bg-green-100"
                                        icon={Users}
                                        iconColor="text-green-600"
                                    />
                                    <StatisticCardLarge
                                        title="Ongoing projects"
                                        value={dashboardData?.metrics?.projectsInProgress}
                                        iconbg="bg-purple-100"
                                        icon={Paperclip}
                                        iconColor="text-purple-600"
                                    />
                                    <StatisticCardLarge
                                        title="Completed projects"
                                        value={dashboardData?.metrics?.completedProjects}
                                        iconbg="bg-blue-100"
                                        icon={BookmarkCheck}
                                        iconColor="text-blue-600"
                                    />
                                    <StatisticCardLarge
                                        title="Salary"
                                        value={dashboardData?.metrics?.salary}
                                        iconbg="bg-red-100"
                                        icon={DollarSign}
                                        iconColor="text-red-600"
                                    />
                                </div>
                            </>
                        )}
                    </div>
                    {/* Main Content Grid */}
                    <div className="grid flex-grow grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-12">
                        {/* Person Card */}
                        <div className="flex flex-col md:col-span-1 lg:col-span-3 lg:row-span-2">
                            {isLoading ? (
                                <SkeletonPersonCard />
                            ) : (
                                <Card className="flex h-full flex-col space-y-5 px-0">
                                    <CardHeader className="border-b px-4 pt-1 pb-5">
                                        {' '}
                                        <div className="flex items-center justify-between">
                                            <CardTitle className="text-lg font-semibold">User Details</CardTitle>
                                            <span
                                                className="flex cursor-pointer items-center gap-1 text-xs font-bold text-success sm:gap-2 sm:text-sm"
                                                onClick={openUserModal}
                                            >
                                                <SquarePen className="size-3 sm:size-4" />
                                                Edit
                                            </span>
                                        </div>
                                    </CardHeader>

                                    <CardContent className="flex-grow">
                                        <div className="flex flex-col items-center">
                                            <div className="relative">
                                                <Avatar className="size-20 sm:size-24">
                                                    <AvatarImage src={avatarUrl} alt={dashboardData.user?.name || 'N/A'} />
                                                </Avatar>
                                                <Button
                                                    size="sm"
                                                    className="absolute -right-1 -bottom-1 size-6 rounded-full p-1 sm:size-8"
                                                    variant="outline"
                                                >
                                                    <Camera className="size-3 sm:size-4" />
                                                </Button>
                                            </div>

                                            <div className="mt-4">
                                                <Badge
                                                    variant={(user as any)?.status === 'active' ? 'default' : 'secondary'}
                                                    className="border-[#22C55E] bg-[#F0FDF4] px-3 py-1 text-xs text-[#22C55E]"
                                                >
                                                    {(user as any)?.status || 'N/A'}
                                                </Badge>
                                            </div>

                                            <div className="mt-4 w-full divide-y divide-gray-100 px-1 sm:mt-6">
                                                <div className="py-2 sm:py-3">
                                                    <div className="text-xs text-gray-500 sm:text-sm">First Name</div>
                                                    <div className="mt-1 text-sm sm:font-medium">
                                                        {dashboardData.user?.name?.split(' ')[0] || 'N/A'}
                                                    </div>
                                                </div>

                                                <div className="py-2 sm:py-3">
                                                    <div className="text-xs text-gray-500 sm:text-sm">Last Name</div>
                                                    <div className="mt-1 text-sm sm:font-medium">
                                                        {dashboardData.user?.name?.split(' ').slice(1).join(' ') || 'N/A'}
                                                    </div>
                                                </div>

                                                <div className="flex items-center gap-2 py-3">
                                                    <div className="text-sm text-gray-500">Role</div>
                                                    <div className="">
                                                        {Array.isArray(user?.role) ? (
                                                            user.role.map((role, index) => (
                                                                <Badge
                                                                    key={index}
                                                                    variant="secondary"
                                                                    className="mr-1 bg-[#F0FDF4] text-xs text-[#374151]"
                                                                >
                                                                    {role}
                                                                </Badge>
                                                            ))
                                                        ) : (
                                                            <Badge variant="secondary" className="text-xs">
                                                                {user?.role || 'N/A'}
                                                            </Badge>
                                                        )}
                                                    </div>
                                                </div>

                                                <div className="py-3">
                                                    <div className="text-sm text-gray-500">Position</div>
                                                    <div className="mt-1 text-sm sm:font-medium">{dashboardData.user.position || 'N/A'}</div>
                                                </div>

                                                <div className="py-3">
                                                    <div className="text-sm text-gray-500">Department</div>
                                                    <div className="mt-1 text-sm sm:font-medium">{(user as any)?.department || 'N/A'}</div>
                                                </div>

                                                <div className="py-3">
                                                    <div className="text-sm text-gray-500">Branch</div>
                                                    <div className="mt-1 text-sm sm:font-medium">{(user as any)?.branch || 'N/A'}</div>
                                                </div>

                                                <div className="py-3">
                                                    <div className="text-sm text-gray-500">Email</div>
                                                    <div className="mt-1 text-sm sm:font-medium">{dashboardData.user?.email || 'N/A'}</div>
                                                </div>

                                                <div className="py-3">
                                                    <div className="text-sm text-gray-500">Phone</div>
                                                    <div className="mt-1 text-sm sm:font-medium">{(user as any)?.phone || 'N/A'}</div>
                                                </div>

                                                <div className="py-3">
                                                    <div className="text-sm text-gray-500">Gender</div>
                                                    <div className="mt-1 text-sm sm:font-medium">{(user as any)?.gender || 'N/A'}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </CardContent>
                                </Card>
                            )}
                        </div>

                        {/* Working Format -  */}
                        <div className="flex flex-col md:col-span-1 lg:col-span-4">
                            {isLoading ? (
                                <SkeletonWorkingFormatCard />
                            ) : (
                                <Card className="flex h-full flex-col space-y-8 px-0">
                                    <CardHeader className="border-b px-4 pt-1 pb-5">
                                        <div className="flex items-center justify-between">
                                            <CardTitle className="text-lg font-semibold">Working format</CardTitle>
                                        </div>
                                    </CardHeader>
                                    <CardContent className="mt-6 flex-grow">
                                        <div className="mb-6 flex justify-center">
                                            <div className="relative size-32 sm:size-36 md:size-40">
                                                <svg className="size-full -rotate-90 transform drop-shadow-sm" viewBox="0 0 36 36">
                                                    {/* background track */}
                                                    <path
                                                        d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                                                        fill="none"
                                                        stroke="#e5e7eb"
                                                        strokeWidth="3"
                                                    />

                                                    {/* office segment */}
                                                    <path
                                                        d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                                                        fill="none"
                                                        stroke={dashboardData.workingFormat.distribution.office.color}
                                                        strokeWidth="3"
                                                        strokeDasharray={`${dashboardData.workingFormat.distribution.office.percentage} ${100 - dashboardData.workingFormat.distribution.office.percentage}`}
                                                        strokeLinecap="round"
                                                    />

                                                    {/* hybrid segment */}
                                                    <path
                                                        d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                                                        fill="none"
                                                        stroke={dashboardData.workingFormat.distribution.hybrid.color}
                                                        strokeWidth="3"
                                                        strokeDasharray={`${dashboardData.workingFormat.distribution.hybrid.percentage} ${100 - dashboardData.workingFormat.distribution.hybrid.percentage}`}
                                                        strokeDashoffset={`-${dashboardData.workingFormat.distribution.office.percentage}`}
                                                        strokeLinecap="round"
                                                    />

                                                    {/* remote segment */}
                                                    <path
                                                        d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                                                        fill="none"
                                                        stroke={dashboardData.workingFormat.distribution.remote.color}
                                                        strokeWidth="3"
                                                        strokeDasharray={`${dashboardData.workingFormat.distribution.remote.percentage} ${100 - dashboardData.workingFormat.distribution.remote.percentage}`}
                                                        strokeDashoffset={`-${dashboardData.workingFormat.distribution.office.percentage + dashboardData.workingFormat.distribution.hybrid.percentage}`}
                                                        strokeLinecap="round"
                                                    />

                                                    {/* inner white circle to create donut look */}
                                                    <circle cx="18" cy="18" r="7.6" fill="#fff" />
                                                </svg>

                                                <div className="absolute inset-0 flex flex-col items-center justify-center">
                                                    <div className="text-lg font-bold sm:text-xl md:text-2xl">
                                                        {dashboardData.workingFormat.totalDays}
                                                    </div>
                                                    <div className="text-xs text-gray-500 sm:text-sm">Days</div>
                                                </div>
                                            </div>
                                        </div>

                                        <div className="space-y-3 p-2 sm:space-y-4 sm:p-3">
                                            <div className="flex items-center justify-between">
                                                <div className="flex items-center space-x-2 sm:space-x-3">
                                                    <div
                                                        className="size-2 rounded-full sm:size-3"
                                                        style={{ backgroundColor: dashboardData.workingFormat.distribution.office.color }}
                                                    ></div>
                                                    <span className="text-xs text-gray-700 sm:text-sm">Office</span>
                                                </div>
                                                <div>
                                                    <span className="text-xs font-semibold sm:text-sm">50%</span>
                                                </div>
                                            </div>{' '}
                                            <div className="flex items-center justify-between">
                                                <div className="flex items-center space-x-2 sm:space-x-3">
                                                    <div
                                                        className="size-2 rounded-full sm:size-3"
                                                        style={{ backgroundColor: dashboardData.workingFormat.distribution.hybrid.color }}
                                                    ></div>
                                                    <span className="text-xs text-gray-700 sm:text-sm">Hybrid</span>
                                                </div>
                                                <div>
                                                    <span className="text-xs font-semibold sm:text-sm">
                                                        {dashboardData.workingFormat.distribution.hybrid.percentage}%
                                                    </span>
                                                </div>
                                            </div>
                                            <div className="flex items-center justify-between">
                                                <div className="flex items-center space-x-2 sm:space-x-3">
                                                    <div
                                                        className="size-2 rounded-full sm:size-3"
                                                        style={{ backgroundColor: dashboardData.workingFormat.distribution.remote.color }}
                                                    ></div>
                                                    <span className="text-xs text-gray-700 sm:text-sm">Remote</span>
                                                </div>
                                                <div>
                                                    <span className="text-xs font-semibold sm:text-sm">
                                                        {dashboardData.workingFormat.distribution.remote.percentage}%
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </CardContent>
                                </Card>
                            )}
                        </div>
                        {/* Mini Calendar -  */}
                        <div className="md:col-span-2 lg:col-span-5">{isLoading ? <SkeletonCalendarCard /> : <EventCalendar subTitle={' '} />}</div>
                        {/* Activity Log - */}
                        <div className="flex flex-col md:col-span-1 lg:col-span-4">
                            <div className="h-full">
                                <ProfileActivityLog userUid={user?.uid || user?.id} />
                            </div>
                        </div>
                        {/* Notes -  */}
                        <div className="flex flex-col md:col-span-1 lg:col-span-5">
                            {isLoading ? (
                                <SkeletonNotesCard />
                            ) : (
                                <Card className="flex h-full flex-col space-y-8 px-0">
                                    <CardHeader className="mb-3 border-b px-4 pt-1 pb-5">
                                        <div className="flex items-center justify-between">
                                            <CardTitle className="text-lg font-semibold">Notes</CardTitle>
                                        </div>
                                    </CardHeader>
                                    <CardContent className="flex-grow space-y-1">
                                        <div className="space-y-4">
                                            {dashboardData.notes.map((note) => (
                                                <div
                                                    key={note.id}
                                                    className={`flex flex-col items-start justify-between space-y-2 rounded-xl border border-l-3 sm:flex-row sm:items-center sm:space-y-0 sm:space-x-4 ${note?.status === 'pending' ? 'border-l-[#4caf50]' : 'border-l-red-500'} bg-white px-3 py-3 sm:px-4`}
                                                >
                                                    {/* Left: Tag pill */}
                                                    <div className="flex-shrink-0">
                                                        {note.tags && note.tags.length > 0 ? (
                                                            <div
                                                                className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold ${note.tags[0].color}`}
                                                            >
                                                                {note.tags[0].label}
                                                            </div>
                                                        ) : (
                                                            <div
                                                                className={`inline-flex items-center rounded-full bg-gray-100 px-3 py-1 text-xs font-semibold text-gray-700`}
                                                            >
                                                                Note
                                                            </div>
                                                        )}
                                                    </div>

                                                    {/* Middle: Title + Description */}
                                                    <div className="flex-1">
                                                        <div className="flex items-start gap-3">
                                                            <div className="flex-1">
                                                                <p className="text-sm font-medium text-gray-800">{note.title}</p>
                                                                <p className="mt-1 line-clamp-2 text-sm text-gray-500">{note.description}</p>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    {/* Right: Avatars + Date */}
                                                    <div className="flex items-center justify-center gap-2">
                                                        <div className="flex -space-x-2">
                                                            {/* Example avatars - replace with real users when available */}
                                                            <Avatar className="size-5 ring-2 ring-white">
                                                                <AvatarImage src={avatarUrl} alt={dashboardData.user?.name || 'N/A'} />
                                                            </Avatar>
                                                            <Avatar className="size-5 ring-2 ring-white">
                                                                <AvatarImage src={avatarUrl} alt={dashboardData.user?.name || 'N/A'} />
                                                            </Avatar>
                                                        </div>
                                                        <div className="mt-1 flex items-center text-sm text-gray-400">
                                                            <Calendar className="mr-1 h-3 w-3" />
                                                            <span>{note.date}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            ))}
                                        </div>
                                    </CardContent>
                                </Card>
                            )}
                        </div>
                    </div>
                </div>
            </div>
            <UserModal
                open={isUserModalOpen}
                onOpenChange={closeUserModal}
                user={dashboardData?.user}
                roles={roles}
                onSuccess={() => {
                    router.reload();
                }}
            />
        </>
    );
};

// Attach AppLayout via the layout property (no wrapping inside the component)
Show.layout = (page: ReactNode) => (
    <AppLayout
        breadcrumbs={[
            { title: 'Home', href: '/' },
            { title: 'Users', href: route('users.index') },
            { title: 'User Details', href: route('users.show', 1) },
        ]}
        title="User Details"
    >
        {page}
    </AppLayout>
);

export default Show;