// tablet_shell.dart — 平板外壳（侧栏 4 项触控 + 内容区），对照 ui_kits/tablet/tabapp.jsx
//
// 与 desktop 区别：侧栏 232 触控尺寸、4 项（无联系/设置）、顶栏无主题切换；
// 连接页自动走双栏（connect_page 在 formFactor==tablet 时进 isWide 分支）。
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import '../pangolin_theme.dart';
import '../screens/account_page.dart';
import '../screens/connect_page.dart';
import '../screens/nodes_page.dart';
import '../screens/stats_page.dart';
import '../state/app_providers.dart';
import '../state/navigation_provider.dart';
import '../widgets/content_top_bar.dart';
import '../widgets/nav_sidebar.dart';
import '../widgets/pangolin_icons.dart';

class TabletShell extends ConsumerWidget {
  const TabletShell({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final c = context.pangolin;
    final t = ref.watch(appTextProvider);
    final view = ref.watch(navViewProvider);

    final items = <NavSidebarItem>[
      (icon: PangolinIcons.power, label: t.tabConnect, view: NavView.connect),
      (icon: PangolinIcons.globe, label: t.tabServers, view: NavView.servers),
      (icon: PangolinIcons.barChart, label: t.tabStats, view: NavView.stats),
      (icon: PangolinIcons.user, label: t.tabMe, view: NavView.account),
    ];

    final titles = <NavView, String>{
      NavView.connect: t.tabConnect,
      NavView.servers: t.tabServers,
      NavView.stats: t.tabStats,
      NavView.account: t.tabMe,
    };

    void go(NavView v) => ref.read(navViewProvider.notifier).state = v;

    Widget content() {
      switch (view) {
        case NavView.connect:
          return ConnectPage(isWide: true, onOpenNodes: () => go(NavView.servers));
        case NavView.servers:
          return NodesPage(isWide: true, onPicked: () => go(NavView.connect));
        case NavView.stats:
          return const StatsPage(isWide: true);
        default: // account / contact / settings / plans / redeem → 账户（tablet 一级只 4 项）
          return const AccountPage(isWide: true);
      }
    }

    return ColoredBox(
      color: c.bg,
      child: Row(children: [
        NavSidebar(items: items, width: 232, dense: false),
        Expanded(
          child: Column(children: [
            ContentTopBar(title: titles[view] ?? t.tabMe, showThemeToggle: false, titleSize: 19),
            Expanded(child: content()),
          ]),
        ),
      ]),
    );
  }
}
