'use client';

import { useState } from 'react';
import { useAuth } from '@/context/AuthContext';
import { login as apiLogin } from '@/lib/api';

export default function LoginPage() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const { login } = useAuth();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');

    try {
      const { token } = await apiLogin(email, password);
      login(token);
    } catch (err) {
      setError('Invalid email or password');
    }
  };

  const handleGoogleLogin = () => {
    // Redirect to the backend endpoint that starts the Google OAuth flow
    window.location.href = `${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001'}/auth/google`;
  };

  return (
    <div className="min-h-screen bg-slate-950 flex items-center justify-center p-6 relative overflow-hidden">
      {/* Background glow */}
      <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-blue-600/10 rounded-full blur-[100px] pointer-events-none" />
      
      <div className="w-full max-w-md bg-slate-900/80 backdrop-blur-xl border border-slate-800 rounded-2xl p-8 shadow-2xl z-10">
        <div className="text-center mb-8">
          <div className="inline-flex w-12 h-12 bg-gradient-to-br from-blue-600 to-cyan-400 rounded-xl items-center justify-center font-bold text-white text-xl shadow-lg mb-4">S</div>
          <h1 className="text-3xl font-bold text-white mb-2">Welcome Back</h1>
          <p className="text-slate-400 text-sm">Sign in to your Skill Edge Services account</p>
        </div>
        
        <form onSubmit={handleSubmit} className="space-y-5 flex flex-col">
          <div>
            <label className="block text-sm font-medium text-slate-300 mb-1.5">Email Address</label>
            <input
              type="email"
              placeholder="student@university.edu"
              className="w-full bg-slate-950/50 border border-slate-800 rounded-xl px-4 py-3.5 text-white focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-300 mb-1.5">Password</label>
            <input
              type="password"
              placeholder="••••••••"
              className="w-full bg-slate-950/50 border border-slate-800 rounded-xl px-4 py-3.5 text-white focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
            />
          </div>
          
          <div className="flex items-center justify-between text-sm py-2">
            <label className="flex items-center text-slate-400 gap-2 cursor-pointer">
              <input type="checkbox" className="rounded bg-slate-950 border-slate-800 text-blue-500 focus:ring-blue-500/50" />
              Remember me
            </label>
            <a href="#" className="text-blue-500 hover:text-blue-400 font-medium transition-colors">Forgot password?</a>
          </div>

          {error && <p className="text-red-500 text-sm">{error}</p>}

          <button type="submit" className="w-full bg-blue-600 text-white font-bold rounded-xl px-4 py-4 hover:bg-blue-500 transition-all shadow-[0_0_15px_rgba(37,99,235,0.4)] mt-2">
            Sign In to Dashboard
          </button>
        </form>

        <div className="relative my-8">
          <div className="absolute inset-0 flex items-center">
            <div className="w-full border-t border-slate-800" />
          </div>
          <div className="relative flex justify-center text-sm">
            <span className="bg-slate-900/80 px-2 text-slate-400">OR</span>
          </div>
        </div>

        <button onClick={handleGoogleLogin} className="w-full flex items-center justify-center gap-3 bg-slate-800 text-white font-bold rounded-xl px-4 py-4 hover:bg-slate-700 transition-all">
          <img src="https://www.google.com/favicon.ico" alt="Google icon" className="w-5 h-5" />
          Sign in with Google
        </button>

        <p className="mt-8 text-center text-sm text-slate-400">
          Don't have an account? <a href="/register" className="text-blue-500 hover:text-blue-400 font-semibold transition-colors">Register here</a>
        </p>
      </div>
    </div>
  );
}