import { Link } from '@inertiajs/react';
import AppLayout from '@/layouts/AppLayout';
import { useTranslator } from '@/lib/i18n';

interface Props {
    stats: {
        total_users: number;
        admin_count: number;
        verified_count: number;
    };
}

export default function AdminIndex({ stats }: Props) {
    const t = useTranslator();
    return (
        <AppLayout>
            <div className="max-w-4xl mx-auto px-6 py-10">
                <h1 className="font-serif text-3xl mb-8">{t('admin.dashboard')}</h1>
                <div className="grid grid-cols-3 gap-4 mb-8">
                    <div className="bg-card border border-border rounded-xl p-6">
                        <p className="text-xs text-muted-foreground uppercase mb-1">{t('admin.total_users')}</p>
                        <p className="text-3xl font-semibold">{stats.total_users}</p>
                    </div>
                    <div className="bg-card border border-border rounded-xl p-6">
                        <p className="text-xs text-muted-foreground uppercase mb-1">{t('admin.verified')}</p>
                        <p className="text-3xl font-semibold">{stats.verified_count}</p>
                    </div>
                    <div className="bg-card border border-border rounded-xl p-6">
                        <p className="text-xs text-muted-foreground uppercase mb-1">{t('admin.admins')}</p>
                        <p className="text-3xl font-semibold">{stats.admin_count}</p>
                    </div>
                </div>
                <div className="flex gap-4 flex-wrap">
                    <Link href="/admin/users" className="bg-primary text-primary-foreground px-4 py-2 rounded-lg text-sm">{t('admin.manage_users')}</Link>
                    <Link href="/admin/settings" className="border border-border px-4 py-2 rounded-lg text-sm">{t('admin.platform_settings')}</Link>
                    <Link href="/admin/languages" className="border border-border px-4 py-2 rounded-lg text-sm">{t('admin.languages')}</Link>
                    <Link href="/admin/payment-gateways" className="border border-border px-4 py-2 rounded-lg text-sm">{t('admin.pg_title')}</Link>
                    <Link href="/admin/payments" className="border border-border px-4 py-2 rounded-lg text-sm">{t('admin.payments_title')}</Link>
                </div>
            </div>
        </AppLayout>
    );
}