import '../../components/skill-market/SkillMarketShared.css';
import { PlatformSummaryCards } from './components/PlatformSummaryCards';
import { PlatformUsageAnalyticsSection } from './components/PlatformUsageAnalyticsSection';
import { usePlatformDashboard } from './hooks/usePlatformDashboard';
import './PlatformDashboardPage.css';

interface PlatformAdminDashboardPageProps {
  compactMode: boolean;
}

export function PlatformAdminDashboardPage({ compactMode }: PlatformAdminDashboardPageProps) {
  const dashboard = usePlatformDashboard({ compactMode });

  return (
    <section className="panel stack skill-market-page-shell platform-admin-page-shell">
      <div className="skill-market-page-workspace platform-admin-page-workspace">
        <PlatformSummaryCards
          isZh={dashboard.isZh}
          overview={dashboard.overview}
          overviewBots={dashboard.overviewBots}
          overviewImages={dashboard.overviewImages}
          overviewResources={dashboard.overviewResources}
        />

        <PlatformUsageAnalyticsSection
          isZh={dashboard.isZh}
          usageAnalytics={dashboard.usageAnalytics}
          usageAnalyticsMax={dashboard.usageAnalyticsMax}
          usageAnalyticsSeries={dashboard.usageAnalyticsSeries}
          usageAnalyticsTicks={dashboard.usageAnalyticsTicks}
          usageLoading={dashboard.usageLoading}
          usageSummary={dashboard.usageSummary}
        />
      </div>
    </section>
  );
}