import { useState, useEffect } from 'react';
import { Link, useNavigate, useLocation } from 'react-router-dom';
import { API_BASE_URL } from '../config/apiConfig';
import LoadingSpinner from '../components/partials/LoadingSpinner';
import endpoints from '../config/apiEndpoints';

const SignIn = () => {
  const { signin: signinApi} = endpoints;

  const [formData, setFormData] = useState({
    email_or_phone: '',
    password: '',
  });

  const [error, setError] = useState<null | string>(null);
  const [signingIn, setSigningIn] = useState(false);
  const navigate = useNavigate();
  const location = useLocation();

  // Check for error message from social login
  useEffect(() => {
    const queryParams = new URLSearchParams(location.search);
    const errorMsg = queryParams.get('error');
    if (errorMsg) {
      setError(decodeURIComponent(errorMsg));
    }
  }, [location]);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setSigningIn(true);
    try {
      const response = await fetch(signinApi, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Accept: 'application/json',
        },
        body: JSON.stringify(formData),
      });

      const data = await response.json();

      if (data.result) {
        // Store token or user data if needed
        localStorage.setItem('access_token', data.access_token);
        localStorage.setItem('user', JSON.stringify(data.user));

        // Redirect on success
        navigate('/feed');
      } else {
        setError(data.message || 'Login failed.');
        setSigningIn(false)
      }
    } catch (err) {
      setError('Something went wrong. Please try again.');
      console.error(err);
    } finally {
      setSigningIn(false);
    }
  };

  const handleSocialLogin = (provider: 'google' | 'facebook') => {
    window.location.href = `${API_BASE_URL}/auth/${provider}`;
  };

  return (
    <div className="min-h-screen flex items-center justify-center px-4 bg-gray-50">
      {signingIn && (<LoadingSpinner text='Signing In' />)}
      <div className="max-w-md w-full space-y-8 bg-white p-10 rounded-xl shadow-2xl border border-gray-100">
        <div>
          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
            Sign in to your account
          </h2>
          <p className="mt-2 text-center text-sm text-gray-600">
            Or{' '}
            <Link to="/signup" className="font-medium text-pink-600 hover:text-pink-500">
              create a new account
            </Link>
          </p>
        </div>

        <div className="flex items-center justify-between gap-2">
          {/* Google Login Button */}
          <button
            type="button"
            onClick={() => handleSocialLogin('google')}
            className="w-full flex items-center justify-center gap-3 py-2 px-4 border border-gray-300 rounded-full shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
          >
            <svg className="w-5 h-5" viewBox="0 0 488 512" xmlns="http://www.w3.org/2000/svg">
              <path fill="#EA4335" d="M488 261.8c0-17.8-1.6-35.1-4.6-51.8H249v98h134c-5.8 31.4-23.3 58-49.7 75.8v62h80.5c47-43.3 74.2-107.1 74.2-183z" />
              <path fill="#34A853" d="M249 492c66.8 0 122.8-22.2 163.7-60.1l-80.5-62c-22.5 15.1-51.2 24.1-83.2 24.1-63.9 0-118-43.1-137.3-101.2H29.1v63.8C69.2 431.5 152.2 492 249 492z" />
              <path fill="#4A90E2" d="M111.7 292.8C106 276.2 103 258 103 239.5s3-36.7 8.7-53.3V122h-82C15.4 163.6 0 199.3 0 239.5s15.4 75.9 41.7 117.5l70-64.2z" />
              <path fill="#FBBC05" d="M249 96.5c36.4 0 69 12.5 94.8 36.8l71.1-71.1C385.9 26.2 330.6 0 249 0 152.2 0 69.2 60.5 29.1 148.2l82 63.8C131 139.6 185.1 96.5 249 96.5z" />
            </svg>
            <span>Google</span>
          </button>

          {/* Facebook Login Button */}
          <button
            type="button"
            onClick={() => handleSocialLogin('facebook')}
            className="w-full flex items-center justify-center gap-3 py-2 px-4 border border-gray-300 rounded-full shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
          >
            <svg className="w-5 h-5 text-blue-600" viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg">
              <path
                fill="currentColor"
                d="M279.14 288l14.22-92.66h-88.91V127.34c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S261.11 0 225.36 0C141.09 0 89.53 54.42 89.53 153.12V195.3H0v92.66h89.53V512h107.77V288z"
              />
            </svg>
            <span>Facebook</span>
          </button>
        </div>

        <div className="flex items-center my-4">
          <div className="flex-grow border-t border-gray-300"></div>
          <span className="mx-2 text-gray-400 text-sm">or</span>
          <div className="flex-grow border-t border-gray-300"></div>
        </div>

        {error && <div className="text-red-500 text-sm text-center p-3 bg-red-50 rounded-lg">{error}</div>}

        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
          <div className="rounded-md shadow-sm space-y-4">
            <div>
              <label htmlFor="email_or_phone" className="sr-only">Email or Phone</label>
              <input
                id="email_or_phone"
                name="email_or_phone"
                type="text"
                required
                className="appearance-none rounded-lg relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-pink-500 focus:border-pink-500 focus:z-10 sm:text-sm"
                placeholder="Email or Phone"
                value={formData.email_or_phone}
                onChange={(e) => setFormData({ ...formData, email_or_phone: e.target.value })}
              />
            </div>
            <div>
              <label htmlFor="password" className="sr-only">Password</label>
              <input
                id="password"
                name="password"
                type="password"
                required
                className="appearance-none rounded-lg relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-pink-500 focus:border-pink-500 focus:z-10 sm:text-sm"
                placeholder="Password"
                value={formData.password}
                onChange={(e) => setFormData({ ...formData, password: e.target.value })}
              />
            </div>
          </div>

          <div className="flex items-center justify-between">
            <div className="flex items-center">
              <input
                id="remember-me"
                name="remember-me"
                type="checkbox"
                className="h-4 w-4 text-pink-600 focus:ring-pink-500 border-gray-300 rounded"
              />
              <label htmlFor="remember-me" className="ml-2 block text-sm text-gray-900">
                Remember me
              </label>
            </div>
            
            <div className="text-sm">
              <Link to="/forgot-password" className="font-medium text-pink-600 hover:text-pink-500">
                Forgot password?
              </Link>
            </div>
          </div>

          <div>
            <button 
              type="submit" 
              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-full text-white bg-pink-600 hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500"
            >
              Sign in
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default SignIn;