import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { useAuth } from "../hooks/useAuth.js";

export const Login = (): React.ReactElement => {
  const { user, loading } = useAuth();
  const navigate = useNavigate();

  useEffect(() => {
    if (!loading && user) {
      navigate("/admin");
    }
  }, [user, loading, navigate]);

  const error = new URLSearchParams(window.location.search).get("error");

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        minHeight: "100vh",
      }}
    >
      <div
        style={{
          background: "#44275a",
          border: "1px solid #a8577e",
          borderRadius: 15,
          padding: 40,
          textAlign: "center",
          maxWidth: 360,
          width: "100%",
        }}
      >
        <h1 style={{ margin: "0 0 8px", fontSize: 28, color: "#d4a5c7" }}>Oriana</h1>
        <p style={{ color: "#c0c0c0", margin: "0 0 24px", fontSize: 14 }}>
          Admin access via Discord
        </p>
        {error === "unauthorised" && (
          <div
            style={{
              background: "#0a0009",
              border: "1px solid #f87171",
              borderRadius: 8,
              padding: "10px 14px",
              color: "#f87171",
              fontSize: 13,
              marginBottom: 16,
            }}
          >
            Your Discord account is not authorised to access this dashboard.
          </div>
        )}
        <a
          href="/auth/discord"
          style={{
            display: "inline-block",
            background: "#5865f2",
            color: "#fff",
            padding: "12px 24px",
            borderRadius: 8,
            textDecoration: "none",
            fontWeight: 600,
            fontSize: 15,
            transition: "opacity 0.3s ease",
          }}
        >
          Sign in with Discord
        </a>
        <div style={{ marginTop: 20 }}>
          <a href="/" style={{ fontSize: 13, color: "#d4a5c7" }}>
            ← Back to status page
          </a>
        </div>
      </div>
    </div>
  );
};