import { useState } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
import Head from 'next/head';
import { useAuth } from '../hooks/useAuth';

export default function RegisterPage() {
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');
    const [licenseKey, setLicenseKey] = useState('');
    const [loading, setLoading] = useState(false);
    const { register } = useAuth();
    const router = useRouter();

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setError('');
        setLoading(true);
        try {
            const result = await register(email, password, name);
            setLicenseKey(result.licenseKey);
        } catch (err: any) {
            setError(err.response?.data?.message || 'Registration failed');
        }
        setLoading(false);
    };

    if (licenseKey) {
        return (
            <>
                <Head><title>Registrasi Berhasil – MarketScope</title></Head>
                <div className="min-h-screen bg-dark-bg flex items-center justify-center p-4">
                    <div className="w-full max-w-md animate-fade-in text-center">
                        <div className="card">
                            <div className="text-5xl mb-4">🎉</div>
                            <h2 className="text-2xl font-bold mb-2">Registrasi Berhasil!</h2>
                            <p className="text-gray-400 mb-6">Simpan license key ini untuk Chrome Extension:</p>

                            <div className="bg-dark-bg p-4 rounded-lg border border-brand-primary/30 mb-6">
                                <p className="font-mono text-lg text-brand-primary font-bold tracking-wide">{licenseKey}</p>
                            </div>

                            <p className="text-gray-500 text-xs mb-6">
                                Masukkan key ini di Chrome Extension untuk mengaktifkan fitur scanning.
                            </p>

                            <button
                                onClick={() => router.push('/dashboard')}
                                className="btn-primary w-full"
                            >
                                Masuk ke Dashboard →
                            </button>
                        </div>
                    </div>
                </div>
            </>
        );
    }

    return (
        <>
            <Head>
                <title>Register – MarketScope</title>
                <meta name="description" content="Create your MarketScope account" />
            </Head>
            <div className="min-h-screen bg-dark-bg flex items-center justify-center p-4">
                <div className="w-full max-w-md animate-fade-in">
                    <div className="text-center mb-8">
                        <div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-gradient-to-br from-brand-primary to-brand-secondary flex items-center justify-center text-white font-bold text-2xl shadow-lg shadow-brand-primary/25">
                            M
                        </div>
                        <h1 className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
                            MarketScope
                        </h1>
                    </div>

                    <div className="card">
                        <h2 className="text-xl font-bold mb-6">Create Account</h2>

                        {error && (
                            <div className="mb-4 p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 text-sm">
                                {error}
                            </div>
                        )}

                        <form onSubmit={handleSubmit} className="space-y-4">
                            <div>
                                <label className="block text-sm font-medium text-gray-400 mb-1">Name</label>
                                <input type="text" value={name} onChange={(e) => setName(e.target.value)} className="input-field" placeholder="Your name" required />
                            </div>
                            <div>
                                <label className="block text-sm font-medium text-gray-400 mb-1">Email</label>
                                <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} className="input-field" placeholder="you@example.com" required />
                            </div>
                            <div>
                                <label className="block text-sm font-medium text-gray-400 mb-1">Password</label>
                                <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} className="input-field" placeholder="Min 8 characters" required minLength={8} />
                            </div>
                            <button type="submit" disabled={loading} className="btn-primary w-full flex items-center justify-center gap-2">
                                {loading ? <div className="animate-spin w-5 h-5 border-2 border-white border-t-transparent rounded-full" /> : 'Register'}
                            </button>
                        </form>

                        <p className="mt-6 text-center text-gray-500 text-sm">
                            Sudah punya akun? <Link href="/login" className="text-brand-primary hover:underline">Login</Link>
                        </p>
                    </div>
                </div>
            </div>
        </>
    );
}
