import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:provider/provider.dart';
import '../models/drink_type.dart';
import '../services/flux_service.dart';
import '../widgets/cozy_wave.dart';

class DailyFluxScreen extends StatelessWidget {
  const DailyFluxScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final flux = context.watch<FluxService>();

    return Scaffold(
      body: Stack(
        children: [
          Positioned(
            top: -50,
            right: -50,
            child: _buildBlob(200, const Color(0xFFE8F5E9)),
          ),
          Positioned(
            bottom: 100,
            left: -30,
            child: _buildBlob(150, const Color(0xFFFFF3E0)),
          ),

          SafeArea(
            child: Column(
              children: [
                _buildHeader(flux),
                Expanded(
                  child: Center(
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 32),
                      child: Stack(
                        alignment: Alignment.center,
                        children: [
                          Container(
                            width: 280,
                            height: 380,
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(140),
                              border: Border.all(color: Colors.white, width: 8),
                              boxShadow: [
                                BoxShadow(
                                  color: const Color(
                                    0xFFA1887F,
                                  ).withOpacity(0.1),
                                  blurRadius: 30,
                                  offset: const Offset(0, 15),
                                ),
                              ],
                            ),
                            child: ClipRRect(
                              borderRadius: BorderRadius.circular(132),
                              child: Stack(
                                children: [
                                  Container(color: const Color(0xFFFAFAFA)),
                                  Align(
                                    alignment: Alignment.bottomCenter,
                                    child: CozyWave(
                                      percentage: flux.progress,
                                      color: const Color(
                                        0xFF81D4FA,
                                      ).withOpacity(0.6),
                                    ),
                                  ),
                                  Center(
                                    child: Column(
                                      mainAxisSize: MainAxisSize.min,
                                      children: [
                                        Text(
                                          "${(flux.progress * 100).toInt()}%",
                                          style: GoogleFonts.nunito(
                                            fontSize: 56,
                                            fontWeight: FontWeight.w900,
                                            color: const Color(0xFF5D4037),
                                          ),
                                        ),
                                        Text(
                                          "${flux.intake.toInt()} / ${flux.dailyGoal.toInt()} ml",
                                          style: GoogleFonts.quicksand(
                                            fontSize: 16,
                                            fontWeight: FontWeight.bold,
                                            color: const Color(0xFFA1887F),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(bottom: 20),
                  child: Wrap(
                    spacing: 16,
                    children: CozyDrinkType.values.map((type) {
                      return _buildAddButton(context, type);
                    }).toList(),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildHeader(FluxService flux) {
    return Padding(
      padding: const EdgeInsets.all(24.0),
      child: Column(
        children: [
          Text(
            "FluxWater:Monitor",
            style: GoogleFonts.nunito(
              fontSize: 18,
              fontWeight: FontWeight.bold,
              color: Colors.grey.withOpacity(0.5),
              letterSpacing: 1.5,
            ),
          ),
          const SizedBox(height: 8),
          Text(
            flux.encouragement,
            textAlign: TextAlign.center,
            style: GoogleFonts.nunito(
              fontSize: 22,
              fontWeight: FontWeight.w700,
              color: const Color(0xFF5D4037),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildAddButton(BuildContext context, CozyDrinkType type) {
    return GestureDetector(
      onTap: () {
        context.read<FluxService>().addDrink(250, type);
        HapticFeedback.lightImpact();
      },
      child: Column(
        children: [
          Container(
            width: 60,
            height: 60,
            decoration: BoxDecoration(
              color: type.pastelColor.withOpacity(0.3),
              shape: BoxShape.circle,
            ),
            child: Icon(
              type.icon,
              color: type.pastelColor.withOpacity(1.0),
              size: 28,
            ),
          ),
          const SizedBox(height: 8),
          Text(
            type.label,
            style: GoogleFonts.quicksand(
              fontSize: 12,
              fontWeight: FontWeight.bold,
              color: const Color(0xFF8D6E63),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildBlob(double size, Color color) {
    return Container(
      width: size,
      height: size,
      decoration: BoxDecoration(color: color, shape: BoxShape.circle),
    );
  }
}