import {
  ResponsiveContainer, BarChart, Bar, LineChart, Line, AreaChart, Area,
  PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
} from 'recharts'

const PALETTE = ['#00a0c8', '#3ddc97', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4', '#ec4899', '#e84a7f']
const axisStyle = { fontSize: 11, fill: '#94a3b8' }
const tooltipStyle = { background: '#0f172a', border: '1px solid #1e293b', borderRadius: 8, fontSize: 12, color: '#e2e8f0' }

interface Row { [k: string]: any }

export default function Chart({ type = 'BAR', rows, dataKeys, xKey = 'name', height = 260 }:
  { type?: string; rows: Row[]; dataKeys: string[]; xKey?: string; height?: number }) {
  if (!rows || !rows.length) {
    return <div className="flex items-center justify-center text-slate-500 text-sm" style={{ height }}>No data</div>
  }
  const t = (type || 'BAR').toUpperCase()

  if (t === 'PIE') {
    const key = dataKeys[0]
    return (
      <ResponsiveContainer width="100%" height={height}>
        <PieChart>
          <Pie data={rows} dataKey={key} nameKey={xKey} outerRadius={height / 2.8} innerRadius={height / 5}>
            {rows.map((_, i) => <Cell key={i} fill={PALETTE[i % PALETTE.length]} />)}
          </Pie>
          <Tooltip contentStyle={tooltipStyle} /><Legend wrapperStyle={{ fontSize: 11 }} />
        </PieChart>
      </ResponsiveContainer>
    )
  }
  if (t === 'LINE') {
    return (
      <ResponsiveContainer width="100%" height={height}>
        <LineChart data={rows}>
          <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
          <XAxis dataKey={xKey} tick={axisStyle} /><YAxis tick={axisStyle} />
          <Tooltip contentStyle={tooltipStyle} /><Legend wrapperStyle={{ fontSize: 11 }} />
          {dataKeys.map((k, i) => <Line key={k} type="monotone" dataKey={k} stroke={PALETTE[i % PALETTE.length]} strokeWidth={2} dot={false} />)}
        </LineChart>
      </ResponsiveContainer>
    )
  }
  if (t === 'AREA') {
    return (
      <ResponsiveContainer width="100%" height={height}>
        <AreaChart data={rows}>
          <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
          <XAxis dataKey={xKey} tick={axisStyle} /><YAxis tick={axisStyle} />
          <Tooltip contentStyle={tooltipStyle} /><Legend wrapperStyle={{ fontSize: 11 }} />
          {dataKeys.map((k, i) => <Area key={k} type="monotone" dataKey={k} stroke={PALETTE[i % PALETTE.length]} fill={PALETTE[i % PALETTE.length]} fillOpacity={0.18} strokeWidth={2} />)}
        </AreaChart>
      </ResponsiveContainer>
    )
  }
  return (
    <ResponsiveContainer width="100%" height={height}>
      <BarChart data={rows}>
        <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
        <XAxis dataKey={xKey} tick={axisStyle} /><YAxis tick={axisStyle} />
        <Tooltip contentStyle={tooltipStyle} cursor={{ fill: '#1e293b55' }} /><Legend wrapperStyle={{ fontSize: 11 }} />
        {dataKeys.map((k, i) => <Bar key={k} dataKey={k} fill={PALETTE[i % PALETTE.length]} radius={[3, 3, 0, 0]} />)}
      </BarChart>
    </ResponsiveContainer>
  )
}
