import { StatsCard, StatsCardGrid } from '@/components/ui/stats-card';
import { Role, SharedData, User } from '@/types';
import { usePage } from '@inertiajs/react';
import { Key, Shield, Users } from 'lucide-react';
import { RoleBarChart, RolePieChart } from './dashboard-charts';
import { RecentUsers } from './recent-users';

type RoleDistributionItem = Role & { users_count: number };

export const DashboardContent = () => {
    const { auth } = usePage<SharedData>().props;
    const {
        usersCount = 0,
        rolesCount = 0,
        permissionsCount = 0,
        roleDistribution = [],
        recentUsers = [],
    } = usePage<{
        usersCount: number;
        rolesCount: number;
        permissionsCount: number;
        roleDistribution: RoleDistributionItem[];
        recentUsers: User[];
    }>().props;

    const userRole = typeof auth?.user?.role === 'string' ? auth.user.role : (auth?.user?.role?.name ?? 'guest');

    // Render konten berdasarkan role
    if (userRole === 'admin') {
        return (
            <div className="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
                <StatsCardGrid columns={3}>
                    <StatsCard title="Users" value={usersCount} icon={Users} />
                    <StatsCard title="Roles" value={rolesCount} icon={Shield} />
                    <StatsCard title="Permissions" value={permissionsCount} icon={Key} />
                </StatsCardGrid>

                <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                    <RolePieChart roleDistribution={roleDistribution} />
                    <RoleBarChart roleDistribution={roleDistribution} />
                </div>

                <RecentUsers recentUsers={recentUsers} />
            </div>
        );
    }

    // Default untuk user biasa
    return (
        <div className="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
            {/* User Dashboard */}
            <h1 className="text-2xl font-bold text-gray-800 dark:text-gray-100">Welcome, {auth?.user?.name}!</h1>

            <p className="text-gray-600 dark:text-gray-400">You are logged in as a {userRole}.</p>

            {/* Tambahkan konten lain untuk user biasa */}
        </div>
    );
};