"use client";

import { Suspense, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";

function LoginForm() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const next = searchParams.get("next") || "/dashboard";

  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  // #region agent log
  function debugLog(hypothesisId: string, message: string, data: Record<string, unknown>) {
    fetch("http://localhost:7701/ingest/5073259c-ddcc-441a-a087-e13a2cf7ac9e", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-Debug-Session-Id": "ca90b5",
      },
      body: JSON.stringify({
        sessionId: "ca90b5",
        runId: "login-debug-01",
        hypothesisId,
        location: "frontend/app/tela_login/page.tsx:debugLog",
        message,
        data,
        timestamp: Date.now(),
      }),
    }).catch(() => {});
  }
  // #endregion

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError("");
    if (!username.trim() || !password.trim()) {
      setError("Informe usuário e senha.");
      return;
    }
    setLoading(true);
    try {
      // #region agent log
      debugLog("H4", "login_submit_start", {
        endpoint: "/api/api/auth/login/",
        next,
        usernameLength: username.trim().length,
      });
      // #endregion
      const res = await fetch("/api/api/auth/login/", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        credentials: "include",
        body: JSON.stringify({ username: username.trim(), password, next }),
      });
      const data = await res.json().catch(() => ({}));
      // #region agent log
      debugLog("H5", "login_submit_response_body", {
        status: res.status,
        ok: res.ok,
        success: (data as { success?: boolean }).success,
        hasSuccessKey: Object.prototype.hasOwnProperty.call(data, "success"),
        redirect: (data as { redirect?: string })?.redirect || null,
        message: (data as { message?: string })?.message || null,
      });
      debugLog("H1_H3", "login_submit_response", {
        status: res.status,
        ok: res.ok,
        redirect: (data as { redirect?: string })?.redirect || null,
        message: (data as { message?: string })?.message || null,
      });
      // #endregion
      if (!res.ok) {
        setError(data.message || "Erro ao autenticar. Tente novamente.");
        return;
      }
      if (data.success && data.redirect) {
        router.push(data.redirect);
      } else {
        router.push("/dashboard");
      }
    } catch {
      // #region agent log
      debugLog("H2", "login_submit_fetch_exception", {
        apiBaseHint: "proxied_by_next_api_route",
      });
      // #endregion
      setError("Erro de conexão. Verifique se o backend está rodando.");
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="flex w-full h-screen overflow-hidden">
      {/* Painel esquerdo - visual */}
      <div className="hidden md:flex flex-1 flex-col justify-center items-center text-white text-center p-8 bg-gradient-to-br from-[#1e3a8a] to-[#3b82f6] relative">
        <div className="absolute top-5 right-5 bg-white/15 backdrop-blur-sm py-1.5 px-3 rounded-full text-xs font-semibold tracking-wide border border-white/20">
          PROD
        </div>
        <h1 className="text-5xl font-bold mb-4 tracking-tight">SGMP</h1>
        <p className="text-xl opacity-90 max-w-md">
          Sistema de Gestão e Movimentações de Pessoas
        </p>
      </div>

      {/* Painel direito - formulário */}
      <div className="flex-1 flex justify-center items-center bg-white p-8">
        <div className="w-full max-w-md">
          <div className="mb-8">
            <h2 className="text-2xl font-semibold text-slate-800 mb-1">
              Bem-vindo
            </h2>
            <p className="text-slate-500">Insira suas credenciais para acessar.</p>
          </div>

          {error && (
            <div className="mb-6 p-3 rounded-lg bg-red-50 text-red-800 text-sm border border-red-200">
              {error}
            </div>
          )}

          <form onSubmit={handleSubmit} className="space-y-5">
            <div>
              <label
                htmlFor="username"
                className="block mb-2 font-medium text-slate-700 text-sm"
              >
                Usuário
              </label>
              <input
                id="username"
                type="text"
                name="username"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                placeholder="Matrícula Winthor"
                required
                autoFocus
                className="w-full px-4 py-3 border border-slate-200 rounded-lg text-base focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-colors"
              />
            </div>

            <div>
              <label
                htmlFor="password"
                className="block mb-2 font-medium text-slate-700 text-sm"
              >
                Senha
              </label>
              <input
                id="password"
                type="password"
                name="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="Senha Winthor"
                required
                className="w-full px-4 py-3 border border-slate-200 rounded-lg text-base focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-colors"
              />
            </div>

            <button
              type="submit"
              disabled={loading}
              className="w-full py-3.5 px-4 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 disabled:cursor-not-allowed text-white font-semibold rounded-lg text-base transition-colors"
            >
              {loading ? "Entrando…" : "Entrar"}
            </button>
          </form>

          <p className="mt-6 text-center text-sm text-slate-500">
            Use suas credenciais do Winthor (matrícula e senha).
          </p>
        </div>
      </div>
    </div>
  );
}

export default function TelaLoginPage() {
  return (
    <Suspense fallback={
      <div className="flex items-center justify-center min-h-screen bg-white">
        <p className="text-slate-500">Carregando…</p>
      </div>
    }>
      <LoginForm />
    </Suspense>
  );
}