import Image from "next/image";
import { redirect } from "next/navigation";

import { LoginForm } from "@/components/admin/auth/LoginForm";
import { getCurrentUser } from "@/lib/auth";
import { isAdminRole } from "@/lib/session";

export default async function AdminLoginPage({
  searchParams,
}: {
  searchParams: Promise<{ next?: string }>;
}) {
  const [{ next }, currentUser] = await Promise.all([
    searchParams,
    getCurrentUser(),
  ]);

  if (currentUser && isAdminRole(currentUser.role)) {
    redirect("/admin");
  }

  return (
    <div className="min-h-screen bg-[#07101e] lg:grid lg:grid-cols-[1fr_480px] xl:grid-cols-[1fr_520px]">

      {/* ── Left decorative panel ───────────────────────────────── */}
      <div className="relative hidden overflow-hidden lg:flex lg:flex-col lg:justify-between lg:p-12 xl:p-16">
        {/* Background layers */}
        <div className="absolute inset-0 bg-[linear-gradient(135deg,#07101e_0%,#0f1c32_55%,#1a1008_100%)]" />
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_60%_at_20%_80%,rgba(194,65,12,0.18),transparent)]" />
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_50%_40%_at_80%_20%,rgba(194,65,12,0.07),transparent)]" />

        {/* Dot grid */}
        <div
          className="absolute inset-0 opacity-[0.055]"
          style={{
            backgroundImage: "radial-gradient(circle, #c2410c 1px, transparent 1px)",
            backgroundSize: "28px 28px",
          }}
        />

        {/* Orange accent bar at top */}
        <div className="absolute inset-x-0 top-0 h-[3px] bg-gradient-to-r from-transparent via-[#c2410c] to-transparent opacity-70" />

        {/* Logo */}
        <div className="relative z-10">
          <Image
            src="/images/biznisportal-logo-dark.png"
            alt="BiznisPortal"
            width={880}
            height={150}
            className="h-10 w-auto max-w-[15rem]"
            priority
          />
        </div>

        {/* Center content */}
        <div className="relative z-10 my-auto">
          <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/6 px-4 py-2">
            <span className="h-2 w-2 rounded-full bg-[#c2410c]" />
            <span className="text-xs font-semibold uppercase tracking-[0.18em] text-white/60">
              Admin pristup
            </span>
          </div>
          <h1 className="font-display text-[clamp(2rem,3.5vw,3.2rem)] font-semibold leading-[1.1] tracking-[-0.03em] text-white">
            Upravljajte portalom<br />
            <span className="text-[#c2410c]">na jednom mestu.</span>
          </h1>
          <p className="mt-5 max-w-md text-base leading-7 text-white/52">
            Dashboard, profili, recenzije, prijave, oglasi i podešavanja — sve što je potrebno za vođenje #1 poslovnog portala Srbije.
          </p>

          {/* Feature pills */}
          <div className="mt-8 flex flex-wrap gap-2.5">
            {[
              "Profili kompanija",
              "Oglasi i nekretnine",
              "Recenzije",
              "Prijave",
              "Analitika",
            ].map((item) => (
              <span
                key={item}
                className="rounded-full border border-white/10 bg-white/6 px-3.5 py-1.5 text-sm text-white/60"
              >
                {item}
              </span>
            ))}
          </div>
        </div>

        {/* Bottom note */}
        <div className="relative z-10 flex items-center gap-3">
          <div className="h-px flex-1 bg-white/8" />
          <p className="text-xs text-white/28">BiznisPortal.rs · Interni sistem</p>
          <div className="h-px flex-1 bg-white/8" />
        </div>
      </div>

      {/* ── Right login panel ───────────────────────────────────── */}
      <div className="flex min-h-screen flex-col items-center justify-center bg-[#0c1828] px-6 py-12 sm:px-10 lg:border-l lg:border-white/6">

        {/* Mobile logo */}
        <div className="mb-10 lg:hidden">
          <Image
            src="/images/biznisportal-logo-dark.png"
            alt="BiznisPortal"
            width={880}
            height={150}
            className="h-9 w-auto max-w-[13rem]"
            priority
          />
        </div>

        <div className="w-full max-w-[400px]">
          {/* Lock icon */}
          <div className="mb-6 flex h-14 w-14 items-center justify-center rounded-2xl border border-white/10 bg-white/6">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#c2410c" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
              <path d="M7 11V7a5 5 0 0 1 10 0v4" />
            </svg>
          </div>

          <h2 className="font-display text-[1.85rem] font-semibold tracking-[-0.03em] text-white">
            Prijava
          </h2>
          <p className="mt-2 text-sm leading-6 text-white/46">
            Pristup imaju samo ovlašćeni administratori i moderatori portala.
          </p>

          <div className="mt-8">
            <LoginForm next={next} />
          </div>
        </div>
      </div>
    </div>
  );
}