import AppLayout from '@/layouts/app-layout';
import { type BreadcrumbItem } from '@/types';
import { Head } from '@inertiajs/react';
import { Users, Sparkles, CreditCard, Activity, ArrowUpRight, ShieldCheck } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Tableau de bord Admin',
        href: route('dashboard'),
    },
];

interface Props {
    stats: {
        total_owners: number;
        active_subscriptions: number;
        platform_revenue: number;
        pending_tasks: number;
    };
    recentOwners: Array<{
        id: number;
        first_name: string;
        last_name: string;
        email: string;
        created_at: string;
        role: string;
    }>;
}

export default function DashboardAdmins({ stats, recentOwners }: Props) {
    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Admin Dashboard" />
            
            <div className="flex flex-col gap-8 p-6">
                <div>
                    <h1 className="text-2xl font-bold tracking-tight text-foreground">Console Administrateur</h1>
                    <p className="text-muted-foreground mt-2">Vue d'ensemble des performances de la plateforme Kiraa.</p>
                </div>

                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
                    <Card className="hover:shadow-md transition-all border-l-4 border-l-purple-500">
                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                            <CardTitle className="text-sm font-medium">Propriétaires</CardTitle>
                            <Users className="h-4 w-4 text-purple-500" />
                        </CardHeader>
                        <CardContent>
                            <div className="text-2xl font-bold">{stats.total_owners}</div>
                            <p className="text-xs text-muted-foreground">Utilisateurs actifs</p>
                        </CardContent>
                    </Card>
                    <Card className="hover:shadow-md transition-all border-l-4 border-l-indigo-500">
                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                            <CardTitle className="text-sm font-medium">Abonnements</CardTitle>
                            <Sparkles className="h-4 w-4 text-indigo-500" />
                        </CardHeader>
                        <CardContent>
                            <div className="text-2xl font-bold">{stats.active_subscriptions}</div>
                            <p className="text-xs text-muted-foreground">Packs Pro/Premium actifs</p>
                        </CardContent>
                    </Card>
                    <Card className="hover:shadow-md transition-all border-l-4 border-l-emerald-500">
                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                            <CardTitle className="text-sm font-medium">Revenu (MRR)</CardTitle>
                            <CreditCard className="h-4 w-4 text-emerald-500" />
                        </CardHeader>
                        <CardContent>
                            <div className="text-2xl font-bold">
                                {new Intl.NumberFormat('fr-MA', { style: 'currency', currency: 'MAD' }).format(stats.platform_revenue)}
                            </div>
                            <p className="text-xs text-muted-foreground">Revenu mensuel estimé</p>
                        </CardContent>
                    </Card>
                    <Card className="hover:shadow-md transition-all border-l-4 border-l-blue-500">
                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                            <CardTitle className="text-sm font-medium">Santé Système</CardTitle>
                            <Activity className="h-4 w-4 text-blue-500" />
                        </CardHeader>
                        <CardContent>
                            <div className="text-2xl font-bold">100%</div>
                            <p className="text-xs text-muted-foreground">Tous les services sont opérationnels</p>
                        </CardContent>
                    </Card>
                </div>

                <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-7">
                    <Card className="col-span-4">
                        <CardHeader>
                            <CardTitle>Dernières Inscriptions</CardTitle>
                            <CardDescription>Nouveaux propriétaires ayant rejoint la plateforme.</CardDescription>
                        </CardHeader>
                        <CardContent>
                            <div className="space-y-4">
                                {recentOwners.length > 0 ? (
                                    recentOwners.map((owner) => (
                                        <div key={owner.id} className="flex items-center justify-between p-3 border rounded-lg hover:bg-muted/50 transition-colors">
                                            <div className="flex items-center gap-4">
                                                <div className="h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-bold">
                                                    {owner.first_name[0]}{owner.last_name[0]}
                                                </div>
                                                <div>
                                                    <p className="font-semibold">{owner.first_name} {owner.last_name}</p>
                                                    <p className="text-xs text-muted-foreground">{owner.email}</p>
                                                </div>
                                            </div>
                                            <div className="text-right">
                                                <p className="text-xs font-medium text-muted-foreground">Inscrit le</p>
                                                <p className="text-sm font-bold">{new Date(owner.created_at).toLocaleDateString()}</p>
                                            </div>
                                        </div>
                                    ))
                                ) : (
                                    <div className="text-center py-10 text-muted-foreground italic">
                                        Aucune inscription récente.
                                    </div>
                                )}
                            </div>
                        </CardContent>
                    </Card>
                    <Card className="col-span-3 bg-slate-900 text-white shadow-xl rounded-3xl relative overflow-hidden">
                        <div className="absolute right-0 top-0 p-8 opacity-10">
                            <ShieldCheck className="h-32 w-32" />
                        </div>
                        <CardHeader>
                            <CardTitle className="text-purple-400">Sécurité et Accès</CardTitle>
                            <CardDescription className="text-slate-400">Contrôle de la plateforme.</CardDescription>
                        </CardHeader>
                        <CardContent className="space-y-6">
                            <div className="p-4 rounded-2xl bg-white/5 border border-white/10 hover:bg-white/10 transition-colors cursor-pointer group">
                                <div className="flex items-center justify-between">
                                    <div>
                                        <p className="font-bold">Journal d'Audit</p>
                                        <p className="text-xs text-slate-400">Consulter les dernières actions.</p>
                                    </div>
                                    <ArrowUpRight className="h-5 w-5 opacity-50 group-hover:opacity-100 transition-opacity" />
                                </div>
                            </div>
                            <div className="p-4 rounded-2xl bg-white/5 border border-white/10 hover:bg-white/10 transition-colors cursor-pointer group">
                                <div className="flex items-center justify-between">
                                    <div>
                                        <p className="font-bold">Maintenance</p>
                                        <p className="text-xs text-slate-400">Mettre la plateforme hors ligne.</p>
                                    </div>
                                    <ArrowUpRight className="h-5 w-5 opacity-50 group-hover:opacity-100 transition-opacity" />
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                </div>
            </div>
        </AppLayout>
    );
}
