import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../models/kanji_item.dart';
import '../services/deck_repository.dart';

class BrowseScreen extends StatefulWidget {
  const BrowseScreen({super.key});

  @override
  State<BrowseScreen> createState() => _BrowseScreenState();
}

class _BrowseScreenState extends State<BrowseScreen>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;
  late PageController _kanjiPageController;
  late PageController _vocabPageController;

  List<KanjiItem> _kanjiDeck = [];
  List<VocabularyItem> _vocabDeck = [];
  Map<int, List<KanjiItem>> _kanjiByLevel = {};
  Map<int, List<VocabularyItem>> _vocabByLevel = {};
  List<int> _kanjiSortedLevels = [];
  List<int> _vocabSortedLevels = [];

  bool _loading = true;
  String _status = 'Loading...';
  int _currentKanjiPage = 0;
  int _currentVocabPage = 0;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
    _kanjiPageController = PageController();
    _vocabPageController = PageController();

    _tabController.addListener(() {
      setState(() {}); // Rebuild to update the level selector
    });

    _kanjiPageController.addListener(() {
      if (_kanjiPageController.page?.round() != _currentKanjiPage) {
        setState(() {
          _currentKanjiPage = _kanjiPageController.page!.round();
        });
      }
    });

    _vocabPageController.addListener(() {
      if (_vocabPageController.page?.round() != _currentVocabPage) {
        setState(() {
          _currentVocabPage = _vocabPageController.page!.round();
        });
      }
    });

    _loadDecks();
  }

  Future<void> _loadDecks() async {
    setState(() => _loading = true);
    try {
      final repo = Provider.of<DeckRepository>(context, listen: false);
      await repo.loadApiKey();
      final apiKey = repo.apiKey;

      if (apiKey == null || apiKey.isEmpty) {
        setState(() {
          _status = 'API key not set.';
          _loading = false;
        });
        return;
      }

      var kanji = await repo.loadKanji();
      if (kanji.isEmpty || kanji.every((k) => k.level == 0)) {
        setState(() => _status = 'Fetching kanji from WaniKani...');
        kanji = await repo.fetchAndCacheFromWk(apiKey);
      }

      var vocab = await repo.loadVocabulary();
      if (vocab.isEmpty || vocab.every((v) => v.level == 0)) {
        setState(() => _status = 'Fetching vocabulary from WaniKani...');
        vocab = await repo.fetchAndCacheVocabularyFromWk(apiKey);
      }

      _kanjiDeck = kanji;
      _vocabDeck = vocab;
      _groupItemsByLevel();

      setState(() {
        _loading = false;
        _status =
            'Loaded ${_kanjiDeck.length} kanji and ${_vocabDeck.length} vocabulary.';
      });
    } catch (e) {
      setState(() {
        _status = 'Error: $e';
        _loading = false;
      });
    }
  }

  void _groupItemsByLevel() {
    _kanjiByLevel = {};
    for (final item in _kanjiDeck) {
      if (item.level > 0) {
        (_kanjiByLevel[item.level] ??= []).add(item);
      }
    }
    _kanjiSortedLevels = _kanjiByLevel.keys.toList()..sort();

    _vocabByLevel = {};
    for (final item in _vocabDeck) {
      if (item.level > 0) {
        (_vocabByLevel[item.level] ??= []).add(item);
      }
    }
    _vocabSortedLevels = _vocabByLevel.keys.toList()..sort();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF121212),
      appBar: AppBar(
        title: const Text('Browse Items'),
        backgroundColor: const Color(0xFF1F1F1F),
        foregroundColor: Colors.white,
        bottom: TabBar(
          controller: _tabController,
          tabs: const [
            Tab(text: 'Kanji'),
            Tab(text: 'Vocabulary'),
          ],
          labelColor: Colors.blueAccent,
          unselectedLabelColor: Colors.grey,
          indicatorColor: Colors.blueAccent,
        ),
      ),
      body: _loading
          ? Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const CircularProgressIndicator(color: Colors.blueAccent),
                  const SizedBox(height: 16),
                  Text(_status, style: const TextStyle(color: Colors.white)),
                ],
              ),
            )
          : Column(
              children: [
                Expanded(
                  child: TabBarView(
                    controller: _tabController,
                    children: [
                      _buildPaginatedView(
                          _kanjiByLevel,
                          _kanjiSortedLevels,
                          _kanjiPageController,
                          (items) => _buildGridView(items.cast<KanjiItem>())),
                      _buildPaginatedView(
                          _vocabByLevel,
                          _vocabSortedLevels,
                          _vocabPageController,
                          (items) => _buildListView(items.cast<VocabularyItem>())),
                    ],
                  ),
                ),
                SafeArea(
                  top: false,
                  child: _buildLevelSelector(),
                ),
              ],
            ),
    );
  }

  Widget _buildPaginatedView(
      Map<int, List<dynamic>> groupedItems,
      List<int> sortedLevels,
      PageController pageController,
      Widget Function(List<dynamic>) buildPageContent) {
    if (sortedLevels.isEmpty) {
      return const Center(
        child:
            Text('No items to display.', style: TextStyle(color: Colors.white)),
      );
    }

    return PageView.builder(
      controller: pageController,
      itemCount: sortedLevels.length,
      itemBuilder: (context, index) {
        final level = sortedLevels[index];
        final levelItems = groupedItems[level]!;

        return Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: Text(
                'Level $level',
                style: const TextStyle(
                    fontSize: 24,
                    color: Colors.white,
                    fontWeight: FontWeight.bold),
              ),
            ),
            Expanded(child: buildPageContent(levelItems)),
          ],
        );
      },
    );
  }

  Widget _buildLevelSelector() {
    final isKanji = _tabController.index == 0;
    final levels = isKanji ? _kanjiSortedLevels : _vocabSortedLevels;
    final controller = isKanji ? _kanjiPageController : _vocabPageController;
    final currentPage = isKanji ? _currentKanjiPage : _currentVocabPage;

    if (levels.isEmpty) return const SizedBox.shrink();

    return Container(
      padding: const EdgeInsets.symmetric(vertical: 8.0),
      color: const Color(0xFF1F1F1F),
      height: 60,
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: List.generate(levels.length, (index) {
            final level = levels[index];
            final isSelected = index == currentPage;
            return Padding(
              padding: const EdgeInsets.symmetric(horizontal: 4.0),
              child: ElevatedButton(
                onPressed: () {
                  controller.animateToPage(index, duration: const Duration(milliseconds: 300), curve: Curves.easeInOut);
                },
                style: ElevatedButton.styleFrom(
                  backgroundColor: isSelected ? Colors.blueAccent : const Color(0xFF333333),
                  foregroundColor: Colors.white,
                  shape: const CircleBorder(),
                  padding: const EdgeInsets.all(12),
                ),
                child: Text(level.toString()),
              ),
            );
          }),
        ),
      ),
    );
  }

  Widget _buildGridView(List<KanjiItem> items) {
    return GridView.builder(
      gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 150,
        childAspectRatio: 1,
        crossAxisSpacing: 8,
        mainAxisSpacing: 8,
      ),
      itemCount: items.length,
      itemBuilder: (context, index) {
        final item = items[index];
        return GestureDetector(
          onTap: () => _showReadingsDialog(item),
          child:
              _buildSrsItemCard(item.characters, item.srsItems.values.toList()),
        );
      },
      padding: const EdgeInsets.all(8),
    );
  }

  Widget _buildListView(List<VocabularyItem> items) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        final item = items[index];
        return _buildVocabListTile(item);
      },
    );
  }

  Widget _buildVocabListTile(VocabularyItem item) {
    final avgSrsStage = item.srsItems.isNotEmpty
        ? item.srsItems.values
                .map((s) => s.srsStage)
                .reduce((a, b) => a + b) /
            item.srsItems.length
        : 0.0;

    return Card(
      color: const Color(0xFF1E1E1E),
      margin: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
      child: Padding(
        padding: const EdgeInsets.all(12.0),
        child: Row(
          children: [
            Expanded(
              child: Text(
                item.characters,
                style: const TextStyle(fontSize: 24, color: Colors.white),
              ),
            ),
            const SizedBox(width: 16),
            Expanded(
              flex: 2,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    item.meanings.join(', '),
                    style: const TextStyle(color: Colors.grey),
                    overflow: TextOverflow.ellipsis,
                  ),
                  const SizedBox(height: 8),
                  _buildSrsIndicator(avgSrsStage.round()),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildSrsItemCard(String characters, List<dynamic> srsItems) {
    final avgSrsStage = srsItems.isNotEmpty
        ? srsItems.map((s) => s.srsStage).reduce((a, b) => a + b) /
            srsItems.length
        : 0.0;

    return Card(
      color: const Color(0xFF1E1E1E),
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              characters,
              style: const TextStyle(fontSize: 32, color: Colors.white),
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 8),
            _buildSrsIndicator(avgSrsStage.round()),
          ],
        ),
      ),
    );
  }

  Widget _buildSrsIndicator(int level) {
    return Tooltip(
      message: 'SRS Level: $level',
      child: ClipRRect(
        borderRadius: BorderRadius.circular(4),
        child: SizedBox(
          height: 10,
          child: LinearProgressIndicator(
            value: level / 9.0, // Max SRS level is 9
            backgroundColor: Colors.grey[800],
            valueColor: AlwaysStoppedAnimation<Color>(
              _getColorForSrsLevel(level),
            ),
          ),
        ),
      ),
    );
  }

  Color _getColorForSrsLevel(int level) {
    if (level >= 9) return Colors.purple;
    if (level >= 8) return Colors.blue;
    if (level >= 7) return Colors.lightBlue;
    if (level >= 5) return Colors.green;
    if (level >= 3) return Colors.yellow;
    if (level >= 1) return Colors.orange;
    return Colors.red;
  }

  void _showReadingsDialog(KanjiItem kanji) {
    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          backgroundColor: const Color(0xFF1E1E1E),
          title: Text(
            'Details for ${kanji.characters}',
            style: const TextStyle(color: Colors.white),
          ),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'Level: ${kanji.level}',
                style: const TextStyle(color: Colors.white),
              ),
              const SizedBox(height: 16),
              if (kanji.meanings.isNotEmpty)
                Text(
                  'Meanings: ${kanji.meanings.join(', ')}',
                  style: const TextStyle(color: Colors.white),
                ),
              const SizedBox(height: 16),
              if (kanji.onyomi.isNotEmpty)
                Text(
                  'On\'yomi: ${kanji.onyomi.join(', ')}',
                  style: const TextStyle(color: Colors.white),
                ),
              if (kanji.kunyomi.isNotEmpty)
                Text(
                  'Kun\'yomi: ${kanji.kunyomi.join(', ')}',
                  style: const TextStyle(color: Colors.white),
                ),
              if (kanji.onyomi.isEmpty && kanji.kunyomi.isEmpty)
                const Text(
                  'No readings available.',
                  style: TextStyle(color: Colors.white),
                ),
            ],
          ),
          actions: [
            TextButton(
              onPressed: () => Navigator.of(context).pop(),
              child: const Text('Close',
                  style: TextStyle(color: Colors.blueAccent)),
            ),
          ],
        );
      },
    );
  }

  @override
  void dispose() {
    _tabController.dispose();
    _kanjiPageController.dispose();
    _vocabPageController.dispose();
    super.dispose();
  }
}