'use client'

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Users, Activity, UserPlus, Zap } from 'lucide-react'
import { motion } from 'framer-motion'
import { useSession } from 'next-auth/react'

export default function AdminDashboardPage() {
  const { data: session } = useSession()

  const stats = [
    { name: 'Toplam Kullanıcı', stat: '1,245', icon: Users, color: 'text-blue-600 dark:text-blue-400' },
    { name: 'Aktif Oturumlar', stat: '42', icon: Activity, color: 'text-green-600 dark:text-green-400' },
    { name: 'Yeni Kayıtlar', stat: '8', icon: UserPlus, color: 'text-orange-600 dark:text-orange-400' },
    { name: 'Sistem Durumu', stat: 'Online', icon: Zap, color: 'text-indigo-600 dark:text-indigo-400' },
  ]

  const container = {
    hidden: { opacity: 0 },
    show: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1
      }
    }
  }

  const item = {
    hidden: { opacity: 0, y: 20 },
    show: { opacity: 1, y: 0 }
  }

  return (
    <div className="space-y-8">
      <motion.div 
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4 }}
      >
        <h2 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">Dashboard</h2>
        <p className="text-gray-500 dark:text-gray-400 mt-2">
          Hoş geldiniz, {session?.user?.name || session?.user?.email || 'Admin'}. İşte projenizin genel görünümü.
        </p>
      </motion.div>

      <motion.div 
        variants={container}
        initial="hidden"
        animate="show"
        className="grid gap-4 md:grid-cols-2 lg:grid-cols-4"
      >
        {stats.map((stat, i) => (
          <motion.div key={stat.name} variants={item}>
            <Card className="border-gray-200 dark:border-gray-800 shadow-sm transition-all hover:shadow-md dark:bg-gray-950/50 backdrop-blur-sm">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium text-gray-500 dark:text-gray-400">
                  {stat.name}
                </CardTitle>
                <stat.icon className={`h-4 w-4 ${stat.color}`} />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-gray-900 dark:text-white">{stat.stat}</div>
              </CardContent>
            </Card>
          </motion.div>
        ))}
      </motion.div>

      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4, delay: 0.4 }}
      >
        <Card className="border-gray-200 dark:border-gray-800 shadow-sm dark:bg-gray-950/50 backdrop-blur-sm">
          <CardHeader>
            <CardTitle className="text-lg text-gray-900 dark:text-white">Son Aktiviteler</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="py-4 text-sm text-gray-500 dark:text-gray-400 text-center border-2 border-dashed rounded-lg border-gray-200 dark:border-gray-800">
              Henüz aktivite kaydı bulunmuyor.
            </div>
          </CardContent>
        </Card>
      </motion.div>
    </div>
  )
}