import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:hive_flutter/hive_flutter.dart';

import '../../../app/icons/app_icons.dart';
import '../../../app/theme/app_colors.dart';
import '../../../core/widgets/ayat_today_card.dart';
import '../../../core/widgets/notification_bell_button.dart';
import '../../../core/widgets/tool_card.dart';
import '../../../data/local/hive_boxes.dart';
import '../../../data/local/models/app_settings.dart';

class ToolsScreen extends ConsumerWidget {
  const ToolsScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final isDark = Theme.of(context).brightness == Brightness.dark;
    final isSimpleMode =
        Hive.box<AppSettings>(HiveBoxes.settings).get('default')?.simpleMode ??
            false;
    final cards = <Widget>[
      if (!isSimpleMode)
        ToolCard(
          icon: AppIcons.quran,
          title: "Al-Qur'an\nTerjemahan",
          color: const Color(0xFF00B894),
          isDark: isDark,
          onTap: () => context.push('/tools/quran'),
        ),
      ToolCard(
        icon: AppIcons.murattal,
        title: "Qur'an\nMurattal",
        color: const Color(0xFF7B61FF),
        isDark: isDark,
        onTap: () => context.push('/tools/quran/1/murattal'),
      ),
      ToolCard(
        icon: AppIcons.qibla,
        title: 'Arah\nKiblat',
        color: const Color(0xFF0984E3),
        isDark: isDark,
        onTap: () => context.push('/tools/qibla'),
      ),
      if (!isSimpleMode)
        ToolCard(
          icon: AppIcons.dzikir,
          title: 'Dzikir\nHarian',
          color: AppColors.primary,
          isDark: isDark,
          onTap: () => context.push('/tools/dzikir'),
        ),
      ToolCard(
        icon: AppIcons.doa,
        title: 'Kumpulan\nDoa',
        color: const Color(0xFFE17055),
        isDark: isDark,
        onTap: () => context.push('/tools/doa'),
      ),
      ToolCard(
        icon: AppIcons.hadits,
        title: "Hadits\nArba'in",
        color: const Color(0xFF6C5CE7),
        isDark: isDark,
        onTap: () => context.push('/tools/hadits'),
      ),
      ToolCard(
        icon: AppIcons.quranEnrichment,
        title: "Pendalaman\nAl-Qur'an",
        color: const Color(0xFF00CEC9),
        isDark: isDark,
        onTap: () => context.push('/tools/quran/enrichment'),
      ),
    ];

    return Scaffold(
      appBar: AppBar(
        title: const Text('Alat Islami'),
        centerTitle: false,
        actions: [
          const NotificationBellButton(),
          IconButton(
            onPressed: () => context.push('/settings'),
            icon: const AppIcon(glyph: AppIcons.settings),
          ),
          const SizedBox(width: 8),
        ],
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              'AKSES CEPAT',
              style: TextStyle(
                fontSize: 11,
                fontWeight: FontWeight.w700,
                letterSpacing: 1.5,
                color: AppColors.sage,
              ),
            ),
            const SizedBox(height: 12),
            _buildQuickActionsGrid(cards),
            const SizedBox(height: 28),
            AyatTodayCard(
              headerText: 'Ayat Hari Ini',
              headerStyle: TextStyle(
                fontSize: 13,
                fontWeight: FontWeight.w600,
                color: isDark
                    ? AppColors.textSecondaryDark
                    : AppColors.textSecondaryLight,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildQuickActionsGrid(List<Widget> cards) {
    const spacing = 12.0;
    return LayoutBuilder(
      builder: (context, constraints) {
        final cardWidth = (constraints.maxWidth - spacing) / 2;
        return Wrap(
          spacing: spacing,
          runSpacing: spacing,
          children: [
            for (final card in cards) SizedBox(width: cardWidth, child: card),
          ],
        );
      },
    );
  }
}