'use client';

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

const hourlyData = [
  { hour: '8 AM', revenue: 8200, txns: 12 },
  { hour: '9 AM', revenue: 14500, txns: 21 },
  { hour: '10 AM', revenue: 18300, txns: 28 },
  { hour: '11 AM', revenue: 22100, txns: 34 },
  { hour: '12 PM', revenue: 38400, txns: 52 },
  { hour: '1 PM', revenue: 41200, txns: 56 },
  { hour: '2 PM', revenue: 29800, txns: 41 },
  { hour: '3 PM', revenue: 24600, txns: 36 },
  { hour: '4 PM', revenue: 27300, txns: 38 },
  { hour: '5 PM', revenue: 35800, txns: 48 },
  { hour: '6 PM', revenue: 33100, txns: 45 },
  { hour: '7 PM', revenue: 21700, txns: 30 },
  { hour: '8 PM', revenue: 9700, txns: 14 },
  { hour: '9 PM', revenue: 4050, txns: 7 },
];

const CustomTooltip = ({ active, payload, label }: { active?: boolean; payload?: Array<{ value: number; name: string }>; label?: string }) => {
  if (!active || !payload?.length) return null;
  return (
    <div className="card-elevated rounded-lg p-3 shadow-modal text-xs">
      <p className="font-600 text-foreground mb-2">{label}</p>
      {payload.map((p, i) => (
        <div key={`tt-${i + 1}`} className="flex items-center justify-between gap-4">
          <span className="text-muted-foreground">{p.name === 'revenue' ? 'Revenue' : 'Transactions'}</span>
          <span className="font-700 text-foreground font-tabular">
            {p.name === 'revenue' ? `KES ${p.value.toLocaleString()}` : p.value}
          </span>
        </div>
      ))}
    </div>
  );
};

export default function HourlySalesChart() {
  return (
    <ResponsiveContainer width="100%" height={240}>
      <AreaChart data={hourlyData} margin={{ top: 4, right: 4, left: -10, bottom: 0 }}>
        <defs>
          <linearGradient id="gradRevenue" x1="0" y1="0" x2="0" y2="1">
            <stop offset="5%" stopColor="var(--primary)" stopOpacity={0.25} />
            <stop offset="95%" stopColor="var(--primary)" stopOpacity={0.02} />
          </linearGradient>
          <linearGradient id="gradTxns" x1="0" y1="0" x2="0" y2="1">
            <stop offset="5%" stopColor="var(--accent)" stopOpacity={0.2} />
            <stop offset="95%" stopColor="var(--accent)" stopOpacity={0.01} />
          </linearGradient>
        </defs>
        <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" vertical={false} />
        <XAxis
          dataKey="hour"
          tick={{ fontSize: 11, fill: 'var(--muted-foreground)' }}
          axisLine={false}
          tickLine={false}
        />
        <YAxis
          tick={{ fontSize: 11, fill: 'var(--muted-foreground)' }}
          axisLine={false}
          tickLine={false}
          tickFormatter={(v) => `${(v / 1000).toFixed(0)}k`}
        />
        <Tooltip content={<CustomTooltip />} />
        <Area
          type="monotone"
          dataKey="revenue"
          stroke="var(--primary)"
          strokeWidth={2}
          fill="url(#gradRevenue)"
          dot={false}
          activeDot={{ r: 4, fill: 'var(--primary)', stroke: 'var(--card)', strokeWidth: 2 }}
        />
        <Area
          type="monotone"
          dataKey="txns"
          stroke="var(--accent)"
          strokeWidth={1.5}
          fill="url(#gradTxns)"
          dot={false}
          activeDot={{ r: 3, fill: 'var(--accent)', stroke: 'var(--card)', strokeWidth: 2 }}
        />
      </AreaChart>
    </ResponsiveContainer>
  );
}