"use client";
import { useState } from "react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import {
  LayoutDashboard, ShoppingCart, Package, Users, Truck, FileText,
  BarChart3, Settings, LogOut, Menu, X, Receipt, Wallet, ScanLine,
  ChevronDown, Boxes, UserCog, Tag, Database, Activity, Undo2
} from "lucide-react";
import { ROLE_LABELS_AR, can } from "@/lib/permissions";
import type { Role } from "@/lib/permissions";
import { cn } from "@/lib/utils";
import { ToastProvider, useToast } from "./Toast";

interface Session {
  userId: string;
  companyId: string;
  role: Role;
  email: string;
  name: string;
}

const NAV = [
  { href: "/app", label: "الرئيسية", icon: LayoutDashboard, permission: null },
  { href: "/app/pos", label: "الكاشير (POS)", icon: ScanLine, permission: "pos:use" },
  { href: "/app/sales", label: "المبيعات", icon: ShoppingCart, permission: "sales:read" },
  { href: "/app/returns", label: "المرتجعات", icon: Undo2, permission: "sales:read" },
  { href: "/app/purchases", label: "المشتريات", icon: Truck, permission: "purchases:read" },
  { href: "/app/products", label: "المنتجات", icon: Package, permission: "products:read" },
  { href: "/app/inventory", label: "المخزون", icon: Boxes, permission: "inventory:read" },
  { href: "/app/customers", label: "العملاء", icon: Users, permission: "customers:read" },
  { href: "/app/suppliers", label: "الموردين", icon: UserCog, permission: "suppliers:read" },
  { href: "/app/expenses", label: "المصروفات", icon: Wallet, permission: null },
  { href: "/app/reports", label: "التقارير", icon: BarChart3, permission: "reports:read" },
  { href: "/app/activity", label: "سجل النشاطات", icon: Activity, permission: "settings:read" },
  { href: "/app/master", label: "البيانات الأساسية", icon: Database, permission: "products:read" },
  { href: "/app/users", label: "المستخدمين", icon: UserCog, permission: "users:read" },
  { href: "/app/settings", label: "الإعدادات", icon: Settings, permission: "settings:read" },
];

export default function AppShell({ children, session }: { children: React.ReactNode; session: Session }) {
  return (
    <ToastProvider>
      <AppShellInner session={session}>{children}</AppShellInner>
    </ToastProvider>
  );
}

function AppShellInner({ children, session }: { children: React.ReactNode; session: Session }) {
  const pathname = usePathname();
  const router = useRouter();
  const toast = useToast();
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

  async function logout() {
    await fetch("/api/auth/logout", { method: "POST" });
    toast.success("تم تسجيل الخروج");
    router.push("/login");
    router.refresh();
  }

  const filtered = NAV.filter((n) => !n.permission || can(session.role, n.permission));

  return (
    <div className="min-h-screen flex bg-slate-50">
      {/* Sidebar */}
      <aside className={cn(
        "fixed lg:static inset-y-0 right-0 z-50 w-64 bg-white border-l border-slate-200 flex flex-col transition-transform",
        sidebarOpen ? "translate-x-0" : "translate-x-full lg:translate-x-0"
      )}>
        <div className="h-16 flex items-center justify-between px-5 border-b border-slate-200">
          <Link href="/app" className="flex items-center gap-2">
            <div className="w-9 h-9 rounded-lg bg-gradient-to-br from-brand-500 to-brand-700 flex items-center justify-center text-white font-bold text-lg">ر</div>
            <span className="font-bold text-slate-900">راصد ERP</span>
          </Link>
          <button onClick={() => setSidebarOpen(false)} className="lg:hidden p-1 text-slate-500">
            <X className="w-5 h-5" />
          </button>
        </div>

        <nav className="flex-1 overflow-y-auto p-3 space-y-0.5">
          {filtered.map((n) => {
            const active = pathname === n.href || (n.href !== "/app" && pathname.startsWith(n.href));
            return (
              <Link
                key={n.href}
                href={n.href}
                onClick={() => setSidebarOpen(false)}
                className={cn(
                  "flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition",
                  active ? "bg-brand-50 text-brand-700" : "text-slate-700 hover:bg-slate-100"
                )}
              >
                <n.icon className="w-4.5 h-4.5 flex-shrink-0" />
                <span>{n.label}</span>
              </Link>
            );
          })}
        </nav>

        <div className="p-3 border-t border-slate-200">
          <div className="flex items-center gap-3 p-2 rounded-lg">
            <div className="w-9 h-9 rounded-full bg-gradient-to-br from-brand-500 to-brand-700 text-white flex items-center justify-center font-semibold">
              {session.name.charAt(0)}
            </div>
            <div className="flex-1 min-w-0">
              <div className="text-sm font-semibold text-slate-900 truncate">{session.name}</div>
              <div className="text-xs text-slate-500">{ROLE_LABELS_AR[session.role]}</div>
            </div>
            <button onClick={logout} className="p-2 text-slate-400 hover:text-red-600" title="خروج">
              <LogOut className="w-4 h-4" />
            </button>
          </div>
        </div>
      </aside>

      {sidebarOpen && <div onClick={() => setSidebarOpen(false)} className="fixed inset-0 bg-slate-900/40 z-40 lg:hidden" />}

      {/* Main */}
      <div className="flex-1 flex flex-col min-w-0">
        <header className="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-4 sm:px-6 sticky top-0 z-30">
          <button onClick={() => setSidebarOpen(true)} className="lg:hidden p-2 -mr-2 text-slate-700">
            <Menu className="w-5 h-5" />
          </button>
          <div className="flex-1" />
          <div className="relative">
            <button onClick={() => setMenuOpen(!menuOpen)} className="flex items-center gap-2 p-1.5 rounded-lg hover:bg-slate-100">
              <div className="w-8 h-8 rounded-full bg-gradient-to-br from-brand-500 to-brand-700 text-white flex items-center justify-center text-sm font-semibold">
                {session.name.charAt(0)}
              </div>
              <span className="hidden sm:inline text-sm font-medium text-slate-700">{session.name}</span>
              <ChevronDown className="w-4 h-4 text-slate-400" />
            </button>
            {menuOpen && (
              <div onMouseLeave={() => setMenuOpen(false)} className="absolute end-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-slate-200 py-1 z-50">
                <div className="px-3 py-2 border-b border-slate-100">
                  <div className="text-sm font-semibold text-slate-900">{session.name}</div>
                  <div className="text-xs text-slate-500 truncate">{session.email}</div>
                </div>
                <Link href="/app/settings" className="block px-3 py-2 text-sm text-slate-700 hover:bg-slate-50">الإعدادات</Link>
                <button onClick={logout} className="block w-full text-right px-3 py-2 text-sm text-red-600 hover:bg-red-50">تسجيل خروج</button>
              </div>
            )}
          </div>
        </header>
        <main className="flex-1 p-4 sm:p-6 overflow-x-hidden">{children}</main>
      </div>
    </div>
  );
}