'use client';

/**
 * Contracts Dashboard — Contract status, territory coverage, and expiration analysis.
 *
 * Displays:
 * - 3 KPI cards: total Contracts, active Contracts, expiring within 90 days
 * - Donut chart: active vs inactive (PieChartWidget with innerRadius > 0)
 * - Bar chart: by territory
 * - Bar chart: expiring within 90 days
 * - Histogram: royalty split distribution
 * - Bar chart: by currency
 * - DateRangeFilter
 *
 * Requirements: 8.1, 8.2, 8.3, 8.4, 8.5, 8.6, 8.7, 8.8
 */

import { useContractsData } 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 PieChartWidget from '@/components/charts/PieChartWidget';
import BarChartWidget from '@/components/charts/BarChartWidget';

export default function ContractsPage() {
  const { data, isLoading } = useContractsData();
  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, activeVsInactive, byTerritory, expiringSoon, splitDistribution, byCurrency } = data;

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

      {/* KPI Cards */}
      <KpiGrid>
        <KpiCard title={t.dashboard.totalContracts} value={formatNumber(kpis.totalContracts)} />
        <KpiCard title={t.dashboard.activeContractsCount} value={formatNumber(kpis.activeContracts)} />
        <KpiCard title="Expiring in 90 Days" value={formatNumber(kpis.expiringIn90Days)} />
      </KpiGrid>

      {/* Charts */}
      <ChartGrid>
        {/* Donut chart: active vs inactive */}
        <ChartCard title={t.dashboard.contractsByStatus}>
          <PieChartWidget data={activeVsInactive} innerRadius={60} />
        </ChartCard>

        {/* Bar chart: by territory */}
        <ChartCard title={t.dashboard.contractsByTerritory}>
          <BarChartWidget
            data={byTerritory}
            xKey="name"
            bars={[{ dataKey: 'value', color: chartColors.primary, name: t.dashboard.totalContracts }]}
          />
        </ChartCard>

        {/* Bar chart: expiring within 90 days */}
        <ChartCard title={t.dashboard.contractsTimeline}>
          <BarChartWidget
            data={expiringSoon.map((c) => ({
              name: `${c.territory} (${c.endDate})`,
              value: c.royaltySplit,
            }))}
            xKey="name"
            bars={[{ dataKey: 'value', color: chartColors.primary, name: 'Royalty Split %' }]}
            layout="horizontal"
          />
        </ChartCard>

        {/* Histogram: royalty split distribution */}
        <ChartCard title={t.dashboard.royaltySplitDistribution}>
          <BarChartWidget
            data={splitDistribution}
            xKey="name"
            bars={[{ dataKey: 'value', color: chartColors.primary, name: t.dashboard.totalContracts }]}
          />
        </ChartCard>

        {/* Bar chart: by currency */}
        <ChartCard title={t.dashboard.contractsByCurrency}>
          <BarChartWidget
            data={byCurrency}
            xKey="name"
            bars={[{ dataKey: 'value', color: chartColors.primary, name: t.dashboard.totalContracts }]}
          />
        </ChartCard>
      </ChartGrid>
    </div>
  );
}