import { Button } from "@xtablo/ui/components/button";
import { MenuIcon, XIcon } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { Outlet, useLocation } from "react-router-dom";
import { twMerge } from "tailwind-merge";
import { useOrganization } from "../hooks/organization";
import { SideNavigation } from "./NavigationBar";
import { OnboardingModal } from "./OnboardingModal";
import { TopBar } from "./TopBar";

const ONBOARDING_STORAGE_KEY = "xtablo-onboarding-completed";

export function Layout() {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [showOnboarding, setShowOnboarding] = useState(false);
  const location = useLocation();
  const { data: organizationData } = useOrganization();

  useEffect(() => {
    const hasCompletedOnboarding = localStorage.getItem(ONBOARDING_STORAGE_KEY);
    const hasPaidPlan = Boolean(organizationData?.active_subscription_plan);

    if (!hasCompletedOnboarding && hasPaidPlan) {
      setShowOnboarding(true);
      return;
    }

    setShowOnboarding(false);
  }, [organizationData?.active_subscription_plan]);

  // Close mobile menu on route change
  useEffect(() => {
    setIsMobileMenuOpen(false);
  }, [location.pathname]);

  const handleOnboardingComplete = () => {
    localStorage.setItem(ONBOARDING_STORAGE_KEY, "true");
    setShowOnboarding(false);
  };

  const closeMobileMenu = useCallback(() => {
    setIsMobileMenuOpen(false);
  }, []);

  return (
    <div className="flex h-screen">
      <OnboardingModal open={showOnboarding} onComplete={handleOnboardingComplete} />

      {/* Mobile menu toggle button - 44px min touch target */}
      <Button
        variant="ghost"
        size="icon"
        className={twMerge(
          "fixed z-[60] md:hidden",
          "min-w-[44px] min-h-[44px] w-11 h-11",
          "top-2 left-2",
          "safe-area-inset-left"
        )}
        onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
        aria-label={isMobileMenuOpen ? "Close menu" : "Open menu"}
        aria-expanded={isMobileMenuOpen}
      >
        {isMobileMenuOpen ? <XIcon className="h-6 w-6" /> : <MenuIcon className="h-6 w-6" />}
      </Button>

      {/* Mobile backdrop overlay */}
      <div
        className={twMerge(
          "fixed inset-0 z-40 bg-black/50 md:hidden",
          "transition-opacity duration-300 ease-in-out",
          isMobileMenuOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
        )}
        onClick={closeMobileMenu}
        aria-hidden="true"
      />

      {/* Sidebar */}
      <div
        className={twMerge(
          "fixed md:relative z-50 h-full",
          "transition-transform duration-300 ease-in-out",
          "md:transition-none",
          isMobileMenuOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"
        )}
      >
        <SideNavigation isMobileMenuOpen={isMobileMenuOpen} />
      </div>

      <div className="flex flex-col flex-1 overflow-hidden">
        <TopBar />
        <main className="flex-1 overflow-auto">
          <Outlet />
        </main>
      </div>
    </div>
  );
}
