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, Mail, AlertCircle } from 'lucide-react';

const AdminDashboard = () => {
  const [stats, setStats] = useState({
    totalMembers: 0,
    pendingValidations: 0,
    activeMembers: 0
  });
  const [usersNeedingAttention, setUsersNeedingAttention] = useState([]);
  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,
        pendingValidations: users.filter(u =>
          ['pending_email', 'pending_validation', 'pre_validated', 'payment_pending'].includes(u.status)
        ).length,
        activeMembers: users.filter(u => u.status === 'active' && u.role === 'member').length
      });

      // Find users who have received 3+ reminders (may need personal outreach)
      const needingAttention = users.filter(u => {
        const emailReminders = u.email_verification_reminders_sent || 0;
        const eventReminders = u.event_attendance_reminders_sent || 0;
        const paymentReminders = u.payment_reminders_sent || 0;
        const totalReminders = emailReminders + eventReminders + paymentReminders;
        return totalReminders >= 3;
      }).map(u => ({
        ...u,
        totalReminders: (u.email_verification_reminders_sent || 0) +
                       (u.event_attendance_reminders_sent || 0) +
                       (u.payment_reminders_sent || 0)
      })).sort((a, b) => b.totalReminders - a.totalReminders).slice(0, 5); // Top 5

      setUsersNeedingAttention(needingAttention);
    } 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-validations">
            <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.pendingValidations}
            </p>
            <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pending Validations</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/members">
            <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 Members
              </h3>
              <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                View and manage paying members and their subscription status.
              </p>
              <Button
                className="mt-4 bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full"
                data-testid="manage-users-button"
              >
                Go to Members
              </Button>
            </Card>
          </Link>

          <Link to="/admin/validations">
            <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-validations">
              <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" }}>
                Validation Queue
              </h3>
              <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                Review and validate pending membership applications.
              </p>
              <Button
                className="mt-4 bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full"
                data-testid="manage-validations-button"
              >
                View Validations
              </Button>
            </Card>
          </Link>
        </div>

        {/* Users Needing Attention Widget */}
        {usersNeedingAttention.length > 0 && (
          <div className="mt-12">
            <Card className="p-8 bg-white rounded-2xl border-2 border-[#ff9e77] shadow-lg">
              <div className="flex items-center gap-3 mb-6">
                <div className="bg-[#ff9e77]/20 p-3 rounded-lg">
                  <AlertCircle className="h-6 w-6 text-[#ff9e77]" />
                </div>
                <div>
                  <h3 className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
                    Members Needing Personal Outreach
                  </h3>
                  <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                    These members have received multiple reminder emails. Consider calling them directly.
                  </p>
                </div>
              </div>

              <div className="space-y-4">
                {usersNeedingAttention.map(user => (
                  <Link key={user.id} to={`/admin/users/${user.id}`}>
                    <div className="p-4 bg-[#F8F7FB] rounded-xl border border-[#ddd8eb] hover:border-[#ff9e77] hover:shadow-md transition-all cursor-pointer">
                      <div className="flex items-start justify-between gap-4">
                        <div className="flex-1">
                          <div className="flex items-center gap-3 mb-2">
                            <h4 className="font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
                              {user.first_name} {user.last_name}
                            </h4>
                            <Badge className="bg-[#ff9e77] text-white px-3 py-1 rounded-full text-xs">
                              {user.totalReminders} reminder{user.totalReminders !== 1 ? 's' : ''}
                            </Badge>
                          </div>
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                            <p>Email: {user.email}</p>
                            <p>Phone: {user.phone || 'N/A'}</p>
                            <p className="capitalize">Status: {user.status.replace('_', ' ')}</p>
                            {user.email_verification_reminders_sent > 0 && (
                              <p>
                                <Mail className="inline h-3 w-3 mr-1" />
                                {user.email_verification_reminders_sent} email verification reminder{user.email_verification_reminders_sent !== 1 ? 's' : ''}
                              </p>
                            )}
                            {user.event_attendance_reminders_sent > 0 && (
                              <p>
                                <Calendar className="inline h-3 w-3 mr-1" />
                                {user.event_attendance_reminders_sent} event reminder{user.event_attendance_reminders_sent !== 1 ? 's' : ''}
                              </p>
                            )}
                            {user.payment_reminders_sent > 0 && (
                              <p>
                                <Clock className="inline h-3 w-3 mr-1" />
                                {user.payment_reminders_sent} payment reminder{user.payment_reminders_sent !== 1 ? 's' : ''}
                              </p>
                            )}
                          </div>
                        </div>
                        <Button
                          className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full text-sm"
                          onClick={(e) => {
                            e.preventDefault();
                            window.location.href = `tel:${user.phone}`;
                          }}
                        >
                          Call Member
                        </Button>
                      </div>
                    </div>
                  </Link>
                ))}
              </div>

              <div className="mt-6 p-4 bg-[#DDD8EB]/20 rounded-lg border border-[#ddd8eb]">
                <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                  <strong>💡 Tip for helping older members:</strong> Many of our members are older ladies who may struggle with email.
                  A friendly phone call can help them complete the registration process and feel more welcomed to the community.
                </p>
              </div>
            </Card>
          </div>
        )}
    </>
  );
};

export default AdminDashboard;