pn-new-crm/src/components/layout/sidebar.tsx

'use client';

import { useState } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import {
  LayoutDashboard,
  Users,
  Bookmark,
  Anchor,
  Ship,
  Building2,
  Receipt,
  FileText,
  FolderOpen,
  Bell,
  Camera,
  Globe,
  Settings,
  Shield,
  Home,
  ChevronLeft,
  ChevronRight,
  ChevronDown,
  ChevronUp,
} from 'lucide-react';

import { cn } from '@/lib/utils';
import { useUIStore } from '@/stores/ui-store';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';
import { Separator } from '@/components/ui/separator';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { UserMenu } from '@/components/layout/user-menu';
import type { UserPortRole } from '@/lib/db/schema/users';
import type { Role } from '@/lib/db/schema/users';
import type { Port } from '@/lib/db/schema/ports';

const LOGO_URL =
  'https://s3.portnimara.com/images/Port%20Nimara%20New%20Logo-Circular%20Frame_250px.png';

interface SidebarProps {
  portRoles: (UserPortRole & { port: { id: string; slug: string; name: string }; role: Role })[];
  isSuperAdmin?: boolean;
  user?: { name: string; email: string };
  /** Ports the user has access to. Drives the footer port switcher. */
  ports?: Port[];
}

/**
 * Turn a snake_cased DB role identifier (e.g. "super_admin") into a human
 * label ("Super Admin"). Empty/missing → "Staff" fallback.
 */
function humanizeRole(roleName: string | null | undefined): string {
  if (!roleName) return 'Staff';
  return roleName
    .split('_')
    .map((part) => (part ? part[0]!.toUpperCase() + part.slice(1) : part))
    .join(' ');
}

interface NavItem {
  href: string;
  label: string;
  icon: React.ElementType;
  exact?: boolean;
}

interface NavSection {
  title: string;
  items: NavItem[];
  adminRequired?: boolean;
  /** When true, only render if the user has marina-side access. */
  marinaRequired?: boolean;
  /** When true, only render if the user has residential-side access. */
  residentialRequired?: boolean;
}

function buildNavSections(portSlug: string | undefined): NavSection[] {
  const base = portSlug ? `/${portSlug}` : '';

  return [
    {
      title: 'Main',
      marinaRequired: true,
      items: [
        { href: `${base}/dashboard`, label: 'Dashboard', icon: LayoutDashboard },
        { href: `${base}/clients`, label: 'Clients', icon: Users },
        { href: `${base}/yachts`, label: 'Yachts', icon: Ship },
        { href: `${base}/companies`, label: 'Companies', icon: Building2 },
        { href: `${base}/interests`, label: 'Interests', icon: Bookmark },
        { href: `${base}/berths`, label: 'Berths', icon: Anchor },
      ],
    },
    {
      title: 'Residential',
      residentialRequired: true,
      items: [
        {
          href: `${base}/residential/clients`,
          label: 'Residential Clients',
          icon: Home,
        },
        {
          href: `${base}/residential/interests`,
          label: 'Residential Interests',
          icon: Bookmark,
        },
      ],
    },
    {
      title: 'Documents',
      marinaRequired: true,
      items: [
        { href: `${base}/documents`, label: 'Documents', icon: FileText },
        { href: `${base}/documents/files`, label: 'Files', icon: FolderOpen },
      ],
    },
    {
      title: 'Financial',
      marinaRequired: true,
      items: [
        { href: `${base}/expenses`, label: 'Expenses', icon: Receipt },
        { href: `${base}/invoices`, label: 'Invoices', icon: FileText },
        // Dedicated explainer page covers "Add to Home Screen" install
        // + walkthrough; the mobile-only scanner UI itself lives at /scan
        // and is reached via the install or the explainer page button.
        {
          href: `${base}/invoices/upload-receipts`,
          label: 'How to upload receipts',
          icon: Camera,
        },
      ],
    },
    {
      title: 'Insights',
      marinaRequired: true,
      items: [
        // Marketing / Umami integration. Distinct from the main dashboard
        // (which is sales-focused) so the audience and the metrics don't
        // compete for visual real estate.
        {
          href: `${base}/website-analytics`,
          label: 'Website analytics',
          icon: Globe,
        },
      ],
    },
    {
      title: 'Communication',
      marinaRequired: true,
      items: [
        // Email tab removed: we deferred building a full inbox/threading
        // feature (would require Google OAuth + scope review + IMAP
        // syncing infra). Reminders stays since it's already wired up.
        { href: `${base}/reminders`, label: 'Reminders', icon: Bell },
      ],
    },
    {
      title: 'Admin',
      adminRequired: true,
      items: [
        { href: `${base}/settings`, label: 'Settings', icon: Settings },
        { href: `${base}/admin`, label: 'Administration', icon: Shield },
      ],
    },
  ];
}

function NavItemLink({
  item,
  collapsed,
  active,
}: {
  item: NavItem;
  collapsed: boolean;
  active: boolean;
}) {
  const content = (
    <Link
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      href={item.href as any}
      className={cn(
        'relative flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-all duration-150',
        'text-[#cdcfd6] hover:bg-[#171f35] hover:text-white',
        active && 'text-white pl-[14px]',
        collapsed && 'justify-center px-2',
      )}
    >
      {active && !collapsed && (
        <span
          aria-hidden
          className="absolute left-0 top-1 bottom-1 w-1 rounded-r-full bg-[#3a7bc8]"
        />
      )}
      <item.icon
        className={cn(
          'shrink-0',
          active ? 'text-[#3a7bc8]' : 'text-[#83aab1]',
          collapsed ? 'w-5 h-5' : 'w-4 h-4',
        )}
      />
      {!collapsed && <span>{item.label}</span>}
    </Link>
  );

  if (collapsed) {
    return (
      <Tooltip>
        <TooltipTrigger asChild>{content}</TooltipTrigger>
        <TooltipContent side="right" className="font-medium">
          {item.label}
        </TooltipContent>
      </Tooltip>
    );
  }

  return content;
}

function SidebarContent({
  collapsed,
  portSlug,
  portRoles,
  hasAdminAccess,
  hasMarinaAccess,
  hasResidentialAccess,
  user,
  ports,
  onToggleCollapse,
}: {
  collapsed: boolean;
  portSlug: string | undefined;
  portRoles: SidebarProps['portRoles'];
  hasAdminAccess: boolean;
  hasMarinaAccess: boolean;
  hasResidentialAccess: boolean;
  user?: SidebarProps['user'];
  ports?: Port[];
  /** When provided, renders the collapse toggle row above the user footer (desktop). */
  onToggleCollapse?: () => void;
}) {
  const pathname = usePathname();
  const [adminExpanded, setAdminExpanded] = useState(true);
  const sections = buildNavSections(portSlug);

  // Pre-compute every nav href the sidebar offers across all sections so
  // the active-state check can do longest-prefix-match. Without this,
  // /invoices/upload-receipts would highlight both "Invoices" and "How to
  // upload receipts" - every ancestor prefix matches.
  const allHrefs = sections.flatMap((s) => s.items.map((i) => i.href));

  function isActive(href: string, exact?: boolean): boolean {
    if (exact) return pathname === href;
    if (!pathname.startsWith(href)) return false;
    // Active only if no other sidebar item has a strictly more-specific
    // prefix match. That makes the highlight follow the URL into the
    // deepest registered route (e.g. /invoices/upload-receipts wins over
    // /invoices when both are sidebar items).
    return !allHrefs.some((other) => other.length > href.length && pathname.startsWith(other));
  }

  // Sidebar header showcases the Port Nimara logo as the visual anchor of
  // the brand. Collapse toggle is a small overlay button so it doesn't
  // compete with the logo for attention.
  return (
    <TooltipProvider delayDuration={0}>
      <div className="flex flex-col h-full bg-[#1e2844]">
        {/* Brand header - logo centered (large when expanded, smaller when
            collapsed). Collapse toggle floats top-right as a tiny chevron. */}
        <div
          className={cn(
            'relative flex items-center justify-center border-b border-[#474e66]',
            collapsed ? 'h-16 px-2' : 'h-24 px-4',
          )}
        >
          <Image
            src={LOGO_URL}
            alt="Port Nimara"
            width={collapsed ? 40 : 72}
            height={collapsed ? 40 : 72}
            className="rounded-full shadow-md ring-2 ring-white/20"
            unoptimized
            priority
          />
          {onToggleCollapse && (
            <button
              type="button"
              onClick={onToggleCollapse}
              aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
              className={cn(
                'absolute right-2 flex h-6 w-6 items-center justify-center rounded-md text-[#83aab1] hover:bg-[#171f35] hover:text-white transition-colors',
                collapsed ? 'top-1' : 'top-2',
              )}
            >
              {collapsed ? (
                <ChevronRight className="w-4 h-4" />
              ) : (
                <ChevronLeft className="w-4 h-4" />
              )}
            </button>
          )}
        </div>

        {/* Nav */}
        <ScrollArea className="flex-1 py-2">
          <nav className="px-2 space-y-4">
            {sections.map((section) => {
              if (section.adminRequired && !hasAdminAccess) return null;
              if (section.marinaRequired && !hasMarinaAccess) return null;
              if (section.residentialRequired && !hasResidentialAccess) return null;

              return (
                <div key={section.title}>
                  {!collapsed && (
                    <div className="flex items-center justify-between px-1 mb-1">
                      <span className="text-[#83aab1] text-[10px] font-semibold uppercase tracking-[0.12em]">
                        {section.title}
                      </span>
                      {section.adminRequired && (
                        <button
                          onClick={() => setAdminExpanded((v) => !v)}
                          className="text-[#71768a] hover:text-[#cdcfd6] transition-colors"
                        >
                          {adminExpanded ? (
                            <ChevronUp className="w-3 h-3" />
                          ) : (
                            <ChevronDown className="w-3 h-3" />
                          )}
                        </button>
                      )}
                    </div>
                  )}
                  {(!section.adminRequired || adminExpanded || collapsed) && (
                    <ul className="space-y-0.5">
                      {section.items.map((item) => (
                        <li key={item.href}>
                          <NavItemLink
                            item={item}
                            collapsed={collapsed}
                            active={isActive(item.href, item.exact)}
                          />
                        </li>
                      ))}
                    </ul>
                  )}
                  <Separator className="mt-3 bg-[#474e66]/50" />
                </div>
              );
            })}
          </nav>
        </ScrollArea>

        {/* User footer - entire row is the trigger for the UserMenu so the
            user can click their name/avatar to access Profile / Settings /
            port-switcher / sign-out. The same UserMenu component drives the
            top-right avatar dropdown, so the menu items stay consistent. */}
        <div className={cn('border-t border-[#474e66] p-2', collapsed && 'flex justify-center')}>
          {collapsed ? (
            <UserMenu
              align="start"
              user={user}
              ports={ports}
              trigger={
                <button
                  type="button"
                  aria-label="Open user menu"
                  className="rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#3a7bc8] focus-visible:ring-offset-2 focus-visible:ring-offset-[#1e2844]"
                >
                  <Avatar className="w-8 h-8 cursor-pointer">
                    <AvatarImage src={undefined} />
                    <AvatarFallback className="bg-[#3a7bc8] text-white text-xs font-semibold">
                      {(user?.name ?? 'U').slice(0, 1).toUpperCase()}
                    </AvatarFallback>
                  </Avatar>
                </button>
              }
            />
          ) : (
            <UserMenu
              align="start"
              user={user}
              ports={ports}
              trigger={
                <button
                  type="button"
                  aria-label="Open user menu"
                  className="flex w-full items-center gap-3 rounded-md p-1.5 text-left transition-colors hover:bg-[#171f35] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#3a7bc8] focus-visible:ring-offset-2 focus-visible:ring-offset-[#1e2844]"
                >
                  <Avatar className="w-8 h-8 shrink-0 shadow-sm ring-2 ring-white/30">
                    <AvatarImage src={undefined} />
                    <AvatarFallback className="bg-[#3a7bc8] text-white text-xs font-semibold">
                      {(user?.name ?? 'U').slice(0, 1).toUpperCase()}
                    </AvatarFallback>
                  </Avatar>
                  <div className="flex-1 min-w-0">
                    <p className="text-white text-sm font-medium truncate">
                      {user?.name ?? 'User'}
                    </p>
                    <Badge
                      variant="outline"
                      className="text-[10px] px-1.5 py-0 text-[#83aab1] border-[#474e66] mt-0.5"
                    >
                      {humanizeRole(portRoles[0]?.role?.name)}
                    </Badge>
                  </div>
                </button>
              }
            />
          )}
        </div>
      </div>
    </TooltipProvider>
  );
}

export function Sidebar({ portRoles, isSuperAdmin = false, user, ports }: SidebarProps) {
  const sidebarCollapsed = useUIStore((s) => s.sidebarCollapsed);
  const toggleSidebar = useUIStore((s) => s.toggleSidebar);
  const currentPortSlug = useUIStore((s) => s.currentPortSlug);

  // Super admins see every section regardless of role rows.
  const hasAdminAccess =
    isSuperAdmin ||
    portRoles.some(
      (pr) =>
        pr.role?.permissions?.admin?.manage_users || pr.role?.permissions?.admin?.manage_settings,
    );

  const hasMarinaAccess =
    isSuperAdmin || portRoles.some((pr) => pr.role?.permissions?.clients?.view);

  const hasResidentialAccess =
    isSuperAdmin ||
    portRoles.some((pr) => pr.residentialAccess || pr.role?.permissions?.residential_clients?.view);

  return (
    <aside
      className={cn(
        'relative hidden md:flex flex-col h-screen border-r border-[#474e66] transition-all duration-200 ease-in-out shrink-0',
        sidebarCollapsed ? 'w-sidebar-collapsed' : 'w-sidebar',
      )}
      style={{ backgroundColor: '#1e2844' }}
    >
      <SidebarContent
        collapsed={sidebarCollapsed}
        portSlug={currentPortSlug ?? undefined}
        portRoles={portRoles}
        hasAdminAccess={hasAdminAccess}
        hasMarinaAccess={hasMarinaAccess}
        hasResidentialAccess={hasResidentialAccess}
        user={user}
        ports={ports}
        onToggleCollapse={toggleSidebar}
      />
    </aside>
  );
}