'use client'

import React from 'react'
import Link from 'next/link'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import {
  Users,
  Crown,
  DollarSign,
  UserPlus,
  Trophy,
  HandCoins,
  ArrowUpRight,
  TrendingUp,
  Eye,
} from 'lucide-react'

// Mock data for demonstration
const stats = [
  {
    label: 'Total Users',
    value: '12,458',
    change: '+8.2%',
    icon: Users,
    color: 'bg-blue-100 text-blue-600',
    border: 'border-l-blue-500',
  },
  {
    label: 'Premium Users',
    value: '2,340',
    change: '+12.5%',
    icon: Crown,
    color: 'bg-amber-100 text-amber-600',
    border: 'border-l-amber-500',
  },
  {
    label: 'Total Revenue',
    value: 'R 485,200',
    change: '+15.3%',
    icon: DollarSign,
    color: 'bg-green-100 text-green-600',
    border: 'border-l-green-500',
  },
  {
    label: 'Recent Signups',
    value: '156',
    change: '+5.7%',
    icon: UserPlus,
    color: 'bg-purple-100 text-purple-600',
    border: 'border-l-purple-500',
  },
  {
    label: 'Active Competitions',
    value: '8',
    change: 'Live',
    icon: Trophy,
    color: 'bg-orange-100 text-orange-600',
    border: 'border-l-orange-500',
  },
  {
    label: 'Bursary Balance',
    value: 'R 125,000',
    change: 'Available',
    icon: HandCoins,
    color: 'bg-teal-100 text-teal-600',
    border: 'border-l-teal-500',
  },
]

const recentUsers = [
  { id: 1, name: 'Thabo Mokoena', email: 'thabo@email.com', grade: '12', province: 'Gauteng', plan: 'Premium', joined: '2024-01-15' },
  { id: 2, name: 'Lerato Nkosi', email: 'lerato@email.com', grade: '11', province: 'KwaZulu-Natal', plan: 'Free', joined: '2024-01-14' },
  { id: 3, name: 'Sipho Dlamini', email: 'sipho@email.com', grade: '12', province: 'Mpumalanga', plan: 'Premium', joined: '2024-01-14' },
  { id: 4, name: 'Zanele Mthembu', email: 'zanele@email.com', grade: '10', province: 'Western Cape', plan: 'Free', joined: '2024-01-13' },
  { id: 5, name: 'Andile Ndlovu', email: 'andile@email.com', grade: '13', province: 'Eastern Cape', plan: 'Premium', joined: '2024-01-13' },
  { id: 6, name: 'Precious Mahlangu', email: 'precious@email.com', grade: '9', province: 'Limpopo', plan: 'Free', joined: '2024-01-12' },
  { id: 7, name: 'Kagiso Botha', email: 'kagiso@email.com', grade: '11', province: 'Free State', plan: 'Free', joined: '2024-01-12' },
  { id: 8, name: 'Nomsa Sithole', email: 'nomsa@email.com', grade: '12', province: 'North West', plan: 'Premium', joined: '2024-01-11' },
  { id: 9, name: 'Bongani Zulu', email: 'bongani@email.com', grade: '10', province: 'Northern Cape', plan: 'Free', joined: '2024-01-11' },
  { id: 10, name: 'Fatima Patel', email: 'fatima@email.com', grade: '12', province: 'Gauteng', plan: 'Premium', joined: '2024-01-10' },
]

export default function AdminDashboardPage() {
  return (
    <div className="space-y-6">
      {/* Page Title */}
      <div>
        <h1 className="text-2xl font-bold text-[#2c3e50]">Admin Dashboard</h1>
        <p className="text-sm text-gray-500">Overview of your platform performance</p>
      </div>

      {/* Stats Grid */}
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
        {stats.map((stat) => {
          const Icon = stat.icon
          return (
            <Card key={stat.label} className={`border-l-4 ${stat.border}`}>
              <CardContent className="pt-0">
                <div className="flex items-center justify-between">
                  <div className="min-w-0">
                    <p className="text-xs font-medium text-gray-500 truncate">{stat.label}</p>
                    <p className="mt-1 text-xl font-bold text-[#2c3e50]">{stat.value}</p>
                    <div className="mt-1 flex items-center gap-1">
                      {stat.change.startsWith('+') && <TrendingUp className="h-3 w-3 text-green-500" />}
                      <span className={`text-xs font-medium ${
                        stat.change.startsWith('+') ? 'text-green-600' :
                        stat.change === 'Live' ? 'text-orange-600' :
                        'text-gray-500'
                      }`}>
                        {stat.change}
                      </span>
                    </div>
                  </div>
                  <div className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl ${stat.color}`}>
                    <Icon className="h-5 w-5" />
                  </div>
                </div>
              </CardContent>
            </Card>
          )
        })}
      </div>

      {/* Revenue Overview Chart Placeholder */}
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle className="text-lg">Revenue Overview</CardTitle>
              <CardDescription>Monthly revenue trends</CardDescription>
            </div>
            <Badge className="bg-green-100 text-green-700 hover:bg-green-100">
              <TrendingUp className="mr-1 h-3 w-3" />
              +15.3% this month
            </Badge>
          </div>
        </CardHeader>
        <CardContent>
          <div className="flex h-48 items-center justify-center rounded-lg bg-gradient-to-br from-[#91C4D9]/5 to-[#5b9ebd]/5">
            <div className="text-center">
              <DollarSign className="mx-auto h-8 w-8 text-[#5b9ebd]/40" />
              <p className="mt-2 text-sm text-gray-400">Revenue chart will be displayed here</p>
              <p className="text-xs text-gray-300">Connect analytics service to see live data</p>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Recent Users Table */}
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle className="text-lg">Recent Users</CardTitle>
              <CardDescription>Latest registrations on the platform</CardDescription>
            </div>
            <Button variant="outline" size="sm" className="border-[#91C4D9] text-[#5b9ebd] hover:bg-[#91C4D9]/10">
              View All
              <ArrowUpRight className="ml-1 h-3 w-3" />
            </Button>
          </div>
        </CardHeader>
        <CardContent>
          <div className="max-h-96 overflow-y-auto rounded-md border">
            <Table>
              <TableHeader>
                <TableRow className="bg-gray-50 hover:bg-gray-50">
                  <TableHead className="font-semibold">Name</TableHead>
                  <TableHead className="font-semibold">Email</TableHead>
                  <TableHead className="font-semibold">Grade</TableHead>
                  <TableHead className="font-semibold">Province</TableHead>
                  <TableHead className="font-semibold">Plan</TableHead>
                  <TableHead className="font-semibold">Joined</TableHead>
                  <TableHead className="font-semibold text-right">Action</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {recentUsers.map((user) => (
                  <TableRow key={user.id}>
                    <TableCell className="font-medium">{user.name}</TableCell>
                    <TableCell className="text-gray-500">{user.email}</TableCell>
                    <TableCell>
                      <Badge variant="outline" className="font-normal">Gr {user.grade}</Badge>
                    </TableCell>
                    <TableCell className="text-gray-500 text-xs">{user.province}</TableCell>
                    <TableCell>
                      <Badge className={
                        user.plan === 'Premium'
                          ? 'bg-amber-100 text-amber-700 hover:bg-amber-100'
                          : 'bg-gray-100 text-gray-600 hover:bg-gray-100'
                      }>
                        {user.plan}
                      </Badge>
                    </TableCell>
                    <TableCell className="text-gray-500 text-xs">{user.joined}</TableCell>
                    <TableCell className="text-right">
                      <Button variant="ghost" size="sm" className="text-[#5b9ebd] hover:text-[#91C4D9] hover:bg-[#91C4D9]/10">
                        <Eye className="mr-1 h-3 w-3" />
                        View
                      </Button>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
