import React, { useState } from 'react';
import axios from 'axios';
import { useAuth } from '../AuthContext';
import { useNavigate, Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Tooltip } from '../components/Tooltip';
import { GoogleLogin } from '@react-oauth/google';

export default function Login() {
    const { t } = useTranslation();
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');
    const { login } = useAuth();
    const navigate = useNavigate();

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        try {
            const res = await axios.post('/api/auth/login', { email, password });
            login(res.data.token, res.data.user);
            navigate('/');
        } catch (err: any) {
            setError(err.response?.data?.error || 'Login failed');
        }
    };

    return (
        <div className="flex min-h-screen items-center justify-center bg-gray-100">
            <div className="w-full max-w-md rounded-lg bg-white p-8 shadow-lg">
                <h2 className="mb-6 text-center text-2xl font-bold text-gray-800">{t('buttons.login')}</h2>
                {error && <div className="mb-4 rounded bg-red-100 p-2 text-red-600">{error}</div>}
                <form onSubmit={handleSubmit}>
                    <div className="mb-4">
                        <label className="mb-1 block font-semibold text-gray-700">Email</label>
                        <input
                            type="email"
                            className="w-full rounded border p-2 focus:border-blue-500 focus:outline-none"
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                            required
                        />
                    </div>
                    <div className="mb-6">
                        <label className="mb-1 block font-semibold text-gray-700">Password</label>
                        <input
                            type="password"
                            className="w-full rounded border p-2 focus:border-blue-500 focus:outline-none"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                            required
                        />
                    </div>
                    <Tooltip content={t('buttons.login')} position="top">
                        <button
                            type="submit"
                            className="w-full rounded bg-blue-600 py-2 font-bold text-white hover:bg-blue-700 transition"
                        >
                            {t('buttons.login')}
                        </button>
                    </Tooltip>
                </form>

                <div className="mt-6">
                    <div className="relative">
                        <div className="absolute inset-0 flex items-center">
                            <div className="w-full border-t border-gray-300"></div>
                        </div>
                        <div className="relative flex justify-center text-sm">
                            <span className="bg-white px-2 text-gray-500">Or continue with</span>
                        </div>
                    </div>
                    <div className="mt-6 flex justify-center">
                        <GoogleLogin
                            onSuccess={async (credentialResponse) => {
                                try {
                                    const res = await axios.post('/api/auth/google', { credential: credentialResponse.credential });
                                    login(res.data.token, res.data.user);
                                    navigate('/');
                                } catch (err) {
                                    setError('Google Login Failed');
                                }
                            }}
                            onError={() => setError('Google Login Failed')}
                        />
                    </div>
                </div>
                <div className="mt-4 text-center">
                    <p className="text-gray-600">Don't have an account? <Link to="/signup" className="text-blue-600 hover:underline">Sign up</Link></p>
                </div>
            </div>
        </div>
    );
}