'use client';

/**
 * Audit Dashboard — Activity patterns and user tracking (Super_Admin only).
 *
 * Displays:
 * - 2 KPI cards: total events, unique active users
 * - Line chart: events over time
 * - Pie chart: by entity type
 * - Bar chart: by action type (create, update, delete)
 * - Horizontal bar chart: most active users
 * - DateRangeFilter at the top
 *
 * Role guard: redirects non-Super_Admin users to /overview.
 *
 * Requirements: 14.1, 14.2, 14.3, 14.4, 14.5, 14.6, 14.7, 14.8
 */

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useAuthStore } from '@/lib/stores/auth-store';
import { useAuditData } from '@/lib/api/queries';
import { useTranslation } from '@/lib/hooks/useTranslation';
import { formatNumber } from '@/lib/utils/format';
import { chartColors } from '@/lib/constants/theme';
import DateRangeFilter from '@/components/dashboard/DateRangeFilter';
import KpiGrid from '@/components/dashboard/KpiGrid';
import KpiCard from '@/components/dashboard/KpiCard';
import ChartGrid from '@/components/dashboard/ChartGrid';
import ChartCard from '@/components/charts/ChartCard';
import LineChartWidget from '@/components/charts/LineChartWidget';
import PieChartWidget from '@/components/charts/PieChartWidget';
import BarChartWidget from '@/components/charts/BarChartWidget';

export default function AuditPage() {
  const router = useRouter();
  const role = useAuthStore((s) => s.role);
  const { data, isLoading } = useAuditData();
  const t = useTranslation();

  // Role guard — only Super_Admin can access this page
  useEffect(() => {
    if (role !== 'Super_Admin') {
      router.replace('/overview');
    }
  }, [role, router]);

  // Don't render content for non-Super_Admin users
  if (role !== 'Super_Admin') {
    return null;
  }

  if (isLoading || !data) {
    return (
      <div className="flex items-center justify-center h-64">
        <p className="text-divisi-text-secondary text-sm">{t.dashboard.loading}</p>
      </div>
    );
  }

  const { kpis, overTime, byEntityType, byActionType, mostActiveUsers } = data;

  return (
    <div className="space-y-6">
      {/* Date Range Filter */}
      <DateRangeFilter />

      {/* KPI Cards */}
      <KpiGrid>
        <KpiCard title={t.dashboard.totalEvents} value={formatNumber(kpis.totalEvents)} />
        <KpiCard title="Unique Active Users" value={formatNumber(kpis.uniqueUsers)} />
      </KpiGrid>

      {/* Charts */}
      <ChartGrid>
        {/* Line chart: events over time */}
        <ChartCard title={t.dashboard.auditOverTime}>
          <LineChartWidget
            data={overTime}
            xKey="month"
            lines={[{ dataKey: 'value', color: chartColors.primary, name: t.dashboard.totalEvents }]}
          />
        </ChartCard>

        {/* Pie chart: by entity type */}
        <ChartCard title={t.dashboard.auditByEntityType}>
          <PieChartWidget data={byEntityType} />
        </ChartCard>

        {/* Bar chart: by action type */}
        <ChartCard title={t.dashboard.auditByActionType}>
          <BarChartWidget
            data={byActionType}
            xKey="name"
            bars={[{ dataKey: 'value', color: chartColors.primary, name: t.dashboard.totalEvents }]}
          />
        </ChartCard>

        {/* Horizontal bar chart: most active users */}
        <ChartCard title={t.dashboard.auditByUser}>
          <BarChartWidget
            data={mostActiveUsers}
            xKey="name"
            bars={[{ dataKey: 'value', color: chartColors.primary, name: t.dashboard.totalEvents }]}
            layout="horizontal"
          />
        </ChartCard>
      </ChartGrid>
    </div>
  );
}