import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../providers/navigation_provider.dart';
import 'pokemon_list.dart';
import 'guess_page.dart';

class MainPage extends ConsumerWidget {
  const MainPage({Key? key}) : super(key: key);

  static const List<Widget> _pages = [
    PokemonListPage(),
    GuessPage(),
    Center(child: Text("SYSTEM PAGE placeholder")),
  ];

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final currentIndex = ref.watch(selectedTabProvider);

    return Scaffold(
      backgroundColor: const Color(0xFF1B2333),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 20.0),
          child: Container(
            decoration: BoxDecoration(
              color: const Color(0xFFD32F2F),
              borderRadius: BorderRadius.circular(30),
              border: Border.all(color: const Color(0xFFA12020), width: 4),
            ),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(26),
              child: IndexedStack(
                index: currentIndex,
                children: _pages,
              ),
            ),
          ),
        ),
      ),
      bottomNavigationBar: Theme(
        data: Theme.of(context).copyWith(
          splashColor: Colors.transparent,
          highlightColor: Colors.transparent,
        ),
        child: BottomNavigationBar(
          currentIndex: currentIndex,
          onTap: (index) => ref.read(selectedTabProvider.notifier).set(index),
          type: BottomNavigationBarType.fixed,
          selectedItemColor: const Color(0xFFD32F2F),
          unselectedItemColor: Colors.grey,
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.grid_view), label: 'LIST'),
            BottomNavigationBarItem(icon: Icon(Icons.games), label: 'GUESS'),
            BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'SYSTEM'),
          ],
        ),
      ),
    );
  }
}