function getRandomInt(max: number): number {
  return Math.floor(Math.random() * Math.floor(max));
}

interface DataPoint {
  name: string;
  uv: number;
}

const generateData = (n: number): DataPoint[] => {
  const ret: DataPoint[] = [];
  for (let i = 0; i < n; i++) {
    ret.push({ name: `Page ${i}`, uv: getRandomInt(100) });
  }
  return ret;
};

export function LineChartBenchmarkSuite() {
  interface BenchmarkResult {
    dataSize: number;
    dataGenTime: number;
    renderTime: number;
    totalTime: number;
    rating: string;
  }

  const [results, setResults] = useState<BenchmarkResult[]>([]);
  const [isRunning, setIsRunning] = useState(false);
  const [currentTest, setCurrentTest] = useState<number | null>(null);

  const runSingleBenchmark = (dataSize: number): Promise<BenchmarkResult> => {
    return new Promise((resolve) => {
      // Measure data generation
      const dataGenStart = performance.now();
      generateData(dataSize); // Generate data for timing purposes
      const dataGenTime = performance.now() - dataGenStart;

      // Measure rendering
      const renderStart = performance.now();
      performance.mark(`benchmark-${dataSize}-start`);

      // Force a re-render by updating state
      setCurrentTest(dataSize);

      // Measure after React has updated
      setTimeout(() => {
        requestAnimationFrame(() => {
          const renderEnd = performance.now();
          performance.mark(`benchmark-${dataSize}-end`);
          performance.measure(
            `benchmark-${dataSize}`,
            `benchmark-${dataSize}-start`,
            `benchmark-${dataSize}-end`
          );

          const measure = performance.getEntriesByName(
            `benchmark-${dataSize}`
          )[0];
          const totalTime = measure
            ? measure.duration
            : renderEnd - renderStart;
          const renderTime = renderEnd - renderStart;

          const getRating = (time: number) => {
            if (time < 16) return "🟢 Excellent";
            if (time < 50) return "🟡 Good";
            if (time < 100) return "🟠 Fair";
            return "🔴 Slow";
          };

          resolve({
            dataSize,
            dataGenTime: Number(dataGenTime.toFixed(2)),
            renderTime: Number(renderTime.toFixed(2)),
            totalTime: Number(totalTime.toFixed(2)),
            rating: getRating(totalTime),
          });
        });
      }, 0);
    });
  };

  const runFullBenchmark = async () => {
    setIsRunning(true);
    setResults([]);

    const testSizes = [100, 500, 1000, 2000, 5000, 10000];
    const benchmarkResults: BenchmarkResult[] = [];

    for (const size of testSizes) {
      const result = await runSingleBenchmark(size);
      benchmarkResults.push(result);
      setResults([...benchmarkResults]);

      // Small delay between tests to ensure clean measurements
      await new Promise((resolve) => setTimeout(resolve, 200));
    }

    setCurrentTest(null);
    setIsRunning(false);
  };

  const testData = currentTest ? generateData(currentTest) : generateData(1000);

  return (
    <div style={{ padding: 20 }}>
      <div style={{ marginBottom: 20 }}>
        <h3>🧪 LineChart Benchmark Suite (With LRU Cache)</h3>

        <button
          onClick={runFullBenchmark}
          disabled={isRunning}
          style={{
            padding: "10px 20px",
            backgroundColor: isRunning ? "#ccc" : "#007acc",
            color: "white",
            border: "none",
            borderRadius: 4,
            cursor: isRunning ? "not-allowed" : "pointer",
            marginBottom: 15,
          }}
        >
          {isRunning ? "Running Benchmark..." : "Run Performance Benchmark"}
        </button>

        {isRunning && currentTest && (
          <div style={{ color: "blue", marginBottom: 15 }}>
            🔄 Testing {currentTest} data points...
          </div>
        )}
      </div>

      {results.length > 0 && (
        <div style={{ marginBottom: 20 }}>
          <h4>📊 Benchmark Results</h4>
          <table
            style={{
              borderCollapse: "collapse",
              width: "100%",
              border: "1px solid #ddd",
              backgroundColor: "white",
            }}
          >
            <thead>
              <tr style={{ backgroundColor: "#f8f9fa" }}>
                <th
                  style={{
                    padding: 12,
                    textAlign: "left",
                    border: "1px solid #ddd",
                  }}
                >
                  Data Size
                </th>
                <th
                  style={{
                    padding: 12,
                    textAlign: "left",
                    border: "1px solid #ddd",
                  }}
                >
                  Data Gen
                </th>
                <th
                  style={{
                    padding: 12,
                    textAlign: "left",
                    border: "1px solid #ddd",
                  }}
                >
                  Render Time
                </th>
                <th
                  style={{
                    padding: 12,
                    textAlign: "left",
                    border: "1px solid #ddd",
                  }}
                >
                  Total Time
                </th>
                <th
                  style={{
                    padding: 12,
                    textAlign: "left",
                    border: "1px solid #ddd",
                  }}
                >
                  Rating
                </th>
              </tr>
            </thead>
            <tbody>
              {results.map((result, index) => (
                <tr key={index}>
                  <td style={{ padding: 12, border: "1px solid #ddd" }}>
                    {result.dataSize} items
                  </td>
                  <td style={{ padding: 12, border: "1px solid #ddd" }}>
                    {result.dataGenTime}ms
                  </td>
                  <td style={{ padding: 12, border: "1px solid #ddd" }}>
                    {result.renderTime}ms
                  </td>
                  <td style={{ padding: 12, border: "1px solid #ddd" }}>
                    {result.totalTime}ms
                  </td>
                  <td style={{ padding: 12, border: "1px solid #ddd" }}>
                    {result.rating}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      <div style={{ border: "1px solid #ddd", padding: 10 }}>
        <p>Current test data: {testData.length} items</p>
        <LineChart
          width={1400}
          height={500}
          data={testData}
          margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
        >
          <XAxis dataKey="name" />
          <YAxis />
          <CartesianGrid strokeDasharray="3 3" />
          <Tooltip />
          <Legend />
          <Line
            dot={false}
            isAnimationActive={false}
            type="monotone"
            dataKey="uv"
            stroke="#82ca9d"
          />
        </LineChart>
      </div>
    </div>
  );
}