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

function getCssVar(name: string): string {
  return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
}

interface PnLPoint {
  date: string;
  pnl: number;
}

interface Props {
  data?: PnLPoint[];
  title?: string;
}

export function PnLChart({ data = [], title = 'P&L' }: Props) {
  const colors = useMemo(() => ({
    border: getCssVar('--color-border'),
    textSecondary: getCssVar('--color-text-secondary'),
    bgCard: getCssVar('--color-bg-card'),
    accent: getCssVar('--color-accent'),
  }), []);
  return (
    <div className="flex flex-col h-full">
      <div className="px-3 py-1.5 border-b border-[var(--color-border)]">
        <span className="text-sm font-medium">{title}</span>
      </div>
      <div className="flex-1 min-h-0 p-2">
        {data.length > 0 ? (
          <ResponsiveContainer width="100%" height="100%">
            <AreaChart data={data}>
              <CartesianGrid strokeDasharray="3 3" stroke={colors.border} />
              <XAxis dataKey="date" tick={{ fontSize: 10, fill: colors.textSecondary }} />
              <YAxis
                tick={{ fontSize: 10, fill: colors.textSecondary }}
                tickFormatter={(v: number) => `$${v.toLocaleString()}`}
              />
              <Tooltip
                contentStyle={{
                  backgroundColor: colors.bgCard,
                  border: `1px solid ${colors.border}`,
                  borderRadius: 4,
                  fontSize: 12,
                }}
                formatter={(value: number | string | undefined) => [`$${Number(value ?? 0).toLocaleString()}`, 'P&L']}
              />
              <defs>
                <linearGradient id="pnlGradient" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor={colors.accent} stopOpacity={0.3} />
                  <stop offset="95%" stopColor={colors.accent} stopOpacity={0} />
                </linearGradient>
              </defs>
              <Area
                type="monotone"
                dataKey="pnl"
                stroke={colors.accent}
                fill="url(#pnlGradient)"
                strokeWidth={2}
              />
            </AreaChart>
          </ResponsiveContainer>
        ) : (
          <div className="flex flex-col justify-end h-full p-4">
            <div className="flex items-end gap-1 h-full">
              {Array.from({ length: 16 }, (_, i) => (
                <div
                  key={i}
                  className="flex-1 rounded-t-sm bg-[var(--color-border)] animate-pulse"
                  style={{ height: `${15 + Math.abs(Math.sin(i * 0.7)) * 60}%`, animationDelay: `${i * 80}ms` }}
                />
              ))}
            </div>
            <div className="text-center text-xs text-[var(--color-text-secondary)] mt-2">
              No P&L data available
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
