import { useState } from 'react';
import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, Area, AreaChart } from 'recharts';

interface Props {
  data: { date: string; price: number }[];
}

export default function PriceHistoryChart({ data }: Props) {
  const [range, setRange] = useState<30 | 90 | 365>(30);

  const filtered = data.slice(-range);
  const min = Math.floor(Math.min(...filtered.map(d => d.price)) - 5);
  const max = Math.ceil(Math.max(...filtered.map(d => d.price)) + 5);

  const ranges = [
    { value: 30 as const, label: '30D' },
    { value: 90 as const, label: '90D' },
    { value: 365 as const, label: '1J' },
  ];

  return (
    <div>
      <div className="mb-4 flex items-center justify-between">
        <h3 className="text-sm font-bold uppercase tracking-widest text-text-muted">Prijsverloop</h3>
        <div className="flex gap-1 rounded-xl bg-bg-elevated p-1">
          {ranges.map(r => (
            <button
              key={r.value}
              onClick={() => setRange(r.value)}
              className={`rounded-lg px-3 py-1.5 text-xs font-bold transition-all ${
                range === r.value
                  ? 'bg-accent text-bg shadow-sm'
                  : 'text-text-muted hover:text-text'
              }`}
            >
              {r.label}
            </button>
          ))}
        </div>
      </div>

      <div className="h-[250px] w-full">
        <ResponsiveContainer width="100%" height="100%">
          <AreaChart data={filtered} margin={{ top: 5, right: 5, bottom: 5, left: 5 }}>
            <defs>
              <linearGradient id="priceGrad" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="#00FF6A" stopOpacity={0.2} />
                <stop offset="100%" stopColor="#00FF6A" stopOpacity={0} />
              </linearGradient>
            </defs>
            <XAxis
              dataKey="date"
              tick={{ fill: '#666', fontSize: 11 }}
              tickFormatter={(v: string) => {
                const d = new Date(v);
                return `${d.getDate()}/${d.getMonth() + 1}`;
              }}
              axisLine={false}
              tickLine={false}
              interval="preserveStartEnd"
            />
            <YAxis
              domain={[min, max]}
              tick={{ fill: '#666', fontSize: 11 }}
              tickFormatter={(v: number) => `€${v}`}
              axisLine={false}
              tickLine={false}
              width={50}
            />
            <Tooltip
              contentStyle={{
                background: '#1A1A1A',
                border: '1px solid #333',
                borderRadius: '12px',
                padding: '8px 12px',
                fontSize: '13px',
              }}
              labelFormatter={(v: string) => {
                const d = new Date(v);
                return d.toLocaleDateString('nl-NL', { day: 'numeric', month: 'long', year: 'numeric' });
              }}
              formatter={(value: number) => [`€${value.toFixed(2).replace('.', ',')}`, 'Prijs']}
            />
            <Area
              type="monotone"
              dataKey="price"
              stroke="#00FF6A"
              strokeWidth={2}
              fill="url(#priceGrad)"
              dot={false}
              activeDot={{ r: 4, fill: '#00FF6A', stroke: '#0A0A0A', strokeWidth: 2 }}
            />
          </AreaChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
}