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

'use client';

import { AdminDangerZonePanel } from '@/components/admin/AdminDangerZonePanel';
import { AdminHeaderPanel } from '@/components/admin/AdminHeaderPanel';
import { AdminSectionHeader } from '@/components/admin/AdminSectionHeader';
import { AdminStatsPanel } from '@/components/admin/AdminStatsPanel';
import { routes } from '@/lib/routing/RouteConfig';
import { AdminDashboardViewData } from '@/lib/view-data/AdminDashboardViewData';
import { 
  SharedBox, 
  SharedButton, 
  SharedCard, 
  SharedContainer, 
  SharedIcon, 
  SharedGrid, 
  SharedStack, 
  SharedText,
  SharedBadge
} from '@/components/shared/UIComponents';
import { QuickActionLink } from '@/ui/QuickActionLink';
import {
  Activity,
  ArrowRight,
  Clock,
  RefreshCw,
  Shield,
  Users
} from 'lucide-react';
import { TemplateProps } from '@/lib/contracts/components/ComponentContracts';

/**
 * AdminDashboardTemplate
 * 
 * Pure template for admin dashboard.
 * Redesigned for "Precision Racing Minimal" theme.
 */
export function AdminDashboardTemplate({
  viewData,
  onRefresh,
  isLoading
}: TemplateProps<AdminDashboardViewData> & {
  onRefresh: () => void;
  isLoading: boolean;
}) {
  const stats = [
    {
      label: 'Total Users',
      value: viewData.stats.totalUsers,
      icon: Users,
      variant: 'blue' as const
    },
    {
      label: 'System Admins',
      value: viewData.stats.systemAdmins,
      icon: Shield,
      variant: 'purple' as const
    },
    {
      label: 'Active Users',
      value: viewData.stats.activeUsers,
      icon: Activity,
      variant: 'green' as const
    },
    {
      label: 'Recent Logins',
      value: viewData.stats.recentLogins,
      icon: Clock,
      variant: 'orange' as const
    }
  ];

  return (
    <SharedContainer size="lg">
      <SharedBox paddingY={8}>
        <SharedStack gap={8}>
          <AdminHeaderPanel
            title="Admin Dashboard"
            description="System-wide telemetry and operations control"
            isLoading={isLoading}
            actions={
              <SharedButton
                onClick={onRefresh}
                disabled={isLoading}
                variant="secondary"
                size="sm"
                icon={<SharedIcon icon={RefreshCw} size={3} animate={isLoading ? 'spin' : 'none'} />}
              >
                Refresh Telemetry
              </SharedButton>
            }
          />

          <AdminStatsPanel stats={stats} />

          <SharedGrid cols={{ base: 1, md: 2 }} gap={6}>
            {/* System Health & Status */}
            <SharedCard p={6}>
              <SharedStack gap={6}>
                <AdminSectionHeader 
                  title="System Status" 
                  actions={
                    <SharedBadge variant="success">
                      <SharedStack direction="row" align="center" gap={1.5}>
                        <SharedIcon icon={Activity} size={3} />
                        <SharedText>Operational</SharedText>
                      </SharedStack>
                    </SharedBadge>
                  }
                />
                
                <SharedStack gap={4}>
                  <SharedBox borderTop borderColor="border-gray" opacity={0.3} />
                  <SharedBox pt={0}>
                    <SharedStack direction="row" align="center" justify="between" py={2}>
                      <SharedText size="sm" color="text-gray-400">Suspended Users</SharedText>
                      <SharedText weight="bold" color="text-warning-amber">{viewData.stats.suspendedUsers}</SharedText>
                    </SharedStack>
                  </SharedBox>
                  <SharedBox borderTop borderColor="border-gray" opacity={0.3} />
                  <SharedBox>
                    <SharedStack direction="row" align="center" justify="between" py={2}>
                      <SharedText size="sm" color="text-gray-400">Deleted Users</SharedText>
                      <SharedText weight="bold" color="text-error-red">{viewData.stats.deletedUsers}</SharedText>
                    </SharedStack>
                  </SharedBox>
                  <SharedBox borderTop borderColor="border-gray" opacity={0.3} />
                  <SharedBox>
                    <SharedStack direction="row" align="center" justify="between" py={2}>
                      <SharedText size="sm" color="text-gray-400">New Registrations (24h)</SharedText>
                      <SharedText weight="bold" color="text-primary-blue">{viewData.stats.newUsersToday}</SharedText>
                    </SharedStack>
                  </SharedBox>
                </SharedStack>
              </SharedStack>
            </SharedCard>

            {/* Quick Operations */}
            <SharedCard p={6}>
              <SharedStack gap={6}>
                <AdminSectionHeader title="Quick Operations" />
                <SharedGrid cols={1} gap={3}>
                  <QuickActionLink href={routes.admin.users} label="User Management" icon={Users} />
                  <QuickActionLink href="/admin" label="Security & Roles" icon={Shield} />
                  <QuickActionLink href="/admin" label="System Audit Logs" icon={Activity} />
                </SharedGrid>
              </SharedStack>
            </SharedCard>
          </SharedGrid>

          <AdminDangerZonePanel
            title="System Maintenance"
            description="Perform destructive system-wide operations. Use with extreme caution."
          >
            <SharedButton variant="danger" size="sm">
              Enter Maintenance Mode
            </SharedButton>
          </AdminDangerZonePanel>
        </SharedStack>
      </SharedBox>
    </SharedContainer>
  );
}