veza/apps/web/src/components/admin/admin-dashboard-view/AdminDashboardView.tsx

import React from 'react';
import { Users, DollarSign, Activity, ShieldAlert } from 'lucide-react';
import { useAdminDashboardView } from './useAdminDashboardView';
import { AdminDashboardHeader } from './AdminDashboardHeader';
import { AdminDashboardStatCard } from './AdminDashboardStatCard';
import { AdminDashboardTrafficCard } from './AdminDashboardTrafficCard';
import { AdminDashboardProtocolsCard } from './AdminDashboardProtocolsCard';
import { AdminDashboardNodeHealthCard } from './AdminDashboardNodeHealthCard';
import { AdminDashboardTabs } from './AdminDashboardTabs';
import { AdminDashboardSkeleton } from './AdminDashboardSkeleton';
import { Loader2 } from 'lucide-react';

export function AdminDashboardView() {
  const {
    stats,
    reports,
    uploads,
    auditLogs,
    loading,
    protocolActive,
    handleAction,
    triggerProtocol,
  } = useAdminDashboardView();

  if (loading) {
    return (
      <div className="flex justify-center py-24">
        <Loader2 className="w-10 h-10 text-primary animate-spin" />
      </div>
    );
  }

  return (
    <div className="space-y-8 pb-24 animate-fadeIn container mx-auto px-4 py-8 max-w-layout-content">
      <AdminDashboardHeader
        protocolActive={protocolActive}
        onRescan={() => triggerProtocol('RESCAN', 'success')}
        onLockdown={() => triggerProtocol('LOCKDOWN', 'error')}
      />

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <AdminDashboardStatCard
          label="Total Nodes"
          value={stats.totalUsers?.toLocaleString()}
          icon={<Users className="w-5 h-5" />}
          trend={stats.trends?.users}
          color="cyan"
        />
        <AdminDashboardStatCard
          label="Credit Volume"
          value={`$${stats.monthlyRevenue?.toLocaleString()}`}
          icon={<DollarSign className="w-5 h-5" />}
          trend={stats.trends?.revenue}
          color="gold"
        />
        <AdminDashboardStatCard
          label="Active Uplinks"
          value={stats.activeSessions?.toLocaleString()}
          icon={<Activity className="w-5 h-5" />}
          trend={stats.trends?.sessions}
          color="lime"
        />
        <AdminDashboardStatCard
          label="Threat Reports"
          value={stats.pendingReports}
          icon={<ShieldAlert className="w-5 h-5" />}
          trend={stats.trends?.reports}
          color="red"
        />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <AdminDashboardTrafficCard />
        <div className="space-y-6">
          <AdminDashboardProtocolsCard onTrigger={triggerProtocol} />
          <AdminDashboardNodeHealthCard />
        </div>
      </div>

      <AdminDashboardTabs
        reports={reports}
        uploads={uploads}
        auditLogs={auditLogs}
        onReportAction={handleAction}
      />
    </div>
  );
}