import { useMemo } from 'react';

interface DragCoefficientChartProps {
  l1: number;
  l2: number;
  h: number;
  caLow: number;
  caHigh: number;
}

export function DragCoefficientChart({ l1, l2, h, caLow, caHigh }: DragCoefficientChartProps) {
  const hL1 = h / l1;
  const l1L2 = l1 / l2;

  // The chart in the user's image is a log-log scale.
  // X axis: L1/L2 from 4.0 to 0.2 (inverted in the image, usually right to left or log scale).
  // Y axis: H/L1 from 0.25 to 10 (log scale).
  // For a simplified visual representation, we will map these to linear or semi-log pixel coordinates.
  
  const width = 400;
  const height = 400;
  const padding = 40;

  const getCoordinates = (xVal: number, yVal: number) => {
    // Map l1/l2 (0.2 to 4) to X axis (padding to width - padding)
    // using log scale
    const minX = 0.2;
    const maxX = 4.0;
    const logMinX = Math.log10(minX);
    const logMaxX = Math.log10(maxX);
    const logX = Math.log10(Math.max(minX, Math.min(xVal, maxX)));
    // the image has 4 on the left and 0.2 on the right, let's follow the standard 0.2 -> 4.0 (left to right)
    const px = padding + ((logX - logMinX) / (logMaxX - logMinX)) * (width - 2 * padding);

    // Map h/l1 (0.25 to 8) to Y axis (height - padding to padding)
    const minY = 0.25;
    const maxY = 8.0;
    const logMinY = Math.log10(minY);
    const logMaxY = Math.log10(maxY);
    const logY = Math.log10(Math.max(minY, Math.min(yVal, maxY)));
    const py = height - padding - ((logY - logMinY) / (logMaxY - logMinY)) * (height - 2 * padding);

    return { px, py };
  };

  const point = getCoordinates(l1L2, hL1);

  // Generate some background curves just for aesthetic resemblance to the NBR abacus
  const curves = useMemo(() => {
    const paths = [];
    for (let i = 0.5; i <= 2.2; i += 0.2) {
      // Fake isoline generation
      const points = [];
      for (let x = 0.2; x <= 4.0; x += 0.2) {
        // y = (i * x) + something non-linear just to make curves
        const y = Math.max(0.25, Math.min(8, (i * 2) / (x + 0.5)));
        points.push(getCoordinates(x, y));
      }
      
      const d = points.reduce((acc, pt, idx) => {
        return idx === 0 ? `M ${pt.px} ${pt.py}` : `${acc} L ${pt.px} ${pt.py}`;
      }, '');
      paths.push(d);
    }
    return paths;
  }, []);

  return (
    <div className="w-full flex flex-col items-center justify-center p-4 bg-muted/20 rounded-xl border">
      <h3 className="text-sm font-semibold mb-2 text-muted-foreground">Posição no Ábaco (Visualização Simplificada)</h3>
      <svg width={width} height={height} className="max-w-full h-auto bg-background rounded-md shadow-inner">
        {/* Grid lines */}
        {[0.2, 0.5, 1, 2, 4].map((x) => {
          const pt = getCoordinates(x, 1);
          return (
            <line key={`gx-${x}`} x1={pt.px} y1={padding} x2={pt.px} y2={height - padding} stroke="currentColor" strokeOpacity={0.1} strokeWidth={1} />
          );
        })}
        {[0.25, 0.5, 1, 2, 4, 8].map((y) => {
          const pt = getCoordinates(1, y);
          return (
            <line key={`gy-${y}`} x1={padding} y1={pt.py} x2={width - padding} y2={pt.py} stroke="currentColor" strokeOpacity={0.1} strokeWidth={1} />
          );
        })}
        
        {/* Fake Curves */}
        {curves.map((d, idx) => (
          <path key={idx} d={d} fill="none" stroke="currentColor" strokeOpacity={0.2} strokeWidth={1.5} className="text-red-500" />
        ))}

        {/* Axes */}
        <line x1={padding} y1={height - padding} x2={width - padding} y2={height - padding} stroke="currentColor" strokeWidth={2} />
        <line x1={padding} y1={height - padding} x2={padding} y2={padding} stroke="currentColor" strokeWidth={2} />

        {/* Labels */}
        <text x={width / 2} y={height - 5} textAnchor="middle" className="text-[10px] fill-current opacity-70">L₁ / L₂ (Eixo X)</text>
        <text x={10} y={height / 2} textAnchor="middle" transform={`rotate(-90 10 ${height / 2})`} className="text-[10px] fill-current opacity-70">H / L₁ (Eixo Y)</text>
        
        {/* User Point */}
        <circle cx={point.px} cy={point.py} r={5} className="fill-primary" />
        
        {/* Crosshair */}
        <line x1={padding} y1={point.py} x2={point.px} y2={point.py} stroke="currentColor" className="text-primary opacity-50" strokeDasharray="4 4" />
        <line x1={point.px} y1={height - padding} x2={point.px} y2={point.py} stroke="currentColor" className="text-primary opacity-50" strokeDasharray="4 4" />
        
        <text x={point.px + 8} y={point.py - 16} className="text-xs font-bold fill-primary">
          Ca Baixa: {caLow}
        </text>
        <text x={point.px + 8} y={point.py - 4} className="text-xs font-bold fill-red-500">
          Ca Alta: {caHigh}
        </text>
      </svg>
    </div>
  );
}
