"use client";

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

import { loginRequest, saveSession } from "../../lib/api";

export default function LoginPage() {
  const router = useRouter();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setLoading(true);
    setError(null);

    try {
      const session = await loginRequest(email, password);
      saveSession(session);
      router.push("/dashboard");
    } catch (submitError) {
      setError(submitError instanceof Error ? submitError.message : "Login failed");
    } finally {
      setLoading(false);
    }
  };

  return (
    <main className="flex min-h-screen items-center justify-center px-4 py-8">
      <div className="panel w-full max-w-md rounded-[2rem] p-8 shadow-panel">
        <div className="mb-8">
          <p className="text-sm uppercase tracking-[0.3em] text-sky">TRACKER</p>
          <h1 className="mt-3 text-3xl font-bold text-ink">Logowanie operatora</h1>
          <p className="mt-2 text-sm text-steel">JWT auth dla panelu live i zarządzania pojazdami.</p>
        </div>
        <form className="space-y-4" onSubmit={onSubmit}>
          <label className="block">
            <span className="mb-2 block text-sm font-medium text-ink">Email</span>
            <input
              value={email}
              onChange={(event) => setEmail(event.target.value)}
              type="email"
              className="w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 outline-none transition focus:border-sky"
              required
            />
          </label>
          <label className="block">
            <span className="mb-2 block text-sm font-medium text-ink">Hasło</span>
            <input
              value={password}
              onChange={(event) => setPassword(event.target.value)}
              type="password"
              className="w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 outline-none transition focus:border-sky"
              required
            />
          </label>
          {error ? <div className="rounded-2xl bg-coral/10 px-4 py-3 text-sm text-coral">{error}</div> : null}
          <button
            type="submit"
            disabled={loading}
            className="w-full rounded-2xl bg-ink px-4 py-3 font-semibold text-white transition hover:bg-slate-800 disabled:cursor-not-allowed disabled:opacity-60"
          >
            {loading ? "Logowanie..." : "Zaloguj"}
          </button>
        </form>
      </div>
    </main>
  );
}