import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../../context/AuthContext';
import api from '../../utils/api';
import { Card } from '../../components/ui/card';
import { Button } from '../../components/ui/button';
import { Input } from '../../components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components/ui/select';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../components/ui/tabs';
import CreateStaffDialog from '../../components/CreateStaffDialog';
import InviteStaffDialog from '../../components/InviteStaffDialog';
import PendingInvitationsTable from '../../components/PendingInvitationsTable';
import { toast } from 'sonner';
import { UserCog, Search, Shield, UserPlus, Mail, Edit, Eye, Trash2, UserCheck, UserX, ShieldIcon } from 'lucide-react';
import StatusBadge from '../../components/StatusBadge';
import { StatCard } from '@/components/StatCard';
import { CircleMinus, CreditCard, Users } from 'lucide-react';
import { useStaff } from '../../hooks/use-users';

const AdminStaff = () => {
  const navigate = useNavigate();
  const { hasPermission, user } = useAuth();
  const {
    users,
    filteredUsers,
    loading,
    searchQuery,
    setSearchQuery,
    filterValue: roleFilter,
    setFilterValue: setRoleFilter,
    refetch,
  } = useStaff({
    initialFilter: 'all',
    filterKey: 'role',
  });
  const [createDialogOpen, setCreateDialogOpen] = useState(false);
  const [inviteDialogOpen, setInviteDialogOpen] = useState(false);
  const [activeTab, setActiveTab] = useState('staff-list');

  const handleToggleStatus = async (userId, currentStatus) => {
    const newStatus = currentStatus === 'active' ? 'inactive' : 'active';

    try {
      await api.put(`/admin/users/${userId}/status`, { status: newStatus });
      toast.success(`User ${newStatus === 'active' ? 'activated' : 'deactivated'} successfully`);
      refetch(); // Refresh list
    } catch (error) {
      toast.error(error.response?.data?.detail || 'Failed to update user status');
    }
  };

  const handleDeleteUser = async (userId, userName) => {
    if (!window.confirm(`Are you sure you want to delete ${userName}? This action cannot be undone.`)) {
      return;
    }

    try {
      await api.delete(`/admin/users/${userId}`);
      toast.success('User deleted successfully');
      refetch(); // Refresh list
    } catch (error) {
      toast.error(error.response?.data?.detail || 'Failed to delete user');
    }
  };




  return (
    <>
      <div className="mb-8">
        <div className="flex flex-col md:flex-row justify-between items-start mb-4">
          <div>
            <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
              Staff Management
            </h1>
            <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
              Manage internal team members and their roles.
            </p>
          </div>

          <div className="flex gap-3 ">
            {hasPermission('users.create') && (
              <Button
                onClick={() => setInviteDialogOpen(true)}
                className="btn-util-purple  h-12 px-6"
              >
                <Mail className="h-5 w-5 mr-2" />
                Invite Staff
              </Button>
            )}
            {hasPermission('users.create') && (
              <Button
                onClick={() => setCreateDialogOpen(true)}
                className="btn-util-green h-12 px-6"
              >
                <UserPlus className="h-5 w-5 mr-2" />
                Create Staff
              </Button>
            )}
          </div>
        </div>
      </div>

      {/* Stats */}
      <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 grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
          <StatCard
            title="Total Staff"
            //TODO: refractor codebase to have a central admin and user roles config - when user adds roles, they should be added to the config
            value={users.filter(u => ['admin', 'superadmin', 'finance', 'staff', 'media'].includes(u.role)).length}
            icon={Users}
            iconBgClass="bg-[var(--blue-light)] text-[var(--blue-dark)]"
            dataTestId="stat-total-members"
          />
          <StatCard
            title="Admins"
            value={users.filter(u => ['admin', 'superadmin'].includes(u.role)).length}
            icon={Shield}
            iconBgClass="text-[var(--green-light)]"
            dataTestId="stat-active-members"
          />
          <StatCard
            title="Finance Managers"
            value={users.filter(u => u.role === 'finance').length}
            icon={CreditCard}
            iconBgClass="text-brand-light-orange"
            dataTestId="stat-payment-pending-members"
          />
          <StatCard
            title="Inactive"
            value={users.filter(u => ['admin', 'superadmin'].includes(u.role)).length && users.filter(u => u.status !== 'inactive').length}
            icon={CircleMinus}
            iconBgClass=" text-brand-pink"
            dataTestId="stat-inactive-members"
          />
        </div>
      </div>

      {/* Tabs */}
      <Tabs value={activeTab} onValueChange={setActiveTab} className="mb-8">
        <TabsList className="grid w-full grid-cols-2 mb-8 ">
          <TabsTrigger value="staff-list" className="text-sm sm:text-md md:text-lg  py-3">
            <UserCog className="h-5 w-5 mr-2 hidden md:inline" />
            Staff Members
          </TabsTrigger>
          <TabsTrigger value="pending-invitations" className="text-sm sm:text-md md:text-lg  py-3  ">
            <Mail className="h-5 w-5 mr-2 hidden md:inline" />
            Pending Invitations
          </TabsTrigger>
        </TabsList>

        <TabsContent value="staff-list">
          {/* Filters */}
          <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] mb-8">
            <div className="grid md:grid-cols-2 gap-4">
              <div className="relative">
                <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-brand-purple " />
                <Input
                  placeholder="Search by name or email..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-12 h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                  data-testid="search-staff-input"
                />
              </div>
              <Select value={roleFilter} onValueChange={setRoleFilter}>
                <SelectTrigger className="h-14 rounded-xl border-2 border-[var(--neutral-800)]" data-testid="role-filter-select">
                  <SelectValue placeholder="Filter by role" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Roles</SelectItem>
                  <SelectItem value="superadmin">Superadmin</SelectItem>
                  <SelectItem value="admin">Admin</SelectItem>
                  <SelectItem value="moderator">Moderator</SelectItem>
                  <SelectItem value="staff">Staff</SelectItem>
                  <SelectItem value="media">Media</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </Card>

          {/* Staff List */}
          {loading ? (
            <div className="text-center py-20">
              <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading staff...</p>
            </div>
          ) : filteredUsers.length > 0 ? (
            <div className="space-y-4">
              {filteredUsers.map((user) => {
                const joinedDate = user.member_since || user.created_at;
                return (
                  <Card
                    key={user.id}
                    className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-md transition-shadow"
                    data-testid={`staff-card-${user.id}`}
                  >
                    <div className="flex justify-between items-start flex-wrap gap-4">
                      <div className="flex items-start gap-4 flex-1">
                        {/* Avatar */}
                        <div className="h-14 w-14 rounded-full bg-[var(--neutral-800)] flex items-center justify-center text-[var(--purple-ink)] font-semibold text-lg flex-shrink-0">
                          {user.first_name?.[0]}{user.last_name?.[0]}
                        </div>

                        {/* Info */}
                        <div className="flex-1 min-w-0">
                          <div className="flex items-center gap-3 mb-2 flex-wrap">
                            <h3 className="text-xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                              {user.first_name} {user.last_name}
                            </h3>
                            <StatusBadge status={user.role} />
                            <StatusBadge status={user.status} />
                          </div>
                          <div className="grid 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}</p>
                            <p>Joined: {joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}</p>
                            {user.last_login && (
                              <p>Last Login: {new Date(user.last_login).toLocaleDateString()}</p>
                            )}
                          </div>
                        </div>
                      </div>

                      {/* Actions */}
                      <div className="flex gap-2 flex-wrap">
                        <Button
                          onClick={() => navigate(`/admin/users/${user.id}`)}
                          variant="outline"
                          className="border-2 border-brand-purple  text-brand-purple  hover:bg-[var(--lavender-300)] rounded-full px-4 py-2"
                        >
                          <Edit className="h-4 w-4 mr-2" />
                          Manage
                        </Button>

                        {hasPermission('users.status') && (
                          <Button
                            onClick={() => handleToggleStatus(user.id, user.status)}
                            variant="outline"
                            className={`border-2 rounded-full px-4 py-2 ${user.status === 'active'
                              ? 'border-orange-500 text-orange-600 hover:bg-orange-50 dark:hover:bg-orange-600/10'
                              : 'border-green-500 text-green-600 hover:bg-green-50 hover:dark:bg-green-600/10'
                              }`}
                          >
                            {user.status === 'active' ? (
                              <>
                                <UserX className="h-4 w-4 mr-2" />
                                Deactivate
                              </>
                            ) : (
                              <>
                                <UserCheck className="h-4 w-4 mr-2" />
                                Activate
                              </>
                            )}
                          </Button>
                        )}

                        {hasPermission('users.delete') && (
                          <Button
                            onClick={() => handleDeleteUser(user.id, `${user.first_name} ${user.last_name}`)}
                            variant="outline"
                            className="border-2 border-red-500 text-red-600 hover:bg-red-50 dark:hover:bg-red-600/10  rounded-full px-4 py-2"
                          >
                            <Trash2 className="h-4 w-4 mr-2" />
                            Delete
                          </Button>
                        )}
                      </div>
                    </div>
                  </Card>
                );
              })}
            </div>
          ) : (
            <div className="text-center py-20">
              <UserCog className="h-20 w-20 text-[var(--neutral-800)] mx-auto mb-6" />
              <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                No Staff Found
              </h3>
              <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                {searchQuery || roleFilter !== 'all'
                  ? 'Try adjusting your filters'
                  : 'No staff members yet'}
              </p>
            </div>
          )}
        </TabsContent>

        <TabsContent value="pending-invitations">
          <PendingInvitationsTable />
        </TabsContent>
      </Tabs>

      {/* Dialogs */}
      <CreateStaffDialog
        open={createDialogOpen}
        onOpenChange={setCreateDialogOpen}
        onSuccess={refetch}
      />

      <InviteStaffDialog
        open={inviteDialogOpen}
        onOpenChange={setInviteDialogOpen}
        onSuccess={() => {
          // Optionally refresh invitations table
          setActiveTab('pending-invitations');
        }}
      />
    </>
  );
};

export default AdminStaff;