/**
 * Log Stats Cards
 * Enterprise Logging System — Admin Dashboard
 *
 * Displays summary statistics for the six log types with today counts.
 */

import type { LogsDashboardSummary } from '@/types/logging.types';

interface StatCardProps {
  label: string;
  total: number;
  today?: number;
  accent?: string;
}

function StatCard({ label, total, today, accent = 'text-slate-100' }: StatCardProps) {
  return (
    <div className="rounded-xl border border-white/5 bg-slate-900/50 p-4">
      <div className="text-xs font-medium text-slate-400">{label}</div>
      <div className={`mt-2 text-2xl font-bold ${accent}`}>{total.toLocaleString()}</div>
      {today !== undefined && (
        <div className="mt-1 text-xs text-slate-500">Today: {today.toLocaleString()}</div>
      )}
    </div>
  );
}

export function LogStatsCards({ summary }: { summary: LogsDashboardSummary }) {
  const { totals, today, errorRateToday, criticalErrorsToday } = summary;

  return (
    <div className="grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-6">
      <StatCard label="Login Logs" total={totals.login} today={today.login} />
      <StatCard label="Transaction Logs" total={totals.transaction} today={today.transaction} />
      <StatCard label="Admin Logs" total={totals.admin} today={today.admin} />
      <StatCard label="Error Logs" total={totals.error} today={today.error} accent="text-rose-400" />
      <StatCard label="System Logs" total={totals.system} />
      <StatCard label="Request Logs" total={totals.request} today={today.request} />

      <div className="col-span-2 rounded-xl border border-white/5 bg-slate-900/50 p-4 md:col-span-3 xl:col-span-6">
        <div className="flex flex-wrap items-center gap-6">
          <div>
            <div className="text-xs font-medium text-slate-400">Error Rate Today</div>
            <div className={`mt-1 text-xl font-bold ${errorRateToday > 5 ? 'text-rose-400' : 'text-emerald-400'}`}>
              {errorRateToday}%
            </div>
          </div>
          <div>
            <div className="text-xs font-medium text-slate-400">Critical Errors Today</div>
            <div className="mt-1 text-xl font-bold text-rose-400">{criticalErrorsToday}</div>
          </div>
          <div className="ml-auto text-xs text-slate-500">
            Live aggregation across all six log stores
          </div>
        </div>
      </div>
    </div>
  );
}