"use client";

import type { ReactNode } from "react";
import Link from "next/link";
import {
  usePathname } from "next/navigation";
import {
  ClipboardList,
  LayoutDashboard,
  LockKeyhole,
  Menu,
  Users,
  ListTodo,
  LifeBuoy,
  Bell,
} from "lucide-react";

import StaffLogoutButton from "./StaffLogoutButton";

const links = [
  {
    href: "/staff",
    label: "Workspace",
    icon: LayoutDashboard,
  },
  {
    href: "/staff/leads",
    label: "My Assigned Leads",
    icon: Users,
  },
  {
    href: "/staff/follow-ups",
    label: "My Follow-ups",
    icon: ClipboardList,
  },
  {
    href: "/staff/tasks",
    label: "My Tasks",
    icon: ListTodo,
  },
  {
    href: "/staff/support-tickets",
    label: "My Support Tickets",
    icon: LifeBuoy,
  },
  {
    href: "/staff/notifications",
    label: "My Notifications",
    icon: Bell,
  },
  {
    href: "/admin/change-password",
    label: "Change Password",
    icon: LockKeyhole,
  },
];

export default function StaffCrmShell({
  children,
}: {
  children: ReactNode;
}) {
  const pathname = usePathname();

  const activeLink = links
    .filter(
      (item) =>
        pathname === item.href ||
        pathname.startsWith(`${item.href}/`)
    )
    .sort((a, b) => b.href.length - a.href.length)[0];

  const activeSection = activeLink?.href ?? "/staff";

  function navigation() {
    return (
      <>
        {links.map(({ href, label, icon: Icon }) => {
          const selected = activeSection === href;

          return (
            <Link
              key={href}
              href={href}
              aria-current={selected ? "page" : undefined}
              className={
                selected
                  ? "flex items-center gap-3 rounded-xl bg-blue-50 px-3 py-2.5 text-sm font-bold text-blue-700"
                  : "flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-semibold text-slate-600 transition hover:bg-slate-50"
              }
            >
              <Icon size={18} />
              {label}
            </Link>
          );
        })}

        <div className="mt-4 border-t border-slate-200 pt-4">
          <StaffLogoutButton />
        </div>
      </>
    );
  }

  return (
    <div className="min-h-screen bg-[#f5f7fb] text-slate-900">
      <div className="flex min-h-screen">
        <aside className="hidden w-[260px] shrink-0 border-r border-slate-200 bg-white lg:flex lg:flex-col">
          <div className="flex h-[76px] items-center border-b border-slate-200 px-6">
            <div>
              <p className="text-sm font-extrabold">
                TEJA TECHNOLOGY
              </p>
              <p className="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-400">
                Staff CRM Workspace
              </p>
            </div>
          </div>

          <nav
            aria-label="Staff CRM navigation"
            className="flex-1 space-y-1 px-3 py-5"
          >
            {navigation()}
          </nav>
        </aside>

        <div className="flex min-w-0 flex-1 flex-col">
          <header className="sticky top-0 z-20 flex min-h-[76px] items-center gap-4 border-b border-slate-200 bg-white px-5 md:px-8">
            <details className="relative lg:hidden">
              <summary
                aria-label="Open staff navigation"
                className="grid h-10 w-10 cursor-pointer list-none place-items-center rounded-xl border border-slate-200 text-slate-600"
              >
                <Menu size={20} />
              </summary>

              <nav
                aria-label="Mobile staff CRM navigation"
                className="absolute left-0 top-12 z-50 w-[min(290px,calc(100vw-40px))] space-y-1 rounded-2xl border border-slate-200 bg-white p-3 shadow-xl"
              >
                {navigation()}
              </nav>
            </details>

            <div>
              <p className="text-[10px] font-extrabold uppercase tracking-[0.18em] text-blue-700">
                TEJA TECHNOLOGY CRM
              </p>
              <p className="text-lg font-extrabold">
                {activeLink?.label ?? "Staff Workspace"}
              </p>
            </div>
          </header>

          <div className="min-w-0 flex-1">
            {children}
          </div>
        </div>
      </div>
    </div>
  );
}