import { useState } from 'react';
import { useLanguage } from '../context/LanguageContext';
import { Link, useNavigate } from 'react-router-dom';
import Footer from '../components/Footer';
import { API_HOST } from '../config';

function Login() {
    const [email, setEmail] = useState('');
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState('');
    const { t } = useLanguage();
    const navigate = useNavigate();

    const handleSubmit = async (e) => {
        e.preventDefault();
        setIsLoading(true);
        setError('');

        try {
            const response = await fetch(`${API_HOST}/api/v1/gw/user/host?email=${email}`, {
                method: 'GET',
            });
        
            const data = await response.json();
            if (data.redirect) {
                window.location.replace(data.redirect);
            }
        } catch (err) {
            console.error('Error:', err);
        } finally {
            setIsLoading(false);
        }

    };

    return (
        <div className="relative min-h-screen bg-white">
            {/* Technical grid background */}
            <div className="fixed inset-0 technical-grid opacity-50 pointer-events-none"></div>

            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
                {/* Header section */}
                <div className="grid-layout mb-16">
                    <div className="col-span-12 md:col-span-8">
                        <h1 className="brutalist-heading relative">
                            {t('login.title')}
                            <div className="absolute -right-8 -top-8 w-16 h-16">
                                <div className="geometric-shape diamond w-full h-full bg-black"></div>
                            </div>
                        </h1>
                        <p className="monospace text-xl md:text-2xl font-medium tracking-tight max-w-2xl">
                            {t('login.subtitle')}
                        </p>
                    </div>
                </div>

                <div className="geometric-divider mb-16"></div>

                {/* Login Form */}
                <div className="grid-layout">
                    <div className="col-span-12 md:col-span-6 lg:col-span-4">
                        <div className="brutalist-card">
                            {error && (
                                <div className="p-4 border-2 border-black bg-red-100 monospace">
                                    {error}
                                </div>
                            )}

                            <form onSubmit={handleSubmit} className="p-6 space-y-8">
                                <div>
                                    <label htmlFor="email" className="block text-sm font-black uppercase mb-2">
                                        Email address
                                    </label>
                                    <input
                                        id="email"
                                        name="email"
                                        type="email"
                                        required
                                        value={email}
                                        onChange={(e) => setEmail(e.target.value)}
                                        placeholder="Enter your email"
                                        className="w-full border-2 border-black bg-white px-4 py-3 monospace placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-black"
                                        disabled={isLoading}
                                    />
                                </div>

                                <div className="section-divider"></div>

                                <button
                                    type="submit"
                                    disabled={isLoading}
                                    className="brutalist-button w-full disabled:opacity-50"
                                >
                                    {isLoading ? (
                                        <span className="monospace">Processing...</span>
                                    ) : (
                                        <span>{t('login.continue')} →</span>
                                    )}
                                </button>
                            </form>
                        </div>

                        <div className="mt-8 text-center">
                            <p className="monospace">
                                {t('login.noAccount')}{' '}
                                <Link to="/pricing" className="underline font-bold hover:text-gray-600 transition-colors">
                                    {t('login.viewPricing')}
                                </Link>
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <Footer />
        </div>
    );
}

export default Login; 