frontend/src/app-navigation/AppDesktopShell.tsx

import React, { useCallback, useEffect, useMemo, useState } from 'react';
import {
  View,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  Text,
  Platform,
} from 'react-native';
import { useSafeAreaInsets, SafeAreaView } from 'react-native-safe-area-context';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { usePathname, useRouter } from 'expo-router';

import { useAppColors, shadows, type AppColors } from '../theme';
import { useTotalUnreadCount } from '../stores';
import { AppRouteStack } from './AppRouteStack';

type TabName = 'HomeTab' | 'MessageTab' | 'AppsTab' | 'ProfileTab';

const SIDEBAR_WIDTH_DESKTOP = 240;
const SIDEBAR_WIDTH_TABLET = 200;
const SIDEBAR_COLLAPSED_WIDTH = 72;

const NAV_ITEMS: { name: TabName; label: string; href: string; icon: string; iconOutline: string }[] = [
  { name: 'HomeTab', label: '首页', href: '/home', icon: 'home', iconOutline: 'home-outline' },
  { name: 'AppsTab', label: '应用', href: '/apps', icon: 'view-grid', iconOutline: 'view-grid-outline' },
  { name: 'MessageTab', label: '消息', href: '/messages', icon: 'message-text', iconOutline: 'message-text-outline' },
  { name: 'ProfileTab', label: '我的', href: '/profile', icon: 'account', iconOutline: 'account-outline' },
];

function pathToTab(pathname: string): TabName {
  if (pathname.startsWith('/messages')) return 'MessageTab';
  if (pathname.startsWith('/apps')) return 'AppsTab';
  if (pathname.startsWith('/profile')) return 'ProfileTab';
  if (pathname.startsWith('/home')) return 'HomeTab';
  return 'HomeTab';
}

function createDesktopShellStyles(colors: AppColors) {
  return StyleSheet.create({
    container: {
      flex: 1,
      flexDirection: 'row',
      backgroundColor: colors.background.default,
    },
    sidebar: {
      backgroundColor: colors.background.paper,
      borderRightWidth: 1,
      borderRightColor: colors.divider,
      flexDirection: 'column',
      ...shadows.md,
    },
    sidebarHeader: {
      paddingHorizontal: 16,
      paddingVertical: 20,
      borderBottomWidth: 1,
      borderBottomColor: colors.divider,
      alignItems: 'center',
      justifyContent: 'center',
      flexDirection: 'row',
    },
    logoText: {
      fontSize: 18,
      fontWeight: '700',
      color: colors.primary.main,
      marginLeft: 8,
    },
    sidebarContent: {
      flex: 1,
      paddingTop: 8,
    },
    sidebarItem: {
      flexDirection: 'row',
      alignItems: 'center',
      paddingHorizontal: 16,
      paddingVertical: 12,
      marginHorizontal: 8,
      marginVertical: 4,
      borderRadius: 12,
    },
    sidebarItemActive: {
      backgroundColor: `${colors.primary.main}15`,
    },
    sidebarItemCollapsed: {
      justifyContent: 'center',
      paddingHorizontal: 0,
    },
    sidebarIconContainer: {
      position: 'relative',
      width: 40,
      height: 40,
      alignItems: 'center',
      justifyContent: 'center',
      borderRadius: 12,
    },
    sidebarLabel: {
      fontSize: 15,
      fontWeight: '500',
      color: colors.text.secondary,
      marginLeft: 12,
      flex: 1,
    },
    sidebarLabelActive: {
      color: colors.primary.main,
      fontWeight: '600',
    },
    collapseButton: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'flex-end',
      paddingHorizontal: 16,
      paddingVertical: 12,
      borderTopWidth: 1,
      borderTopColor: colors.divider,
    },
    collapseButtonCollapsed: {
      justifyContent: 'center',
      paddingHorizontal: 0,
    },
    badge: {
      position: 'absolute',
      top: 2,
      right: 2,
      backgroundColor: colors.error.main,
      borderRadius: 10,
      minWidth: 18,
      height: 18,
      alignItems: 'center',
      justifyContent: 'center',
      paddingHorizontal: 4,
    },
    badgeText: {
      color: colors.primary.contrast,
      fontSize: 10,
      fontWeight: '600',
    },
    mainContent: {
      flex: 1,
      backgroundColor: colors.background.default,
    },
  });
}

export function AppDesktopShell() {
  const colors = useAppColors();
  const styles = useMemo(() => createDesktopShellStyles(colors), [colors]);
  const insets = useSafeAreaInsets();
  const router = useRouter();
  const pathname = usePathname();
  const unreadCount = useTotalUnreadCount();
  const [isCollapsed, setIsCollapsed] = useState(false);
  const [isDesktop, setIsDesktop] = useState(false);

  useEffect(() => {
    if (Platform.OS !== 'web') return;
    const check = () => {
      const w = window.innerWidth || document.documentElement.clientWidth;
      setIsDesktop(w >= SIDEBAR_WIDTH_DESKTOP);
    };
    check();
    window.addEventListener('resize', check);
    return () => window.removeEventListener('resize', check);
  }, []);

  const sidebarWidth = isCollapsed
    ? SIDEBAR_COLLAPSED_WIDTH
    : isDesktop
      ? SIDEBAR_WIDTH_DESKTOP
      : SIDEBAR_WIDTH_TABLET;

  const currentTab = pathToTab(pathname || '/home');

  const handleTabChange = useCallback(
    (href: string) => {
      router.replace(href);
    },
    [router]
  );

  return (
    <View style={styles.container}>
      <SafeAreaView
        style={[
          styles.sidebar,
          { width: sidebarWidth, paddingTop: insets.top, paddingBottom: insets.bottom },
        ]}
      >
        <View style={styles.sidebarHeader}>
          <MaterialCommunityIcons name="carrot" size={32} color={colors.primary.main} />
          {!isCollapsed && <Text style={styles.logoText}>胡萝卜BBS</Text>}
        </View>
        <ScrollView style={styles.sidebarContent} showsVerticalScrollIndicator={false}>
          {NAV_ITEMS.map((item) => {
            const isActive = currentTab === item.name;
            const showBadge = item.name === 'MessageTab' && unreadCount > 0;
            return (
              <TouchableOpacity
                key={item.name}
                style={[
                  styles.sidebarItem,
                  isActive && styles.sidebarItemActive,
                  isCollapsed && styles.sidebarItemCollapsed,
                ]}
                onPress={() => handleTabChange(item.href)}
                activeOpacity={0.7}
              >
                <View style={styles.sidebarIconContainer}>
                  <MaterialCommunityIcons
                    name={(isActive ? item.icon : item.iconOutline) as any}
                    size={24}
                    color={isActive ? colors.primary.main : colors.text.secondary}
                  />
                  {showBadge ? (
                    <View style={styles.badge}>
                      <Text style={styles.badgeText}>{unreadCount > 99 ? '99+' : unreadCount}</Text>
                    </View>
                  ) : null}
                </View>
                {!isCollapsed ? (
                  <Text style={[styles.sidebarLabel, isActive && styles.sidebarLabelActive]}>{item.label}</Text>
                ) : null}
              </TouchableOpacity>
            );
          })}
        </ScrollView>
        <TouchableOpacity
          style={[styles.collapseButton, isCollapsed && styles.collapseButtonCollapsed]}
          onPress={() => setIsCollapsed((c) => !c)}
          activeOpacity={0.7}
        >
          <MaterialCommunityIcons
            name={isCollapsed ? 'chevron-right' : 'chevron-left'}
            size={24}
            color={colors.text.secondary}
          />
        </TouchableOpacity>
      </SafeAreaView>
      <View style={styles.mainContent}>
        <AppRouteStack />
      </View>
    </View>
  );
}