import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import api from '../../utils/api';
import { Card } from '../../components/ui/card';
import { Button } from '../../components/ui/button';
import { Badge } from '../../components/ui/badge';
import { Users, Calendar, Clock, CheckCircle } from 'lucide-react';

const AdminDashboard = () => {
  const [stats, setStats] = useState({
    totalMembers: 0,
    pendingApprovals: 0,
    activeMembers: 0
  });
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchDashboardStats();
  }, []);

  const fetchDashboardStats = async () => {
    try {
      const usersResponse = await api.get('/admin/users');
      const users = usersResponse.data;

      setStats({
        totalMembers: users.filter(u => u.role === 'member').length,
        pendingApprovals: users.filter(u =>
          ['pending_email', 'pending_approval', 'pre_approved', 'payment_pending'].includes(u.status)
        ).length,
        activeMembers: users.filter(u => u.status === 'active' && u.role === 'member').length
      });
    } catch (error) {
      console.error('Failed to fetch stats:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <div className="mb-8">
        <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
          Admin Dashboard
        </h1>
        <p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
          Manage users, events, and membership applications.
        </p>
      </div>

        {/* Stats Grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
          <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]" data-testid="stat-total-users">
            <div className="flex items-center justify-between mb-4">
              <div className="bg-[#DDD8EB]/20 p-3 rounded-lg">
                <Users className="h-6 w-6 text-[#664fa3]" />
              </div>
            </div>
            <p className="text-3xl font-semibold text-[#422268] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
              {loading ? '-' : stats.totalMembers}
            </p>
            <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Members</p>
          </Card>

          <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]" data-testid="stat-pending-approvals">
            <div className="flex items-center justify-between mb-4">
              <div className="bg-orange-100 p-3 rounded-lg">
                <Clock className="h-6 w-6 text-orange-600" />
              </div>
            </div>
            <p className="text-3xl font-semibold text-[#422268] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
              {loading ? '-' : stats.pendingApprovals}
            </p>
            <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pending Approvals</p>
          </Card>

          <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]" data-testid="stat-active-members">
            <div className="flex items-center justify-between mb-4">
              <div className="bg-[#81B29A]/20 p-3 rounded-lg">
                <CheckCircle className="h-6 w-6 text-[#81B29A]" />
              </div>
            </div>
            <p className="text-3xl font-semibold text-[#422268] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
              {loading ? '-' : stats.activeMembers}
            </p>
            <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active Members</p>
          </Card>
        </div>

        {/* Quick Actions */}
        <div className="grid md:grid-cols-2 gap-8">
          <Link to="/admin/users">
            <Card className="p-8 bg-white rounded-2xl border border-[#ddd8eb] hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer" data-testid="quick-action-users">
              <Users className="h-12 w-12 text-[#664fa3] mb-4" />
              <h3 className="text-xl font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                Manage Users
              </h3>
              <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                View and manage all registered users and their membership status.
              </p>
              <Button
                className="mt-4 bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full"
                data-testid="manage-users-button"
              >
                Go to Users
              </Button>
            </Card>
          </Link>

          <Link to="/admin/approvals">
            <Card className="p-8 bg-white rounded-2xl border border-[#ddd8eb] hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer" data-testid="quick-action-approvals">
              <Clock className="h-12 w-12 text-orange-600 mb-4" />
              <h3 className="text-xl font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                Approval Queue
              </h3>
              <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                Review and approve pending membership applications.
              </p>
              <Button
                className="mt-4 bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full"
                data-testid="manage-approvals-button"
              >
                View Approvals
              </Button>
            </Card>
          </Link>
        </div>
    </>
  );
};

export default AdminDashboard;
