gridpilot.gg/apps/website/templates/AdminUsersTemplate.tsx

'use client';

import React from 'react';
import { AdminUsersViewData } from '@/lib/view-data/AdminUsersViewData';
import { Container } from '@/ui/Container';
import { Stack } from '@/ui/Stack';
import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { RefreshCw, Users, ShieldAlert } from 'lucide-react';
import { AdminHeaderPanel } from '@/components/admin/AdminHeaderPanel';
import { AdminStatsPanel } from '@/components/admin/AdminStatsPanel';
import { UserFilters } from '@/components/admin/UserFilters';
import { AdminUsersTable } from '@/components/admin/AdminUsersTable';
import { BulkActionBar } from '@/components/admin/BulkActionBar';
import { InlineNotice } from '@/components/shared/ux/InlineNotice';
import { AdminDataTable } from '@/components/admin/AdminDataTable';
import { AdminEmptyState } from '@/components/admin/AdminEmptyState';

interface AdminUsersTemplateProps {
  viewData: AdminUsersViewData;
  onRefresh: () => void;
  onSearch: (search: string) => void;
  onFilterRole: (role: string) => void;
  onFilterStatus: (status: string) => void;
  onClearFilters: () => void;
  onUpdateStatus: (userId: string, status: string) => void;
  onDeleteUser: (userId: string) => void;
  search: string;
  roleFilter: string;
  statusFilter: string;
  loading: boolean;
  error: string | null;
  deletingUser: string | null;
  // Selection state passed from wrapper
  selectedUserIds: string[];
  onSelectUser: (userId: string) => void;
  onSelectAll: () => void;
  onClearSelection: () => void;
}

/**
 * AdminUsersTemplate
 * 
 * Redesigned user management page.
 * Uses semantic admin UI blocks and follows "Precision Racing Minimal" theme.
 * Stateless template.
 */
export function AdminUsersTemplate({
  viewData,
  onRefresh,
  onSearch,
  onFilterRole,
  onFilterStatus,
  onClearFilters,
  onUpdateStatus,
  onDeleteUser,
  search,
  roleFilter,
  statusFilter,
  loading,
  error,
  deletingUser,
  selectedUserIds,
  onSelectUser,
  onSelectAll,
  onClearSelection
}: AdminUsersTemplateProps) {
  const stats = [
    {
      label: 'Total Users',
      value: viewData.total,
      icon: Users,
      variant: 'blue' as const
    },
    {
      label: 'Active Users',
      value: viewData.activeUserCount,
      icon: RefreshCw,
      variant: 'green' as const
    },
    {
      label: 'System Admins',
      value: viewData.adminCount,
      icon: ShieldAlert,
      variant: 'purple' as const
    }
  ];

  const bulkActions = [
    {
      label: 'Suspend Selected',
      onClick: () => {
        console.log('Bulk suspend', selectedUserIds);
      },
      variant: 'secondary' as const
    },
    {
      label: 'Delete Selected',
      onClick: () => {
        console.log('Bulk delete', selectedUserIds);
      },
      variant: 'danger' as const
    }
  ];

  return (
    <Container size="lg" py={8}>
      <Stack gap={8}>
        <AdminHeaderPanel
          title="User Management"
          description="Monitor and control system access"
          isLoading={loading}
          actions={
            <Button
              onClick={onRefresh}
              disabled={loading}
              variant="secondary"
              size="sm"
              icon={<Icon icon={RefreshCw} size={3} animate={loading ? 'spin' : 'none'} />}
            >
              Refresh Data
            </Button>
          }
        />

        {error && (
          <InlineNotice
            variant="error"
            title="Operation Failed"
            message={error}
          />
        )}

        <AdminStatsPanel stats={stats} />

        <UserFilters
          search={search}
          roleFilter={roleFilter}
          statusFilter={statusFilter}
          onSearch={onSearch}
          onFilterRole={onFilterRole}
          onFilterStatus={onFilterStatus}
          onClearFilters={onClearFilters}
        />

        <AdminDataTable>
          {viewData.users.length === 0 && !loading ? (
            <AdminEmptyState
              icon={Users}
              title="No users found"
              description="Try adjusting your filters or search query"
              action={
                <Button variant="secondary" size="sm" onClick={onClearFilters}>
                  Clear All Filters
                </Button>
              }
            />
          ) : (
            <AdminUsersTable
              users={viewData.users}
              selectedUserIds={selectedUserIds}
              onSelectUser={onSelectUser}
              onSelectAll={onSelectAll}
              onUpdateStatus={onUpdateStatus}
              onDeleteUser={onDeleteUser}
              deletingUserId={deletingUser}
            />
          )}
        </AdminDataTable>

        <BulkActionBar
          selectedCount={selectedUserIds.length}
          actions={bulkActions}
          onClearSelection={onClearSelection}
        />
      </Stack>
    </Container>
  );
}