
import React, { useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { Hexagon, UploadCloud, Mail, Lock, User, ShieldCheck } from 'lucide-react';
import Head from 'next/head';

export default function RegisterPage() {
    const router = useRouter();
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState('');

    const handleRegister = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        setLoading(true);
        setError('');

        const formData = new FormData(e.currentTarget);
        const username = formData.get('username') as string;
        const password = formData.get('password') as string;
        const confirmPassword = formData.get('confirmPassword') as string;

        if (password !== confirmPassword) {
            setError('Passwords do not match');
            setLoading(false);
            return;
        }

        try {
            const response = await fetch('/api/v1/auth/register', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ username, password })
            });

            const data = await response.json();

            if (data.success) {
                // Also set REAL mode after successful registration
                localStorage.setItem('NEXUS_DATA_MODE', 'REAL');
                router.push('/');
            } else {
                setError(data.error || 'Registration failed');
            }
        } catch (err) {
            setError('Network error. Please try again.');
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="min-h-screen flex items-center justify-center relative overflow-hidden bg-[#020202]">
            <Head>
                <title>NEXUS_MAT.OS</title>
            </Head>

            <div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20"></div>
            <div className="absolute bottom-0 right-0 w-[600px] h-[600px] bg-cyber-pink/5 rounded-full blur-[100px] pointer-events-none"></div>

            <div className="w-full max-w-lg p-8 relative z-10">
                <div className="mb-8 text-center">
                    <h1 className="text-3xl font-mono font-bold text-white mb-2">JOIN_NETWORK</h1>
                    <p className="text-xs text-gray-500 font-mono">ESTABLISH NEW NEURAL LINK</p>
                </div>

                <div className="bg-cyber-panel/40 backdrop-blur-md border border-white/10 p-8 rounded-lg shadow-2xl">
                    <form onSubmit={handleRegister} className="space-y-4">
                        <div className="space-y-2">
                            <label className="text-[10px] font-mono text-gray-400">USERNAME</label>
                            <div className="relative">
                                <input
                                    name="username"
                                    type="text"
                                    className="w-full bg-black/50 border border-gray-800 focus:border-cyber-pink text-white p-2.5 pl-8 rounded-sm outline-none font-mono text-sm"
                                    required
                                />
                                <User className="absolute left-2.5 top-3 text-gray-600 w-3 h-3" />
                            </div>
                        </div>

                        <div className="space-y-2">
                            <label className="text-[10px] font-mono text-gray-400">PASSWORD</label>
                            <div className="relative">
                                <input
                                    name="password"
                                    type="password"
                                    className="w-full bg-black/50 border border-gray-800 focus:border-cyber-pink text-white p-2.5 pl-8 rounded-sm outline-none font-mono text-sm"
                                    required
                                />
                                <Lock className="absolute left-2.5 top-3 text-gray-600 w-3 h-3" />
                            </div>
                        </div>

                        <div className="space-y-2">
                            <label className="text-[10px] font-mono text-gray-400">CONFIRM_PASSWORD</label>
                            <div className="relative">
                                <input
                                    name="confirmPassword"
                                    type="password"
                                    className="w-full bg-black/50 border border-gray-800 focus:border-cyber-pink text-white p-2.5 pl-8 rounded-sm outline-none font-mono text-sm"
                                    required
                                />
                                <ShieldCheck className="absolute left-2.5 top-3 text-gray-600 w-3 h-3" />
                            </div>
                        </div>

                        {error && (
                            <div className="bg-red-900/20 border border-red-500 text-red-500 p-3 rounded text-xs font-mono">
                                {error}
                            </div>
                        )}

                        <button
                            type="submit"
                            disabled={loading}
                            className="w-full bg-cyber-pink text-white font-bold py-3 mt-4 hover:bg-white hover:text-black transition-colors font-mono uppercase tracking-wider shadow-[0_0_15px_rgba(255,0,85,0.3)]"
                        >
                            {loading ? 'PROCESSING...' : 'CREATE_ACCOUNT'}
                        </button>
                    </form>

                    <div className="mt-6 text-center text-xs font-mono text-gray-500">
                        ALREADY LINKED? <Link href="/auth/login" className="text-cyber-pink hover:underline">ACCESS_TERMINAL</Link>
                    </div>
                </div>
            </div>
        </div>
    );
}
