<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Proxy Scraper and Tester</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f8f9fa;
        }
        header {
            background-color: #343a40;
            color: #fff;
            padding: 15px 0;
        }
        header nav h1 {
            font-size: 24px;
            margin: 0;
            padding: 0 20px;
        }
        header nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
        }
        header nav ul li {
            margin-right: 15px;
        }
        header nav ul li a {
            color: #fff;
            text-decoration: none;
            font-weight: 600;
        }
        header nav ul li a.active {
            border-bottom: 2px solid #ffc107;
        }
        .container {
            margin-top: 30px;
        }
        .card {
            margin-bottom: 20px;
        }
        footer {
            background-color: #343a40;
            color: #fff;
            text-align: center;
            padding: 15px 0;
            margin-top: 30px;
        }
        .loader {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #007bff;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        pre {
            background-color: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 15px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        function App() {
            const [proxies, setProxies] = React.useState([]);
            const [liveProxies, setLiveProxies] = React.useState([]);
            const [loading, setLoading] = React.useState(false);
            const [activeTab, setActiveTab] = React.useState('home');

            const fetchProxies = async () => {
                setLoading(true);
                try {
                    const response = await fetch('https://proxy-wtfapi.glitch.me/api/proxies');
                    const data = await response.json();
                    setProxies(data);
                } catch (error) {
                    console.error('Error fetching proxies:', error);
                }
                setLoading(false);
            };

            const testAllProxies = async () => {
                setLoading(true);
                setLiveProxies([]);
                try {
                    await Promise.all(
                        proxies.map(async (proxy) => {
                            const response = await fetch(`https://proxy-wtfapi.glitch.me/api/check-proxy?proxy=${proxy}`);
                            const data = await response.json();
                            if (data.status === 'live') {
                                setLiveProxies((prev) => [...prev, { proxy, ...data }]);
                            }
                        })
                    );
                } catch (error) {
                    console.error('Error testing proxies:', error);
                }
                setLoading(false);
            };

            const downloadFormattedProxies = () => {
                const formattedContent = liveProxies.map(proxy => 
                    `${proxy.proxy}\nLatency: ${proxy.latency}ms\nAnonymity: ${proxy.anonymity}\nCountry: ${proxy.country}\nCity: ${proxy.city}\n\n`
                ).join('');
                downloadFile(formattedContent, 'formatted_proxies.txt');
            };

            const downloadUnformattedProxies = () => {
                const unformattedContent = liveProxies.map(proxy => proxy.proxy).join('\n');
                downloadFile(unformattedContent, 'unformatted_proxies.txt');
            };

            const downloadFile = (content, filename) => {
                const element = document.createElement('a');
                const file = new Blob([content], {type: 'text/plain'});
                element.href = URL.createObjectURL(file);
                element.download = filename;
                document.body.appendChild(element);
                element.click();
                document.body.removeChild(element);
            };

            const renderDocs = () => (
                <div className="card">
                    <div className="card-body">
                        <h5 className="card-title">API Documentation</h5>
                        <h6 className="mt-4">1. Fetch Proxies</h6>
                        <p><strong>Endpoint:</strong> GET https://proxy-wtfapi.glitch.me/api/proxies</p>
                        <h6>Python Example:</h6>
                        <pre>{`import requests

response = requests.get('https://proxy-wtfapi.glitch.me/api/proxies')
proxies = response.json()
print(proxies)`}
                        </pre>
                        <h6>Node.js Example:</h6>
                        <pre>{`const axios = require('axios');

axios.get('https://proxy-wtfapi.glitch.me/api/proxies')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });`}
                        </pre>
                        <h6 className="mt-4">2. Check Proxy</h6>
                        <p><strong>Endpoint:</strong> GET https://proxy-wtfapi.glitch.me/api/check-proxy?proxy=IP:PORT</p>
                        <h6>Python Example:</h6>
                        <pre>{`import requests

proxy = '192.168.1.1:8080'
response = requests.get(f'https://proxy-wtfapi.glitch.me/api/check-proxy?proxy={proxy}')
result = response.json()
print(result)`}
                        </pre>
                        <h6>Node.js Example:</h6>
                        <pre>{`const axios = require('axios');

const proxy = '192.168.1.1:8080';
axios.get(\`https://proxy-wtfapi.glitch.me/api/check-proxy?proxy=\${proxy}\`)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });`}
                        </pre>
                        <h6 className="mt-4">Response Format:</h6>
                        <pre>{`{
  "status": "live",
  "latency": 175,
  "anonymity": "Anonymous",
  "country": "FR",
  "city": "Paris",
  "detectedIp": "13.37.252.196"
}`}
                        </pre>
                        <p>Note: The API no longer provides separate endpoints for proxy types and countries. This information is now included in the response of the check-proxy endpoint.</p>
                    </div>
                </div>
            );

            return (
                <div>
                    <header>
                        <nav className="d-flex justify-content-between align-items-center px-4">
                            <h1><i className="fas fa-shield-alt"></i> Proxy Scraper</h1>
                            <ul className="d-flex">
                                <li><a href="#" onClick={() => setActiveTab('home')} className={activeTab === 'home' ? 'active' : ''}>Home</a></li>
                                <li><a href="#" onClick={() => setActiveTab('docs')} className={activeTab === 'docs' ? 'active' : ''}>API Docs</a></li>
                            </ul>
                        </nav>
                    </header>
                    <main className="container">
                        {activeTab === 'home' ? (
                            <div className="card shadow-sm">
                                <div className="card-body">
                                    <h5 className="card-title">Proxy Scraper and Tester</h5>
                                    <div className="d-flex gap-2 mb-3">
                                        <button className="btn btn-primary" onClick={fetchProxies} disabled={loading}>
                                            <i className="fas fa-sync"></i> Fetch Proxies
                                        </button>
                                        <button className="btn btn-warning" onClick={testAllProxies} disabled={loading || proxies.length === 0}>
                                            <i className="fas fa-vial"></i> Test Proxies
                                        </button>
                                        <button className="btn btn-success" onClick={downloadFormattedProxies} disabled={liveProxies.length === 0}>
                                            <i className="fas fa-download"></i> Download Formatted
                                        </button>
                                        <button className="btn btn-info" onClick={downloadUnformattedProxies} disabled={liveProxies.length === 0}>
                                            <i className="fas fa-download"></i> Download Unformatted
                                        </button>
                                    </div>
                                    {loading ? <div className="loader mx-auto"></div> : null}
                                    <div className="row">
                                        <div className="col-md-6">
                                            <h6>All Proxies <span className="badge bg-secondary">{proxies.length}</span></h6>
                                            <ul className="list-group">
                                                {proxies.map((proxy, idx) => (
                                                    <li key={idx} className="list-group-item">{proxy}</li>
                                                ))}
                                            </ul>
                                        </div>
                                        <div className="col-md-6">
                                            <h6>Live Proxies <span className="badge bg-success">{liveProxies.length}</span></h6>
                                            <ul className="list-group">
                                                {liveProxies.map((live, idx) => (
                                                    <li key={idx} className="list-group-item">
                                                        <div>{live.proxy}</div>
                                                        <div>Latency: {live.latency}ms</div>
                                                        <div>Anonymity: {live.anonymity}</div>
                                                        <div>Country: {live.country}</div>
                                                                                                                <div>Country: {live.country}</div>
                                                        <div>City: {live.city}</div>
                                                    </li>
                                                ))}
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ) : renderDocs()}
                    </main>
                    <footer>
                        <p>&copy; 2024 Proxy Scraper. All rights reserved.</p>
                    </footer>
                </div>
            );
        }

        ReactDOM.render(<App />, document.getElementById('root'));
    </script>
</body>
</html>