"use client";

import { useState } from "react";
import Image from "next/image";
import { useRouter } from "next/navigation";
import { useSession } from "../lib/session";

function LoginForm({ next }: { next: string }) {
  const { login } = useSession();
  const router = useRouter();
  const [rut, setRut] = useState("");
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError(null);
    try {
      await login(rut.trim(), password);
      router.push(next.startsWith("/") ? next : "/");
      router.refresh();
    } catch (err) {
      setError(err instanceof Error ? err.message : "Error al ingresar");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="login-page">
      <div className="sidenav">
        <div className="login-main-text text-light text-center">
          <Image src="/logo-sam.png" alt="SAM" width={80} height={80} />
          <h1>Mis Pruebas</h1>
          <h3>Welcome | Bienvenido/a</h3>
          <h3>Rinde con tu RUT y clave</h3>
        </div>
      </div>

      <div className="main">
        <div className="row justify-content-center align-items-center" style={{ minHeight: "85vh" }}>
          <div className="col-md-12">
            <div className="row">
              <div className="col-md-2" />
              <div className="col-md-8">
                <div className="card alert alert-secondary">
                  <div className="card-body">
                    <form onSubmit={submit}>
                      <div className="row">
                        <div className="col-md-12 mb-3 text-center">
                          <strong>RUT | CLAVE</strong>
                        </div>
                        {error && (
                          <div className="col-md-12 mb-3">
                            <div className="alert alert-danger py-2 mb-0">{error}</div>
                          </div>
                        )}
                        <div className="col-md-3" />
                        <div className="col-md-6">
                          <input
                            type="text"
                            value={rut}
                            onChange={(e) => setRut(e.target.value)}
                            className="form-control shadow mb-2"
                            required
                            placeholder="RUT (ej. 12345678-9)"
                            autoComplete="username"
                          />
                          <input
                            type="password"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                            className="form-control shadow mb-2"
                            required
                            placeholder="Clave"
                            autoComplete="current-password"
                          />
                          <div className="d-grid">
                            <button type="submit" disabled={loading} className="btn btn-success btn-sm">
                              {loading ? <span className="spinner-border spinner-border-sm" /> : "Ingresar"}
                            </button>
                          </div>
                        </div>
                        <div className="col-md-3" />
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default async function Login({
  searchParams
}: {
  searchParams: Promise<{ next?: string }>;
}) {
  const sp = await searchParams;
  return <LoginForm next={sp?.next || "/"} />;
}