import React, { useMemo } from 'react';

const StrategyComparison: React.FC = () => {
  const data = useMemo(() => {
    const points = [];
    const maxN = 100;
    
    for (let n = 5; n <= maxN; n += 5) {
      // Naive strategy
      const naiveProb = Math.pow(0.5, n);
      
      // Loop strategy: 1 - sum(1/k for k from n/2+1 to n)
      let sum = 0;
      for (let k = Math.floor(n / 2) + 1; k <= n; k++) {
        sum += 1 / k;
      }
      const loopProb = 1 - sum;
      
      points.push({ n, naiveProb, loopProb });
    }
    
    return points;
  }, []);

  const chartWidth = 700;
  const chartHeight = 350;
  const padding = { top: 20, right: 100, bottom: 50, left: 70 };
  const width = chartWidth - padding.left - padding.right;
  const height = chartHeight - padding.top - padding.bottom;

  // Only show loop strategy on linear scale (naive is too small to see)
  const maxProb = 0.5;
  
  const getY = (prob: number) => {
    return height - (prob / maxProb) * height;
  };

  const getX = (n: number) => {
    return (n / 100) * width;
  };

  // Create paths for both strategies
  const loopPath = data.map((point, i) => {
    const x = getX(point.n);
    const y = getY(point.loopProb);
    return `${i === 0 ? 'M' : 'L'} ${x} ${y}`;
  }).join(' ');

  // For naive, we'll just show it near zero
  const naivePath = data.map((point, i) => {
    const x = getX(point.n);
    const y = height - 2; // Near the bottom (representing ~0)
    return `${i === 0 ? 'M' : 'L'} ${x} ${y}`;
  }).join(' ');

  return (
    <div className="my-8 p-6 border-2 border-gray-300 rounded-lg bg-white">
      <h3 className="text-xl font-semibold mb-4">Strategy Comparison</h3>
      
      <svg width={chartWidth} height={chartHeight} className="mx-auto">
        <g transform={`translate(${padding.left}, ${padding.top})`}>
          {/* Grid lines */}
          {[0, 0.1, 0.2, 0.3, 0.4, 0.5].map((val) => {
            const y = getY(val);
            return (
              <g key={val}>
                <line
                  x1={0}
                  y1={y}
                  x2={width}
                  y2={y}
                  stroke="#e5e7eb"
                  strokeWidth={1}
                />
                <text
                  x={-10}
                  y={y + 5}
                  textAnchor="end"
                  fontSize="12"
                  fill="#374151"
                >
                  {val.toFixed(1)}
                </text>
              </g>
            );
          })}

          {/* X-axis */}
          <line
            x1={0}
            y1={height}
            x2={width}
            y2={height}
            stroke="#374151"
            strokeWidth={2}
          />

          {/* Y-axis */}
          <line
            x1={0}
            y1={0}
            x2={0}
            y2={height}
            stroke="#374151"
            strokeWidth={2}
          />

          {/* Loop strategy line */}
          <path
            d={loopPath}
            fill="none"
            stroke="#10b981"
            strokeWidth={3}
            strokeLinecap="round"
            strokeLinejoin="round"
          />

          {/* Naive strategy line (at the bottom) */}
          <path
            d={naivePath}
            fill="none"
            stroke="#ef4444"
            strokeWidth={3}
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeDasharray="5,5"
          />

          {/* Data points for loop strategy */}
          {data.filter((_, i) => i % 2 === 0).map((point) => {
            const x = getX(point.n);
            const y = getY(point.loopProb);
            return (
              <circle
                key={point.n}
                cx={x}
                cy={y}
                r={4}
                fill="#10b981"
              />
            );
          })}

          {/* X-axis labels */}
          {[20, 40, 60, 80, 100].map((n) => {
            const x = getX(n);
            return (
              <text
                key={n}
                x={x}
                y={height + 25}
                textAnchor="middle"
                fontSize="14"
                fill="#374151"
              >
                {n}
              </text>
            );
          })}

          {/* X-axis title */}
          <text
            x={width / 2}
            y={height + 45}
            textAnchor="middle"
            fontSize="16"
            fontWeight="600"
            fill="#374151"
          >
            Number of Prisoners (n)
          </text>

          {/* Y-axis title */}
          <text
            x={-height / 2}
            y={-50}
            textAnchor="middle"
            fontSize="16"
            fontWeight="600"
            fill="#374151"
            transform={`rotate(-90, ${-height / 2}, -50)`}
          >
            Probability of Success
          </text>

          {/* Legend */}
          <g transform={`translate(${width + 20}, 20)`}>
            <rect x={0} y={0} width={15} height={15} fill="#10b981" />
            <text x={20} y={12} fontSize="14" fill="#374151">
              Loop Strategy
            </text>
            
            <line
              x1={0}
              y1={35}
              x2={15}
              y2={35}
              stroke="#ef4444"
              strokeWidth={3}
              strokeDasharray="5,5"
            />
            <text x={20} y={40} fontSize="14" fill="#374151">
              Naive Strategy
            </text>
            <text x={20} y={55} fontSize="11" fill="#6b7280">
              (≈ 0 for all n)
            </text>
          </g>

          {/* Highlight key value */}
          <g>
            {(() => {
              const n100Point = data.find(p => p.n === 100);
              if (n100Point) {
                const x = getX(100);
                const y = getY(n100Point.loopProb);
                return (
                  <>
                    <circle
                      cx={x}
                      cy={y}
                      r={6}
                      fill="none"
                      stroke="#10b981"
                      strokeWidth={2}
                    />
                    <line
                      x1={x}
                      y1={y - 10}
                      x2={x}
                      y2={y - 40}
                      stroke="#374151"
                      strokeWidth={1}
                    />
                    <text
                      x={x}
                      y={y - 45}
                      textAnchor="middle"
                      fontSize="12"
                      fontWeight="600"
                      fill="#10b981"
                    >
                      31.18%
                    </text>
                  </>
                );
              }
              return null;
            })()}
          </g>
        </g>
      </svg>

      <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
        <div className="p-4 bg-red-50 border-2 border-red-300 rounded">
          <h4 className="font-semibold text-red-900 mb-2">❌ Naive Strategy</h4>
          <p className="text-sm mb-2">
            Each prisoner randomly selects 50 boxes.
          </p>
          <div className="text-xs space-y-1">
            <p><strong>n=10:</strong> P ≈ {(Math.pow(0.5, 10) * 100).toExponential(2)}%</p>
            <p><strong>n=20:</strong> P ≈ {(Math.pow(0.5, 20) * 100).toExponential(2)}%</p>
            <p><strong>n=50:</strong> P ≈ {(Math.pow(0.5, 50) * 100).toExponential(2)}%</p>
            <p><strong>n=100:</strong> P ≈ {(Math.pow(0.5, 100) * 100).toExponential(2)}%</p>
          </div>
          <p className="text-xs mt-2 italic">
            Essentially impossible for any reasonable n!
          </p>
        </div>

        <div className="p-4 bg-green-50 border-2 border-green-300 rounded">
          <h4 className="font-semibold text-green-900 mb-2">✅ Loop Strategy</h4>
          <p className="text-sm mb-2">
            Each prisoner follows the cycle starting at their number.
          </p>
          <div className="text-xs space-y-1">
            {(() => {
              const calcProb = (n: number) => {
                let sum = 0;
                for (let k = Math.floor(n / 2) + 1; k <= n; k++) {
                  sum += 1 / k;
                }
                return ((1 - sum) * 100).toFixed(2);
              };
              return (
                <>
                  <p><strong>n=10:</strong> P ≈ {calcProb(10)}%</p>
                  <p><strong>n=20:</strong> P ≈ {calcProb(20)}%</p>
                  <p><strong>n=50:</strong> P ≈ {calcProb(50)}%</p>
                  <p><strong>n=100:</strong> P ≈ {calcProb(100)}%</p>
                </>
              );
            })()}
          </div>
          <p className="text-xs mt-2 italic">
            Converges to 1 - ln(2) ≈ 30.69% as n → ∞
          </p>
        </div>
      </div>

      <div className="mt-4 p-4 bg-blue-50 rounded">
        <p className="text-sm">
          <strong>Key Insight:</strong> The loop strategy transforms an impossible problem 
          (probability ≈ 10<sup>-30</sup>) into a reasonable one (probability ≈ 31%). 
          This astronomical improvement comes from exploiting the mathematical structure 
          of permutations rather than relying on independent random trials.
        </p>
      </div>
    </div>
  );
};

export default StrategyComparison;