"use client"

import { useCallback } from "react"
import { useRouter, usePathname } from "next/navigation"
import { useLocale, useTranslations } from "next-intl"
import { Clock, RefreshCw, LogOut, AlertTriangle } from "lucide-react"
import { tokenStorage } from "@/src/lib/api/storage"
import { useSessionMonitor } from "@/src/hooks/use-session-monitor"
import { getLoginRoute } from "@/src/lib/auth/login-route"

const NAVY = "#1a3578"

function fmt(seconds: number): string {
  const m = Math.floor(seconds / 60)
  const s = seconds % 60
  if (m > 0) return `${m}m ${s.toString().padStart(2, "0")}s`
  return `${s}s`
}

export function SessionExpiryBanner() {
  const locale   = useLocale()
  const router   = useRouter()
  const pathname = usePathname()
  const t        = useTranslations("session")

  const isClientPortal = pathname?.includes("/client/")

  const onExpire = useCallback(() => {
    tokenStorage.clear()
    router.replace(getLoginRoute(locale, "expired"))
  }, [locale, router])

  const { state, secondsLeft, extend, extending } = useSessionMonitor(onExpire)

  // Ne rien afficher si session active, expirée (redirection en cours), ou portail client
  if (state !== "warning" || isClientPortal) return null

  const urgent = secondsLeft < 60   // moins d'une minute → rouge

  return (
    <div
      className="fixed inset-0 z-[99998] bg-black/30 backdrop-blur-[2px] flex items-center justify-center p-4"
      role="dialog" aria-modal="true" aria-live="polite"
    >
      <div className="w-full max-w-lg">
        <div
          className="flex items-start gap-4 rounded-2xl px-5 py-4 shadow-2xl ring-1"
          style={urgent
            ? { background: "rgba(254,242,242,0.97)", borderColor: "rgba(239,68,68,0.30)", boxShadow: "0 8px 32px rgba(239,68,68,0.18)" }
            : { background: "rgba(255,251,235,0.97)", borderColor: "rgba(245,158,11,0.30)", boxShadow: "0 8px 32px rgba(245,158,11,0.14)" }
          }
        >
          {/* Icône */}
          <div
            className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-xl"
            style={{ background: urgent ? "rgba(239,68,68,0.10)" : "rgba(245,158,11,0.10)" }}
          >
            {urgent
              ? <AlertTriangle className="h-4 w-4 text-red-500" />
              : <Clock className="h-4 w-4 text-amber-500" />
            }
          </div>

          {/* Texte */}
          <div className="flex-1 min-w-0">
            <p className="text-sm font-semibold" style={{ color: urgent ? "#dc2626" : "#92400e" }}>
              {t("warning_title")}
            </p>
            <p className="mt-0.5 text-xs leading-relaxed" style={{ color: urgent ? "#ef4444" : "#b45309" }}>
              {t("warning_body", { time: fmt(secondsLeft) })}
            </p>
          </div>

          {/* Actions */}
          <div className="flex shrink-0 flex-col gap-2 sm:flex-row sm:items-center">
            <button
              onClick={onExpire}
              className="rounded-xl border border-slate-200 bg-white px-3.5 py-2 text-xs font-medium text-slate-600 transition hover:bg-slate-50 active:scale-95"
            >
              {t("logout")}
            </button>
            <button
              onClick={extend}
              disabled={extending}
              className="flex items-center gap-1.5 rounded-xl px-3.5 py-2 text-xs font-semibold text-white transition active:scale-95 hover:opacity-90 disabled:opacity-70"
              style={{ background: `linear-gradient(135deg, ${NAVY} 0%, #2655b0 100%)` }}
            >
              <RefreshCw className={`h-3.5 w-3.5 ${extending ? "animate-spin" : ""}`} />
              {extending ? t("extending") : t("stay")}
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}