import { useState } from "react";
import { auth } from "../api";
import type { UserInfo } from "../types";
import "./LoginModal.css";
import { FaDiscord } from "react-icons/fa6";

interface Props {
  onClose: () => void;
  onLogin: (user: UserInfo) => void;
}

type Tab = "login" | "register";

export default function LoginModal({ onClose, onLogin }: Props) {
  const [tab, setTab] = useState<Tab>("login");
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [confirm, setConfirm] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);

    if (tab === "register" && password !== confirm) {
      setError("Passwords do not match");
      return;
    }

    setLoading(true);
    try {
      if (tab === "login") {
        await auth.loginLocal(username, password);
      } else {
        await auth.register(username, password);
      }
      // Cookie is now set server-side; fetch user info to update parent
      const user = await auth.me();
      if (user) {
        onLogin(user);
        onClose();
      } else {
        setError("Login succeeded but could not load user info.");
      }
    } catch (err: unknown) {
      const msg = err instanceof Error ? err.message : String(err);
      // Extract the human-readable part (strip leading status code)
      setError(
        msg
          .replace(/^\d+:\s*/, "")
          .replace(/\{.*\}/s, "")
          .trim() || "Authentication failed",
      );
    } finally {
      setLoading(false);
    }
  }

  async function handleDiscordLogin() {
    try {
      await auth.loginDiscord(window.location.origin + "/map");
    } catch (err) {
      console.error("Discord login failed:", err);
    }
  }

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Close">
          ✕
        </button>

        {/* Tab switcher */}
        <div className="modal-tabs">
          <button
            className={`modal-tab ${tab === "login" ? "active" : ""}`}
            onClick={() => {
              setTab("login");
              setError(null);
            }}
          >
            Log In
          </button>
          <button
            className={`modal-tab ${tab === "register" ? "active" : ""}`}
            onClick={() => {
              setTab("register");
              setError(null);
            }}
          >
            Register
          </button>
        </div>

        {/* Username / password form */}
        <form className="modal-form" onSubmit={handleSubmit}>
          <label>
            Username
            <input
              type="text"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              autoComplete="username"
              required
              minLength={3}
              maxLength={32}
            />
          </label>
          <label>
            Password
            <input
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              autoComplete={
                tab === "login" ? "current-password" : "new-password"
              }
              required
            />
          </label>
          {tab === "register" && (
            <label>
              Confirm Password
              <input
                type="password"
                value={confirm}
                onChange={(e) => setConfirm(e.target.value)}
                autoComplete="new-password"
                required
              />
            </label>
          )}

          {error && <p className="modal-error">{error}</p>}

          <button type="submit" className="btn-primary" disabled={loading}>
            {loading
              ? "Loading…"
              : tab === "login"
                ? "Log In"
                : "Create Account"}
          </button>
        </form>

        <div className="modal-divider">
          <span>or</span>
        </div>

        {/* Discord OAuth */}
        <button className="btn-discord" onClick={handleDiscordLogin}>
          <FaDiscord />
          Log In with Discord
        </button>
      </div>
    </div>
  );
}
