'use client';

import {
  Area,
  AreaChart,
  CartesianGrid,
  Legend,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from 'recharts';
import type { AnalyticsRevenuePoint } from '@navi/types';

export interface RevenueTrendChartProps {
  series: AnalyticsRevenuePoint[];
  currencyCode: string;
}

export function RevenueTrendChart({ series, currencyCode }: RevenueTrendChartProps) {
  if (!series.length) {
    return (
      <div className="chart-empty">
        <p>No revenue activity in this window yet.</p>
      </div>
    );
  }

  const data = series.map((point) => ({
    date: point.date,
    captured: point.capturedMinor / 100,
    total: point.totalMinor / 100,
  }));

  return (
    <ResponsiveContainer width="100%" height={260}>
      <AreaChart data={data} margin={{ top: 8, right: 12, left: 0, bottom: 0 }}>
        <defs>
          <linearGradient id="capturedGradient" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#2563eb" stopOpacity={0.4} />
            <stop offset="100%" stopColor="#2563eb" stopOpacity={0.05} />
          </linearGradient>
          <linearGradient id="totalGradient" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#06b6d4" stopOpacity={0.3} />
            <stop offset="100%" stopColor="#06b6d4" stopOpacity={0.05} />
          </linearGradient>
        </defs>
        <CartesianGrid stroke="#e6eaf0" strokeDasharray="3 3" />
        <XAxis dataKey="date" stroke="#64748b" tick={{ fontSize: 12 }} />
        <YAxis stroke="#64748b" tick={{ fontSize: 12 }} tickFormatter={(value: number) => `${currencyCode} ${value.toLocaleString()}`} width={90} />
        <Tooltip formatter={(value: number) => `${currencyCode} ${value.toLocaleString()}`} />
        <Legend />
        <Area
          type="monotone"
          dataKey="total"
          name="All payments"
          stroke="#06b6d4"
          fill="url(#totalGradient)"
          strokeWidth={2}
        />
        <Area
          type="monotone"
          dataKey="captured"
          name="Captured"
          stroke="#2563eb"
          fill="url(#capturedGradient)"
          strokeWidth={2}
        />
      </AreaChart>
    </ResponsiveContainer>
  );
}