import { useState, useCallback } from "react";
import { Outlet, Navigate, useLocation } from "react-router-dom";
import { motion } from "framer-motion";
import { useAuth } from "../context/AuthContext";
import { useTheme } from "../../context/ThemeContext";
import { setLogoutAlert } from "../utils/api";
import useModalLock from "../hooks/useModalLock";
import Sidebar from "./Sidebar";
import ShortcutsHelp from "./ShortcutsHelp";

export default function AdminLayout() {
  const { isAuthenticated, loading, user, logout } = useAuth();
  const { theme, toggleTheme } = useTheme();
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [loggingOut, setLoggingOut] = useState(false);
  const location = useLocation();

  // Session is managed by AuthProvider (initial check + proactive refresh via setTimeout).
  // Do not call checkSession on route changes — concurrent refresh calls with token rotation
  // would invalidate each other and kick the user out.

  const handleLogout = useCallback(() => {
    setLoggingOut(true);
    setSidebarOpen(false);
    setLogoutAlert();
    setTimeout(() => logout(), 400);
  }, [logout]);

  useModalLock(sidebarOpen);

  if (loading) {
    return (
      <div className="admin-layout">
        <div className="admin-loading" style={{ width: "100%" }}>
          <div className="admin-spinner" />
        </div>
      </div>
    );
  }

  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }

  // If 2FA is required but user hasn't enabled it, redirect to dashboard (where setup lives)
  const needs2FASetup = user?.require2FA && !user?.totpEnabled;
  if (needs2FASetup && location.pathname !== "/") {
    return <Navigate to="/" replace />;
  }

  return (
    <motion.div
      className="admin-layout"
      initial={{ opacity: 0, scale: 0.98 }}
      animate={
        loggingOut
          ? { scale: 1.5, opacity: 0, filter: "blur(12px)" }
          : { scale: 1, opacity: 1, filter: "none" }
      }
      transition={{ duration: loggingOut ? 0.4 : 0.25, ease: [0.4, 0, 0.2, 1] }}
    >
      <Sidebar
        isOpen={sidebarOpen}
        onClose={() => setSidebarOpen(false)}
        onLogout={handleLogout}
      />

      <div className="admin-main">
        <header className="admin-header">
          <button
            onClick={() => setSidebarOpen(true)}
            className="admin-menu-btn"
            aria-label="Otevřít menu"
          >
            <svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
            >
              <line x1="3" y1="12" x2="21" y2="12" />
              <line x1="3" y1="6" x2="21" y2="6" />
              <line x1="3" y1="18" x2="21" y2="18" />
            </svg>
          </button>

          <div className="flex-1" />

          <button
            onClick={toggleTheme}
            className="admin-header-theme-btn"
            title={theme === "dark" ? "Světlý režim" : "Tmavý režim"}
            aria-label={theme === "dark" ? "Světlý režim" : "Tmavý režim"}
          >
            <span
              className={`admin-theme-icon ${theme === "light" ? "visible" : ""}`}
            >
              <svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
              >
                <circle cx="12" cy="12" r="5" />
                <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
              </svg>
            </span>
            <span
              className={`admin-theme-icon ${theme === "dark" ? "visible" : ""}`}
            >
              <svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
              >
                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
              </svg>
            </span>
          </button>
        </header>

        <main className="admin-content">
          <Outlet />
        </main>
      </div>
      <ShortcutsHelp />
    </motion.div>
  );
}
