"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState, useEffect, createContext, useContext } from "react";
import { getStoredUser } from "@/src/lib/auth";
import Logo from "@/src/utils/logo";
import BrandIcon from "@/src/utils/brandIcon";

//ــــــــــــــ Drawer Context

const DrawerCtx = createContext<{
  open: boolean;
  setOpen: (v: boolean) => void;
}>({ open: false, setOpen: () => {} });

export function useSidebarDrawer() {
  return useContext(DrawerCtx);
}

export function SidebarProvider({ children }: { children: React.ReactNode }) {
  const [open, setOpen] = useState(false);
  return (
    <DrawerCtx.Provider value={{ open, setOpen }}>
      {children}
    </DrawerCtx.Provider>
  );
}

/* ══════════════════════════════════════════
   Nav items
══════════════════════════════════════════ */
const navSections = [
  {
    label: "الرئيسية",
    items: [
      {
        href: "/dashboard",
        label: "لوحة التحكم",
        icon: "ti-layout-dashboard",
        permission: "read-dashboard",
      },
      {
        href: "/dashboard/users",
        label: "المستخدمون",
        icon: "ti-users",
        permission: "read-user",
      },
    ],
  },
  {
    label: "الأسطول",
    items: [
      {
        href: "/dashboard/cars",
        label: "السيارات",
        icon: "ti-car",
        permission: "read-car",
      },
      {
        href: "/dashboard/drivers",
        label: "السائقون",
        icon: "ti-steering-wheel",
        permission: "read-driver",
      },
      {
        href: "/dashboard/trips",
        label: "الرحلات",
        icon: "ti-route",
        permission: "read-trip",
      },
    ],
  },
  {
    label: "العمليات",
    items: [
      {
        href: "/dashboard/orders",
        label: "الطلبات",
        icon: "ti-package",
        permission: "read-order",
      },
      {
        href: "/dashboard/clients",
        label: "العملاء",
        icon: "ti-users-group",
        permission: "read-client",
      },
      {
        href: "/dashboard/branches",
        label: "الفروع",
        icon: "ti-building",
        permission: "read-branch",
      },
      {
        href: "/dashboard/roles",
        label: "الادوار",
        icon: "ti-shield",
        permission: "read-role",
      },
      {
        href: "/dashboard/audit",
        label: "سجل العمليات",
        icon: "ti-clipboard-list",
        permission: "read-audit",
      },
    ],
  },
];

/* ══════════════════════════════════════════
   Brand Icon
══════════════════════════════════════════ */

export function BrandIconButton({ onClick }: { onClick: () => void }) {
  return (
    <button
      type="button"
      onClick={onClick}
      aria-label="فتح القائمة"
      style={{
        background: "transparent",
        border: "1px solid var(--color-border)",
        borderRadius: 8,
        width: 36,
        height: 36,
        padding: 2,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        cursor: "pointer",
        flexShrink: 0,
      }}
    >
      <BrandIcon size={28} bg="#2563EB" />
    </button>
  );
}

const GRAD = "linear-gradient(175deg, #1E3A8A 0%, #1D4ED8 60%, #1565C0 100%)";

/* ══════════════════════════════════════════
   Sidebar
   ⚠️  NO display property in any inline style here
       globals.css controls ALL display with !important
══════════════════════════════════════════ */
export function Sidebar() {
  const pathname = usePathname();

  // ⚠️ التقاط اليوزر بعد الـ mount بس، عشان أول render على الكلاينت
  // يتطابق مع السيرفر (فاضي) ويتجنب hydration mismatch
  const [user, setUser] = useState<ReturnType<typeof getStoredUser>>(null);

  useEffect(() => {
    setUser(getStoredUser());
  }, []);

  // إعادة القراءة بعد أي navigation (زي بعد الحفظ لو الصلاحيات اتغيرت)
  useEffect(() => {
    setUser(getStoredUser());
  }, [pathname]);

  const permissions = user?.permissions ?? [];
  const { open, setOpen } = useSidebarDrawer();

  useEffect(() => {
    setOpen(false);
  }, [pathname, setOpen]);

  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => {
      document.body.style.overflow = "";
    };
  }, [open]);

  return (
    <>
      {/* ══ 1. Full sidebar — lg+ ══*/}
      <aside
        id="sb-full"
        suppressHydrationWarning
        style={{
          background: GRAD,
          flexDirection: "column" /* NO display property */,
          width: "var(--sidebar-width)",
          flexShrink: 0,
          minHeight: "100vh",
          padding: "20px 12px",
          
        }}
      >
        <SidebarContent
          pathname={pathname}
          permissions={permissions}
          user={user}
          compact={false}
        />
      </aside>

      {/* ══ 2. Compact rail */}
      <aside
        id="sb-compact"
        suppressHydrationWarning
        aria-label="التنقل المصغر"
        style={{
          background: GRAD,
          flexDirection: "column" /* NO display property */,
          alignItems: "center",
          position: "fixed",
          top: 0,
          bottom: 0,
          right: 0,
          left: "auto",
          width: "var(--sidebar-width-compact)",
          padding: "16px 0",
          zIndex: 30,
          overflowY: "auto",
        }}
      >
        <SidebarContent
          pathname={pathname}
          permissions={permissions}
          user={user}
          compact={true}
        />
      </aside>

      {/* mobile drower*/}

      {/* open drower*/}
      {open && (
        <div
          onClick={() => setOpen(false)}
          aria-hidden="true"
          style={{
            position: "fixed",
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            background: "rgba(0,0,0,0.5)",
            zIndex: 40,
          }}
        />
      )}

      {/* Drawer panel */}
      <aside
        id="sb-drawer"
        suppressHydrationWarning
        aria-label="قائمة التنقل"
        style={{
          background: GRAD,
          flexDirection: "column" /* NO display property */,
          position: "fixed",
          top: 0,
          bottom: 0,
          right: 0,
          left: "auto",
          width: "var(--sidebar-width)",
          padding: "20px 12px",
          zIndex: 50,
          overflowY: "auto",

          transform: open ? "translateX(0)" : "translateX(100%)",
          transition: "transform 280ms cubic-bezier(0.4,0,0.2,1)",
        }}
      >
        {/*close button */}
        <button
          type="button"
          onClick={() => setOpen(false)}
          aria-label="إغلاق القائمة"
          style={{
            position: "absolute",
            top: 14,
            left: 12,
            background: "rgba(255,255,255,0.12)",
            border: "none",
            borderRadius: 8,
            width: 30,
            height: 30,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            cursor: "pointer",
            color: "#fff",
          }}
        >
          <i className="ti ti-x" style={{ fontSize: 13 }} aria-hidden="true" />
        </button>

        <SidebarContent
          pathname={pathname}
          permissions={permissions}
          user={user}
          compact={false}
        />
      </aside>
    </>
  );
}

/* ══════════════════════════════════════════
   SidebarContent
══════════════════════════════════════════ */
function SidebarContent({
  pathname,
  permissions,
  user,
  compact,
}: {
  pathname: string;
  permissions: string[];
  user: ReturnType<typeof getStoredUser>;
  compact: boolean;
}) {
  return (
    <>
      <div
        style={{
          marginBottom: 28,
          display: "flex",
          justifyContent: compact ? "center" : "flex-start",
        }}
      >
        {compact ? <BrandIcon size={36} /> : <Logo white />}
      </div>

      <nav
        style={{
          flex: 1,
          display: "flex",
          flexDirection: "column",
          width: "100%",
        }}
        aria-label="Main navigation"
      >
        {navSections.map((section) => (
          <div key={section.label} style={{ marginBottom: 8 }}>
            {!compact && (
              <p
                style={{
                  fontSize: 9,
                  letterSpacing: "0.14em",
                  textTransform: "uppercase",
                  color: "rgba(255,255,255,0.45)",
                  padding: "8px 8px 4px",
                  fontWeight: 600,
                  textAlign: "start",
                  margin: 0,
                }}
              >
                {section.label}
              </p>
            )}
            {section.items.map((item) => {
              const allowed =
                item.permission === "read-dashboard" ||
                permissions.includes(item.permission);
              if (!allowed) return null;
              const active =
                pathname === item.href ||
                (item.href !== "/dashboard" &&
                  pathname.startsWith(item.href + "/"));
              return (
                <Link
                  key={item.href}
                  href={item.href}
                  title={compact ? item.label : undefined}
                  aria-label={item.label}
                  style={{
                    display: "flex",
                    alignItems: "center",
                    justifyContent: compact ? "center" : "flex-start",
                    gap: 9,
                    padding: compact ? "10px" : "7px 8px",
                    borderRadius: 8,
                    fontSize: 13,
                    fontWeight: active ? 500 : 400,
                    color: active ? "#FFFFFF" : "rgba(255,255,255,0.55)",
                    background: active
                      ? "rgba(255,255,255,0.15)"
                      : "transparent",
                    textDecoration: "none",
                    transition: "var(--transition-base)",
                    marginBottom: 2,
                    textAlign: "start",
                  }}
                >
                  <i
                    className={`ti ${item.icon}`}
                    aria-hidden="true"
                    style={{ fontSize: compact ? 18 : 16, flexShrink: 0 }}
                  />
                  {!compact && item.label}
                </Link>
              );
            })}
          </div>
        ))}
      </nav>

      {compact ? (
        <div
          suppressHydrationWarning
          title={user?.name ?? user?.userName ?? "—"}
          style={{
            width: 36,
            height: 36,
            borderRadius: "var(--radius-full)",
            background: "rgba(255,255,255,0.18)",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            fontSize: 13,
            fontWeight: 600,
            color: "#fff",
            marginTop: 8,
          }}
        >
          {(user?.name ?? user?.userName ?? "—").slice(0, 1)}
        </div>
      ) : (
        <div
          style={{
            background: "rgba(255,255,255,0.12)",
            borderRadius: 10,
            padding: "10px 12px",
            marginTop: 8,
            width: "100%",
          }}
        >
          <p
            suppressHydrationWarning
            style={{
              fontSize: 13,
              fontWeight: 500,
              color: "#fff",
              margin: 0,
              textAlign: "start",
            }}
          >
            {user?.name ?? user?.userName ?? "—"}
          </p>
          <p
            suppressHydrationWarning
            style={{
              fontSize: 11,
              color: "rgba(255,255,255,0.55)",
              marginTop: 2,
              textAlign: "start",
            }}
          >
            {user?.role ?? "Signed in"}
          </p>
        </div>
      )}
    </>
  );
}