'use client';

import { useQuery } from '@tanstack/react-query';
import { 
  BookOpen, 
  Users, 
  Calendar, 
  DollarSign, 
  Clock, 
  AlertTriangle
} from 'lucide-react';
import Link from 'next/link';

// Mock data fetching function - replace with actual API calls
async function fetchDashboardData() {
  // This would be replaced with actual API calls
  return {
    stats: {
      totalBooks: 1250,
      totalStudents: 3486,
      totalBorrows: 8924,
      overdueBooks: 23,
      reservations: 156,
      unpaidFines: 2340
    }
  };
}

interface DashboardStats {
  totalBooks: number;
  totalStudents: number;
  totalBorrows: number;
  overdueBooks: number;
  reservations: number;
  unpaidFines: number;
}

export default function AdminDashboard() {
  const { data, isLoading } = useQuery({
    queryKey: ['admin-dashboard'],
    queryFn: fetchDashboardData,
  });

  const stats: Partial<DashboardStats> = data?.stats || {};

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="container mx-auto px-4 py-8">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-800 mb-2">管理员控制台</h1>
          <p className="text-gray-600">图书馆管理系统概览和操作中心</p>
        </div>

        {/* Stats Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
          <div className="bg-white rounded-lg shadow-md p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">图书总数</p>
                <p className="text-2xl font-bold text-gray-900">
                  {isLoading ? '...' : stats.totalBooks?.toLocaleString()}
                </p>
              </div>
              <BookOpen className="h-8 w-8 text-blue-600" />
            </div>
          </div>

          <div className="bg-white rounded-lg shadow-md p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">学生总数</p>
                <p className="text-2xl font-bold text-gray-900">
                  {isLoading ? '...' : stats.totalStudents?.toLocaleString()}
                </p>
              </div>
              <Users className="h-8 w-8 text-green-600" />
            </div>
          </div>

          <div className="bg-white rounded-lg shadow-md p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">借阅总数</p>
                <p className="text-2xl font-bold text-gray-900">
                  {isLoading ? '...' : stats.totalBorrows?.toLocaleString()}
                </p>
              </div>
              <Calendar className="h-8 w-8 text-purple-600" />
            </div>
          </div>

          <div className="bg-white rounded-lg shadow-md p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">逾期图书</p>
                <p className="text-2xl font-bold text-red-600">
                  {isLoading ? '...' : stats.overdueBooks}
                </p>
              </div>
              <AlertTriangle className="h-8 w-8 text-red-600" />
            </div>
          </div>

          <div className="bg-white rounded-lg shadow-md p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">预约数量</p>
                <p className="text-2xl font-bold text-gray-900">
                  {isLoading ? '...' : stats.reservations}
                </p>
              </div>
              <Clock className="h-8 w-8 text-orange-600" />
            </div>
          </div>

          <div className="bg-white rounded-lg shadow-md p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">未缴罚款</p>
                <p className="text-2xl font-bold text-red-600">
                  ¥{isLoading ? '...' : ((stats.unpaidFines || 0) / 100).toFixed(2)}
                </p>
              </div>
              <DollarSign className="h-8 w-8 text-red-600" />
            </div>
          </div>
        </div>

        {/* Quick Actions */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          <Link
            href="/admin/books"
            className="bg-blue-600 hover:bg-blue-700 text-white p-6 rounded-lg shadow-md transition-colors group"
          >
            <div className="flex items-center justify-between">
              <div>
                <h3 className="text-lg font-semibold mb-2">图书管理</h3>
                <p className="text-blue-100 text-sm">添加、编辑、删除图书</p>
              </div>
              <BookOpen className="h-8 w-8 group-hover:scale-110 transition-transform" />
            </div>
          </Link>

          <Link
            href="/admin/students"
            className="bg-green-600 hover:bg-green-700 text-white p-6 rounded-lg shadow-md transition-colors group"
          >
            <div className="flex items-center justify-between">
              <div>
                <h3 className="text-lg font-semibold mb-2">学生管理</h3>
                <p className="text-green-100 text-sm">管理学生账户</p>
              </div>
              <Users className="h-8 w-8 group-hover:scale-110 transition-transform" />
            </div>
          </Link>

          <Link
            href="/admin/borrows"
            className="bg-purple-600 hover:bg-purple-700 text-white p-6 rounded-lg shadow-md transition-colors group"
          >
            <div className="flex items-center justify-between">
              <div>
                <h3 className="text-lg font-semibold mb-2">借阅管理</h3>
                <p className="text-purple-100 text-sm">处理借阅和归还</p>
              </div>
              <Calendar className="h-8 w-8 group-hover:scale-110 transition-transform" />
            </div>
          </Link>

          <Link
            href="/admin/fines"
            className="bg-orange-600 hover:bg-orange-700 text-white p-6 rounded-lg shadow-md transition-colors group"
          >
            <div className="flex items-center justify-between">
              <div>
                <h3 className="text-lg font-semibold mb-2">罚款管理</h3>
                <p className="text-orange-100 text-sm">处理罚款和缴费</p>
              </div>
              <DollarSign className="h-8 w-8 group-hover:scale-110 transition-transform" />
            </div>
          </Link>
        </div>

        {/* Recent Activities */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <div className="bg-white rounded-lg shadow-md p-6">
            <h3 className="text-lg font-semibold mb-4">最近借阅</h3>
            <div className="space-y-3">
              {[1, 2, 3, 4, 5].map((item) => (
                <div key={item} className="flex items-center justify-between py-2 border-b border-gray-100 last:border-b-0">
                  <div>
                    <p className="font-medium text-sm">深入理解计算机系统</p>
                    <p className="text-gray-600 text-xs">学号: S2023001 - 张三</p>
                  </div>
                  <div className="text-right">
                    <p className="text-xs text-gray-500">2025-01-15</p>
                    <p className="text-xs text-green-600">已借出</p>
                  </div>
                </div>
              ))}
            </div>
            <Link 
              href="/admin/borrows"
              className="block text-center text-blue-600 hover:text-blue-700 text-sm mt-4 font-medium"
            >
              查看全部借阅记录
            </Link>
          </div>

          <div className="bg-white rounded-lg shadow-md p-6">
            <h3 className="text-lg font-semibold mb-4">逾期提醒</h3>
            <div className="space-y-3">
              {[1, 2, 3, 4, 5].map((item) => (
                <div key={item} className="flex items-center justify-between py-2 border-b border-gray-100 last:border-b-0">
                  <div>
                    <p className="font-medium text-sm">Python编程实战</p>
                    <p className="text-gray-600 text-xs">学号: S2023002 - 李四</p>
                  </div>
                  <div className="text-right">
                    <p className="text-xs text-gray-500">逾期 3 天</p>
                    <p className="text-xs text-red-600">¥3.00</p>
                  </div>
                </div>
              ))}
            </div>
            <Link 
              href="/admin/borrows?status=overdue"
              className="block text-center text-red-600 hover:text-red-700 text-sm mt-4 font-medium"
            >
              查看全部逾期记录
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}
