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

'use client';

import React from 'react';
import { Card } from '@/ui/Card';
import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
import { Button } from '@/ui/Button';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Container } from '@/ui/Container';
import { Icon } from '@/ui/Icon';
import { StatusBadge } from '@/ui/StatusBadge';
import { InfoBox } from '@/ui/InfoBox';
import {
  RefreshCw,
  Shield,
  Trash2,
  Users
} from 'lucide-react';
import { AdminUsersViewData } from '@/lib/view-data/AdminUsersViewData';
import { UserFilters } from '@/components/admin/UserFilters';
import { UserStatsSummary } from '@/components/admin/UserStatsSummary';
import { Surface } from '@/ui/Surface';

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;
}

export function AdminUsersTemplate({
  viewData,
  onRefresh,
  onSearch,
  onFilterRole,
  onFilterStatus,
  onClearFilters,
  onUpdateStatus,
  onDeleteUser,
  search,
  roleFilter,
  statusFilter,
  loading,
  error,
  deletingUser
}: AdminUsersTemplateProps) {
  const getStatusBadgeVariant = (status: string): 'success' | 'warning' | 'error' | 'info' => {
    switch (status) {
      case 'active': return 'success';
      case 'suspended': return 'warning';
      case 'deleted': return 'error';
      default: return 'info';
    }
  };

  const getRoleBadgeProps = (role: string): { bg: string; color: string; borderColor: string } => {
    switch (role) {
      case 'owner': return { bg: 'bg-purple-500/20', color: '#d8b4fe', borderColor: 'border-purple-500/30' };
      case 'admin': return { bg: 'bg-blue-500/20', color: '#93c5fd', borderColor: 'border-blue-500/30' };
      default: return { bg: 'bg-neutral-500/20', color: '#d1d5db', borderColor: 'border-neutral-500/30' };
    }
  };

  return (
    <Container size="lg" py={6}>
      <Stack gap={6}>
        {/* Header */}
        <Stack direction="row" align="center" justify="between">
          <Box>
            <Heading level={1}>User Management</Heading>
            <Text size="sm" color="text-gray-400" block mt={1}>Manage and monitor all system users</Text>
          </Box>
          <Button
            onClick={onRefresh}
            disabled={loading}
            variant="secondary"
            icon={<Icon icon={RefreshCw} size={4} animate={loading ? 'spin' : 'none'} />}
          >
            Refresh
          </Button>
        </Stack>

        {/* Error Banner */}
        {error && (
          <InfoBox 
            icon={Users}
            title="Error"
            description={error}
            variant="warning"
          />
        )}

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

        {/* Users Table */}
        <Card p={0}>
          {loading ? (
            <Stack center py={12} gap={3}>
              <Box animate="spin" rounded="full" h="2rem" w="2rem" borderBottom borderColor="border-primary-blue" />
              <Text color="text-gray-400">Loading users...</Text>
            </Stack>
          ) : !viewData.users || viewData.users.length === 0 ? (
            <Stack center py={12} gap={3}>
              <Icon icon={Users} size={12} color="#525252" />
              <Text color="text-gray-400">No users found</Text>
              <Button
                onClick={onClearFilters}
                variant="ghost"
                size="sm"
              >
                Clear filters
              </Button>
            </Stack>
          ) : (
            <Table>
              <TableHead>
                <TableRow>
                  <TableHeader>User</TableHeader>
                  <TableHeader>Email</TableHeader>
                  <TableHeader>Roles</TableHeader>
                  <TableHeader>Status</TableHeader>
                  <TableHeader>Last Login</TableHeader>
                  <TableHeader>Actions</TableHeader>
                </TableRow>
              </TableHead>
              <TableBody>
                {viewData.users.map((user) => (
                  <TableRow key={user.id}>
                    <TableCell>
                      <Stack direction="row" align="center" gap={3}>
                        <Surface variant="muted" rounded="full" padding={2} bg="bg-primary-blue/20">
                          <Icon icon={Shield} size={4} color="#3b82f6" />
                        </Surface>
                        <Box>
                          <Text weight="medium" color="text-white" block>{user.displayName}</Text>
                          <Text size="xs" color="text-gray-500" block>ID: {user.id}</Text>
                          {user.primaryDriverId && (
                            <Text size="xs" color="text-gray-500" block>Driver: {user.primaryDriverId}</Text>
                          )}
                        </Box>
                      </Stack>
                    </TableCell>
                    <TableCell>
                      <Text size="sm" color="text-gray-300">{user.email}</Text>
                    </TableCell>
                    <TableCell>
                      <Stack direction="row" gap={1} wrap>
                        {user.roles.map((role, idx) => {
                          const badgeProps = getRoleBadgeProps(role);
                          return (
                            <Surface 
                              key={idx} 
                              variant="muted" 
                              rounded="full" 
                              padding={1} 
                              px={2}
                              bg={badgeProps.bg}
                              color={badgeProps.color}
                              borderColor={badgeProps.borderColor}
                              border
                            >
                              <Text size="xs" weight="medium">{role.charAt(0).toUpperCase() + role.slice(1)}</Text>
                            </Surface>
                          );
                        })}
                      </Stack>
                    </TableCell>
                    <TableCell>
                      <StatusBadge variant={getStatusBadgeVariant(user.status)}>
                        {user.status.charAt(0).toUpperCase() + user.status.slice(1)}
                      </StatusBadge>
                    </TableCell>
                    <TableCell>
                      <Text size="sm" color="text-gray-400">
                        {user.lastLoginAt ? new Date(user.lastLoginAt).toLocaleDateString() : 'Never'}
                      </Text>
                    </TableCell>
                    <TableCell>
                      <Stack direction="row" align="center" gap={2}>
                        {user.status === 'active' && (
                          <Button
                            onClick={() => onUpdateStatus(user.id, 'suspended')}
                            variant="secondary"
                            size="sm"
                          >
                            Suspend
                          </Button>
                        )}
                        {user.status === 'suspended' && (
                          <Button
                            onClick={() => onUpdateStatus(user.id, 'active')}
                            variant="secondary"
                            size="sm"
                          >
                            Activate
                          </Button>
                        )}
                        {user.status !== 'deleted' && (
                          <Button
                            onClick={() => onDeleteUser(user.id)}
                            disabled={deletingUser === user.id}
                            variant="secondary"
                            size="sm"
                            icon={<Icon icon={Trash2} size={3} />}
                          >
                            {deletingUser === user.id ? 'Deleting...' : 'Delete'}
                          </Button>
                        )}
                      </Stack>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </Card>

        {/* Stats Summary */}
        {viewData.users.length > 0 && (
          <UserStatsSummary 
            total={viewData.total}
            activeCount={viewData.activeUserCount}
            adminCount={viewData.adminCount}
          />
        )}
      </Stack>
    </Container>
  );
}