'use client';

/**
 * Suspense Dashboard — Unmatched items, resolution progress, and sources.
 *
 * Displays:
 * - 4 KPI cards: total items, unmatched count, ambiguous count, resolution rate
 * - Line chart: items over time (monthly new items)
 * - Area chart: resolution rate over time (monthly)
 * - Pie chart: by match type (unmatched vs ambiguous)
 * - Bar chart: by source file
 * - DateRangeFilter
 *
 * Requirements: 13.1, 13.2, 13.3, 13.4, 13.5, 13.6, 13.7
 */

import { useSuspenseData } from '@/lib/api/queries';
import { useTranslation } from '@/lib/hooks/useTranslation';
import { formatNumber, formatPercentage } 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 AreaChartWidget from '@/components/charts/AreaChartWidget';
import PieChartWidget from '@/components/charts/PieChartWidget';
import BarChartWidget from '@/components/charts/BarChartWidget';

export default function SuspensePage() {
  const { data, isLoading } = useSuspenseData();
  const t = useTranslation();

  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, resolutionRateOverTime, byMatchType, bySourceFile } = data;

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

      {/* KPI Cards */}
      <KpiGrid>
        <KpiCard title={t.dashboard.totalSuspenseItems} value={formatNumber(kpis.totalItems)} />
        <KpiCard title={t.dashboard.pendingItems} value={formatNumber(kpis.unmatchedCount)} />
        <KpiCard title={t.dashboard.resolvedItems} value={formatNumber(kpis.ambiguousCount)} />
        <KpiCard title={t.dashboard.resolutionRate} value={formatPercentage(kpis.resolutionRate)} />
      </KpiGrid>

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

        {/* Area chart: resolution rate over time */}
        <ChartCard title={t.dashboard.resolutionRate}>
          <AreaChartWidget
            data={resolutionRateOverTime}
            xKey="month"
            areas={[{ dataKey: 'rate', color: chartColors.primary, name: t.dashboard.resolutionRate }]}
          />
        </ChartCard>

        {/* Pie chart: by match type */}
        <ChartCard title={t.dashboard.suspenseByMatchType}>
          <PieChartWidget data={byMatchType} />
        </ChartCard>

        {/* Bar chart: by source file */}
        <ChartCard title={t.dashboard.suspenseByStatus}>
          <BarChartWidget
            data={bySourceFile}
            xKey="name"
            bars={[{ dataKey: 'value', color: chartColors.primary, name: t.dashboard.totalSuspenseItems }]}
          />
        </ChartCard>
      </ChartGrid>
    </div>
  );
}