'use client'

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Users, DollarSign, CreditCard, TrendingUp, UserCheck, Activity } from 'lucide-react'

interface DashboardStatsProps {
  stats: {
    users: {
      total: number
      active: number
      newThisMonth: number
      verified: number
      verificationRate: string
    }
    revenue: {
      total: number
      monthly: number
      weekly: number
    }
    transactions: {
      total: number
      monthly: number
    }
    services: {
      total: number
      active: number
    }
    developerRequests: {
      total: number
      pending: number
    }
  }
}

export default function DashboardStats({ stats }: DashboardStatsProps) {
  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat('en-IN', {
      style: 'currency',
      currency: 'INR',
      minimumFractionDigits: 0,
      maximumFractionDigits: 0,
    }).format(amount)
  }

  const statCards = [
    {
      title: 'Total Users',
      value: stats.users.total.toLocaleString(),
      change: `+${stats.users.newThisMonth} this month`,
      icon: Users,
      color: 'text-blue-600',
    },
    {
      title: 'Total Revenue',
      value: formatCurrency(stats.revenue.total),
      change: `${formatCurrency(stats.revenue.monthly)} this month`,
      icon: DollarSign,
      color: 'text-green-600',
    },
    {
      title: 'Active Services',
      value: stats.services.active.toLocaleString(),
      change: `${stats.services.total} total services`,
      icon: Activity,
      color: 'text-purple-600',
    },
    {
      title: 'Verified Users',
      value: `${stats.users.verificationRate}%`,
      change: `${stats.users.verified} verified`,
      icon: UserCheck,
      color: 'text-emerald-600',
    },
    {
      title: 'Transactions',
      value: stats.transactions.total.toLocaleString(),
      change: `+${stats.transactions.monthly} this month`,
      icon: CreditCard,
      color: 'text-orange-600',
    },
    {
      title: 'Developer Requests',
      value: stats.developerRequests.total.toLocaleString(),
      change: `${stats.developerRequests.pending} pending`,
      icon: TrendingUp,
      color: 'text-indigo-600',
    },
  ]

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {statCards.map((card, index) => {
        const gradients = [
          'from-blue-500 to-blue-600',
          'from-green-500 to-emerald-600',
          'from-purple-500 to-indigo-600',
          'from-emerald-500 to-teal-600',
          'from-orange-500 to-red-500',
          'from-indigo-500 to-purple-600',
        ]
        const bgGradient = gradients[index % gradients.length]

        return (
          <Card
            key={index}
            className="border border-gray-200 dark:border-gray-700 shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 bg-white dark:bg-gray-800"
          >
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
              <CardTitle className="text-sm font-medium text-gray-600 dark:text-gray-400">
                {card.title}
              </CardTitle>
              <div className={`p-2 rounded-lg bg-gradient-to-r ${bgGradient} shadow-lg`}>
                <card.icon className="h-5 w-5 text-white" />
              </div>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-gray-900 dark:text-white mb-1">
                {card.value}
              </div>
              <p className="text-xs text-gray-500 dark:text-gray-400 flex items-center">
                <span className="w-2 h-2 bg-green-500 rounded-full mr-2 animate-pulse"></span>
                {card.change}
              </p>
            </CardContent>
          </Card>
        )
      })}
    </div>
  )
}