membership-fe/src/pages/admin/AdminStaff.js

import React, { useEffect, 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 { Badge } from '../../components/ui/badge';
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 } from 'lucide-react';

const AdminStaff = () => {
  const navigate = useNavigate();
  const { hasPermission } = useAuth();
  const [users, setUsers] = useState([]);
  const [filteredUsers, setFilteredUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState('');
  const [roleFilter, setRoleFilter] = useState('all');
  const [createDialogOpen, setCreateDialogOpen] = useState(false);
  const [inviteDialogOpen, setInviteDialogOpen] = useState(false);
  const [activeTab, setActiveTab] = useState('staff-list');

  // Staff roles (non-guest, non-member) - includes all admin-type roles
  const STAFF_ROLES = ['admin', 'superadmin', 'finance'];

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

  useEffect(() => {
    filterUsers();
  }, [users, searchQuery, roleFilter]);

  const fetchStaff = async () => {
    try {
      const response = await api.get('/admin/users');
      // Filter to only staff roles
      const staffUsers = response.data.filter(user =>
        STAFF_ROLES.includes(user.role)
      );
      setUsers(staffUsers);
    } catch (error) {
      toast.error('Failed to fetch staff');
    } finally {
      setLoading(false);
    }
  };

  const filterUsers = () => {
    let filtered = users;

    if (roleFilter && roleFilter !== 'all') {
      filtered = filtered.filter(user => user.role === roleFilter);
    }

    if (searchQuery) {
      const query = searchQuery.toLowerCase();
      filtered = filtered.filter(user =>
        user.first_name.toLowerCase().includes(query) ||
        user.last_name.toLowerCase().includes(query) ||
        user.email.toLowerCase().includes(query)
      );
    }

    setFilteredUsers(filtered);
  };

  const getRoleBadge = (role) => {
    const config = {
      superadmin: { label: 'Superadmin', className: 'bg-[#664fa3] text-white' },
      admin: { label: 'Admin', className: 'bg-[#81B29A] text-white' },
      moderator: { label: 'Moderator', className: 'bg-[#DDD8EB] text-[#422268]' },
      staff: { label: 'Staff', className: 'bg-gray-200 text-gray-700' },
      media: { label: 'Media', className: 'bg-gray-400 text-white' }
    };

    const roleConfig = config[role] || { label: role, className: 'bg-gray-500 text-white' };
    return (
      <Badge className={`${roleConfig.className} px-3 py-1 rounded-full text-sm`}>
        <Shield className="h-3 w-3 mr-1 inline" />
        {roleConfig.label}
      </Badge>
    );
  };

  const getStatusBadge = (status) => {
    const config = {
      active: { label: 'Active', className: 'bg-[#81B29A] text-white' },
      inactive: { label: 'Inactive', className: 'bg-gray-400 text-white' }
    };

    const statusConfig = config[status] || config.inactive;
    return (
      <Badge className={`${statusConfig.className} px-3 py-1 rounded-full text-sm`}>
        {statusConfig.label}
      </Badge>
    );
  };

  return (
    <>
      <div className="mb-8">
        <div className="flex justify-between items-start mb-4">
          <div>
            <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
              Staff Management
            </h1>
            <p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
              Manage internal team members and their roles.
            </p>
          </div>
          <div className="flex gap-3">
            {hasPermission('users.invite') && (
              <Button
                onClick={() => setInviteDialogOpen(true)}
                className="bg-[#664fa3] hover:bg-[#422268] text-white rounded-xl h-12 px-6"
              >
                <Mail className="h-5 w-5 mr-2" />
                Invite Staff
              </Button>
            )}
            {hasPermission('users.create') && (
              <Button
                onClick={() => setCreateDialogOpen(true)}
                className="bg-[#81B29A] hover:bg-[#6DA085] text-white rounded-xl h-12 px-6"
              >
                <UserPlus className="h-5 w-5 mr-2" />
                Create Staff
              </Button>
            )}
          </div>
        </div>
      </div>

      {/* Stats */}
      <div className="grid md:grid-cols-4 gap-4 mb-8">
        <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
          <p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Staff</p>
          <p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
            {users.length}
          </p>
        </Card>
        <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
          <p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Admins</p>
          <p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
            {users.filter(u => ['admin', 'superadmin'].includes(u.role)).length}
          </p>
        </Card>
        <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
          <p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Moderators</p>
          <p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
            {users.filter(u => u.role === 'moderator').length}
          </p>
        </Card>
        <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
          <p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active</p>
          <p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
            {users.filter(u => u.status === 'active').length}
          </p>
        </Card>
      </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-lg py-3">
            <UserCog className="h-5 w-5 mr-2" />
            Staff Members
          </TabsTrigger>
          <TabsTrigger value="pending-invitations" className="text-lg py-3">
            <Mail className="h-5 w-5 mr-2" />
            Pending Invitations
          </TabsTrigger>
        </TabsList>

        <TabsContent value="staff-list">
          {/* Filters */}
          <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb] 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-[#664fa3]" />
                <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-[#ddd8eb] focus:border-[#664fa3]"
                  data-testid="search-staff-input"
                />
              </div>
              <Select value={roleFilter} onValueChange={setRoleFilter}>
                <SelectTrigger className="h-14 rounded-xl border-2 border-[#ddd8eb]" 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-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading staff...</p>
            </div>
          ) : filteredUsers.length > 0 ? (
            <div className="space-y-4">
              {filteredUsers.map((user) => (
                <Card
                  key={user.id}
                  className="p-6 bg-white rounded-2xl border border-[#ddd8eb] 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-[#DDD8EB] flex items-center justify-center text-[#422268] 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-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
                            {user.first_name} {user.last_name}
                          </h3>
                          {getRoleBadge(user.role)}
                          {getStatusBadge(user.status)}
                        </div>
                        <div className="grid 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}</p>
                          <p>Joined: {new Date(user.created_at).toLocaleDateString()}</p>
                          {user.last_login && (
                            <p>Last Login: {new Date(user.last_login).toLocaleDateString()}</p>
                          )}
                        </div>
                      </div>
                    </div>

                    {/* Actions */}
                    <div className="flex gap-2">
                      <Button
                        onClick={() => navigate(`/admin/users/${user.id}`)}
                        variant="outline"
                        className="border-2 border-[#664fa3] text-[#664fa3] hover:bg-[#f1eef9] rounded-full px-4 py-2"
                      >
                        <Edit className="h-4 w-4 mr-2" />
                        Manage
                      </Button>
                    </div>
                  </div>
                </Card>
              ))}
            </div>
          ) : (
            <div className="text-center py-20">
              <UserCog className="h-20 w-20 text-[#ddd8eb] mx-auto mb-6" />
              <h3 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                No Staff Found
              </h3>
              <p className="text-[#664fa3]" 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={fetchStaff}
      />

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

export default AdminStaff;