'use client';

import { Users, Building2, Store, ShoppingBag, Package, DollarSign, TrendingUp, TrendingDown, Activity, Sparkles } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';

interface DashboardStats {
  totalUsers: number; totalHouses: number; totalShops: number;
  totalProducts: number; totalOrders: number; totalRevenue: number;
  recentActivity: { type: string; title: string; description: string; time: string }[];
}

function StatCard({ title, value, change, icon: Icon, trend, color }: {
  title: string; value: string | number; change?: string; icon: React.ElementType; trend?: 'up' | 'down' | 'neutral'; color: string;
}) {
  return (
    <Card className="group overflow-hidden border-0 bg-gradient-to-br from-white to-slate-50/50 shadow-sm transition-all hover:shadow-md dark:from-slate-900 dark:to-slate-800/50">
      <CardContent className="p-5">
        <div className="flex items-start justify-between">
          <div className="space-y-2">
            <p className="text-xs font-medium text-muted-foreground">{title}</p>
            <p className="text-2xl font-bold tracking-tight">{value}</p>
            {change && <div className="flex items-center gap-1">
              {trend === 'up' && <TrendingUp className="h-3 w-3 text-emerald-500" />}
              {trend === 'down' && <TrendingDown className="h-3 w-3 text-red-500" />}
              <span className={`text-xs font-medium ${trend === 'up' ? 'text-emerald-600 dark:text-emerald-400' : trend === 'down' ? 'text-red-600 dark:text-red-400' : 'text-muted-foreground'}`}>{change}</span>
            </div>}
          </div>
          <div className={`flex h-11 w-11 items-center justify-center rounded-xl ${color} transition-transform group-hover:scale-110`}>
            <Icon className="h-5 w-5" strokeWidth={1.75} />
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

export function AdminDashboard({ stats }: { stats: DashboardStats | null }) {
  if (!stats) return <div className="flex items-center justify-center py-20"><span className="h-8 w-8 animate-spin rounded-full border-4 border-orange-500 border-t-transparent" /></div>;

  return (
    <div className="space-y-6">
      <Card className="overflow-hidden border-0 bg-gradient-to-r from-orange-600 via-orange-500 to-amber-500 shadow-lg">
        <CardContent className="flex items-center justify-between p-6">
          <div>
            <h2 className="text-xl font-bold text-white">Welcome back, Super Admin! 👋</h2>
            <p className="mt-1 text-sm text-white/80">Here&apos;s what&apos;s happening with your platform today</p>
          </div>
          <div className="hidden sm:flex"><Sparkles className="h-12 w-12 text-white/20" strokeWidth={1.5} /></div>
        </CardContent>
      </Card>
      <div className="grid grid-cols-2 gap-4 lg:grid-cols-3 xl:grid-cols-6">
        <StatCard title="Total Users" value={stats.totalUsers} change="+12%" trend="up" icon={Users} color="bg-orange-50 text-orange-600 dark:bg-orange-950/30 dark:text-orange-400" />
        <StatCard title="Houses" value={stats.totalHouses} change="+8%" trend="up" icon={Building2} color="bg-emerald-50 text-emerald-600 dark:bg-emerald-950/30 dark:text-emerald-400" />
        <StatCard title="Shops" value={stats.totalShops} change="+5%" trend="up" icon={Store} color="bg-amber-50 text-amber-600 dark:bg-amber-950/30 dark:text-amber-400" />
        <StatCard title="Products" value={stats.totalProducts} change="+15%" trend="up" icon={ShoppingBag} color="bg-amber-50 text-amber-600 dark:bg-amber-950/30 dark:text-amber-400" />
        <StatCard title="Orders" value={stats.totalOrders} change="+22%" trend="up" icon={Package} color="bg-rose-50 text-rose-600 dark:bg-rose-950/30 dark:text-rose-400" />
        <StatCard title="Revenue" value={`৳${stats.totalRevenue.toLocaleString()}`} change="+18%" trend="up" icon={DollarSign} color="bg-orange-50 text-orange-600 dark:bg-orange-950/30 dark:text-orange-400" />
      </div>
      <Card className="border-0 shadow-sm">
        <CardHeader className="pb-3">
          <CardTitle className="flex items-center gap-2 text-sm font-semibold">
            <Activity className="h-4 w-4 text-orange-500" />Recent Activity
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            {stats.recentActivity.length === 0 && <p className="py-8 text-center text-sm text-muted-foreground">No recent activity</p>}
            {stats.recentActivity.map((a, i) => (
              <div key={i} className="flex items-center gap-3 rounded-xl bg-slate-50 p-3 dark:bg-slate-800/50">
                <div className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg ${
                  a.type === 'user' ? 'bg-orange-100 text-orange-600 dark:bg-orange-950/30 dark:text-orange-400' :
                  a.type === 'order' ? 'bg-emerald-100 text-emerald-600 dark:bg-emerald-950/30 dark:text-emerald-400' :
                  a.type === 'listing' ? 'bg-amber-100 text-amber-600 dark:bg-amber-950/30 dark:text-amber-400' :
                  'bg-orange-100 text-orange-600 dark:bg-orange-950/30 dark:text-orange-400'
                }`}>
                  {a.type === 'user' ? <Users className="h-4 w-4" /> : a.type === 'order' ? <Package className="h-4 w-4" /> : a.type === 'listing' ? <Building2 className="h-4 w-4" /> : <Activity className="h-4 w-4" />}
                </div>
                <div className="flex-1 overflow-hidden">
                  <p className="truncate text-sm font-medium">{a.title}</p>
                  <p className="text-xs text-muted-foreground">{a.description}</p>
                </div>
                <span className="shrink-0 text-[11px] text-muted-foreground">{a.time}</span>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}