import AdminLayout from '@/layouts/admin/layout';
import { type BreadcrumbItem } from '@/types';
import { Head } from '@inertiajs/react';
import { StatsCard, StatsCardGrid } from '@/components/ui/stats-card';
import { ContentCard } from '@/components/ui/content-card';
import { ActionCard, ActionCardGrid } from '@/components/ui/action-card';
import { Users, Shield, Key, Activity, Wallet, Radio, ChevronRight, Zap, Ticket, UserCog, Trophy, ShoppingCart, Wrench, Package } from 'lucide-react';

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Dashboard',
        href: '/admin',
    },
];

type AdminDashboardProps = {
    usersCount: number;
    adminsCount: number;
    playersCount: number;
    onlineCount: number;
};

export default function AdminDashboard({
    usersCount = 0,
    adminsCount = 0,
    playersCount = 0,
    onlineCount = 0
}: AdminDashboardProps) {
    // Calculate stats
    const totalUsers = usersCount;
    const growthRate = 12.5; // This could come from backend

    return (
        <AdminLayout breadcrumbs={breadcrumbs}>
            <Head title="Admin Dashboard" />

            <div className="space-y-2">
                {/* Welcome Section */}
                <div>
                    <h2 className="text-1xl font-bold tracking-tight">
                        Admin Dashboard
                    </h2>
                </div>

                {/* Stats Cards */}
                <StatsCardGrid columns={4}>
                    <StatsCard
                        title="Total Users"
                        value={totalUsers}
                        description="from last month"
                        icon={Users}
                        trend={{ value: growthRate, isPositive: true }}
                        className="bg-gradient-to-br from-blue-500 to-blue-600 border-0 shadow-lg shadow-blue-500/25"
                        titleClassName="text-white"
                        valueClassName="text-white"
                        descriptionClassName="text-blue-100"
                        iconClassName="text-blue-100"
                    />
                    <StatsCard
                        title="Admin Users"
                        value={adminsCount}
                        description="Total administrators"
                        icon={Shield}
                        className="bg-gradient-to-br from-red-500 to-rose-600 border-0 shadow-lg shadow-red-500/25"
                        titleClassName="text-white"
                        valueClassName="text-white"
                        descriptionClassName="text-red-100"
                        iconClassName="text-red-100"
                    />
                    <StatsCard
                        title="Player Users"
                        value={playersCount}
                        description="Total players"
                        icon={Key}
                        className="bg-gradient-to-br from-violet-500 to-purple-600 border-0 shadow-lg shadow-purple-500/25"
                        titleClassName="text-white"
                        valueClassName="text-white"
                        descriptionClassName="text-purple-100"
                        iconClassName="text-purple-100"
                    />
                    <StatsCard
                        title="Online Players"
                        value={onlineCount}
                        description="Currently playing"
                        icon={Activity}
                        className="bg-gradient-to-br from-emerald-500 to-emerald-600 border-0 shadow-lg shadow-emerald-500/25"
                        titleClassName="text-white"
                        valueClassName="text-white"
                        descriptionClassName="text-emerald-100"
                        iconClassName="text-emerald-100"
                    />
                </StatsCardGrid>

                <div className="grid gap-4 grid-cols-1 lg:grid-cols-2">
                    {/* Online Players */}
                    <ContentCard
                        title="Online Players"
                        description="Players currently in game"
                    >
                        <a
                            href="/admin/online"
                            className="flex items-center justify-between p-4 rounded-lg border bg-card hover:bg-accent transition-colors group"
                        >
                            <div className="flex items-center gap-3">
                                <div className="rounded-full p-3 bg-green-100 dark:bg-green-900">
                                    <Activity className="h-6 w-6 text-green-600 dark:text-green-600" />
                                </div>
                                <div>
                                    <p className="text-2xl font-bold">{onlineCount}</p>
                                    <p className="text-sm text-muted-foreground">
                                        {onlineCount === 1 ? 'Player' : 'Players'} Online
                                    </p>
                                </div>
                            </div>
                            <div className="flex items-center gap-2 text-muted-foreground group-hover:text-foreground transition-colors">
                                <span className="text-sm">View all</span>
                                <ChevronRight className="h-4 w-4" />
                            </div>
                        </a>
                    </ContentCard>
                </div>

                {/* Quick Actions */}
                <ContentCard title="Quick Actions" description="Common administrative tasks">
                    <ActionCardGrid columns={4}>
                        <ActionCard
                            title="Server Rates"
                            description="Configure EXP, drop rates, and restrictions"
                            icon={Zap}
                            iconColor="yellow"
                            href="/admin/settings/exprate"
                        />
                        <ActionCard
                            title="Top Up Transactions"
                            description="View and manage all transactions"
                            icon={Wallet}
                            iconColor="blue"
                            href="/admin/topup/transaction"
                        />
                        <ActionCard
                            title="Manage Characters"
                            description="Add, edit, or remove characters"
                            icon={Users}
                            iconColor="purple"
                            href="/admin/manage/characters"
                        />
                        <ActionCard
                            title="Manage Streamers"
                            description="Configure streamer settings"
                            icon={Radio}
                            iconColor="green"
                            href="/admin/manage/streamer"
                        />
                        <ActionCard
                            title="Vouchers"
                            description="Create and manage voucher codes"
                            icon={Ticket}
                            iconColor="blue"
                            href="/admin/vouchers"
                        />
                        <ActionCard
                            title="Manage GM"
                            description="Manage game master accounts"
                            icon={UserCog}
                            iconColor="red"
                            href="/admin/manage/gm"
                        />
                        <ActionCard
                            title="Top Spender"
                            description="Manage top spender rewards"
                            icon={Trophy}
                            iconColor="yellow"
                            href="/admin/reward/topspender"
                        />
                        <ActionCard
                            title="Shop"
                            description="Manage in-game shop items"
                            icon={ShoppingCart}
                            iconColor="purple"
                            href="/admin/shop"
                        />
                        <ActionCard
                            title="Game Tools"
                            description="Drop rate converter"
                            icon={Wrench}
                            iconColor="yellow"
                            href="/admin/fitur"
                        />
                        <ActionCard
                            title="Item Templates"
                            description="Manage reusable item templates"
                            icon={Package}
                            iconColor="green"
                            href="/admin/manage/item-template"
                        />
                    </ActionCardGrid>
                </ContentCard>
            </div>
        </AdminLayout>
    );
}
