import * as React from 'react';
import {
  ActivityIndicator,
  Button,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import Rive, { Fit, RNRiveError } from 'rive-react-native';

const VIEW_DISPOSAL_TIME_MS = 200;
const PAUSE_BETWEEN_TESTS_MS = 200;
const TEST_DELAYS = [200, 201, 202, 203, 204, 205, 206, 207, 208, 209];
const TOTAL_TEST_ROUNDS = 200;

function RiveContent({ delayMs }: { delayMs: number }) {
  const imageUrl = `https://app.requestly.io/delay/${delayMs}/https://picsum.photos/id/374/500/500`;

  React.useEffect(() => {
    console.log(
      `[RACE-TEST] RiveContent mounted at ${Date.now()} with delay ${delayMs}ms`
    );
    return () => {
      console.log(
        `[RACE-TEST] RiveContent unmounting at ${Date.now()} (delay was ${delayMs}ms)`
      );
    };
  }, [delayMs]);

  return (
    <Rive
      autoplay={true}
      fit={Fit.Contain}
      style={styles.rive}
      stateMachineName="State Machine 1"
      artboardName="Artboard"
      resourceName={'out_of_band'}
      referencedAssets={{
        'Inter-594377': {
          source: require('../../assets/fonts/Inter-594377.ttf'),
        },
        'referenced-image-2929282': {
          source: { uri: imageUrl },
        },
        'referenced_audio-2929340': {
          source: require('../../assets/audio/referenced_audio-2929340.wav'),
        },
      }}
      onError={(riveError: RNRiveError) => {
        console.log('[RACE-TEST] Rive error:', riveError);
      }}
    />
  );
}

export default function RaceConditionTest() {
  const [showView, setShowView] = React.useState(false);
  const [testRunning, setTestRunning] = React.useState(false);
  const [currentIteration, setCurrentIteration] = React.useState(0);
  const [currentDelay, setCurrentDelay] = React.useState<number | null>(null);

  const runSingleTest = React.useCallback(
    async (delayMs: number, iteration: number) => {
      console.log(
        `[RACE-TEST] ========== Test ${iteration + 1}/${TOTAL_TEST_ROUNDS} started at ${Date.now()} ==========`
      );
      console.log(
        `[RACE-TEST] Download delay: ${delayMs}ms, View disposal: ${VIEW_DISPOSAL_TIME_MS}ms`
      );

      setCurrentIteration(iteration);
      setCurrentDelay(delayMs);
      setShowView(true);

      await new Promise((resolve) =>
        setTimeout(() => {
          console.log(
            `[RACE-TEST] Disposing view at ${Date.now()} (iteration ${iteration + 1})`
          );
          setShowView(false);
          resolve(undefined);
        }, VIEW_DISPOSAL_TIME_MS)
      );

      await new Promise((resolve) =>
        setTimeout(() => {
          console.log(
            `[RACE-TEST] Test ${iteration + 1} completed at ${Date.now()}`
          );
          console.log(
            `[RACE-TEST] ========== End of test ${iteration + 1}/${TOTAL_TEST_ROUNDS} ==========\n`
          );
          resolve(undefined);
        }, PAUSE_BETWEEN_TESTS_MS)
      );
    },
    []
  );

  const startTest = React.useCallback(async () => {
    console.log(`[RACE-TEST] ====================================`);
    console.log(
      `[RACE-TEST] Starting automated race condition test suite at ${Date.now()}`
    );
    console.log(
      `[RACE-TEST] Running ${TOTAL_TEST_ROUNDS} iterations cycling through delays: ${TEST_DELAYS.join(', ')}ms`
    );
    console.log(`[RACE-TEST] ====================================\n`);

    setTestRunning(true);

    for (let i = 0; i < TOTAL_TEST_ROUNDS; i++) {
      const delayIndex = i % TEST_DELAYS.length;
      const delay = TEST_DELAYS[delayIndex]!;
      await runSingleTest(delay, i);
    }

    setTestRunning(false);
    setCurrentIteration(0);
    setCurrentDelay(null);
    console.log(`[RACE-TEST] ====================================`);
    console.log(`[RACE-TEST] All tests completed at ${Date.now()}`);
    console.log(`[RACE-TEST] ====================================`);
  }, [runSingleTest]);

  const resetTest = React.useCallback(() => {
    setShowView(false);
    setTestRunning(false);
    setCurrentIteration(0);
    setCurrentDelay(null);
    console.log(`[RACE-TEST] Test reset at ${Date.now()}`);
  }, []);

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>Race Condition Test</Text>
        <Text style={styles.description}>
          Automated test running {TOTAL_TEST_ROUNDS} iterations, cycling through
          delays {TEST_DELAYS[0]}ms - {TEST_DELAYS[TEST_DELAYS.length - 1]}ms.
        </Text>
        <Text style={styles.description}>
          View disposal: {VIEW_DISPOSAL_TIME_MS}ms, Pause between tests:{' '}
          {PAUSE_BETWEEN_TESTS_MS}ms
        </Text>
        {testRunning && currentDelay !== null && (
          <Text style={styles.statusText}>
            Running Test {currentIteration + 1}/{TOTAL_TEST_ROUNDS} - Delay:{' '}
            {currentDelay}ms
          </Text>
        )}
        <Text style={styles.description}>
          Check the logs for [RACE-TEST] messages to see the timing of events.
        </Text>
      </View>

      <View style={styles.viewContainer}>
        {showView && currentDelay !== null && (
          <RiveContent key={currentIteration} delayMs={currentDelay} />
        )}
      </View>

      <View style={styles.controls}>
        <Button
          title={testRunning ? 'Tests Running...' : 'Start Automated Tests'}
          onPress={startTest}
          disabled={testRunning}
        />
        <View style={styles.buttonSpacer} />
        <Button title="Reset" onPress={resetTest} disabled={testRunning} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  header: {
    padding: 16,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  description: {
    fontSize: 14,
    color: '#666',
    marginBottom: 8,
  },
  statusText: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#007AFF',
    marginTop: 8,
    marginBottom: 8,
  },
  viewContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  rive: {
    width: '100%',
    height: 400,
  },
  loadingContainer: {
    width: '100%',
    height: 400,
    justifyContent: 'center',
    alignItems: 'center',
  },
  loadingText: {
    marginTop: 16,
    fontSize: 16,
    color: '#666',
  },
  controls: {
    padding: 16,
    gap: 12,
  },
  buttonSpacer: {
    height: 8,
  },
});