"use client";

import React, { useState, useCallback } from "react";
import { Sidebar } from "./Sidebar";
import { Topbar } from "./Topbar";
import { MobileDrawer } from "./MobileDrawer";
import { TopProgressBar } from "./TopProgressBar";
import { useAuth } from "@/context/AuthContext";
import { ArrowLeftRight, RefreshCw } from "lucide-react";

interface AppShellProps {
  children: React.ReactNode;
}

const AppShellComponent: React.FC<AppShellProps> = ({ children }) => {
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
  const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false);
  const [isReverting, setIsReverting] = useState(false);

  const { user, isImpersonating, stopImpersonating } = useAuth();

  const handleToggleSidebar = useCallback(() => {
    setSidebarCollapsed((prev) => !prev);
  }, []);

  const handleOpenDrawer = useCallback(() => {
    setMobileDrawerOpen(true);
  }, []);

  const handleCloseDrawer = useCallback(() => {
    setMobileDrawerOpen(false);
  }, []);

  const handleRevert = async () => {
    setIsReverting(true);
    try {
      await stopImpersonating();
    } catch (err) {
      console.error("Gagal kembali ke Super Admin:", err);
      setIsReverting(false);
    }
  };

  return (
    <div className="min-h-screen bg-slate-50 text-brand-text font-sans antialiased selection:bg-blue-100 selection:text-brand-blue print:bg-white print:overflow-visible print:block print:min-h-0 print:m-0 print:p-0 flex flex-col">
      {/* 1. STICKY TOP NOTICE BAR (IMPERSONATION MODE) */}
      {isImpersonating && user && (
        <aside
          aria-label="Mode Switch User Aktif"
          className="sticky top-0 z-50 w-full bg-gradient-to-r from-amber-500 via-amber-600 to-amber-500 text-white shadow-md border-b border-amber-600 print:hidden"
        >
          <div className="max-w-7xl mx-auto px-4 py-2 sm:px-6 flex flex-wrap items-center justify-between gap-3 text-xs sm:text-sm font-medium">
            <div className="flex items-center gap-2.5 min-w-0">
              <span className="flex h-2.5 w-2.5 rounded-full bg-white animate-pulse shrink-0" />
              <span className="truncate">
                Saat ini Anda sedang mengakses aplikasi sebagai:{" "}
                <strong className="font-bold underline decoration-white/70 underline-offset-2">
                  {user.name}
                </strong>{" "}
                <span className="bg-amber-700/70 text-white text-[11px] px-2 py-0.5 rounded-full font-semibold border border-amber-400/40 ml-1">
                  {user.role}
                </span>
              </span>
            </div>
            <button
              type="button"
              onClick={handleRevert}
              disabled={isReverting}
              className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-white text-amber-900 font-bold text-xs shadow-sm hover:bg-amber-50 active:scale-95 transition-all shrink-0 cursor-pointer disabled:opacity-75"
            >
              {isReverting ? (
                <RefreshCw className="w-3.5 h-3.5 animate-spin text-amber-700" />
              ) : (
                <ArrowLeftRight className="w-3.5 h-3.5 text-amber-700" />
              )}
              <span>Kembali ke Akun Super Admin</span>
            </button>
          </div>
        </aside>
      )}

      {/* 2. MAIN APPLICATION LAYOUT */}
      <div className="flex-1 flex min-h-0">
        <TopProgressBar />
        {/* Desktop Navy Sidebar - Sticky Full Height */}
        <Sidebar
          collapsed={sidebarCollapsed}
          onToggleCollapse={handleToggleSidebar}
        />

        {/* Mobile Drawer (Accessible off-canvas menu) */}
        <div className="print:hidden">
          <MobileDrawer
            isOpen={mobileDrawerOpen}
            onClose={handleCloseDrawer}
          />
        </div>

        {/* Main Content Area */}
        <div className="flex-1 flex flex-col min-w-0 bg-slate-50 print:block print:w-full print:p-0 print:m-0">
          <div className="print:hidden">
            <Topbar onOpenMobileDrawer={handleOpenDrawer} />
          </div>

          <main className="flex-1 min-w-0 p-4 sm:p-6 lg:p-6 overflow-x-auto print:p-0 print:m-0 print:max-w-none print:w-full print:block">
            {children}
          </main>
        </div>
      </div>
    </div>
  );
};

export const AppShell = React.memo(AppShellComponent);