'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 { Button } from '@/ui/Button';
import { Card } from '@/ui/Card';
import { Container } from '@/ui/Container';
import { Grid } from '@/ui/primitives/Grid';
import { Icon } from '@/ui/Icon';
import { Box } from '@/ui/primitives/Box';
import { QuickActionLink } from '@/ui/QuickActionLink';
import { Stack } from '@/ui/primitives/Stack';
import { StatusBadge } from '@/ui/StatusBadge';
import { Text } from '@/ui/Text';
import {
    Activity,
    ArrowRight,
    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
}: {
  viewData: 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" py={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"
              icon={<Icon icon={RefreshCw} size={3} animate={isLoading ? 'spin' : 'none'} />}
            >
              Refresh Telemetry
            </Button>
          }
        />

        <AdminStatsPanel stats={stats} />

        <Grid cols={1} mdCols={2} gap={6}>
          {/* System Health & Status */}
          <Card p={6}>
            <Stack gap={6}>
              <AdminSectionHeader 
                title="System Status" 
                actions={
                  <StatusBadge variant="success" icon={Activity}>
                    Operational
                  </StatusBadge>
                }
              />
              
              <Stack gap={4}>
                <Box borderTop borderColor="border-gray" opacity={0.3} />
                <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="text-warning-amber">{viewData.stats.suspendedUsers}</Text>
                  </Stack>
                </Box>
                <Box borderTop borderColor="border-gray" opacity={0.3} />
                <Box>
                  <Stack direction="row" align="center" justify="between" py={2}>
                    <Text size="sm" color="text-gray-400">Deleted Users</Text>
                    <Text weight="bold" color="text-error-red">{viewData.stats.deletedUsers}</Text>
                  </Stack>
                </Box>
                <Box borderTop borderColor="border-gray" opacity={0.3} />
                <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="text-primary-blue">{viewData.stats.newUsersToday}</Text>
                  </Stack>
                </Box>
              </Stack>
            </Stack>
          </Card>

          {/* Quick Operations */}
          <Card p={6}>
            <Stack gap={6}>
              <AdminSectionHeader title="Quick Operations" />
              <Grid cols={1} gap={3}>
                <QuickActionLink href={routes.admin.users} variant="blue">
                  <Stack direction="row" align="center" justify="between" fullWidth>
                    <Text size="sm" weight="bold">User Management</Text>
                    <Icon icon={ArrowRight} size={4} />
                  </Stack>
                </QuickActionLink>
                <QuickActionLink href="/admin" variant="purple">
                  <Stack direction="row" align="center" justify="between" fullWidth>
                    <Text size="sm" weight="bold">Security & Roles</Text>
                    <Icon icon={ArrowRight} size={4} />
                  </Stack>
                </QuickActionLink>
                <QuickActionLink href="/admin" variant="orange">
                  <Stack direction="row" align="center" justify="between" fullWidth>
                    <Text size="sm" weight="bold">System Audit Logs</Text>
                    <Icon icon={ArrowRight} size={4} />
                  </Stack>
                </QuickActionLink>
              </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>
    </Container>
  );
}