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, Globe, CircleMinus } from 'lucide-react';
import { StatCard } from '../../components/StatCard';


const AdminDashboard = () => {
  const [stats, setStats] = useState({
    totalMembers: 0,
    pendingValidations: 0,
    activeMembers: 0,
    inactiveMembers: 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,
        inactiveMembers: users.filter(u => u.status === 'inactive' && 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='flex flex-col md:flex-row  md:justify-between md:items-center'>
        <div className="mb-8">
          <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
            Admin Dashboard
          </h1>
          <p className="text-lg text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
            Manage users, events, and membership applications.
          </p>
        </div>
        <Link to={'/'} className=''>
          <Button
            className="btn-lavender mb-8 md:mb-0  "
          >
            <Globe />
            View Public Site
          </Button>
        </Link>
      </div>

      {/* Stats Grid */}

      <div className='rounded-3xl bg-brand-lavender/10 p-8 mb-8'>
        <div className=' text-2xl text-[var(--purple-ink)] pb-8 font-semibold'>
          Quick Overview
        </div>
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8  ">
          <StatCard
            title="Total Members"
            value={loading ? '-' : stats.totalMembers}
            icon={Users}
            iconBgClass="text-brand-purple"
            dataTestId="stat-total-users"
          />
          <StatCard
            title="Pending Validations"
            value={loading ? '-' : stats.pendingValidations}
            icon={Clock}
            iconBgClass="text-brand-light-orange"
            dataTestId="stat-total-users"
          />
          <StatCard
            title="Active Members"
            value={loading ? '-' : stats.activeMembers}
            icon={CheckCircle}
            iconBgClass="text-[var(--green-light)]"
            dataTestId="stat-total-users"
          />
          <StatCard
            title="Inactive Members"
            value={loading ? '-' : stats.inactiveMembers}
            icon={CircleMinus}
            iconBgClass="text-brand-pink"
            dataTestId="stat-total-users"
          />

        </div>
      </div>

      {/* Quick Actions */}
      <div className="grid md:grid-cols-2 gap-8">
        <Link to="/admin/members">
          <Card className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer" data-testid="quick-action-users">
            <Users className="h-12 w-12 text-brand-purple mb-4" />
            <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
              Manage Members
            </h3>
            <p className="text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
              View and manage paying members and their subscription status.
            </p>
            <Button
              className="btn-lavender mt-4"
              data-testid="manage-users-button"
            >
              Go to Members
            </Button>
          </Card>
        </Link>

        <Link to="/admin/validations">
          <Card className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)] 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-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
              Validation Queue
            </h3>
            <p className="text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
              Review and validate pending membership applications.
            </p>
            <Button
              className="mt-4 btn-lavender"
              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-background rounded-2xl border-2 border-[var(--orange-light)] shadow-lg">
            <div className="flex items-center gap-3 mb-6">
              <div className="bg-[var(--orange-light)]/20 p-3 rounded-lg">
                <AlertCircle className="h-6 w-6 text-[var(--orange-light)]" />
              </div>
              <div>
                <h3 className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                  Members Needing Personal Outreach
                </h3>
                <p className="text-sm text-brand-purple" 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-[var(--lavender-500)] rounded-xl border border-[var(--neutral-800)] hover:border-[var(--orange-light)] 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-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                            {user.first_name} {user.last_name}
                          </h4>
                          <Badge className="bg-[var(--orange-light)] 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-brand-purple" 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-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background 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-[var(--neutral-800)]/20 rounded-lg border border-[var(--neutral-800)]">
              <p className="text-sm text-brand-purple" 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;