import React, { useState } from "react";
import Button from "../../../components/ui/Button";
import Input from "../../../components/ui/Input";
import "./LoginSection.css";
import { useAuth } from "../../../hooks/useAuth.js";

const LoginSection = () => {
  const { login, register, user } = useAuth();

  const [formData, setFormData] = useState({
    username: "",
    email: "",
    password: "",
  });
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }));
  };

  const handleLogin = async () => {
    setLoading(true);
    setError(null);
    const result = await login(formData.email, formData.password);
    if (!result?.success) {
      setError(result?.error || "Failed to login");
    }
    setLoading(false);
  };

  const handleRegister = async () => {
    if (!formData.username) {
      setError("Username is required for registration");
      return;
    }
    setLoading(true);
    setError(null);
    const result = await register(
      formData.username,
      formData.email,
      formData.password,
    );
    if (!result?.success) {
      setError(result?.error || "Failed to register");
    }
    setLoading(false);
  };

  if (user) {
    return (
      <div className="menu-section">
        <h2 className="menu-title">Welcome, {user.username}!</h2>
        <p>You are now connected to the API.</p>
        <Button variant="secondary" onClick={() => window.location.reload()}>
          Go to Game
        </Button>
      </div>
    );
  }

  return (
    <div id="loginSection" className="menu-section">
      <h2 className="access-title">Account Access</h2>

      <div className="login-form">
        {error && (
          <div
            className="error-message"
            style={{ color: "#ff4d4d", marginBottom: "10px" }}
          >
            {error}
          </div>
        )}

        <Input
          label="Username (for Register)"
          type="text"
          name="username"
          placeholder="Enter username"
          value={formData.username}
          onChange={handleChange}
        />

        <Input
          label="Email"
          type="email"
          name="email"
          placeholder="Enter your email"
          value={formData.email}
          onChange={handleChange}
        />

        <Input
          label="Password"
          type="password"
          name="password"
          placeholder="Enter your password"
          value={formData.password}
          onChange={handleChange}
        />

        <div className="login-options">
          <Button
            variant="primary"
            size="large"
            icon="fa-sign-in-alt"
            onClick={handleLogin}
            disabled={loading}
          >
            {loading ? "Processing..." : "Login"}
          </Button>

          <Button
            variant="secondary"
            size="large"
            icon="fa-user-plus"
            onClick={handleRegister}
            disabled={loading}
          >
            Register
          </Button>
        </div>
      </div>

      <div className="login-notice">
        <p>
          <i className="fas fa-info-circle"></i> Connect to the live server to
          play
        </p>
      </div>
    </div>
  );
};

export default LoginSection;
