// SpeedTestScreen.tsx
// SpeedOf.Me API - React Native Integration
//
// This file demonstrates how to integrate the SpeedOf.Me speed test
// into a React Native app using react-native-webview.

import React, { useState, useRef, useCallback } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ActivityIndicator,
  SafeAreaView,
} from 'react-native';
import { WebView, WebViewMessageEvent } from 'react-native-webview';

// MARK: - Types

interface SpeedTestResult {
  download: number;
  upload: number;
  latency: number;
  jitter: number;
  testServer?: string;
  ip_address?: string;
  hostname?: string;
}

interface SpeedTestProgress {
  testType: 'download' | 'upload';
  currentSpeed: number;
  percentComplete: number;
  passNumber: number;
}

interface SpeedTestError {
  code: number;
  message: string;
}

interface WebViewMessage {
  type: 'ready' | 'started' | 'progress' | 'completed' | 'error';
  data: any;
}

type TestStatus = 'idle' | 'running' | 'completed' | 'error';

// MARK: - Component

export default function SpeedTestScreen() {
  const webViewRef = useRef<WebView>(null);
  const [status, setStatus] = useState<TestStatus>('idle');
  const [statusText, setStatusText] = useState('Ready');
  const [result, setResult] = useState<SpeedTestResult | null>(null);
  const [progress, setProgress] = useState<SpeedTestProgress | null>(null);
  const [error, setError] = useState<SpeedTestError | null>(null);

  // Handle messages from WebView
  const handleMessage = useCallback((event: WebViewMessageEvent) => {
    try {
      const message: WebViewMessage = JSON.parse(event.nativeEvent.data);

      switch (message.type) {
        case 'ready':
          setStatusText('Ready to test');
          setStatus('idle');
          break;

        case 'started':
          setStatusText('Starting test...');
          setStatus('running');
          setResult(null);
          setError(null);
          break;

        case 'progress':
          const prog = message.data as SpeedTestProgress;
          setProgress(prog);
          const testType = prog.testType === 'download' ? 'Download' : 'Upload';
          setStatusText(`${testType}: ${prog.currentSpeed.toFixed(1)} Mbps`);
          break;

        case 'completed':
          const res = message.data as SpeedTestResult;
          setResult(res);
          setProgress(null);
          setStatus('completed');
          setStatusText('Test complete');
          break;

        case 'error':
          const err = message.data as SpeedTestError;
          setError(err);
          setStatus('error');
          setStatusText(`Error: ${err.message}`);
          break;
      }
    } catch (e) {
      console.error('Error parsing WebView message:', e);
    }
  }, []);

  // HTML source options
  // Option 1: Remote URL (domain must match SpeedOf.Me registration)
  const webViewSource = { uri: 'https://your-domain.com/speedtest.html' };

  // Option 2: Inline HTML (for bundling with app)
  // const webViewSource = { html: SPEED_TEST_HTML };

  // Option 3: Local file (requires setup)
  // const webViewSource = { uri: 'file:///android_asset/speedtest.html' };

  return (
    <SafeAreaView style={styles.container}>
      {/* Status Bar */}
      <View style={styles.statusBar}>
        <Text style={styles.statusText}>{statusText}</Text>
        {(status === 'running') && (
          <ActivityIndicator size="small" color="#007AFF" />
        )}
      </View>

      {/* Progress Bar */}
      {progress && (
        <View style={styles.progressContainer}>
          <View style={styles.progressBar}>
            <View
              style={[
                styles.progressFill,
                { width: `${progress.percentComplete}%` }
              ]}
            />
          </View>
          <Text style={styles.progressText}>
            Pass {progress.passNumber} - {progress.percentComplete.toFixed(0)}%
          </Text>
        </View>
      )}

      {/* WebView */}
      <WebView
        ref={webViewRef}
        source={webViewSource}
        onMessage={handleMessage}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        style={styles.webView}
      />

      {/* Native Results Display (optional) */}
      {result && (
        <View style={styles.resultsContainer}>
          <ResultRow label="Download" value={`${result.download} Mbps`} />
          <ResultRow label="Upload" value={`${result.upload} Mbps`} />
          <ResultRow label="Latency" value={`${result.latency} ms`} />
          <ResultRow label="Jitter" value={`${result.jitter} ms`} />
        </View>
      )}

      {/* Error Display */}
      {error && (
        <View style={styles.errorContainer}>
          <Text style={styles.errorText}>
            Error {error.code}: {error.message}
          </Text>
        </View>
      )}
    </SafeAreaView>
  );
}

// MARK: - Result Row Component

interface ResultRowProps {
  label: string;
  value: string;
}

function ResultRow({ label, value }: ResultRowProps) {
  return (
    <View style={styles.resultRow}>
      <Text style={styles.resultLabel}>{label}</Text>
      <Text style={styles.resultValue}>{value}</Text>
    </View>
  );
}

// MARK: - Styles

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  statusBar: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: 16,
    backgroundColor: 'white',
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  statusText: {
    fontSize: 17,
    fontWeight: '600',
    color: '#333',
  },
  progressContainer: {
    padding: 16,
    backgroundColor: 'white',
  },
  progressBar: {
    height: 4,
    backgroundColor: '#e0e0e0',
    borderRadius: 2,
    overflow: 'hidden',
  },
  progressFill: {
    height: '100%',
    backgroundColor: '#007AFF',
  },
  progressText: {
    marginTop: 8,
    fontSize: 13,
    color: '#666',
    textAlign: 'center',
  },
  webView: {
    flex: 1,
  },
  resultsContainer: {
    backgroundColor: 'white',
    padding: 16,
    borderTopWidth: 1,
    borderTopColor: '#eee',
  },
  resultRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingVertical: 8,
  },
  resultLabel: {
    fontSize: 15,
    color: '#666',
  },
  resultValue: {
    fontSize: 15,
    fontWeight: '600',
    color: '#007AFF',
  },
  errorContainer: {
    padding: 16,
    backgroundColor: '#ffebee',
  },
  errorText: {
    color: '#c62828',
    fontSize: 14,
  },
});

// MARK: - Inline HTML (Alternative to remote URL)
// Uncomment and use this if you want to bundle the HTML with your app

/*
const SPEED_TEST_HTML = `
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <script src="https://speedof.me/api/api.js"></script>
    <style>
        body { font-family: system-ui; margin: 0; padding: 20px; background: #f5f5f5; }
        button { width: 100%; padding: 15px; font-size: 18px; background: #007AFF; color: white; border: none; border-radius: 8px; }
        button:disabled { background: #ccc; }
        .status { text-align: center; margin: 20px 0; color: #666; }
    </style>
</head>
<body>
    <button id="startBtn" onclick="startTest()">Start Speed Test</button>
    <div id="status" class="status"></div>
    <script>
        SomApi.account = "YOUR_API_KEY";
        SomApi.domainName = "your-domain.com";
        SomApi.onTestCompleted = function(r) {
            document.getElementById('startBtn').disabled = false;
            window.ReactNativeWebView.postMessage(JSON.stringify({type:'completed',data:r}));
        };
        SomApi.onProgress = function(p) {
            window.ReactNativeWebView.postMessage(JSON.stringify({type:'progress',data:p}));
        };
        SomApi.onError = function(e) {
            window.ReactNativeWebView.postMessage(JSON.stringify({type:'error',data:e}));
        };
        function startTest() {
            document.getElementById('startBtn').disabled = true;
            window.ReactNativeWebView.postMessage(JSON.stringify({type:'started',data:{}}));
            SomApi.startTest();
        }
        window.ReactNativeWebView.postMessage(JSON.stringify({type:'ready',data:{}}));
    </script>
</body>
</html>
`;
*/