import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from 'recharts';
import type { TimeseriesItem } from '@family-budget/shared';
import { useMediaQuery } from '../hooks/useMediaQuery';

interface Props {
  data: TimeseriesItem[];
}

const rubFormatter = new Intl.NumberFormat('ru-RU', {
  style: 'currency',
  currency: 'RUB',
  maximumFractionDigits: 0,
});

export function TimeseriesChart({ data }: Props) {
  const isMobile = useMediaQuery('(max-width: 600px)');
  const chartHeight = isMobile ? 250 : 300;

  if (data.length === 0) {
    return <div className="state state--empty">Нет данных за период</div>;
  }

  const chartData = data.map((item) => ({
    period: item.periodStart,
    Расходы: Math.abs(item.expenseAmount) / 100,
    Доходы: item.incomeAmount / 100,
    Инвестиции: Math.abs(item.investmentOutflow) / 100,
  }));

  return (
    <ResponsiveContainer width="100%" height={chartHeight}>
      <BarChart data={chartData}>
        <CartesianGrid strokeDasharray="3 3" stroke="var(--color-border)" vertical={false} />
        <XAxis
          dataKey="period"
          tickFormatter={(v: string) => {
            const d = new Date(v);
            return `${d.getDate()}.${String(d.getMonth() + 1).padStart(2, '0')}`;
          }}
          fontSize={12}
          stroke="var(--color-text-secondary)"
          tickLine={false}
          axisLine={false}
        />
        <YAxis
          tickFormatter={(v: number) =>
            v >= 1000 ? `${(v / 1000).toFixed(0)}к` : String(v)
          }
          fontSize={12}
          stroke="var(--color-text-secondary)"
          tickLine={false}
          axisLine={false}
        />
        <Tooltip
          formatter={(value: number) => rubFormatter.format(value)}
          cursor={{ fill: 'var(--color-chart-cursor)' }}
          contentStyle={{
            border: '1px solid var(--color-border)',
            borderRadius: 8,
            boxShadow: 'var(--shadow-lg)',
          }}
        />
        <Legend />
        <Bar
          dataKey="Расходы"
          fill="var(--color-danger)"
          radius={[4, 4, 0, 0]}
        />
        <Bar
          dataKey="Доходы"
          fill="var(--color-success)"
          radius={[4, 4, 0, 0]}
        />
        <Bar
          dataKey="Инвестиции"
          fill="var(--color-warning)"
          radius={[4, 4, 0, 0]}
        />
      </BarChart>
    </ResponsiveContainer>
  );
}