"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState } from "react";
import { useBranding } from "@/components/app/BrandingProvider";
import { useModules } from "@/components/app/ModulesProvider";
import { SidebarAccordion } from "@/components/app/SidebarAccordion";
import { AdminUser, getStoredUser } from "@/lib/api";
import { brandingLogoUrl } from "@/lib/branding";
import { buildSidebarGroups } from "@/lib/menu";
import { getActiveRole } from "@/lib/session-context";

export function SidebarNav() {
  const pathname = usePathname();
  const branding = useBranding();
  const user = getStoredUser<AdminUser>();
  const activeRole = getActiveRole() ?? user?.roles[0] ?? "";
  const roles = activeRole ? [activeRole] : user?.roles ?? [];
  const { enabledKeys } = useModules();
  const groups = buildSidebarGroups(roles, enabledKeys);
  const logoSrc = brandingLogoUrl(branding.logo_url);
  const [query, setQuery] = useState("");
  const dashboardActive = pathname === "/dashboard";

  return (
    <aside className="hidden w-[var(--sidebar-width)] shrink-0 flex-col border-r border-[var(--sidebar-border)] bg-[var(--sidebar)] text-[var(--sidebar-text)] lg:flex">
      <div className="border-b border-[var(--sidebar-border)] px-5 py-5">
        <div className="flex items-center gap-3">
          {logoSrc ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img src={logoSrc} alt="" className="h-10 w-10 shrink-0 rounded-xl bg-white object-contain" />
          ) : (
            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-teal-100 text-base font-bold text-teal-800">
              {branding.name?.charAt(0) ?? "م"}
            </div>
          )}
          <div className="min-w-0">
            <p className="truncate text-xs text-[var(--sidebar-muted)]">{branding.name}</p>
            <h2 className="truncate text-base font-bold text-[var(--sidebar-text)]">{branding.admin_title}</h2>
          </div>
        </div>
        <label className="mt-4 block">
          <span className="sr-only">جستجو در منو</span>
          <input
            type="search"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="جستجو در منو…"
            className="w-full rounded-xl border border-[var(--sidebar-border)] bg-white px-3 py-2 text-xs text-[var(--sidebar-text)] outline-none placeholder:text-[var(--sidebar-muted)] focus:border-teal-400"
          />
        </label>
      </div>
      <nav className="flex-1 overflow-y-auto p-3">
        {query.trim() === "" || "داشبورد".includes(query.trim()) ? (
          <Link
            href="/dashboard"
            className={`mb-1 block rounded-xl px-3 py-2.5 text-sm font-semibold transition ${
              dashboardActive
                ? "bg-[var(--sidebar-active)] text-teal-900"
                : "text-[var(--sidebar-text)] hover:bg-slate-100"
            }`}
          >
            داشبورد
          </Link>
        ) : null}
        <SidebarAccordion groups={groups} pathname={pathname} query={query} />
      </nav>
    </aside>
  );
}
