"use client";

import { useEffect, useState } from "react";

export default function Login() {
  const [usuario, setUsuario] =
    useState("");

  const [password, setPassword] =
    useState("");

  const [
    mostrarPassword,
    setMostrarPassword,
  ] = useState(false);

  const [
    recordarDatos,
    setRecordarDatos,
  ] = useState(true);

  const [
    errorMessage,
    setErrorMessage,
  ] = useState("");

  const [
    loading,
    setLoading,
  ] = useState(false);

  useEffect(() => {
    const usuarioGuardado =
      localStorage.getItem(
        "dg_cargo_usuario"
      );

    const passwordGuardada =
      localStorage.getItem(
        "dg_cargo_password"
      );

    if (usuarioGuardado) {
      setUsuario(
        usuarioGuardado
      );
    }

    if (passwordGuardada) {
      setPassword(
        passwordGuardada
      );

      setRecordarDatos(true);
    }
  }, []);

  const login = async (
    e: React.FormEvent
  ) => {
    e.preventDefault();

    setErrorMessage("");

    if (
      !usuario.trim() ||
      !password
    ) {
      setErrorMessage(
        "Ingrese su usuario y contraseña."
      );

      return;
    }

    try {
      setLoading(true);

      const response =
        await fetch(
          "/api/login",
          {
            method: "POST",

            headers: {
              "Content-Type":
                "application/json",
            },

            credentials:
              "include",

            body: JSON.stringify({
              usuario:
                usuario.trim(),

              password,
            }),
          }
        );

      const texto =
        await response.text();

      let data: any;

      try {
        data =
          JSON.parse(texto);
      } catch {
        setErrorMessage(
          "El servidor no devolvió una respuesta válida."
        );

        return;
      }

      if (!response.ok) {
        setErrorMessage(
          data.error ||
            "Usuario o contraseña incorrectos."
        );

        return;
      }

      if (!data.success) {
        setErrorMessage(
          data.error ||
            "No se pudo iniciar sesión."
        );

        return;
      }

      /*
      =================================
      RECORDAR DATOS
      =================================
      */

      if (recordarDatos) {
        localStorage.setItem(
          "dg_cargo_usuario",
          usuario.trim()
        );

        localStorage.setItem(
          "dg_cargo_password",
          password
        );
      } else {
        localStorage.removeItem(
          "dg_cargo_usuario"
        );

        localStorage.removeItem(
          "dg_cargo_password"
        );
      }

      /*
      =================================
      REDIRECCIÓN
      ADMIN Y DD → /dashboard
      ENTREGAS → /escaneo
      =================================
      */

      if (
        typeof data.redirect ===
        "string"
      ) {
        window.location.href =
          data.redirect;

        return;
      }

      setErrorMessage(
        "No se encontró una ruta para este usuario."
      );

    } catch (error) {
      console.error(
        "ERROR DE LOGIN:",
        error
      );

      setErrorMessage(
        "No se pudo iniciar sesión. Intente nuevamente."
      );

    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-[#020617] p-4">

      <div className="w-full max-w-md rounded-3xl border border-slate-800 bg-slate-900 p-8 shadow-2xl md:p-12">

        <div className="text-center">

          <div className="text-5xl">
            📦
          </div>

          <h1 className="mt-4 text-3xl font-bold text-white md:text-4xl">
            D&amp;G Cargo Logistics
          </h1>

          <p className="mt-3 text-slate-400">
            Sistema de Administración
          </p>

        </div>

        <form
          onSubmit={login}
          className="mt-10 space-y-5"
        >

          <div>

            <label className="mb-2 block text-sm font-medium text-slate-300">
              Usuario
            </label>

            <input
              type="text"

              value={usuario}

              onChange={(e) =>
                setUsuario(
                  e.target.value
                )
              }

              placeholder="usuario@dgcargo.com"

              autoComplete="username"

              disabled={loading}

              className="w-full rounded-xl border border-slate-700 bg-slate-950 px-4 py-3 text-white outline-none transition focus:border-orange-500 disabled:opacity-60"
            />

          </div>

          <div>

            <label className="mb-2 block text-sm font-medium text-slate-300">
              Contraseña
            </label>

            <div className="relative">

              <input
                type={
                  mostrarPassword
                    ? "text"
                    : "password"
                }

                value={password}

                onChange={(e) =>
                  setPassword(
                    e.target.value
                  )
                }

                placeholder="Ingrese su contraseña"

                autoComplete="current-password"

                disabled={loading}

                className="w-full rounded-xl border border-slate-700 bg-slate-950 px-4 py-3 pr-14 text-white outline-none transition focus:border-orange-500 disabled:opacity-60"
              />

              <button
                type="button"

                onClick={() =>
                  setMostrarPassword(
                    !mostrarPassword
                  )
                }

                className="absolute right-4 top-1/2 -translate-y-1/2 text-lg"
              >
                {mostrarPassword
                  ? "🙈"
                  : "👁️"}
              </button>

            </div>

            <button
              type="button"

              onClick={() =>
                setMostrarPassword(
                  !mostrarPassword
                )
              }

              className="mt-2 text-sm text-slate-400 hover:text-orange-400"
            >
              {mostrarPassword
                ? "Ocultar contraseña"
                : "Ver contraseña"}
            </button>

          </div>

          <label className="flex cursor-pointer items-center gap-3">

            <input
              type="checkbox"

              checked={recordarDatos}

              onChange={(e) =>
                setRecordarDatos(
                  e.target.checked
                )
              }

              className="h-4 w-4 accent-orange-500"
            />

            <span className="text-sm text-slate-400">
              Recordar usuario y contraseña
            </span>

          </label>

          {errorMessage && (

            <div className="rounded-xl border border-red-500/30 bg-red-500/10 p-3 text-sm text-red-400">

              {errorMessage}

            </div>

          )}

          <button
            type="submit"

            disabled={loading}

            className="w-full rounded-xl bg-orange-500 py-4 font-semibold text-white transition hover:bg-orange-600 disabled:cursor-not-allowed disabled:opacity-50"
          >

            {loading
              ? "Iniciando sesión..."
              : "🔐 INICIAR SESIÓN"}

          </button>

        </form>

        <p className="mt-8 text-center text-xs text-slate-500">
          D&amp;G Cargo Logistics
        </p>

      </div>

    </div>
  );
}