"use client";
// src/components/layout/AppShell.tsx
import { useState, useEffect } from "react";
import { Sidebar } from "./Sidebar";
import { Topbar } from "./Topbar";
import { useLanguage } from "@/i18n/LanguageContext";
import { cn } from "@/lib/utils";

interface AppShellProps {
  children: React.ReactNode;
  breadcrumbs?: { label: string; href?: string }[];
}

export function AppShell({ children, breadcrumbs }: AppShellProps) {
  const [collapsed, setCollapsed] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const { isRTL } = useLanguage();

  // Persist sidebar state
  useEffect(() => {
    const saved = localStorage.getItem("sidebar_collapsed");
    if (saved !== null) setCollapsed(JSON.parse(saved));
  }, []);

  const toggleSidebar = () => {
    setCollapsed((prev) => {
      localStorage.setItem("sidebar_collapsed", JSON.stringify(!prev));
      return !prev;
    });
  };

  return (
    <div className="min-h-screen bg-background" dir={isRTL ? "rtl" : "ltr"}>
      {/* Desktop Sidebar */}
      <div className="hidden lg:block">
        <Sidebar collapsed={collapsed} onToggle={toggleSidebar} />
      </div>

      {/* Mobile Sidebar Overlay */}
      {mobileOpen && (
        <div className="lg:hidden">
          <div
            className="fixed inset-0 bg-black/50 z-30"
            onClick={() => setMobileOpen(false)}
          />
          <div className="fixed inset-y-0 left-0 z-40 w-[260px]">
            <Sidebar collapsed={false} onToggle={() => setMobileOpen(false)} />
          </div>
        </div>
      )}

      {/* Topbar */}
      <Topbar
        sidebarCollapsed={collapsed}
        onMobileMenuToggle={() => setMobileOpen(!mobileOpen)}
        breadcrumbs={breadcrumbs}
      />

      {/* Main content */}
      <main
        className={cn(
          "pt-[60px] min-h-screen transition-all duration-200 flex flex-col",
          isRTL
            ? collapsed ? "lg:pr-[68px]" : "lg:pr-[260px]"
            : collapsed ? "lg:pl-[68px]" : "lg:pl-[260px]"
        )}
      >
        <div className="p-4 sm:p-6 flex-1">
          {children}
        </div>
        <footer className="px-4 sm:px-6 pb-6">
          <div className="border-t pt-4 text-center text-xs text-muted-foreground">
            تطوير شركة الحلول الواقعية لتقنية المعلومات -{" "}
            <a
              href="https://rs4it.sa"
              target="_blank"
              rel="noopener noreferrer"
              className="font-medium underline-offset-2 hover:underline"
            >
              rs4it.sa
            </a>
          </div>
        </footer>
      </main>
    </div>
  );
}