import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart'; // For creating bar charts
import '../widgets/TopSectionWidget.dart';

class WalletScreen extends StatefulWidget {
  @override
  _WalletScreenState createState() => _WalletScreenState();
}

class _WalletScreenState extends State<WalletScreen> {
  int selectedTabIndex = 1; // Default to "Hebdomadaire"
  DateTime? selectedDate; // Selected date variable

  // Sample Data for different tabs
  final List<double> weeklyData = [0, 200, 0, 0, 80, 160, 0];
  final List<double> todayData = [50, 100, 150, 100, 50, 0, 0];
  final List<String> days = ["Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche"];

  List<double> get currentData {
    // Return data based on the selected tab
    switch (selectedTabIndex) {
      case 0:
        return todayData;
      case 1:
      default:
        return weeklyData;
    }
  }

  void onTabTap(int index) {
    setState(() {
      selectedTabIndex = index;
    });
  }

  Future<void> _selectDate(BuildContext context) async {
    // Open date picker dialog
    final DateTime? picked = await showDatePicker(
      context: context,
      initialDate: selectedDate ?? DateTime.now(),
      firstDate: DateTime(2022, 1),
      lastDate: DateTime(2025),
    );
    if (picked != null && picked != selectedDate) {
      setState(() {
        selectedDate = picked;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[100], // Light grey background for better contrast
      body: Stack(
        children: [
          Padding(
            padding: const EdgeInsets.only(top: 220.0),
            child: Column(
              children: [
                // Tab Section for "Aujourd'hui" & "Hebdomadaire"
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      _buildTabItem('Aujourd\'hui', 0),
                      _buildTabItem('Hebdomadaire', 1),
                      IconButton(
                        icon: Icon(Icons.calendar_today, color: Colors.purple, size: 24),
                        onPressed: () => _selectDate(context),
                      ),
                    ],
                  ),
                ),
                SizedBox(height: 20),

                // Main Data Section
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16.0),
                  child: Column(
                    children: [
                      // Show selected date if available, otherwise default title
                      Text(
                        selectedDate != null
                            ? "${selectedDate!.day}.${selectedDate!.month}.${selectedDate!.year}"
                            : (selectedTabIndex == 0 ? "Mars 12.03.2022" : "Janvier 12.03.2022"),
                        style: TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.normal,
                          fontFamily: 'Poppins',
                          color: Colors.grey[700],
                        ),
                      ),

                      SizedBox(height: 20),
                      SizedBox(
                        height: 150, // Adjusted height for the chart
                        child: BarChart(
                          BarChartData(
                            alignment: BarChartAlignment.spaceAround,
                            maxY: 250,
                            barTouchData: BarTouchData(
                              enabled: true,
                              touchTooltipData: BarTouchTooltipData(
                                tooltipPadding: const EdgeInsets.all(8),
                                tooltipRoundedRadius: 10,
                                tooltipBorder: BorderSide(
                                  color: Colors.white,
                                ),
                                tooltipMargin: 8,
                                getTooltipItem: (group, groupIndex, rod, rodIndex) {
                                  String day = days[groupIndex];
                                  return BarTooltipItem(
                                    '$day\n${rod.toY.round()} TND',
                                    const TextStyle(
                                      color: Colors.white,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  );
                                },
                              ),
                            ),
                            titlesData: FlTitlesData(
                              show: true,
                              bottomTitles: AxisTitles(
                                sideTitles: SideTitles(
                                  showTitles: true,
                                  getTitlesWidget: (double value, TitleMeta meta) {
                                    return Text(
                                      days[value.toInt()],
                                      style: const TextStyle(
                                        color: Colors.black,
                                        fontSize: 10,
                                        fontFamily: 'Poppins',
                                      ),
                                    );
                                  },
                                  reservedSize: 22,
                                ),
                              ),
                              leftTitles: AxisTitles(
                                sideTitles: SideTitles(
                                  showTitles: false,
                                ),
                              ),
                            ),
                            borderData: FlBorderData(show: false),
                            barGroups: currentData.asMap().entries.map((entry) {
                              return BarChartGroupData(
                                x: entry.key,
                                barRods: [
                                  BarChartRodData(
                                    toY: entry.value,
                                    color: entry.value > 150 ? Colors.orange : Colors.deepOrangeAccent,
                                    width: 14,
                                  ),
                                ],
                              );
                            }).toList(),
                          ),
                        ),
                      ),
                      SizedBox(height: 30),

                      // Total Trips Section
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            'Total Trips',
                            style: TextStyle(
                              fontSize: 16,
                              fontWeight: FontWeight.bold,
                              fontFamily: 'Poppins',
                              color: Colors.black,
                            ),
                          ),
                          Text(
                            selectedTabIndex == 0 ? '10' : '50',
                            style: TextStyle(
                              fontSize: 16,
                              fontWeight: FontWeight.bold,
                              fontFamily: 'Poppins',
                              color: Colors.black,
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  // Helper widget to build each tab item
  Widget _buildTabItem(String title, int index) {
    bool isSelected = index == selectedTabIndex;
    selectedDate=null;
    return GestureDetector(
      onTap: () => onTabTap(index),
      child: Column(
        children: [
          Text(
            title,
            style: TextStyle(
              fontFamily: 'Poppins',
              fontSize: 14,
              color: isSelected ? Colors.black : Colors.grey,
              fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
            ),
          ),
          SizedBox(height: 2),
          if (isSelected)
            Container(
              width: 8,
              height: 2,
              color: Colors.black,
            ),
        ],
      ),
    );
  }
}