import 'package:flutter/material.dart';

import '../routes.dart';
import '../services/api_auth_service.dart';
import 'community_decks_screen.dart';
import 'deck_list_screen.dart';

/// Shell with tab navigation: My Decks and Community.
class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _currentIndex = 0;
  final GlobalKey<DeckListScreenState> _deckListKey = GlobalKey<DeckListScreenState>();
  final GlobalKey<CommunityDecksScreenState> _communityKey = GlobalKey<CommunityDecksScreenState>();

  void _onDestinationSelected(int index) {
    if (index == _currentIndex) return;
    setState(() => _currentIndex = index);
    if (index == 0) {
      _deckListKey.currentState?.refresh();
    } else if (index == 2) {
      _communityKey.currentState?.refresh();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Image.asset(
              'android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png',
              height: 32,
              width: 32,
              fit: BoxFit.contain,
              errorBuilder: (_, __, ___) => Icon(
                Icons.auto_stories,
                size: 28,
                color: Theme.of(context).colorScheme.primaryContainer,
              ),
            ),
            const SizedBox(width: 10),
            Text(
              'omotomo',
              style: Theme.of(context).textTheme.titleLarge?.copyWith(
                fontWeight: FontWeight.w700,
                letterSpacing: -0.5,
              ),
            ),
          ],
        ),
        actions: [
          ValueListenableBuilder<ApiUser?>(
            valueListenable: ApiAuthService.instance.currentUser,
            builder: (context, user, _) {
              if (user == null) {
                return FilledButton.tonal(
                  onPressed: () => Navigator.of(context).pushNamed(Routes.login),
                  child: const Text('Log in'),
                );
              }
              return Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  IconButton(
                    icon: const Icon(Icons.sync),
                    tooltip: 'Sync from server',
                    onPressed: () => _deckListKey.currentState?.refresh(),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(right: 4),
                    child: PopupMenuButton<String>(
                      offset: const Offset(0, 40),
                      tooltip: 'Account',
                      child: UserAvatar(user: user),
                      itemBuilder: (context) => [
                        const PopupMenuItem<String>(
                          value: 'logout',
                          child: Row(
                            children: [
                              Icon(Icons.logout),
                              SizedBox(width: 12),
                              Text('Log out'),
                            ],
                          ),
                        ),
                      ],
                      onSelected: (value) async {
                        if (value != 'logout') return;
                        final navigator = Navigator.of(context);
                        await ApiAuthService.instance.logout();
                        navigator.pushNamedAndRemoveUntil(
                          Routes.login,
                          (route) => false,
                        );
                      },
                    ),
                  ),
                ],
              );
            },
          ),
        ],
      ),
      body: IndexedStack(
        index: _currentIndex == 2 ? 1 : 0,
        children: [
          DeckListScreen(key: _deckListKey, showAppBar: false),
          CommunityDecksScreen(key: _communityKey, showAppBar: false),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _deckListKey.currentState?.showAddDeckOptions(),
        tooltip: 'Add Deck',
        child: const Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        notchMargin: 8,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            _NavItem(
              icon: Icons.folder,
              label: 'My Decks',
              selected: _currentIndex == 0,
              onTap: () => _onDestinationSelected(0),
            ),
            const SizedBox(width: 56),
            _NavItem(
              icon: Icons.people,
              label: 'Community',
              selected: _currentIndex == 2,
              onTap: () => _onDestinationSelected(2),
            ),
          ],
        ),
      ),
    );
  }
}

class _NavItem extends StatelessWidget {
  final IconData icon;
  final String label;
  final bool selected;
  final VoidCallback onTap;

  const _NavItem({
    required this.icon,
    required this.label,
    required this.selected,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      customBorder: const CircleBorder(),
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(icon, size: 22, color: selected ? Theme.of(context).colorScheme.primary : null),
            const SizedBox(width: 6),
            Text(
              label,
              style: TextStyle(
                fontSize: 12,
                color: selected ? Theme.of(context).colorScheme.primary : null,
              ),
            ),
          ],
        ),
      ),
    );
  }
}