// Mobile Components
import {
  VirtualMessageList,
  LongPressMenu,
  PinchZoom,
  PullToRefresh,
  SkeletonLoader,
  TouchButton,
  TouchIconButton,
  TouchListItem,
} from '@/components/mobile'

// Dark Mode
import { useDarkMode } from '@/hooks/use-dark-mode'
import { DarkModeToggle } from '@/components/ui/dark-mode-toggle'

// Performance
import { LazyMessageList, preloadChatComponents } from '@/lib/performance/lazy-components'
import { debounce, useDebounce, memoize } from '@/lib/performance/optimization'

// Accessibility
import {
  useAnnounce,
  useFocusTrap,
  useKeyboardShortcut,
  useReducedMotion,
  meetsWCAGAA,
} from '@/lib/accessibility/a11y-utils'

<PullToRefresh onRefresh={fetchNewMessages}>
  <VirtualMessageList
    messages={messages}
    isLoading={isLoading}
    hasMore={hasMore}
    onLoadMore={loadOlderMessages}
    renderMessage={(msg, index) => (
      <LongPressMenu
        items={[
          { id: 'reply', label: 'Reply', icon: <Reply />, onClick: () => handleReply(msg) },
          { id: 'delete', label: 'Delete', destructive: true, onClick: () => handleDelete(msg.id) },
        ]}
      >
        <MessageItem message={msg} />
      </LongPressMenu>
    )}
    renderDateSeparator={(date) => <DateSeparator date={date} />}
  />
</PullToRefresh>

{
  isLoading ? (
    <SkeletonLoader type="message" count={8} />
  ) : (
    <VirtualMessageList messages={messages} />
  )
}

<TouchButton
  variant="default"
  size="default"
  hapticFeedback
  onClick={handleClick}
>
  Send Message
</TouchButton>

<TouchIconButton
  icon={<Send />}
  label="Send"
  hapticFeedback
  onClick={handleSend}
/>

<PinchZoom minScale={1} maxScale={4} enableRotation enableDownload downloadUrl={imageUrl}>
  <img src={imageUrl} alt="Message attachment" />
</PinchZoom>

// In header
<DarkModeToggle variant="dropdown" />

// Mobile FAB
<CompactDarkModeToggle />

// Hook usage
const { isDark, toggle, colorScheme, setColorScheme } = useDarkMode()

// Announce to screen readers
const announce = useAnnounce()
announce('Message sent successfully', 'polite')

// Keyboard shortcuts
useKeyboardShortcut([
  { key: 'k', ctrl: true, callback: openSearch },
  { key: 'Escape', callback: closeModal },
])

// Respect user preferences
const shouldReduceMotion = useReducedMotion()
const isHighContrast = useHighContrast()

// Component
const MessageList = LazyMessageList.Component

// Preload on route change
useEffect(() => {
  preloadChatComponents()
}, [])

// Smart preload (checks network)
smartPreload(() => LazyModal.preload())

// Debounce search
const [search, setSearch] = useState('')
const debouncedSearch = useDebounce(search, 300)

// Memoize expensive function
const result = useMemo(() => memoize(expensiveCalc)(data), [data])

// Process in chunks
const results = await processInChunks(items, processItem, 10)

// Constants
import {
  IOS_MIN_TAP_TARGET,      // 44
  ANDROID_MIN_TAP_TARGET,  // 48
  MIN_TAP_TARGET,          // 48 (max of iOS/Android)
} from '@/components/mobile'

// Usage
<button style={{ minHeight: MIN_TAP_TARGET, minWidth: MIN_TAP_TARGET }}>
  Icon
</button>

// Or use TouchArea wrapper
<TouchArea>
  <SmallIcon />
</TouchArea>

// Long press
const { handlers } = useLongPress(handleLongPress, { duration: 500 })
<div {...handlers}>Long press me</div>

// Pull to refresh
const { refreshState, pullDistance, handlers } = usePullToRefresh({
  onRefresh: async () => await fetchData(),
})

// Already built-in to components:
// - Swipe actions (SwipeActions)
// - Pinch zoom (PinchZoom)
// - Pull to refresh (PullToRefresh)

// Built-in to components
<TouchButton hapticFeedback onClick={handleClick} />
<LongPressMenu hapticFeedback items={items} />

// Manual trigger
if ('vibrate' in navigator) {
  navigator.vibrate(10) // 10ms vibration
}

import { shouldPreload, getNetworkInfo } from '@/lib/performance/optimization'

// Check before preloading
if (shouldPreload()) {
  preloadHeavyComponents()
}

// Get network info
const network = getNetworkInfo()
if (network.saveData) {
  // Use low-quality images
}