import React, { useState, useEffect } from 'react';
import './App.css';

function Setup({ status, onComplete }) {
    const [loadingData, setLoadingData] = useState(false);
    const [loginUrl, setLoginUrl] = useState('');
    const [message, setMessage] = useState('');
    const [manualCode, setManualCode] = useState('');
    const [showManualCode, setShowManualCode] = useState(false);

    useEffect(() => {
        // Automatically handle the OAuth callback if the URL has ?code=
        const urlParams = new URLSearchParams(window.location.search);
        const code = urlParams.get('code');
        if (code) {
            handleAuthCallback(code);
        }
    }, []);

    const handleAuthCallback = async (code) => {
        setMessage('Completing login...');
        try {
            const resp = await fetch('http://localhost:8000/api/setup/auth/callback', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ code })
            });
            if (resp.ok) {
                setMessage('Login successful. Please ensure both steps are complete.');
            } else {
                setMessage('Login failed. Please try again.');
            }
        } catch (e) {
            setMessage('Error during login callback.');
        }
    };

    const downloadData = async () => {
        setLoadingData(true);
        setMessage('Downloading EVE Online static data (this may take a few minutes)...');
        try {
            const resp = await fetch('http://localhost:8000/api/setup/data', { method: 'POST' });
            if (resp.ok) {
                setMessage('Data downloaded successfully!');
            } else {
                setMessage('Failed to download data.');
            }
        } catch (e) {
            setMessage('Error downloading data.');
        }
        setLoadingData(false);
    };

    const fetchLoginUrl = async () => {
        try {
            const resp = await fetch('http://localhost:8000/api/setup/auth/url');
            if (resp.ok) {
                const data = await resp.json();
                window.open(data.url, '_blank');
                setShowManualCode(true);
            }
        } catch (e) {
            setMessage('Failed to fetch login URL.');
        }
    };

    return (
        <div className="App dark-mode flex-center">
            <div className="setup-container">
                <h1>Welcome to EVE Haul</h1>
                <p>Let's get your environment set up.</p>
                
                <div className="setup-step">
                    <h2>1. EVE Static Data</h2>
                    {status.data_ready ? (
                        <p style={{ color: 'lightgreen' }}>Data is ready!</p>
                    ) : (
                        <button onClick={downloadData} disabled={loadingData}>
                            {loadingData ? 'Downloading...' : 'Download Game Data'}
                        </button>
                    )}
                </div>

                <div className="setup-step">
                    <h2>2. EVE Single Sign-On</h2>
                    {status.auth_ready ? (
                        <p style={{ color: 'lightgreen' }}>Authenticated!</p>
                    ) : (
                        <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
                            <button onClick={() => {
                                setShowManualCode(true);
                                fetchLoginUrl();
                            }}>
                                Login to EVE Online
                            </button>
                            {showManualCode && (
                                <div style={{ fontSize: '0.9em', color: '#ccc', textAlign: 'left', marginTop: '10px' }}>
                                    <p>After granting access, you might be redirected to a broken page (like `https://localhost/callback/...`).</p>
                                    <p>Copy the `code=` part from the URL address bar and paste it below:</p>
                                    <div style={{ display: 'flex', gap: '5px', marginTop: '5px' }}>
                                        <input 
                                            type="text" 
                                            placeholder="Paste the code here" 
                                            value={manualCode}
                                            onChange={(e) => setManualCode(e.target.value)}
                                            style={{ flex: 1, padding: '5px', borderRadius: '3px', background: '#222', color: '#fff', border: '1px solid #444' }}
                                        />
                                        <button onClick={() => {
                                            if (manualCode.includes('?code=')) {
                                                const params = new URLSearchParams(manualCode.split('?')[1]);
                                                handleAuthCallback(params.get('code') || manualCode);
                                            } else if (manualCode.startsWith('http') && manualCode.includes('code=')) {
                                                const url = new URL(manualCode);
                                                handleAuthCallback(url.searchParams.get('code') || manualCode);
                                            } else {
                                                handleAuthCallback(manualCode);
                                            }
                                        }}>Submit
                                        </button>
                                    </div>
                                </div>
                            )}
                        </div>
                    )}
                </div>

                <p className="setup-message">{message}</p>
                
                {status.data_ready && status.auth_ready && !status.backend_ready && (
                    <div style={{ marginTop: '20px', padding: '15px', background: '#333', border: '1px solid #ffaa00', borderRadius: '5px' }}>
                        <h3 style={{ color: '#ffaa00', margin: '0 0 10px 0' }}>Restart Required</h3>
                        <p>Setup is complete, but the EVE Haul backend process needs to be restarted to load the downloaded data.</p>
                        <p>Please go to your terminal, press `Ctrl+C` to stop the backend, and start it again.</p>
                        <p>This page will automatically launch EVE Haul when the backend is ready.</p>
                    </div>
                )}
            </div>
        </div>
    );
}

export default Setup;