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

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

  @override
  State<QuranBookmarksScreen> createState() => _QuranBookmarksScreenState();
}

class _QuranBookmarksScreenState extends State<QuranBookmarksScreen> {
  bool _showLatin = true;
  bool _showTerjemahan = true;

  @override
  void initState() {
    super.initState();
    final box = Hive.box<AppSettings>(HiveBoxes.settings);
    final settings = box.get('default') ?? AppSettings();
    _showLatin = settings.showLatin;
    _showTerjemahan = settings.showTerjemahan;
  }

  void _showDisplaySettings() {
    showModalBottomSheet(
      context: context,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
      ),
      builder: (ctx) => StatefulBuilder(
        builder: (context, setModalState) {
          return Padding(
            padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 16),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text(
                  'Pengaturan Tampilan',
                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                ),
                const SizedBox(height: 16),
                SwitchListTile(
                  title: const Text('Tampilkan Latin'),
                  value: _showLatin,
                  activeColor: AppColors.primary,
                  onChanged: (val) {
                    setModalState(() => _showLatin = val);
                    setState(() => _showLatin = val);
                    final box = Hive.box<AppSettings>(HiveBoxes.settings);
                    final settings = box.get('default') ?? AppSettings();
                    settings.showLatin = val;
                    settings.save();
                  },
                ),
                SwitchListTile(
                  title: const Text('Tampilkan Terjemahan'),
                  value: _showTerjemahan,
                  activeColor: AppColors.primary,
                  onChanged: (val) {
                    setModalState(() => _showTerjemahan = val);
                    setState(() => _showTerjemahan = val);
                    final box = Hive.box<AppSettings>(HiveBoxes.settings);
                    final settings = box.get('default') ?? AppSettings();
                    settings.showTerjemahan = val;
                    settings.save();
                  },
                ),
                const SizedBox(height: 16),
              ],
            ),
          );
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    final isDark = Theme.of(context).brightness == Brightness.dark;

    return Scaffold(
      appBar: AppBar(
        title: const Text('Markah Al-Quran'),
        centerTitle: false,
        actions: [
          IconButton(
            icon: const Icon(LucideIcons.settings2),
            onPressed: _showDisplaySettings,
          ),
        ],
      ),
      body: ValueListenableBuilder(
        valueListenable: Hive.box<QuranBookmark>(HiveBoxes.bookmarks).listenable(),
        builder: (context, Box<QuranBookmark> box, _) {
          if (box.isEmpty) {
            return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(
                    LucideIcons.bookmark,
                    size: 64,
                    color: AppColors.primary.withValues(alpha: 0.3),
                  ),
                  const SizedBox(height: 16),
                  Text(
                    'Belum ada markah',
                    style: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.w600,
                      color: isDark ? Colors.white : Colors.black87,
                    ),
                  ),
                  const SizedBox(height: 8),
                  Text(
                    'Tandai ayat saat membaca Al-Quran',
                    style: TextStyle(
                      fontSize: 14,
                      color: isDark ? AppColors.textSecondaryDark : AppColors.textSecondaryLight,
                    ),
                    textAlign: TextAlign.center,
                  ),
                ],
              ),
            );
          }

          // Filter bookmarks
          final allBookmarks = box.values.toList();
          final lastRead = allBookmarks.where((b) => b.isLastRead).toList();
          final favorites = allBookmarks.where((b) => !b.isLastRead).toList()
            ..sort((a, b) => b.savedAt.compareTo(a.savedAt));

          return ListView(
            padding: const EdgeInsets.all(16),
            children: [
              if (lastRead.isNotEmpty) ...[
                const Text(
                  'TERAKHIR DIBACA',
                  style: TextStyle(
                    fontSize: 11,
                    fontWeight: FontWeight.w700,
                    letterSpacing: 1.5,
                    color: AppColors.sage,
                  ),
                ),
                const SizedBox(height: 12),
                _buildBookmarkCard(context, lastRead.first, isDark, box, isLastRead: true),
                const SizedBox(height: 24),
              ],
              
              if (favorites.isNotEmpty) ...[
                const Text(
                  'AYAT FAVORIT',
                  style: TextStyle(
                    fontSize: 11,
                    fontWeight: FontWeight.w700,
                    letterSpacing: 1.5,
                    color: AppColors.sage,
                  ),
                ),
                const SizedBox(height: 12),
                ...favorites.map((fav) => Padding(
                  padding: const EdgeInsets.only(bottom: 12),
                  child: _buildBookmarkCard(context, fav, isDark, box, isLastRead: false),
                )),
              ],
            ],
          );
        },
      ),
    );
  }

  Widget _buildBookmarkCard(BuildContext context, QuranBookmark bookmark, bool isDark, Box<QuranBookmark> box, {required bool isLastRead}) {
    final dateStr = DateFormat('dd MMM yyyy, HH:mm').format(bookmark.savedAt);
    
    return InkWell(
      onTap: () => context.push('/tools/quran/${bookmark.surahId}?startVerse=${bookmark.verseId}'),
      borderRadius: BorderRadius.circular(16),
      child: Container(
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: isDark ? AppColors.surfaceDark : AppColors.surfaceLight,
          borderRadius: BorderRadius.circular(16),
          border: Border.all(
            color: isLastRead 
                ? AppColors.primary.withValues(alpha: 0.3) 
                : (isDark ? AppColors.primary.withValues(alpha: 0.1) : AppColors.cream),
            width: isLastRead ? 1.5 : 1.0,
          ),
          boxShadow: isLastRead ? [
            BoxShadow(
              color: AppColors.primary.withValues(alpha: 0.05),
              blurRadius: 10,
              offset: const Offset(0, 4),
            )
          ] : null,
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
                  decoration: BoxDecoration(
                    color: AppColors.primary.withValues(alpha: 0.1),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      if (isLastRead) ...[
                        const Icon(LucideIcons.pin, size: 12, color: AppColors.primary),
                        const SizedBox(width: 4),
                      ],
                      Text(
                        'QS. ${bookmark.surahName}: ${bookmark.verseId}',
                        style: const TextStyle(
                          fontSize: 12,
                          fontWeight: FontWeight.w700,
                          color: AppColors.primary,
                        ),
                      ),
                    ],
                  ),
                ),
                IconButton(
                  icon: const Icon(LucideIcons.trash2, color: Colors.red, size: 20),
                  onPressed: () => box.delete(bookmark.key),
                  padding: EdgeInsets.zero,
                  constraints: const BoxConstraints(),
                ),
              ],
            ),
            const SizedBox(height: 16),
            Align(
              alignment: Alignment.centerRight,
              child: Text(
                bookmark.verseText,
                textAlign: TextAlign.right,
                style: const TextStyle(
                  fontFamily: 'Amiri',
                  fontSize: 22,
                  height: 1.8,
                ),
              ),
            ),
            
            if (_showLatin && bookmark.verseLatin != null) ...[
              const SizedBox(height: 12),
              Text(
                bookmark.verseLatin!,
                style: const TextStyle(
                  fontSize: 13,
                  fontStyle: FontStyle.italic,
                  color: AppColors.primary,
                ),
              ),
            ],
            
            if (_showTerjemahan && bookmark.verseTranslation != null) ...[
              const SizedBox(height: 8),
              Text(
                bookmark.verseTranslation!,
                style: TextStyle(
                  fontSize: 14,
                  height: 1.6,
                  color: isDark ? AppColors.textSecondaryDark : AppColors.textSecondaryLight,
                ),
              ),
            ],

            const SizedBox(height: 16),
            
            if (isLastRead) ...[
              SizedBox(
                width: double.infinity,
                child: FilledButton.icon(
                  onPressed: () => context.push('/tools/quran/${bookmark.surahId}?startVerse=${bookmark.verseId}'),
                  icon: const Icon(LucideIcons.bookOpen, size: 18),
                  label: const Text('Lanjutkan Membaca'),
                  style: FilledButton.styleFrom(
                    padding: const EdgeInsets.symmetric(vertical: 12),
                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
                  ),
                ),
              ),
              const SizedBox(height: 12),
            ],

            Row(
              children: [
                Icon(
                  LucideIcons.clock,
                  size: 12,
                  color: isDark ? AppColors.textSecondaryDark : AppColors.textSecondaryLight,
                ),
                const SizedBox(width: 4),
                Text(
                  '${isLastRead ? 'Ditandai' : 'Disimpan'}: $dateStr',
                  style: TextStyle(
                    fontSize: 10,
                    color: isDark ? AppColors.textSecondaryDark : AppColors.textSecondaryLight,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}