"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="relative flex min-h-screen items-center justify-center overflow-hidden bg-[#07111f] px-4 py-8 text-white">
      <div className="pointer-events-none absolute inset-0">
        <div className="absolute left-[-8%] top-[-12%] h-[26rem] w-[26rem] rounded-full bg-cyan-400/14 blur-3xl" />
        <div className="absolute bottom-[-10%] right-[-6%] h-[24rem] w-[24rem] rounded-full bg-emerald-400/16 blur-3xl" />
        <div className="absolute left-[14%] top-[18%] h-[18rem] w-[18rem] rounded-full bg-sky-500/10 blur-[120px]" />
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(74,222,128,0.05),transparent_24%),linear-gradient(180deg,rgba(6,11,26,0.68),rgba(7,17,31,0.94))]" />
        <div
          className="absolute inset-0 opacity-[0.14]"
          style={{
            backgroundImage:
              "linear-gradient(rgba(143,207,255,0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(143,207,255,0.16) 1px, transparent 1px)",
            backgroundSize: "36px 36px",
            maskImage: "linear-gradient(180deg, rgba(0,0,0,0.92), rgba(0,0,0,0.18))",
          }}
        />
      </div>

      <div className="relative z-10 grid w-full max-w-5xl items-stretch gap-6 lg:grid-cols-[1.15fr_minmax(0,420px)]">
        <section className="hidden rounded-[2.25rem] border border-emerald-300/20 bg-white/5 p-8 shadow-[0_0_0_1px_rgba(110,255,170,0.12),0_0_18px_rgba(74,222,128,0.12),0_24px_60px_rgba(2,8,23,0.52),inset_0_0_28px_rgba(74,222,128,0.04)] backdrop-blur-2xl lg:flex lg:flex-col lg:justify-between">
          <div>
            <div className="w-fit rounded-full border border-cyan-300/20 bg-cyan-300/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.28em] text-cyan-100">
              SYSTEM DOSTĘPU
            </div>
            <div className="mt-6 w-[260px]">
              <img
                src="/VISAU-LOGO.png"
                alt="VISAU"
                className="block h-auto w-[240px]"
              />
              <div className="mt-2 flex w-[240px] justify-between whitespace-nowrap pl-1 text-[0.92rem] font-medium uppercase leading-none text-sky">
                {"AUTOTRACKING".split("").map((letter, index) => (
                  <span key={`${letter}-${index}`}>{letter}</span>
                ))}
              </div>
            </div>
            <div className="mt-10 max-w-xl space-y-4">
              <p className="text-2xl font-semibold tracking-[0.02em] text-white">
                Panel logowania do monitoringu floty, historii przejazdów i zarządzania dostępem.
              </p>
              <p className="text-sm leading-7 text-slate-300">
                Ten ekran korzysta z tej samej estetyki co pulpit live: ciemne szkło, mintowy glow i techniczny układ z naciskiem na czytelność.
              </p>
            </div>
          </div>
          <div className="mt-10 grid gap-4 sm:grid-cols-3">
            {[
              ["LIVE", "Podgląd pozycji i stanów urządzeń w czasie rzeczywistym."],
              ["HISTORIA", "Odtwarzanie tras i analiza przejazdów na osi czasu."],
              ["DOSTĘP", "Role operatorów, uprawnienia i kontrola danych pojazdów."],
            ].map(([title, description]) => (
              <div
                key={title}
                className="rounded-[1.4rem] border border-emerald-300/16 bg-slate-950/30 p-4 shadow-[inset_0_0_20px_rgba(74,222,128,0.04)]"
              >
                <div className="text-[11px] font-semibold uppercase tracking-[0.28em] text-emerald-300">{title}</div>
                <p className="mt-3 text-xs leading-6 text-slate-300">{description}</p>
              </div>
            ))}
          </div>
        </section>

        <section className="rounded-[2.25rem] border border-emerald-300/30 bg-[rgba(7,13,28,0.88)] p-6 shadow-[0_0_0_1px_rgba(110,255,170,0.16),0_0_18px_rgba(74,222,128,0.16),0_0_32px_rgba(74,222,128,0.08),0_26px_60px_rgba(2,8,23,0.58),inset_0_0_32px_rgba(74,222,128,0.04)] backdrop-blur-2xl sm:p-8">
          <div className="mb-8">
            <p className="text-[11px] font-semibold uppercase tracking-[0.34em] text-cyan-200">TRACKER ACCESS</p>
            <h1 className="mt-4 text-3xl font-bold tracking-[0.01em] text-white sm:text-[2.2rem]">Logowanie operatora</h1>
            <p className="mt-3 text-sm leading-6 text-slate-300">
              Zaloguj się do panelu live, historii pojazdów i ustawień systemu.
            </p>
          </div>
          <form className="space-y-4" onSubmit={onSubmit}>
            <label className="block">
              <span className="mb-2 block text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200">Email</span>
              <input
                value={email}
                onChange={(event) => setEmail(event.target.value)}
                type="email"
                className="w-full rounded-2xl border border-cyan-300/18 bg-white/6 px-4 py-3 text-white outline-none transition placeholder:text-slate-500 focus:border-cyan-300/45 focus:bg-white/8 focus:shadow-[0_0_0_1px_rgba(103,232,249,0.14),0_0_18px_rgba(34,211,238,0.12)]"
                placeholder="operator@visau.pl"
                required
              />
            </label>
            <label className="block">
              <span className="mb-2 block text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200">Hasło</span>
              <input
                value={password}
                onChange={(event) => setPassword(event.target.value)}
                type="password"
                className="w-full rounded-2xl border border-cyan-300/18 bg-white/6 px-4 py-3 text-white outline-none transition placeholder:text-slate-500 focus:border-cyan-300/45 focus:bg-white/8 focus:shadow-[0_0_0_1px_rgba(103,232,249,0.14),0_0_18px_rgba(34,211,238,0.12)]"
                placeholder="Hasło dostępu"
                required
              />
            </label>
            {error ? (
              <div className="rounded-2xl border border-rose-300/25 bg-rose-400/10 px-4 py-3 text-sm text-rose-200 shadow-[0_0_18px_rgba(251,113,133,0.14)]">
                {error}
              </div>
            ) : null}
            <button
              type="submit"
              disabled={loading}
              className="w-full rounded-2xl border border-emerald-300/30 bg-emerald-400/16 px-4 py-3 font-semibold uppercase tracking-[0.16em] text-white shadow-[0_0_0_1px_rgba(74,222,128,0.18),0_0_20px_rgba(74,222,128,0.16),inset_0_0_16px_rgba(74,222,128,0.08)] transition hover:bg-emerald-400/22 disabled:cursor-not-allowed disabled:opacity-60"
            >
              {loading ? "Logowanie..." : "Zaloguj"}
            </button>
          </form>
        </section>
      </div>
    </main>
  );
}