import Card from '@/components/ui/Card';
import { 
  Users, 
  Shield, 
  Activity, 
  Clock, 
  AlertTriangle,
  RefreshCw
} from 'lucide-react';
import { AdminDashboardViewData } from '@/lib/view-data/AdminDashboardViewData';

interface AdminDashboardTemplateProps {
  viewData: AdminDashboardViewData;
  onRefresh: () => void;
  isLoading: boolean;
}

/**
 * AdminDashboardTemplate
 * 
 * Pure template for admin dashboard.
 * Accepts ViewData only, no business logic.
 */
export function AdminDashboardTemplate({ 
  viewData, 
  onRefresh,
  isLoading 
}: AdminDashboardTemplateProps) {
  // Temporary UI fields (not yet provided by API/ViewModel)
  const adminCount = viewData.stats.systemAdmins;
  const systemHealth = 'Healthy';

  return (
    <div className="container mx-auto p-6 space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white">Admin Dashboard</h1>
          <p className="text-gray-400 mt-1">System overview and statistics</p>
        </div>
        <button 
          onClick={onRefresh} 
          disabled={isLoading}
          className="px-4 py-2 bg-iron-gray border border-charcoal-outline rounded-lg text-white hover:bg-iron-gray/80 transition-colors flex items-center gap-2 disabled:opacity-50"
        >
          <RefreshCw className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} />
          Refresh
        </button>
      </div>

      {/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card className="bg-gradient-to-br from-blue-900/20 to-blue-700/10">
          <div className="flex items-center justify-between">
            <div>
              <div className="text-sm text-gray-400 mb-1">Total Users</div>
              <div className="text-3xl font-bold text-white">{viewData.stats.totalUsers}</div>
            </div>
            <Users className="w-8 h-8 text-blue-400" />
          </div>
        </Card>

        <Card className="bg-gradient-to-br from-purple-900/20 to-purple-700/10">
          <div className="flex items-center justify-between">
            <div>
              <div className="text-sm text-gray-400 mb-1">Admins</div>
              <div className="text-3xl font-bold text-white">{adminCount}</div>
            </div>
            <Shield className="w-8 h-8 text-purple-400" />
          </div>
        </Card>

        <Card className="bg-gradient-to-br from-green-900/20 to-green-700/10">
          <div className="flex items-center justify-between">
            <div>
              <div className="text-sm text-gray-400 mb-1">Active Users</div>
              <div className="text-3xl font-bold text-white">{viewData.stats.activeUsers}</div>
            </div>
            <Activity className="w-8 h-8 text-green-400" />
          </div>
        </Card>

        <Card className="bg-gradient-to-br from-orange-900/20 to-orange-700/10">
          <div className="flex items-center justify-between">
            <div>
              <div className="text-sm text-gray-400 mb-1">Recent Logins</div>
              <div className="text-3xl font-bold text-white">{viewData.stats.recentLogins}</div>
            </div>
            <Clock className="w-8 h-8 text-orange-400" />
          </div>
        </Card>
      </div>

      {/* System Status */}
      <Card>
        <h3 className="text-lg font-semibold text-white mb-4">System Status</h3>
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <span className="text-sm text-gray-400">System Health</span>
            <span className="px-2 py-1 text-xs rounded-full bg-performance-green/20 text-performance-green">
              {systemHealth}
            </span>
          </div>
          <div className="flex items-center justify-between">
            <span className="text-sm text-gray-400">Suspended Users</span>
            <span className="text-white font-medium">{viewData.stats.suspendedUsers}</span>
          </div>
          <div className="flex items-center justify-between">
            <span className="text-sm text-gray-400">Deleted Users</span>
            <span className="text-white font-medium">{viewData.stats.deletedUsers}</span>
          </div>
          <div className="flex items-center justify-between">
            <span className="text-sm text-gray-400">New Users Today</span>
            <span className="text-white font-medium">{viewData.stats.newUsersToday}</span>
          </div>
        </div>
      </Card>

      {/* Quick Actions */}
      <Card>
        <h3 className="text-lg font-semibold text-white mb-4">Quick Actions</h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
          <a href="/admin/users" className="px-4 py-3 bg-primary-blue/20 border border-primary-blue/30 text-primary-blue rounded-lg hover:bg-primary-blue/30 transition-colors text-sm font-medium text-center">
            View All Users
          </a>
          <a href="/admin" className="px-4 py-3 bg-purple-500/20 border border-purple-500/30 text-purple-300 rounded-lg hover:bg-purple-500/30 transition-colors text-sm font-medium text-center">
            Manage Admins
          </a>
          <a href="/admin" className="px-4 py-3 bg-orange-500/20 border border-orange-500/30 text-orange-300 rounded-lg hover:bg-orange-500/30 transition-colors text-sm font-medium text-center">
            View Audit Log
          </a>
        </div>
      </Card>
    </div>
  );
}