import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:google_fonts/google_fonts.dart';
import '../theme/app_theme.dart';
import '../providers/navigation_provider.dart';

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Row(
      children: [
        _buildQuickButton(
          context,
          icon: Icons.water_drop_outlined,
          label: 'Period',
          color: AppColors.menstrualPhase,
          onTap: () => _navigateToLog(ref),
        ),
        const SizedBox(width: 12),
        _buildQuickButton(
          context,
          icon: Icons.emoji_emotions_outlined,
          label: 'Mood',
          color: AppColors.softGold,
          onTap: () => _navigateToLog(ref),
        ),
        const SizedBox(width: 12),
        _buildQuickButton(
          context,
          icon: Icons.flash_on_outlined,
          label: 'Energy',
          color: AppColors.follicularPhase,
          onTap: () => _navigateToLog(ref),
        ),
        const SizedBox(width: 12),
        _buildQuickButton(
          context,
          icon: Icons.healing_outlined,
          label: 'Symptoms',
          color: AppColors.lavender,
          onTap: () => _navigateToLog(ref),
        ),
      ],
    );
  }

  void _navigateToLog(WidgetRef ref) {
    // Navigate to the Log tab (index 2)
    ref.read(navigationProvider.notifier).setIndex(2);
  }

  Widget _buildQuickButton(
    BuildContext context, {
    required IconData icon,
    required String label,
    required Color color,
    required VoidCallback onTap,
  }) {
    final isDark = Theme.of(context).brightness == Brightness.dark;

    return Expanded(
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          onTap: onTap,
          borderRadius: BorderRadius.circular(12),
          child: Container(
            padding: const EdgeInsets.symmetric(vertical: 16),
            decoration: BoxDecoration(
              color: color.withOpacity(isDark ? 0.2 : 0.15),
              borderRadius: BorderRadius.circular(12),
              border:
                  isDark ? Border.all(color: color.withOpacity(0.3)) : null,
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(icon, color: color, size: 24),
                const SizedBox(height: 6),
                Text(
                  label,
                  style: GoogleFonts.outfit(
                    fontSize: 11,
                    fontWeight: FontWeight.w600,
                    color: isDark ? Colors.white.withOpacity(0.9) : color,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}