import 'package:flutter/material.dart';
import 'package:lucide_icons/lucide_icons.dart';
import 'package:hive_flutter/hive_flutter.dart';
import '../../app/theme/app_colors.dart';
import '../../data/local/hive_boxes.dart';
import '../../data/local/models/app_settings.dart';

/// 5-tab bottom navigation bar per PRD §5.1.
/// Uses Material Symbols outlined (inactive) and filled (active).
class AppBottomNavBar extends StatelessWidget {
  const AppBottomNavBar({
    super.key,
    required this.currentIndex,
    required this.onTap,
  });

  final int currentIndex;
  final ValueChanged<int> onTap;

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<Box<AppSettings>>(
      valueListenable: Hive.box<AppSettings>(HiveBoxes.settings).listenable(),
      builder: (context, box, _) {
        final isSimpleMode = box.get('default')?.simpleMode ?? false;

        final simpleItems = const [
          BottomNavigationBarItem(
            icon: Icon(LucideIcons.home),
            activeIcon: Icon(LucideIcons.home),
            label: 'Beranda',
          ),
          BottomNavigationBarItem(
            icon: Icon(LucideIcons.calendar),
            activeIcon: Icon(LucideIcons.calendar),
            label: 'Jadwal',
          ),
          BottomNavigationBarItem(
            icon: Icon(LucideIcons.bookOpen),
            activeIcon: Icon(LucideIcons.bookOpen),
            label: 'Tilawah',
          ),
          BottomNavigationBarItem(
            icon: Icon(LucideIcons.headphones),
            activeIcon: Icon(LucideIcons.headphones),
            label: 'Murattal',
          ),
          BottomNavigationBarItem(
            icon: Icon(LucideIcons.sparkles),
            activeIcon: Icon(LucideIcons.sparkles),
            label: 'Zikir',
          ),
        ];

        final fullItems = const [
          BottomNavigationBarItem(
            icon: Icon(LucideIcons.home),
            activeIcon: Icon(LucideIcons.home),
            label: 'Beranda',
          ),
          BottomNavigationBarItem(
            icon: Icon(LucideIcons.calendar),
            activeIcon: Icon(LucideIcons.calendar),
            label: 'Jadwal',
          ),
          BottomNavigationBarItem(
            icon: Icon(LucideIcons.listChecks),
            activeIcon: Icon(LucideIcons.listChecks),
            label: 'Ibadah',
          ),
          BottomNavigationBarItem(
            icon: Icon(LucideIcons.barChart3),
            activeIcon: Icon(LucideIcons.barChart3),
            label: 'Laporan',
          ),
          BottomNavigationBarItem(
            icon: Icon(LucideIcons.wand2),
            activeIcon: Icon(LucideIcons.wand2),
            label: 'Alat',
          ),
        ];

        return Container(
          decoration: BoxDecoration(
            color: Theme.of(context).bottomNavigationBarTheme.backgroundColor,
            border: Border(
              top: BorderSide(
                color: Theme.of(context).dividerColor,
                width: 0.5,
              ),
            ),
          ),
          child: SafeArea(
            child: Padding(
              padding: const EdgeInsets.only(bottom: 8),
              child: BottomNavigationBar(
                currentIndex: currentIndex,
                onTap: onTap,
                items: isSimpleMode ? simpleItems : fullItems,
              ),
            ),
          ),
        );
      },
    );
  }
}