'use client';

import React from 'react';
import { AdminDashboardViewData } from '@/lib/view-data/AdminDashboardViewData';
import { routes } from '@/lib/routing/RouteConfig';
import { Card } from '@/ui/Card';
import { Text } from '@/ui/Text';
import { Button } from '@/ui/Button';
import { StatCard } from '@/ui/StatCard';
import { QuickActionLink } from '@/ui/QuickActionLink';
import { StatusBadge } from '@/ui/StatusBadge';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Container } from '@/ui/Container';
import { Grid } from '@/ui/Grid';
import { Icon } from '@/ui/Icon';
import { Heading } from '@/ui/Heading';
import {
  Users,
  Shield,
  Activity,
  Clock,
  RefreshCw
} from 'lucide-react';

/**
 * AdminDashboardTemplate
 * 
 * Pure template for admin dashboard.
 * Accepts ViewData only, no business logic.
 */
export function AdminDashboardTemplate({
  viewData,
  onRefresh,
  isLoading
}: {
  viewData: AdminDashboardViewData;
  onRefresh: () => void;
  isLoading: boolean;
}) {
  return (
    <Container size="lg" py={6}>
      <Stack gap={6}>
        {/* Header */}
        <Stack direction="row" align="center" justify="between">
          <Box>
            <Heading level={1}>Admin Dashboard</Heading>
            <Text size="sm" color="text-gray-400" block mt={1}>
              System overview and statistics
            </Text>
          </Box>
          <Button
            onClick={onRefresh}
            disabled={isLoading}
            variant="secondary"
            icon={<Icon icon={RefreshCw} size={4} animate={isLoading ? 'spin' : 'none'} />}
          >
            Refresh
          </Button>
        </Stack>

        {/* Stats Cards */}
        <Grid cols={4} gap={4}>
          <StatCard
            label="Total Users"
            value={viewData.stats.totalUsers}
            icon={Users}
            variant="blue"
          />
          <StatCard
            label="Admins"
            value={viewData.stats.systemAdmins}
            icon={Shield}
            variant="purple"
          />
          <StatCard
            label="Active Users"
            value={viewData.stats.activeUsers}
            icon={Activity}
            variant="green"
          />
          <StatCard
            label="Recent Logins"
            value={viewData.stats.recentLogins}
            icon={Clock}
            variant="orange"
          />
        </Grid>

        {/* System Status */}
        <Card>
          <Stack gap={4}>
            <Heading level={3}>System Status</Heading>
            <Stack gap={4}>
              <Stack direction="row" align="center" justify="between">
                <Text size="sm" color="text-gray-400">
                  System Health
                </Text>
                <StatusBadge variant="success">
                  Healthy
                </StatusBadge>
              </Stack>
              <Stack direction="row" align="center" justify="between">
                <Text size="sm" color="text-gray-400">
                  Suspended Users
                </Text>
                <Text size="base" weight="medium" color="text-white">
                  {viewData.stats.suspendedUsers}
                </Text>
              </Stack>
              <Stack direction="row" align="center" justify="between">
                <Text size="sm" color="text-gray-400">
                  Deleted Users
                </Text>
                <Text size="base" weight="medium" color="text-white">
                  {viewData.stats.deletedUsers}
                </Text>
              </Stack>
              <Stack direction="row" align="center" justify="between">
                <Text size="sm" color="text-gray-400">
                  New Users Today
                </Text>
                <Text size="base" weight="medium" color="text-white">
                  {viewData.stats.newUsersToday}
                </Text>
              </Stack>
            </Stack>
          </Stack>
        </Card>

        {/* Quick Actions */}
        <Card>
          <Stack gap={4}>
            <Heading level={3}>Quick Actions</Heading>
            <Grid cols={3} gap={3}>
              <QuickActionLink href={routes.admin.users} variant="blue">
                View All Users
              </QuickActionLink>
              <QuickActionLink href="/admin" variant="purple">
                Manage Admins
              </QuickActionLink>
              <QuickActionLink href="/admin" variant="orange">
                View Audit Log
              </QuickActionLink>
            </Grid>
          </Stack>
        </Card>
      </Stack>
    </Container>
  );
}