import { useEffect, useState } from 'react'
import type { CSSProperties, ReactNode } from 'react'
import {
Download,
Github,
Linkedin,
type LucideIcon,
Menu,
Search,
Send,
UserRound,
Workflow,
Wrench,
X,
} from 'lucide-react'
import { useIsMobileNav } from '@/hooks/useIsMobileNav'
import { CvmisLogo } from './CvmisLogo'
import { PhoneCaptcha } from './PhoneCaptcha'
import { ReferralFormModal } from './ReferralFormModal'
import { patient } from '@/data/patient'
import { tags } from '@/data/tags'
import { getSidebarCopy } from '@/lib/profile-content'
import type { Tag } from '@/types/pmr'
interface SidebarProps {
activeSection: string
onNavigate: (tileId: string) => void
onSearchClick: () => void
}
interface NavSection {
id: string
label: string
tileId: string
Icon: LucideIcon
}
const navSections: NavSection[] = [
{ id: 'overview', label: 'Overview / Highlights', tileId: 'patient-summary', Icon: UserRound },
{ id: 'experience', label: 'Experience', tileId: 'section-experience', Icon: Workflow },
{ id: 'skills', label: 'Skills', tileId: 'section-skills', Icon: Wrench },
]
interface SectionTitleProps {
children: ReactNode
}
function SectionTitle({ children }: SectionTitleProps) {
return (
)
}
interface TagPillProps {
tag: Tag
}
function TagPill({ tag }: TagPillProps) {
const styles: Record = {
teal: {
background: 'var(--accent-light)',
color: 'var(--accent)',
border: '1px solid var(--accent-border)',
},
amber: {
background: 'var(--amber-light)',
color: 'var(--amber)',
border: '1px solid var(--amber-border)',
},
green: {
background: 'var(--success-light)',
color: 'var(--success)',
border: '1px solid var(--success-border)',
},
}
return (
{tag.label}
)
}
export default function Sidebar({ activeSection, onNavigate, onSearchClick }: SidebarProps) {
const sidebarCopy = getSidebarCopy()
const [isDesktop, setIsDesktop] = useState(() => window.matchMedia('(min-width: 1024px)').matches)
const isMobileNav = useIsMobileNav()
const [isMobileExpanded, setIsMobileExpanded] = useState(false)
const [showReferralForm, setShowReferralForm] = useState(false)
useEffect(() => {
const mediaQuery = window.matchMedia('(min-width: 1024px)')
const updateDesktopState = (event: MediaQueryListEvent | MediaQueryList) => {
const desktopMode = event.matches
setIsDesktop(desktopMode)
if (desktopMode) {
setIsMobileExpanded(false)
}
}
updateDesktopState(mediaQuery)
const listener = (event: MediaQueryListEvent) => updateDesktopState(event)
mediaQuery.addEventListener('change', listener)
return () => {
mediaQuery.removeEventListener('change', listener)
}
}, [])
const isExpanded = isDesktop || isMobileExpanded
const handleNavActivate = (tileId: string) => {
onNavigate(tileId)
if (!isDesktop) {
setIsMobileExpanded(false)
}
}
if (isMobileNav) return null
return (
<>
{!isDesktop && isMobileExpanded && (