/**
 * Logs Dashboard
 * Enterprise Logging System — Super Admin Console
 *
 * Aggregated summary of all six log stores with today's activity metrics.
 */

'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { loggingService } from '@/services/logging.service';
import type { LogsDashboardResponse } from '@/types/logging.types';

const CATEGORIES: Array<{ href: string; label: string; description: string }> = [
  { href: '/super-admin/logs/login', label: 'Login Logs', description: 'Authentication events: login, logout, failed attempts, OTP, 2FA, resets' },
  { href: '/super-admin/logs/transactions', label: 'Transaction Logs', description: 'Deposits, withdrawals, trades, transfers, commissions, refunds' },
  { href: '/super-admin/logs/admin', label: 'Admin Logs', description: 'Admin actions: bans, freezes, role changes, adjustments' },
  { href: '/super-admin/logs/errors', label: 'Error Logs', description: 'Unhandled exceptions, API errors, database & WebSocket errors' },
  { href: '/super-admin/logs/system', label: 'System Logs', description: 'Startup, cron, database, queue, config, security events' },
  { href: '/super-admin/logs/requests', label: 'Request Logs', description: 'Every HTTP API request with method, URL, status, duration' },
];

export default function LogsDashboardPage() {
  const [data, setData] = useState<LogsDashboardResponse | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let mounted = true;
    loggingService
      .getDashboard()
      .then((res) => {
        if (mounted) setData(res ?? null);
      })
      .catch((err: any) => {
        if (mounted) setError(err?.response?.data?.message ?? err?.message ?? 'Failed to load dashboard');
      })
      .finally(() => {
        if (mounted) setLoading(false);
      });
    return () => {
      mounted = false;
    };
  }, []);

  return (
    <div className="space-y-6">
      <div className="flex items-start justify-between gap-4">
        <div>
          <h1 className="text-xl font-semibold text-slate-100">Logs Dashboard</h1>
          <p className="mt-1 text-sm text-slate-400">
            Enterprise logging system — all six log stores, live summary.
          </p>
        </div>
        <Link
          href="/super-admin/logs/search"
          className="rounded-lg border border-white/10 px-4 py-2 text-sm text-slate-200 hover:bg-white/5"
        >
          Search All Logs
        </Link>
      </div>

      {loading && (
        <div className="flex items-center justify-center py-20 text-sm text-slate-400">
          <span className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-slate-500 border-t-emerald-400" />
          Loading logs dashboard...
        </div>
      )}

      {error && (
        <div className="rounded-xl border border-rose-500/20 bg-rose-500/10 p-4 text-sm text-rose-300">
          {error}
        </div>
      )}

      {data && (
        <>
          <div className="grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-6">
            {(
              [
                ['Login', data.summary.totals.login, data.summary.today.login],
                ['Transactions', data.summary.totals.transaction, data.summary.today.transaction],
                ['Admin', data.summary.totals.admin, data.summary.today.admin],
                ['Errors', data.summary.totals.error, data.summary.today.error],
                ['System', data.summary.totals.system, undefined],
                ['Requests', data.summary.totals.request, data.summary.today.request],
              ] as const
            ).map(([label, total, today]) => (
              <div key={label} className="rounded-xl border border-white/5 bg-slate-900/50 p-4">
                <div className="text-xs font-medium text-slate-400">{label} Logs</div>
                <div className={`mt-2 text-2xl font-bold ${label === 'Errors' ? 'text-rose-400' : 'text-slate-100'}`}>
                  {total.toLocaleString()}
                </div>
                {today !== undefined && <div className="mt-1 text-xs text-slate-500">Today: {today.toLocaleString()}</div>}
              </div>
            ))}
          </div>

          <div className="grid gap-3 rounded-xl border border-white/5 bg-slate-900/50 p-4 sm:grid-cols-2">
            <div>
              <div className="text-xs font-medium text-slate-400">Error Rate Today</div>
              <div className={`mt-1 text-xl font-bold ${data.summary.errorRateToday > 5 ? 'text-rose-400' : 'text-emerald-400'}`}>
                {data.summary.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">{data.summary.criticalErrorsToday}</div>
            </div>
          </div>

          <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
            {CATEGORIES.map((cat) => (
              <Link
                key={cat.href}
                href={cat.href}
                className="group rounded-xl border border-white/5 bg-slate-900/50 p-5 transition-colors hover:border-emerald-400/30 hover:bg-slate-900"
              >
                <div className="text-base font-semibold text-slate-100 group-hover:text-emerald-300">
                  {cat.label}
                </div>
                <p className="mt-1 text-xs leading-relaxed text-slate-400">{cat.description}</p>
              </Link>
            ))}
          </div>
        </>
      )}
    </div>
  );
}