'use client';

import {
  Area,
  AreaChart,
  CartesianGrid,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from 'recharts';

const data = [
  { month: 'Jan', revenue: 18500, subscriptions: 42 },
  { month: 'Feb', revenue: 22300, subscriptions: 48 },
  { month: 'Mar', revenue: 19800, subscriptions: 51 },
  { month: 'Apr', revenue: 27600, subscriptions: 55 },
  { month: 'May', revenue: 32100, subscriptions: 62 },
  { month: 'Jun', revenue: 28400, subscriptions: 58 },
  { month: 'Jul', revenue: 35200, subscriptions: 71 },
  { month: 'Aug', revenue: 31800, subscriptions: 68 },
  { month: 'Sep', revenue: 38500, subscriptions: 75 },
  { month: 'Oct', revenue: 41200, subscriptions: 82 },
  { month: 'Nov', revenue: 36900, subscriptions: 79 },
  { month: 'Dec', revenue: 44800, subscriptions: 88 },
];

export function RevenueChart() {
  return (
    <div className="h-[300px] w-full">
      <ResponsiveContainer width="100%" height="100%">
        <AreaChart data={data} margin={{ top: 10, right: 10, left: -10, bottom: 0 }}>
          <defs>
            <linearGradient id="revenueGradient" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor="hsl(221, 83%, 53%)" stopOpacity={0.2} />
              <stop offset="95%" stopColor="hsl(221, 83%, 53%)" stopOpacity={0} />
            </linearGradient>
            <linearGradient id="subsGradient" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor="hsl(160, 84%, 39%)" stopOpacity={0.2} />
              <stop offset="95%" stopColor="hsl(160, 84%, 39%)" stopOpacity={0} />
            </linearGradient>
          </defs>
          <CartesianGrid strokeDasharray="3 3" className="stroke-border" vertical={false} />
          <XAxis
            dataKey="month"
            tick={{ fontSize: 12 }}
            className="text-muted-foreground"
            tickLine={false}
            axisLine={false}
          />
          <YAxis
            tick={{ fontSize: 12 }}
            className="text-muted-foreground"
            tickLine={false}
            axisLine={false}
            tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`}
          />
          <Tooltip
            contentStyle={{
              backgroundColor: 'hsl(var(--background))',
              border: '1px solid hsl(var(--border))',
              borderRadius: '8px',
              fontSize: '13px',
              boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
            }}
            formatter={(value: number, name: string) => [
              name === 'revenue' ? `SAR ${value.toLocaleString()}` : value,
              name === 'revenue' ? 'Revenue' : 'Subscriptions',
            ]}
          />
          <Area
            type="monotone"
            dataKey="revenue"
            stroke="hsl(221, 83%, 53%)"
            strokeWidth={2}
            fill="url(#revenueGradient)"
          />
          <Area
            type="monotone"
            dataKey="subscriptions"
            stroke="hsl(160, 84%, 39%)"
            strokeWidth={2}
            fill="url(#subsGradient)"
            yAxisId={0}
          />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
}