"use client"

import { useEffect } from "react"
import { useRouter } from "next/navigation"
import { useLocale } from "next-intl"
import { Shield, AlertTriangle } from "lucide-react"
import Image from "next/image"

import { LoginForm } from "@/src/features/auth/login-form"
import { LocaleSwitcher } from "@/src/components/LocaleSwitcher"
import { hasValidAccessToken } from "@/src/lib/api/session"

const C = {
  navy:    "#0d1f4e",
  navy2:   "#1a3578",
  navy3:   "#2655b0",
  teal:    "#4dba96",
  tealDim: "rgba(77,186,150,0.18)",
  border:  "rgba(255,255,255,0.08)",
  text:    "rgba(255,255,255,0.85)",
  muted:   "rgba(255,255,255,0.40)",
  dim:     "rgba(255,255,255,0.12)",
}

export default function AdminLoginPage() {
  const router = useRouter()
  const locale = useLocale()

  // Si déjà connecté en superuser → rediriger vers /admin
  useEffect(() => {
    if (!hasValidAccessToken()) return
    try {
      const me = JSON.parse(localStorage.getItem("acx_me") ?? "null")
      if (me?.is_superuser) router.replace(`/${locale}/admin`)
    } catch {}
  }, [router, locale])

  return (
    <main
      className="min-h-[100dvh] w-full flex flex-col items-center justify-center px-4 py-12 relative overflow-hidden"
      style={{ background: `linear-gradient(160deg, ${C.navy} 0%, ${C.navy2} 60%, ${C.navy3} 100%)` }}
    >
      {/* Halos décoratifs */}
      <div className="pointer-events-none absolute inset-0 overflow-hidden">
        <div
          className="absolute -top-40 -right-40 h-[600px] w-[600px] rounded-full opacity-[0.08]"
          style={{ background: `radial-gradient(circle, ${C.teal}, transparent 65%)` }}
        />
        <div
          className="absolute -bottom-32 -left-32 h-[400px] w-[400px] rounded-full opacity-[0.06]"
          style={{ background: `radial-gradient(circle, ${C.teal}, transparent 70%)` }}
        />
        {/* Grille de points */}
        <svg className="absolute inset-0 h-full w-full opacity-[0.04]" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <pattern id="adm-dots" x="0" y="0" width="28" height="28" patternUnits="userSpaceOnUse">
              <circle cx="2" cy="2" r="1.5" fill="white" />
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#adm-dots)" />
        </svg>
      </div>

      {/* Barre supérieure */}
      <div className="absolute top-0 left-0 right-0 flex items-center justify-between px-6 py-4">
        <div className="flex items-center gap-2">
          <div
            className="flex h-7 w-7 items-center justify-center rounded-lg ring-1"
            style={{ background: C.tealDim, borderColor: "rgba(77,186,150,0.30)" }}
          >
            <Shield className="h-3.5 w-3.5" style={{ color: C.teal }} />
          </div>
          <span className="text-[11px] font-semibold uppercase tracking-widest" style={{ color: C.muted }}>
            Administration ACX
          </span>
        </div>
        <div className="[&_select]:border-white/15 [&_select]:bg-white/8 [&_select]:text-white/70 [&_select]:text-xs [&_option]:text-slate-900">
          <LocaleSwitcher />
        </div>
      </div>

      {/* Carte centrale */}
      <div
        className="relative w-full max-w-[400px] rounded-3xl p-8 shadow-2xl ring-1"
        style={{ background: "rgba(255,255,255,0.04)", borderColor: C.border, backdropFilter: "blur(12px)" }}
      >
        {/* Logo */}
        <div className="flex justify-center mb-8">
          <div
            className="overflow-hidden rounded-2xl ring-1"
            style={{ width: 160, height: 60, borderColor: "rgba(255,255,255,0.10)", background: "rgba(255,255,255,0.06)" }}
          >
            <Image
              src="/logo-acx.png"
              alt="ACX"
              width={160}
              height={60}
              priority
              className="h-full w-full object-contain p-2"
              style={{ filter: "brightness(0) invert(1) opacity(0.85)" }}
            />
          </div>
        </div>

        {/* Titre */}
        <div className="mb-8 text-center">
          <div
            className="inline-flex items-center gap-1.5 rounded-full px-3 py-1 mb-4 ring-1 text-[10px] font-bold uppercase tracking-widest"
            style={{ background: C.tealDim, borderColor: "rgba(77,186,150,0.28)", color: C.teal }}
          >
            <span className="h-1.5 w-1.5 rounded-full animate-pulse" style={{ backgroundColor: C.teal }} />
            Espace restreint
          </div>
          <h1 className="text-2xl font-bold tracking-tight" style={{ color: C.text }}>
            Super Administrateur
          </h1>
          <p className="mt-2 text-sm" style={{ color: C.muted }}>
            Accès réservé au personnel autorisé ACX
          </p>
        </div>

        {/* Avertissement */}
        <div
          className="mb-6 flex items-start gap-3 rounded-2xl px-4 py-3 ring-1"
          style={{ background: "rgba(245,158,11,0.07)", borderColor: "rgba(245,158,11,0.20)" }}
        >
          <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" style={{ color: "#f59e0b" }} />
          <p className="text-xs leading-relaxed" style={{ color: "rgba(245,158,11,0.90)" }}>
            Cet espace est réservé aux super-administrateurs de la plateforme ACX. Toute tentative d'accès non autorisée est enregistrée.
          </p>
        </div>

        {/* Formulaire (mode admin, thème dark) */}
        <LoginForm mode="admin" theme="dark" />

        {/* Lien vers login tenant */}
        <div className="mt-6 text-center">
          <a
            href="https://app.acx-acremac.net"
            className="text-[12px] transition hover:underline underline-offset-2"
            style={{ color: C.muted }}
          >
            ← Espace agent / tenant
          </a>
        </div>
      </div>

      {/* Footer */}
      <p className="absolute bottom-4 text-[10px]" style={{ color: C.muted }}>
        © {new Date().getFullYear()} ACREMAC — Tous droits réservés · Accès journalisé
      </p>
    </main>
  )
}