// BEGIN CHANGE: pagina de Login (POST /api/login.php)
"use client";

import { useEffect, useState, FormEvent } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useI18n } from "@/i18n/LanguageProvider";
import { useAuth } from "@/auth/AuthProvider";
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { apiUrl } from "@/lib/api";

export default function LoginPage() {
  const { t } = useI18n();
  const router = useRouter();
  const { ready, account, setSession } = useAuth();
  const [accountName, setAccountName] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  // BEGIN CHANGE: ja logado -> nao mostrar formulario, ir para /account
  useEffect(() => {
    if (ready && account) {
      router.replace("/account");
    }
  }, [ready, account, router]);
  // END CHANGE

  async function onSubmit(e: FormEvent) {
    e.preventDefault();
    setError("");
    setLoading(true);
    try {
      const res = await fetch(apiUrl("login.php"), {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ account: accountName, password }),
      });
      if (res.status === 401 || res.status === 400) {
        setError(t.auth.invalidLogin);
        return;
      }
      // BEGIN CHANGE: login rate limit + blocked account messages
      if (res.status === 429) {
        setError(t.auth.loginRateLimited);
        return;
      }
      if (res.status === 403) {
        setError(t.auth.accountBlocked);
        return;
      }
      // END CHANGE
      if (!res.ok) throw new Error("http " + res.status);
      const json = await res.json();
      setSession(json);
      window.location.href = "/account";
    } catch {
      setError(t.auth.genericError);
    } finally {
      setLoading(false);
    }
  }

  if (!ready || account) {
    return (
      <div className="flex min-h-screen flex-col">
        <Navbar />
        <main className="mx-auto w-full max-w-md flex-1 px-6 py-16">
          <p className="text-muted">{t.common.loading}</p>
        </main>
        <Footer />
      </div>
    );
  }

  return (
    <div className="flex min-h-screen flex-col">
      <Navbar />
      <main className="mx-auto w-full max-w-md flex-1 px-6 py-16">
        <h1 className="text-3xl font-semibold tracking-tight">{t.auth.loginTitle}</h1>
        <p className="mt-2 text-muted">{t.auth.loginSubtitle}</p>

        <form onSubmit={onSubmit} className="mt-8 space-y-4">
          <Field label={t.auth.account}>
            <input
              value={accountName}
              onChange={(e) => setAccountName(e.target.value)}
              autoCapitalize="off"
              autoCorrect="off"
              autoComplete="username"
              spellCheck={false}
              className="w-full rounded-lg border border-border bg-panel px-4 py-2 text-sm outline-none focus:border-brand/60"
            />
          </Field>
          <Field label={t.auth.password}>
            <input
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              autoCapitalize="off"
              autoCorrect="off"
              autoComplete="current-password"
              spellCheck={false}
              className="w-full rounded-lg border border-border bg-panel px-4 py-2 text-sm outline-none focus:border-brand/60"
            />
          </Field>

          {error && <p className="text-sm text-red-400">{error}</p>}

          <button
            type="submit"
            disabled={loading}
            className="w-full rounded-lg bg-brand px-5 py-2.5 text-sm font-medium text-background transition-opacity hover:opacity-90 disabled:opacity-60"
          >
            {loading ? t.common.loading : t.auth.loginBtn}
          </button>
        </form>

        <p className="mt-6 text-sm text-muted">
          {t.auth.noAccount}{" "}
          <Link href="/create-account" className="text-brand hover:underline">
            {t.auth.createNow}
          </Link>
        </p>
        <p className="mt-3 text-sm text-muted">
          <Link href="/lost-account" className="text-brand hover:underline">
            {t.auth.lostAccount}
          </Link>
        </p>
      </main>
      <Footer />
    </div>
  );
}

function Field({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <label className="block">
      <span className="mb-1.5 block text-sm text-muted">{label}</span>
      {children}
    </label>
  );
}
// END CHANGE