"use client";
import React, { useState } from 'react';
import { UserAuthForm } from '../components/user-auth-form';

const AuthenticationScreen = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const handleLogin = async () => {
    try {
      localStorage.setItem('authToken', 'dummy-token');
      setIsAuthenticated(true);
      alert('Login Successful');
    } catch (error) {
      console.error('Login error:', error);
      alert('Login Error');
    }
  };

  const handleLogout = async () => {
    try {
      localStorage.removeItem('authToken');
      setIsAuthenticated(false);
      alert('Logout Successful');
    } catch (error) {
      console.error('Logout error:', error);
      alert('Logout Error');
    }
  };

  return (
    <div className="auth-screen">
      <div className="auth-content">
        <button 
          className="auth-login-button" 
          onClick={isAuthenticated ? handleLogout : handleLogin}
        >
          {isAuthenticated ? 'Logout' : 'Login'}
        </button>

        <div className="auth-left-panel">
          <div className="auth-logo">
            <h1>Welcome to General Bots Online</h1>
          </div>
          <div className="auth-quote">
            <p>"Errar é Humano."</p>
            <p>General Bots</p>
          </div>
        </div>

        <div className="auth-form-container">
          <div className="auth-form-header">
            <h2>Create an account</h2>
            <p>Enter your email below to create your account</p>
          </div>
          
          <UserAuthForm />
          
          <p className="auth-terms">
            By clicking continue, you agree to our Terms of Service and Privacy Policy.
          </p>
        </div>
      </div>
    </div>
  );
};

export default AuthenticationScreen;