'use client';

/**
 * Income Dashboard — Revenue trends, territory performance, and income sources.
 *
 * Displays:
 * - 3 KPI cards: gross income, net income, record count
 * - Line chart: income over time (monthly)
 * - Pie chart: income by territory
 * - Bar chart: income by media type
 * - Bar chart: income by source (PRO, DSP, sub-publisher)
 * - Grouped bar chart: gross vs net amounts by month
 * - Horizontal bar chart: top 10 Works by income
 * - DateRangeFilter at the top
 *
 * Requirements: 9.1, 9.2, 9.3, 9.4, 9.5, 9.6, 9.7, 9.8, 9.9
 */

import { useIncomeData } from '@/lib/api/queries';
import { useTranslation } from '@/lib/hooks/useTranslation';
import { formatNumber } from '@/lib/utils/format';
import { useCurrencyFormatter, useCurrencyAxisFormatter } from '@/lib/hooks/useCurrencyFormatter';
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 IncomePage() {
  const { data, isLoading } = useIncomeData();
  const t = useTranslation();
  const fmtCurrency = useCurrencyFormatter();
  const fmtAxis = useCurrencyAxisFormatter();

  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, byTerritory, byMediaType, bySource, grossVsNetByMonth, topWorks } = data;

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

      {/* KPI Cards */}
      <KpiGrid>
        <KpiCard title={t.dashboard.grossIncome} value={fmtCurrency(kpis.grossIncome)} />
        <KpiCard title={t.dashboard.netIncome} value={fmtCurrency(kpis.netIncome)} />
        <KpiCard title={t.dashboard.recordCount} value={formatNumber(kpis.recordCount)} />
      </KpiGrid>

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

        {/* Pie chart: income by territory */}
        <ChartCard title={t.dashboard.incomeByTerritory}>
          <PieChartWidget data={byTerritory} />
        </ChartCard>

        {/* Bar chart: income by media type */}
        <ChartCard title={t.dashboard.incomeByMediaType}>
          <BarChartWidget
            data={byMediaType}
            xKey="name"
            bars={[{ dataKey: 'value', color: chartColors.primary, name: t.dashboard.totalIncome }]}
            yAxisFormatter={fmtAxis}
          />
        </ChartCard>

        {/* Bar chart: income by source */}
        <ChartCard title={t.dashboard.incomeBySource}>
          <BarChartWidget
            data={bySource}
            xKey="name"
            bars={[{ dataKey: 'value', color: chartColors.primary, name: t.dashboard.totalIncome }]}
            yAxisFormatter={fmtAxis}
          />
        </ChartCard>

        {/* Grouped bar chart: gross vs net by month */}
        <ChartCard title={t.dashboard.grossVsNet}>
          <BarChartWidget
            data={grossVsNetByMonth}
            xKey="month"
            bars={[
              { dataKey: 'gross', color: chartColors.primary, name: t.dashboard.grossIncome },
              { dataKey: 'net', color: chartColors.quinary, name: t.dashboard.netIncome },
            ]}
            showLegend
            yAxisFormatter={fmtAxis}
          />
        </ChartCard>

        {/* Horizontal bar chart: top 10 Works */}
        <ChartCard title={t.dashboard.top10WorksByIncome}>
          <BarChartWidget
            data={topWorks}
            xKey="name"
            bars={[{ dataKey: 'value', color: chartColors.primary, name: t.dashboard.totalIncome }]}
            layout="horizontal"
            yAxisFormatter={fmtAxis}
          />
        </ChartCard>
      </ChartGrid>
    </div>
  );
}