helix-engage/src/components/layout/sidebar.tsx

import { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
    faBullhorn,
    faChartMixed,
    faChevronLeft,
    faChevronRight,
    faClockRotateLeft,
    faCommentDots,
    faGear,
    faGrid2,
    faHospitalUser,
    faCalendarCheck,
    faPhone,
    faUsers,
    faArrowRightFromBracket,
    faTowerBroadcast,
    faChartLine,
    faFileAudio,
    faPhoneMissed,
} from "@fortawesome/pro-duotone-svg-icons";
import { faIcon } from "@/lib/icon-wrapper";
import { useAtom } from "jotai";
import { Link, useNavigate } from "react-router";
import { ModalOverlay, Modal, Dialog } from "@/components/application/modals/modal";
import { Button } from "@/components/base/buttons/button";
import { MobileNavigationHeader } from "@/components/application/app-navigation/base-components/mobile-header";
import { NavAccountCard } from "@/components/application/app-navigation/base-components/nav-account-card";
import { NavItemBase } from "@/components/application/app-navigation/base-components/nav-item";
import type { NavItemType } from "@/components/application/app-navigation/config";
import { Avatar } from "@/components/base/avatar/avatar";
import { useAuth } from "@/providers/auth-provider";
import { useAgentState } from "@/hooks/use-agent-state";
import { useThemeTokens } from "@/providers/theme-token-provider";
import { sidebarCollapsedAtom } from "@/state/sidebar-state";
import { cx } from "@/utils/cx";

const EXPANDED_WIDTH = 292;
const COLLAPSED_WIDTH = 64;

const IconGrid2 = faIcon(faGrid2);
const IconBullhorn = faIcon(faBullhorn);
const IconCommentDots = faIcon(faCommentDots);
const IconChartMixed = faIcon(faChartMixed);
const IconGear = faIcon(faGear);
const IconPhone = faIcon(faPhone);
const IconClockRewind = faIcon(faClockRotateLeft);
const IconUsers = faIcon(faUsers);
const IconHospitalUser = faIcon(faHospitalUser);
const IconCalendarCheck = faIcon(faCalendarCheck);
const IconTowerBroadcast = faIcon(faTowerBroadcast);
const IconChartLine = faIcon(faChartLine);
const IconFileAudio = faIcon(faFileAudio);
const IconPhoneMissed = faIcon(faPhoneMissed);

type NavSection = {
    label: string;
    items: NavItemType[];
};

const getNavSections = (role: string): NavSection[] => {
    if (role === 'admin') {
        return [
            { label: 'Supervisor', items: [
                { label: 'Dashboard', href: '/', icon: IconGrid2 },
                { label: 'Team Performance', href: '/team-performance', icon: IconChartLine },
                { label: 'Live Call Monitor', href: '/live-monitor', icon: IconTowerBroadcast },
            ]},
            { label: 'Data & Reports', items: [
                { label: 'Leads', href: '/leads', icon: IconUsers },
                { label: 'Patients', href: '/patients', icon: IconHospitalUser },
                { label: 'Appointments', href: '/appointments', icon: IconCalendarCheck },
                { label: 'Call Log', href: '/call-history', icon: IconClockRewind },
                { label: 'Call Recordings', href: '/call-recordings', icon: IconFileAudio },
                { label: 'Missed Calls', href: '/missed-calls', icon: IconPhoneMissed },
            ]},
            { label: 'Marketing', items: [
                { label: 'Campaigns', href: '/campaigns', icon: IconBullhorn },
            ]},
            // Settings hub absorbs branding, rules, team, clinics, doctors,
            // telephony, ai, widget — one entry, navigates to the hub which
            // links to each section page.
            { label: 'Admin', items: [
                { label: 'Settings', href: '/settings', icon: IconGear },
            ]},
        ];
    }

    if (role === 'cc-agent') {
        return [
            { label: 'Call Center', items: [
                { label: 'Call Desk', href: '/', icon: IconPhone },
                { label: 'Call History', href: '/call-history', icon: IconClockRewind },
                { label: 'Patients', href: '/patients', icon: IconHospitalUser },
                { label: 'Appointments', href: '/appointments', icon: IconCalendarCheck },
                { label: 'My Performance', href: '/my-performance', icon: IconChartMixed },
            ]},
        ];
    }

    return [
        { label: 'Main', items: [
            { label: 'Lead Workspace', href: '/', icon: IconGrid2 },
            { label: 'All Leads', href: '/leads', icon: IconUsers },
            { label: 'Patients', href: '/patients', icon: IconHospitalUser },
            { label: 'Appointments', href: '/appointments', icon: IconCalendarCheck },
            { label: 'Campaigns', href: '/campaigns', icon: IconBullhorn },
            { label: 'Outreach', href: '/outreach', icon: IconCommentDots },
        ]},
        { label: 'Insights', items: [
            { label: 'Analytics', href: '/reports', icon: IconChartMixed },
        ]},
    ];
};

const getRoleSubtitle = (role: string): string => {
    switch (role) {
        case 'admin': return 'Marketing Admin';
        case 'cc-agent': return 'Call Center Agent';
        default: return 'Marketing Executive';
    }
};

interface SidebarProps {
    activeUrl?: string;
}

export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
    const { logout, user } = useAuth();
    const { tokens } = useThemeTokens();
    const navigate = useNavigate();
    const [collapsed, setCollapsed] = useAtom(sidebarCollapsedAtom);
    const agentConfig = typeof window !== 'undefined' ? localStorage.getItem('helix_agent_config') : null;
    const agentId = agentConfig ? (() => { try { return JSON.parse(agentConfig).ozonetelAgentId; } catch { return null; } })() : null;
    const ozonetelState = useAgentState(agentId);
    const avatarStatus: 'online' | 'offline' = ozonetelState === 'ready' ? 'online' : 'offline';

    const width = collapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH;

    const [logoutOpen, setLogoutOpen] = useState(false);

    const handleSignOut = () => {
        setLogoutOpen(true);
    };

    const confirmSignOut = async () => {
        setLogoutOpen(false);
        await logout();
        navigate('/login');
    };

    const navSections = getNavSections(user.role);

    const content = (
        <aside
            style={{ "--width": `${width}px` } as React.CSSProperties}
            className={cx(
                "flex h-full w-full max-w-full flex-col justify-between overflow-auto bg-sidebar pt-4 shadow-xs transition-all duration-200 ease-linear lg:w-(--width) lg:pt-5",
            )}
        >
            {/* Logo + collapse toggle */}
            <div className={cx("flex items-center gap-2", collapsed ? "justify-center px-2" : "justify-between px-4 lg:px-5")}>
                {collapsed ? (
                    <img src={tokens.brand.logo} alt={tokens.brand.name} className="size-8 rounded-lg shrink-0" />
                ) : (
                    <div className="flex flex-col gap-1">
                        <span className="text-md font-bold text-white">{tokens.sidebar.title}</span>
                        <span className="text-xs text-white opacity-70">{tokens.sidebar.subtitle.replace('{role}', getRoleSubtitle(user.role))}</span>
                    </div>
                )}
                <button
                    onClick={() => setCollapsed(!collapsed)}
                    className="hidden lg:flex size-6 items-center justify-center rounded-md text-fg-quaternary hover:text-fg-secondary hover:bg-secondary transition duration-100 ease-linear"
                    title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
                >
                    <FontAwesomeIcon icon={collapsed ? faChevronRight : faChevronLeft} className="size-3" />
                </button>
            </div>

            {/* Nav sections */}
            <ul className="mt-6">
                {navSections.map((group) => (
                    <li key={group.label}>
                        {!collapsed && (
                            <div className="px-5 pb-1 bg-sidebar">
                                <p className="text-xs font-bold text-quaternary uppercase">{group.label}</p>
                            </div>
                        )}
                        <ul className={cx(collapsed ? "px-2 pb-3" : "px-4 pb-5")}>
                            {group.items.map((item) => (
                                <li key={item.label} className="py-0.5">
                                    {collapsed ? (
                                        <Link
                                            to={item.href ?? '/'}
                                            title={item.label}
                                            style={
                                                item.href !== activeUrl
                                                    ? {
                                                          "--hover-bg": "var(--color-sidebar-nav-item-hover-bg)",
                                                          "--hover-text": "var(--color-sidebar-nav-item-hover-text)",
                                                      } as React.CSSProperties
                                                    : undefined
                                            }
                                            className={cx(
                                                "flex size-10 items-center justify-center rounded-lg transition duration-100 ease-linear",
                                                item.href === activeUrl
                                                    ? "bg-sidebar-active text-sidebar-active"
                                                    : "text-fg-quaternary hover:bg-(--hover-bg) hover:text-(--hover-text)",
                                            )}
                                        >
                                            {item.icon && <item.icon className="size-5" />}
                                        </Link>
                                    ) : (
                                        <NavItemBase
                                            icon={item.icon}
                                            href={item.href}
                                            badge={item.badge}
                                            type="link"
                                            current={item.href === activeUrl}
                                        >
                                            {item.label}
                                        </NavItemBase>
                                    )}
                                </li>
                            ))}
                        </ul>
                    </li>
                ))}
            </ul>

            {/* Account card */}
            <div className={cx("mt-auto py-4", collapsed ? "flex justify-center px-2" : "px-2 lg:px-4")}>
                {collapsed ? (
                    <button
                        onClick={handleSignOut}
                        title={`${user.name}\nSign out`}
                        style={{ "--hover-bg": "var(--color-sidebar-nav-item-hover-bg)" } as React.CSSProperties}
                        className="rounded-lg p-1 hover:bg-(--hover-bg) transition duration-100 ease-linear"
                    >
                        <Avatar size="sm" initials={user.initials} status={avatarStatus} />
                    </button>
                ) : (
                    <NavAccountCard
                        items={[{
                            id: 'current',
                            name: user.name,
                            email: user.email,
                            avatar: '',
                            status: avatarStatus,
                        }]}
                        selectedAccountId="current"
                        popoverPlacement="top"
                        onSignOut={handleSignOut}
                        onViewProfile={() => navigate('/profile')}
                        onAccountSettings={() => navigate('/account-settings')}
                    />
                )}
            </div>
        </aside>
    );

    return (
        <>
            <MobileNavigationHeader>{content}</MobileNavigationHeader>
            <div className="hidden lg:fixed lg:inset-y-0 lg:left-0 lg:flex">{content}</div>
            <div
                style={{ paddingLeft: width }}
                className="invisible hidden lg:sticky lg:top-0 lg:bottom-0 lg:left-0 lg:block transition-all duration-200 ease-linear"
            />

            {/* Logout confirmation modal */}
            <ModalOverlay isOpen={logoutOpen} onOpenChange={setLogoutOpen} isDismissable>
                <Modal className="max-w-md">
                    <Dialog>
                        <div className="rounded-xl bg-primary p-6 shadow-xl">
                            <div className="flex flex-col items-center text-center gap-4">
                                <div className="flex size-12 items-center justify-center rounded-full bg-warning-secondary">
                                    <FontAwesomeIcon icon={faArrowRightFromBracket} className="size-5 text-fg-warning-primary" />
                                </div>
                                <div>
                                    <h3 className="text-lg font-semibold text-primary">Sign out?</h3>
                                    <p className="mt-1 text-sm text-tertiary">
                                        You will be logged out of Helix Engage and your Ozonetel agent session will end. Any active calls will be disconnected.
                                    </p>
                                </div>
                                <div className="flex w-full gap-3">
                                    <Button size="md" color="secondary" className="flex-1" onClick={() => setLogoutOpen(false)}>
                                        Cancel
                                    </Button>
                                    <Button size="md" color="primary-destructive" className="flex-1" onClick={confirmSignOut}>
                                        Sign out
                                    </Button>
                                </div>
                            </div>
                        </div>
                    </Dialog>
                </Modal>
            </ModalOverlay>
        </>
    );
};