"use client";

import { useEffect, useState } from "react";
import { Menu } from "lucide-react";
import { Sidebar } from "@/components/layout/Sidebar";
import { UtilityControls } from "@/components/layout/UtilityControls";
import { useI18n } from "@/lib/i18n/useI18n";

export function AppShell({
  children,
  initialTheme,
}: {
  children: React.ReactNode;
  initialTheme?: "dark" | "light";
}) {
  const { t } = useI18n();
  const [drawerOpen, setDrawerOpen] = useState(false);

  useEffect(() => {
    if (!drawerOpen) return;
    const onKey = (event: KeyboardEvent) => {
      if (event.key === "Escape") setDrawerOpen(false);
    };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [drawerOpen]);

  return (
    <div className="h-screen overflow-hidden bg-black text-white">
      <div className="flex h-full">
        <Sidebar />
        <div className="flex h-full flex-1 flex-col">
          <header className="sticky top-0 z-30 flex min-h-[3.5rem] flex-wrap items-center justify-between gap-3 border-b border-white/10 bg-black/20 px-4 py-2 backdrop-blur">
            <div className="flex items-center gap-3">
              <button
                type="button"
                onClick={() => setDrawerOpen(true)}
                aria-label={t("common.openMenu")}
                className="md:hidden rounded-lg border border-white/10 bg-white/5 p-2 text-zinc-300 hover:bg-white/10 hover:text-white"
              >
                <Menu className="h-4 w-4" />
              </button>
              <div className="text-sm font-semibold tracking-wide md:hidden">
                {t("sidebar.productTitle")}
              </div>
            </div>
            <UtilityControls initialTheme={initialTheme} />
          </header>
          <main className="flex-1 overflow-y-auto">{children}</main>
        </div>
      </div>

      {drawerOpen && (
        <div className="fixed inset-0 z-40 md:hidden" role="dialog" aria-modal="true">
          <button
            type="button"
            className="absolute inset-0 bg-black/70"
            aria-label={t("common.close")}
            onClick={() => setDrawerOpen(false)}
          />
          <div className="absolute inset-y-0 left-0 flex w-72 max-w-[85vw] flex-col bg-black/40">
            <Sidebar variant="drawer" onNavigate={() => setDrawerOpen(false)} onClose={() => setDrawerOpen(false)} />
          </div>
        </div>
      )}
    </div>
  );
}