const { useState, useEffect, useRef, useCallback } = React;

class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false, error: null };
    }
    static getDerivedStateFromError(error) { return { hasError: true, error }; }
    render() {
        if (this.state.hasError) return <div className="min-h-screen bg-[#020203] flex items-center justify-center p-6 text-white">Interface Crash. Please reboot.</div>;
        return this.props.children;
    }
}

const App = () => {
    const [token, setToken] = useState(localStorage.getItem('onyx_token') || '');
    const [webhook, setWebhook] = useState(localStorage.getItem('onyx_webhook') || '');
    const [botStatus, setBotStatus] = useState(false);
    const [logs, setLogs] = useState(['> System initialized.', '> Awaiting authentication...']);
    const [input, setInput] = useState('');

    const handleCommand = (cmd) => {
        const newLogs = [...logs, `> ${cmd}`];
        window.SoundFX.click();
        if (cmd === '.help') newLogs.push('Available: .ping, .status, .clear, .webhook [url]');
        else if (cmd === '.ping') newLogs.push('Pong! Latency: 24ms');
        else if (cmd === '.status') newLogs.push(`Bot is currently: ${botStatus ? 'ONLINE' : 'OFFLINE'}`);
        else if (cmd === '.clear') { setLogs([]); return; }
        else if (cmd.startsWith('.webhook ')) {
            const url = cmd.split(' ')[1];
            setWebhook(url);
            localStorage.setItem('onyx_webhook', url);
            newLogs.push('Webhook URL updated successfully.');
        }
        else newLogs.push('Unknown command.');
        setLogs(newLogs);
    };

    const sendTestWebhook = () => {
        if (!webhook) return alert('Set webhook URL first via .webhook command');
        fetch(webhook, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ content: 'Onyx System Test Signal' })
        }).then(() => { window.SoundFX.success(); alert('Webhook sent!'); });
    };

    return (
        <div className="min-h-screen p-8 text-white">
            <div className="max-w-4xl mx-auto">
                <h1 className="text-4xl font-bold mb-8 gradient-text">ONYX <span className="text-cyan-400">SELFBOT</span></h1>
                
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                    <div className="glass-card p-6">
                        <h2 className="text-lg font-bold mb-4">Authentication</h2>
                        <input 
                            type="password" 
                            placeholder="Enter Discord Token" 
                            className="w-full bg-black/50 p-3 rounded-lg border border-white/10 mb-4"
                            value={token}
                            onChange={(e) => { setToken(e.target.value); localStorage.setItem('onyx_token', e.target.value); }}
                        />
                        <button 
                            onClick={() => { setBotStatus(!botStatus); window.SoundFX.powerup(); }}
                            className={`w-full px-6 py-2 rounded-lg font-bold ${botStatus ? 'bg-red-500/20 text-red-400 border border-red-500/50' : 'bg-cyan-500/20 text-cyan-400 border border-cyan-500/50'}`}
                        >
                            {botStatus ? 'STOP BOT' : 'START BOT'}
                        </button>
                    </div>

                    <div className="glass-card p-6">
                        <h2 className="text-lg font-bold mb-4">Client Tools</h2>
                        <button onClick={sendTestWebhook} className="w-full mb-4 bg-white/5 hover:bg-white/10 p-3 rounded-lg border border-white/10 transition">Test Webhook</button>
                        <a href="#" className="block text-center bg-cyan-500/10 hover:bg-cyan-500/20 p-3 rounded-lg border border-cyan-500/20 transition">Download .exe Client</a>
                    </div>
                </div>

                <div className="glass-card p-6 font-mono text-sm h-64 overflow-y-auto mb-4">
                    {logs.map((l, i) => <div key={i} className="opacity-80">{l}</div>)}
                </div>

                <input 
                    className="w-full bg-black/50 p-4 rounded-xl border border-white/10 focus:border-cyan-500 outline-none transition"
                    placeholder="Type .help for commands..."
                    value={input}
                    onChange={(e) => setInput(e.target.value)}
                    onKeyDown={(e) => { if(e.key === 'Enter') { handleCommand(input); setInput(''); } }}
                />
            </div>
        </div>
    );
};

ReactDOM.createRoot(document.getElementById('root')).render(<ErrorBoundary><App /></ErrorBoundary>);