import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid } from 'recharts';
import type { CanvasComponent } from '../../types/canvas';
import { RendererWrapper, GlassTooltip, NoDataPlaceholder, type ComponentRenderContext } from './RendererWrapper';

interface Props { component: CanvasComponent; ctx: ComponentRenderContext }

export function LineChartRenderer({ component, ctx }: Props) {
  const rows = (component.dataRows ?? []) as Array<Record<string, number | string>>;
  const dims = component.dataBindings.dimensions;
  const measures = component.dataBindings.measures;
  const xKey = dims[0] ?? 'date';

  const LINE_COLORS = ['#3B82F6', '#22D3EE', '#A78BFA', '#34D399'];

  if (!rows.length) return (
    <RendererWrapper component={component} ctx={ctx}>
      <NoDataPlaceholder />
    </RendererWrapper>
  );

  return (
    <RendererWrapper component={component} ctx={ctx} minHeight={300}>
      <div className="h-[220px] w-full">
        <ResponsiveContainer width="100%" height="100%">
          <LineChart data={rows} margin={{ top: 4, right: 8, left: -20, bottom: 0 }}>
            <defs>
              {measures.map((m, i) => (
                <linearGradient key={m} id={`grad_${m}`} x1="0" y1="0" x2="1" y2="0">
                  <stop offset="0%" stopColor={LINE_COLORS[i % LINE_COLORS.length]} />
                  <stop offset="100%" stopColor={LINE_COLORS[(i + 1) % LINE_COLORS.length]} />
                </linearGradient>
              ))}
            </defs>
            <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.04)" vertical={false} />
            <XAxis dataKey={xKey} stroke="#3f3f46" tick={{ fontSize: 11, fill: '#71717a' }} axisLine={false} tickLine={false} dy={6} />
            <YAxis stroke="#3f3f46" tick={{ fontSize: 11, fill: '#71717a' }} axisLine={false} tickLine={false} />
            <Tooltip content={<GlassTooltip />} />
            {measures.map((m, i) => (
              <Line
                key={m}
                type="monotone"
                dataKey={m}
                stroke={`url(#grad_${m})`}
                strokeWidth={2.5}
                dot={{ r: 3, fill: '#0a0c14', stroke: LINE_COLORS[i % LINE_COLORS.length], strokeWidth: 2 }}
                activeDot={{ r: 5, fill: LINE_COLORS[i % LINE_COLORS.length] }}
              />
            ))}
          </LineChart>
        </ResponsiveContainer>
      </div>
    </RendererWrapper>
  );
}