jiu/client/lib/screens/shell/app_shell.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:intl/intl.dart';
import 'dart:async';
import '../../core/auth/auth_state.dart';
import '../../core/theme/app_theme.dart';

class AppShell extends ConsumerStatefulWidget {
  final Widget child;
  const AppShell({super.key, required this.child});

  @override
  ConsumerState<AppShell> createState() => _AppShellState();
}

class _AppShellState extends ConsumerState<AppShell> {
  bool _sidebarExpanded = true;
  late Timer _timer;
  late String _currentTime;
  final String _loginTime =
      DateFormat('HH:mm:ss').format(DateTime.now());

  final List<_NavItem> _navItems = const [
    _NavItem(icon: Icons.input, label: '入库管理', path: '/stock-in'),
    _NavItem(icon: Icons.output, label: '出库管理', path: '/stock-out'),
    _NavItem(icon: Icons.inventory_2, label: '库存管理', path: '/inventory'),
    _NavItem(
        icon: Icons.account_balance_wallet,
        label: '财务管理',
        path: '/finance'),
    _NavItem(icon: Icons.people, label: '往来单位', path: '/partners'),
    _NavItem(icon: Icons.category, label: '基础数据', path: '/products'),
    _NavItem(icon: Icons.settings, label: '系统设置', path: '/settings'),
  ];

  @override
  void initState() {
    super.initState();
    _currentTime = DateFormat('HH:mm:ss').format(DateTime.now());
    _timer = Timer.periodic(const Duration(seconds: 1), (_) {
      if (mounted) {
        setState(() =>
            _currentTime = DateFormat('HH:mm:ss').format(DateTime.now()));
      }
    });
  }

  @override
  void dispose() {
    _timer.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final user = ref.watch(authStateProvider).user;
    final location = GoRouterState.of(context).matchedLocation;
    final sidebarWidth = _sidebarExpanded ? 200.0 : 56.0;

    return Scaffold(
      body: Column(
        children: [
          // Top Bar
          Container(
            height: 56,
            color: AppTheme.primary,
            padding: const EdgeInsets.symmetric(horizontal: 8),
            child: Row(
              children: [
                IconButton(
                  icon: Icon(
                      _sidebarExpanded ? Icons.menu_open : Icons.menu,
                      color: Colors.white),
                  onPressed: () =>
                      setState(() => _sidebarExpanded = !_sidebarExpanded),
                  tooltip: _sidebarExpanded ? '收起侧边栏' : '展开侧边栏',
                ),
                const SizedBox(width: 4),
                const Icon(Icons.wine_bar, color: Colors.white, size: 22),
                const SizedBox(width: 8),
                const Text(
                  '酒库管理系统',
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 18,
                      fontWeight: FontWeight.w600,
                      letterSpacing: 0.5),
                ),
                const Spacer(),
                if (user != null) ...[
                  const Icon(Icons.business,
                      color: Colors.white70, size: 14),
                  const SizedBox(width: 4),
                  Text(user.hotelName,
                      style: const TextStyle(
                          color: Colors.white70, fontSize: 13)),
                  const SizedBox(width: 20),
                  const Icon(Icons.person_outline,
                      color: Colors.white70, size: 14),
                  const SizedBox(width: 4),
                  Text(user.username,
                      style: const TextStyle(
                          color: Colors.white70, fontSize: 13)),
                  const SizedBox(width: 8),
                  PopupMenuButton<String>(
                    icon: const Icon(Icons.keyboard_arrow_down,
                        color: Colors.white70),
                    onSelected: (v) {
                      if (v == 'logout') {
                        ref.read(authStateProvider.notifier).logout();
                        context.go('/login');
                      }
                    },
                    itemBuilder: (context) => [
                      const PopupMenuItem(
                          value: 'profile',
                          child: ListTile(
                            leading: Icon(Icons.manage_accounts, size: 18),
                            title: Text('个人设置'),
                            dense: true,
                          )),
                      const PopupMenuDivider(),
                      const PopupMenuItem(
                          value: 'logout',
                          child: ListTile(
                            leading: Icon(Icons.logout, size: 18),
                            title: Text('退出登录'),
                            dense: true,
                          )),
                    ],
                  ),
                  const SizedBox(width: 8),
                ],
              ],
            ),
          ),
          // Main area
          Expanded(
            child: Row(
              children: [
                // Sidebar
                AnimatedContainer(
                  duration: const Duration(milliseconds: 200),
                  curve: Curves.easeInOut,
                  width: sidebarWidth,
                  color: AppTheme.primaryDark,
                  child: Column(
                    children: [
                      Expanded(
                        child: ListView(
                          padding: const EdgeInsets.symmetric(vertical: 8),
                          children: _navItems.map((item) {
                            final isActive =
                                location.startsWith(item.path);
                            return _SidebarItem(
                              item: item,
                              isActive: isActive,
                              expanded: _sidebarExpanded,
                              onTap: () => context.go(item.path),
                            );
                          }).toList(),
                        ),
                      ),
                    ],
                  ),
                ),
                // Content area
                Expanded(
                  child: Column(
                    children: [
                      Expanded(child: widget.child),
                      // Status bar
                      Container(
                        height: 28,
                        color: const Color(0xFF37474F),
                        padding:
                            const EdgeInsets.symmetric(horizontal: 12),
                        child: Row(
                          children: [
                            if (user != null) ...[
                              _StatusItem(
                                  icon: Icons.store,
                                  text: '门店编号：${user.hotelNo}'),
                              const _StatusDivider(),
                              _StatusItem(
                                  icon: Icons.person,
                                  text: '登录用户：${user.username}'),
                              const _StatusDivider(),
                              _StatusItem(
                                  icon: Icons.login,
                                  text: '登录时间：$_loginTime'),
                              const _StatusDivider(),
                            ],
                            _StatusItem(
                                icon: Icons.access_time,
                                text: '当前时间：$_currentTime'),
                            const Spacer(),
                            const _StatusItem(
                                icon: Icons.info_outline,
                                text: 'v1.0.0'),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class _NavItem {
  final IconData icon;
  final String label;
  final String path;
  const _NavItem(
      {required this.icon, required this.label, required this.path});
}

class _SidebarItem extends StatefulWidget {
  final _NavItem item;
  final bool isActive;
  final bool expanded;
  final VoidCallback onTap;

  const _SidebarItem({
    required this.item,
    required this.isActive,
    required this.expanded,
    required this.onTap,
  });

  @override
  State<_SidebarItem> createState() => _SidebarItemState();
}

class _SidebarItemState extends State<_SidebarItem> {
  bool _hovered = false;

  @override
  Widget build(BuildContext context) {
    final isActive = widget.isActive;
    final expanded = widget.expanded;

    return MouseRegion(
      onEnter: (_) => setState(() => _hovered = true),
      onExit: (_) => setState(() => _hovered = false),
      child: GestureDetector(
        onTap: widget.onTap,
        child: AnimatedContainer(
          duration: const Duration(milliseconds: 150),
          height: 48,
          color: isActive
              ? AppTheme.primary.withOpacity(0.3)
              : _hovered
                  ? Colors.white.withOpacity(0.05)
                  : Colors.transparent,
          padding: EdgeInsets.symmetric(horizontal: expanded ? 0 : 0),
          child: Row(
            children: [
              // Active indicator
              AnimatedContainer(
                duration: const Duration(milliseconds: 150),
                width: 3,
                height: isActive ? 28 : 0,
                color: Colors.white,
                margin: EdgeInsets.only(right: expanded ? 13 : 0),
              ),
              if (!isActive) SizedBox(width: expanded ? 16 : 3),
              Expanded(
                child: Row(
                  mainAxisAlignment: expanded
                      ? MainAxisAlignment.start
                      : MainAxisAlignment.center,
                  children: [
                    Icon(
                      widget.item.icon,
                      color: isActive ? Colors.white : Colors.white60,
                      size: 20,
                    ),
                    if (expanded) ...[
                      const SizedBox(width: 12),
                      Flexible(
                        child: Text(
                          widget.item.label,
                          style: TextStyle(
                            color: isActive
                                ? Colors.white
                                : Colors.white70,
                            fontSize: 14,
                            fontWeight: isActive
                                ? FontWeight.w500
                                : FontWeight.normal,
                          ),
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                    ],
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class _StatusItem extends StatelessWidget {
  final IconData icon;
  final String text;
  const _StatusItem({required this.icon, required this.text});

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(icon, size: 11, color: Colors.white54),
        const SizedBox(width: 4),
        Text(text,
            style: const TextStyle(color: Colors.white54, fontSize: 11)),
      ],
    );
  }
}

class _StatusDivider extends StatelessWidget {
  const _StatusDivider();
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 1,
      height: 12,
      color: Colors.white24,
      margin: const EdgeInsets.symmetric(horizontal: 10),
    );
  }
}