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 { TemplateProps } from '@/lib/contracts/components/ComponentContracts';
import { routes } from '@/lib/routing/RouteConfig';
import { AdminDashboardViewData } from '@/lib/view-data/AdminDashboardViewData';
import { Badge } from '@/ui/Badge';
import { Box } from '@/ui/Box';
import { Button } from '@/ui/Button';
import { Card } from '@/ui/Card';
import { Container } from '@/ui/Container';
import { Grid } from '@/ui/Grid';
import { Icon } from '@/ui/Icon';
import { QuickActionLink } from '@/ui/QuickActionLink';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import {
    Activity,
    Clock,
    RefreshCw,
    Shield,
    Users
} from 'lucide-react';

/**
 * 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 (
    <Container size="lg">
      <Box paddingY={8}>
        <Stack gap={8}>
          <AdminHeaderPanel
            title="Admin Dashboard"
            description="System-wide telemetry and operations control"
            isLoading={isLoading}
            actions={
              <Button
                onClick={onRefresh}
                disabled={isLoading}
                variant="secondary"
                size="sm"
              >
                <Stack direction="row" align="center" gap={2}>
                  <Icon icon={RefreshCw} size={3} animate={isLoading ? 'spin' : 'none'} />
                  <Text>Refresh Telemetry</Text>
                </Stack>
              </Button>
            }
          />

          <AdminStatsPanel stats={stats} />

          <Grid responsiveGridCols={{ base: 1, md: 2 }} gap={6}>
            {/* System Health & Status */}
            <Card padding={6}>
              <Stack gap={6}>
                <AdminSectionHeader 
                  title="System Status" 
                  actions={
                    <Badge variant="success">
                      <Stack direction="row" align="center" gap={1.5}>
                        <Icon icon={Activity} size={3} />
                        <Text>Operational</Text>
                      </Stack>
                    </Badge>
                  }
                />
                
                <Stack gap={4}>
                  <Box borderTop borderColor="rgba(255,255,255,0.1)" />
                  <Box pt={0}>
                    <Stack direction="row" align="center" justify="between" py={2}>
                      <Text size="sm" color="text-gray-400">Suspended Users</Text>
                      <Text weight="bold" color="warning-amber">{viewData.stats.suspendedUsers}</Text>
                    </Stack>
                  </Box>
                  <Box borderTop borderColor="rgba(255,255,255,0.1)" />
                  <Box>
                    <Stack direction="row" align="center" justify="between" py={2}>
                      <Text size="sm" color="text-gray-400">Deleted Users</Text>
                      <Text weight="bold" color="critical-red">{viewData.stats.deletedUsers}</Text>
                    </Stack>
                  </Box>
                  <Box borderTop borderColor="rgba(255,255,255,0.1)" />
                  <Box>
                    <Stack direction="row" align="center" justify="between" py={2}>
                      <Text size="sm" color="text-gray-400">New Registrations (24h)</Text>
                      <Text weight="bold" color="primary-accent">{viewData.stats.newUsersToday}</Text>
                    </Stack>
                  </Box>
                </Stack>
              </Stack>
            </Card>

            {/* Quick Operations */}
            <Card padding={6}>
              <Stack gap={6}>
                <AdminSectionHeader title="Quick Operations" />
                <Grid responsiveGridCols={{ base: 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} />
                </Grid>
              </Stack>
            </Card>
          </Grid>

          <AdminDangerZonePanel
            title="System Maintenance"
            description="Perform destructive system-wide operations. Use with extreme caution."
          >
            <Button variant="danger" size="sm">
              Enter Maintenance Mode
            </Button>
          </AdminDangerZonePanel>
        </Stack>
      </Box>
    </Container>
  );
}