'use client';

import React, { useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { signInWithGoogle } from '@/lib/auth';

export default function SignupPage() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [formError, setFormError] = useState('');
  const router = useRouter();

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setIsSubmitting(true);
    setFormError('');
    
    try {
      // Here you would connect to your backend API for registration
      console.log('Signing up', { name, email, password });
      
      // Simulate successful registration
      setTimeout(() => {
        // Redirect to login page with success message
        router.push('/login?registered=true');
      }, 1500);
    } catch (error) {
      console.error('Signup error:', error);
      setFormError('Something went wrong. Please try again.');
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleGoogleSignIn = () => {
    signInWithGoogle();
  };

  return (
    <div className="min-h-screen bg-[#0C0E11] flex items-center justify-center p-4">
      <div className="w-full max-w-md bg-[#13151d]/90 backdrop-blur-xl rounded-3xl p-8 shadow-xl">
        <h1 className="text-4xl font-bold text-white mb-8 text-center">Sign Up, for free</h1>
        
        <form onSubmit={handleSubmit} className="space-y-6">
          <div>
            <label className="block text-sm font-medium text-white mb-1">Name</label>
            <input 
              type="text"
              placeholder="Your name"
              value={name}
              onChange={(e) => setName(e.target.value)}
              required
              className="w-full px-4 py-3 rounded-lg bg-[#1c1e29] border border-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-purple-500"
            />
          </div>
          
          <div>
            <label className="block text-sm font-medium text-white mb-1">Email</label>
            <input 
              type="email"
              placeholder="your@email.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              className="w-full px-4 py-3 rounded-lg bg-[#1c1e29] border border-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-purple-500"
            />
          </div>
          
          <div>
            <label className="block text-sm font-medium text-white mb-1">Password</label>
            <input 
              type="password"
              placeholder="Password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
              className="w-full px-4 py-3 rounded-lg bg-[#1c1e29] border border-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-purple-500"
            />
          </div>
          
          {formError && (
            <div className="text-red-500 text-sm">{formError}</div>
          )}
          
          <div className="flex gap-4 mt-8">
            <Link 
              href="/login" 
              className="flex-1 py-3 text-center border border-gray-600 rounded-lg text-white hover:bg-white/10 transition-colors"
            >
              Back to home
            </Link>
            <button 
              type="submit" 
              disabled={isSubmitting}
              className="flex-1 py-3 rounded-lg bg-purple-600 hover:bg-purple-700 text-white font-medium transition-colors disabled:opacity-70"
            >
              {isSubmitting ? 'Signing up...' : 'Sign Up'}
            </button>
          </div>
        </form>
        
        <div className="my-6 relative flex items-center">
          <div className="flex-grow border-t border-gray-700"></div>
          <span className="flex-shrink mx-4 text-gray-400">or</span>
          <div className="flex-grow border-t border-gray-700"></div>
        </div>
        
        <button 
          onClick={handleGoogleSignIn}
          className="w-full flex items-center justify-center gap-3 py-3 border border-gray-600 rounded-lg text-white hover:bg-white/5 transition-colors"
        >
          <img src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg" className="w-5 h-5" alt="Google" />
          Continue with Google
        </button>
        
        {/* Success message */}
        <div className="hidden text-green-400 text-sm mt-4 text-center">
          Thank you! Your submission has been received!
        </div>
        
        {/* Error message */}
        <div className="hidden text-red-400 text-sm mt-4 text-center">
          Oops! Something went wrong while submitting the form.
        </div>
      </div>
    </div>
  );
}