import React from 'react';
import type { LineChartProps } from '../../types.js';

export const LineChart: React.FC<LineChartProps> = ({ points = [], color = '#e94560', showPoints = true, showArea = false, title, yAxisLabel }) => {
  if (points.length === 0) return <div className="chart-container chart-empty">No data</div>;

  const vals = points.map(p => p.value);
  const minV = Math.min(...vals), maxV = Math.max(...vals);
  const range = maxV - minV || 1;
  const svgW = Math.max(points.length * 60, 200), svgH = 180;
  const padL = 40, padR = 10, padT = 16, padB = 30;
  const plotW = svgW - padL - padR, plotH = svgH - padT - padB;

  const pts = points.map((p, i) => ({
    x: padL + (plotW / Math.max(points.length - 1, 1)) * i,
    y: padT + plotH - ((p.value - minV) / range) * plotH,
    label: p.label, value: p.value,
  }));

  const linePath = pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`).join(' ');
  const areaPath = showArea ? `${linePath} L${pts[pts.length - 1].x},${padT + plotH} L${pts[0].x},${padT + plotH} Z` : '';

  const ticks = Array.from({ length: 5 }, (_, i) => ({ val: minV + (range * i) / 4, y: padT + plotH - (plotH * i) / 4 }));

  return (
    <div className="chart-container">
      {title && <div className="chart-title">{title}</div>}
      <div className="chart-scroll">
        <svg viewBox={`0 0 ${svgW} ${svgH}`} className="line-chart-svg" preserveAspectRatio="xMinYMid meet">
          {ticks.map((t, i) => (
            <React.Fragment key={i}>
              <line x1={padL} y1={t.y} x2={svgW - padR} y2={t.y} stroke="#0f3460" strokeWidth={1} />
              <text x={padL - 6} y={t.y + 3} textAnchor="end" className="chart-axis-text">{Math.round(t.val).toLocaleString()}</text>
            </React.Fragment>
          ))}
          {yAxisLabel && <text x={10} y={padT + plotH / 2} transform={`rotate(-90,10,${padT + plotH / 2})`} className="chart-axis-label">{yAxisLabel}</text>}
          {showArea && areaPath && <path d={areaPath} fill={color} opacity={0.15} />}
          <path d={linePath} fill="none" stroke={color} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" />
          {showPoints && pts.map((p, i) => <circle key={i} cx={p.x} cy={p.y} r={4} fill="#16213e" stroke={color} strokeWidth={2.5} />)}
          {pts.map((p, i) => <text key={`l-${i}`} x={p.x} y={svgH - 6} textAnchor="middle" className="chart-axis-text">{points[i].label}</text>)}
        </svg>
      </div>
    </div>
  );
};
