tatlock-ui/lib/shared/layouts/widgets/nav_panel.dart

import 'package:flutter/material.dart';

import 'panel_header.dart';

/// A navigation section item in the NavPanel.
class NavSection {
  const NavSection({
    required this.id,
    required this.label,
    required this.icon,
    this.badge,
  });

  /// Unique identifier for routing.
  final String id;

  /// Display label.
  final String label;

  /// Section icon.
  final IconData icon;

  /// Optional badge (e.g., item count).
  final String? badge;
}

/// Left-side navigation panel for room-level section navigation.
///
/// Shows a list of sections within the current room (e.g., Containers, Stacks,
/// Networks for Control Room). Header content is docked to bottom to
/// accommodate the logo bulge overlay.
///
/// See UI_LAYOUT.md for panel taxonomy and layout specifications.
class NavPanel extends StatelessWidget {
  const NavPanel({
    super.key,
    required this.title,
    required this.icon,
    required this.sections,
    required this.selectedId,
    required this.onSectionSelected,
    this.width = 280,
    this.trailing,
  });

  /// Panel title displayed in header.
  final String title;

  /// Leading icon for the header.
  final IconData icon;

  /// List of navigation sections.
  final List<NavSection> sections;

  /// Currently selected section ID.
  final String selectedId;

  /// Callback when a section is tapped.
  final ValueChanged<String> onSectionSelected;

  /// Panel width (default 280px per UI_LAYOUT.md spec).
  final double width;

  /// Optional trailing widget below sections (e.g., external links).
  final Widget? trailing;

  @override
  Widget build(BuildContext context) {
    final colorScheme = Theme.of(context).colorScheme;

    return SizedBox(
      width: width,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          PanelHeader(
            title: title,
            icon: icon,
            dockToBottom: true, // Left-side panel
          ),
          Expanded(
            child: ListView.builder(
              padding: const EdgeInsets.symmetric(vertical: 8),
              itemCount: sections.length,
              itemBuilder: (context, index) {
                final section = sections[index];
                final isSelected = section.id == selectedId;

                return _NavTile(
                  section: section,
                  isSelected: isSelected,
                  onTap: () => onSectionSelected(section.id),
                );
              },
            ),
          ),
          if (trailing != null) ...[
            Divider(height: 1, color: colorScheme.outlineVariant),
            trailing!,
          ],
        ],
      ),
    );
  }
}

class _NavTile extends StatelessWidget {
  const _NavTile({
    required this.section,
    required this.isSelected,
    required this.onTap,
  });

  final NavSection section;
  final bool isSelected;
  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    final colorScheme = Theme.of(context).colorScheme;
    final textTheme = Theme.of(context).textTheme;

    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
      child: Material(
        color: isSelected
            ? colorScheme.primaryContainer.withValues(alpha: 0.4)
            : Colors.transparent,
        borderRadius: BorderRadius.circular(8),
        child: InkWell(
          onTap: onTap,
          borderRadius: BorderRadius.circular(8),
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
            child: Row(
              children: [
                Icon(
                  section.icon,
                  size: 20,
                  color: isSelected
                      ? colorScheme.primary
                      : colorScheme.onSurfaceVariant,
                ),
                const SizedBox(width: 12),
                Expanded(
                  child: Text(
                    section.label,
                    style: textTheme.bodyMedium?.copyWith(
                      color: isSelected
                          ? colorScheme.primary
                          : colorScheme.onSurface,
                      fontWeight: isSelected ? FontWeight.w600 : null,
                    ),
                  ),
                ),
                if (section.badge != null)
                  Container(
                    padding: const EdgeInsets.symmetric(
                      horizontal: 8,
                      vertical: 2,
                    ),
                    decoration: BoxDecoration(
                      color: isSelected
                          ? colorScheme.primary.withValues(alpha: 0.2)
                          : colorScheme.surfaceContainerHighest,
                      borderRadius: BorderRadius.circular(12),
                    ),
                    child: Text(
                      section.badge!,
                      style: textTheme.labelSmall?.copyWith(
                        color: isSelected
                            ? colorScheme.primary
                            : colorScheme.onSurfaceVariant,
                      ),
                    ),
                  ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}