import { AdminDashboardViewData } from '@/lib/view-data/AdminDashboardViewData';
import { routes } from '@/lib/routing/RouteConfig';
import { Layout } from '@/ui/Layout';
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 {
  Users,
  Shield,
  Activity,
  Clock,
  RefreshCw
} from 'lucide-react';

/**
 * AdminDashboardTemplate
 * 
 * Pure template for admin dashboard.
 * Accepts ViewData only, no business logic.
 */
export function AdminDashboardTemplate(props: {
  adminDashboardViewData: AdminDashboardViewData;
  onRefresh: () => void;
  isLoading: boolean;
}) {
  const { adminDashboardViewData: viewData, onRefresh, isLoading } = props;
  
  return (
    <Layout padding="p-6" gap="gap-6" className="container mx-auto">
      {/* Header */}
      <Layout flex flexCol={false} items="center" justify="between">
        <div>
          <Text size="2xl" weight="bold" color="text-white">
            Admin Dashboard
          </Text>
          <Text size="sm" color="text-gray-400" className="mt-1">
            System overview and statistics
          </Text>
        </div>
        <Button 
          onClick={onRefresh} 
          disabled={isLoading}
          variant="secondary"
          className="flex items-center gap-2"
        >
          <RefreshCw className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} />
          Refresh
        </Button>
      </Layout>

      {/* Stats Cards */}
      <Layout grid gridCols={4} gap="gap-4">
        <StatCard
          label="Total Users"
          value={viewData.stats.totalUsers}
          icon={<Users className="w-8 h-8" />}
          variant="blue"
        />
        <StatCard
          label="Admins"
          value={viewData.stats.systemAdmins}
          icon={<Shield className="w-8 h-8" />}
          variant="purple"
        />
        <StatCard
          label="Active Users"
          value={viewData.stats.activeUsers}
          icon={<Activity className="w-8 h-8" />}
          variant="green"
        />
        <StatCard
          label="Recent Logins"
          value={viewData.stats.recentLogins}
          icon={<Clock className="w-8 h-8" />}
          variant="orange"
        />
      </Layout>

      {/* System Status */}
      <Card>
        <Text size="lg" weight="semibold" color="text-white" className="mb-4">
          System Status
        </Text>
        <Layout flex flexCol gap="gap-4">
          <Layout flex flexCol={false} items="center" justify="between">
            <Text size="sm" color="text-gray-400">
              System Health
            </Text>
            <StatusBadge variant="success">
              Healthy
            </StatusBadge>
          </Layout>
          <Layout flex flexCol={false} items="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>
          </Layout>
          <Layout flex flexCol={false} items="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>
          </Layout>
          <Layout flex flexCol={false} items="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>
          </Layout>
        </Layout>
      </Card>

      {/* Quick Actions */}
      <Card>
        <Text size="lg" weight="semibold" color="text-white" className="mb-4">
          Quick Actions
        </Text>
        <Layout grid gridCols={3} gap="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>
        </Layout>
      </Card>
    </Layout>
  );
}