import 'package:flutter/material.dart';
import '../../../config/custom_text.dart';
import '../../../utils/colors.dart';
import '../../../widgets/custom_button.dart';
import 'InputLabel.dart';

class BirthDateStep extends StatefulWidget {
  final DateTime? initialValue;
  final Function(DateTime) onChanged;
  final VoidCallback onContinue;

  const BirthDateStep({
    Key? key,
    required this.initialValue,
    required this.onChanged,
    required this.onContinue,
  }) : super(key: key);

  @override
  _BirthDateStepState createState() => _BirthDateStepState();
}

class _BirthDateStepState extends State<BirthDateStep> {
  final TextEditingController _controller = TextEditingController();
  DateTime? selectedDate;
  bool isArabic = false;

  @override
  void initState() {
    super.initState();
    selectedDate = widget.initialValue;
    if (selectedDate != null) {
      _controller.text =
          "${selectedDate!.day.toString().padLeft(2, '0')}/${selectedDate!.month.toString().padLeft(2, '0')}/${selectedDate!.year}";
    }
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _showCustomCalendar(BuildContext context) {
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      backgroundColor: Colors.transparent,
      builder: (context) => CustomCalendarModal(
        initialDate: selectedDate ?? DateTime(2000),
        onDateSelected: (DateTime date) {
          setState(() {
            selectedDate = date;
            _controller.text =
                "${date.day.toString().padLeft(2, '0')}/${date.month.toString().padLeft(2, '0')}/${date.year}";
          });
          widget.onChanged(date);
          Navigator.pop(context);
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const SizedBox(height: 40),
        Txt(
          text: "your_birthdate",
          style: TextStyle(
            color: Colors.black,
            fontSize: 28,
            fontFamily: isArabic ? "Readex_Pro" : 'Inter',
            fontWeight: FontWeight.w700,
          ),
        ),
        const SizedBox(height: 8),
        Txt(
          text: "lets_see_when_did_came_to_earth",
          style: TextStyle(
            color: const Color(0xFF8C929C),
            fontSize: 16,
            fontFamily: isArabic ? "Readex_Pro" : 'Inter',
            fontWeight: FontWeight.w400,
          ),
        ),
        const SizedBox(height: 32),
        const InputLabel(text: "birthdate"),
        const SizedBox(height: 8),
        GestureDetector(
          onTap: () => _showCustomCalendar(context),
          child: Container(
            decoration: BoxDecoration(
              color: const Color(0xFFF5F5F5),
              borderRadius: BorderRadius.circular(12),
            ),
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
            child: Row(
              children: [
                const Icon(Icons.calendar_today_outlined,
                    color: Color(0xFF8C929C)),
                const SizedBox(width: 12),
                Expanded(
                  child: Text(
                    selectedDate != null
                        ? "${selectedDate!.day.toString().padLeft(2, '0')}/${selectedDate!.month.toString().padLeft(2, '0')}/${selectedDate!.year}"
                        : "DD / MM / YYYY",
                    style: TextStyle(
                      color: selectedDate != null
                          ? Colors.black
                          : const Color(0xFF8C929C),
                      fontSize: 16,
                      fontFamily: isArabic ? "Readex_Pro" : 'Inter',
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                ),
                const Icon(Icons.date_range, color: Color(0xFF8C929C)),
              ],
            ),
          ),
        ),
        const SizedBox(height: 24),
        CustomButton(
          onClick: selectedDate != null ? widget.onContinue : null,
          fontSize: 14,
          width: double.infinity,
          height: 40,
          borderRadius: 10,
          txtColor: AppNewColors.white,
          title: 'Next',
          backgroundColor: selectedDate != null
              ? AppNewColors.primaryBtnColor
              : AppNewColors.primaryBtnColor.withOpacity(0.5),
          borderColor: selectedDate != null
              ? AppNewColors.primaryBtnColor
              : AppNewColors.primaryBtnColor.withOpacity(0.5),
        ),
      ],
    );
  }
}

class CustomCalendarModal extends StatefulWidget {
  final DateTime initialDate;
  final Function(DateTime) onDateSelected;

  const CustomCalendarModal({
    Key? key,
    required this.initialDate,
    required this.onDateSelected,
  }) : super(key: key);

  @override
  _CustomCalendarModalState createState() => _CustomCalendarModalState();
}

class _CustomCalendarModalState extends State<CustomCalendarModal> {
  late DateTime selectedDate;
  late int selectedYear;
  late int selectedMonth;
  bool showYearPicker = false;
  bool showMonthPicker = false;

  final List<String> months = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December'
  ];

  @override
  void initState() {
    super.initState();
    selectedDate = widget.initialDate;
    selectedYear = widget.initialDate.year;
    selectedMonth = widget.initialDate.month;
  }

  List<int> get years {
    return List.generate(100, (index) => DateTime.now().year - index);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height * 0.75,
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.vertical(top: Radius.circular(24)),
      ),
      child: Column(
        children: [
          // Handle bar
          Container(
            margin: const EdgeInsets.only(top: 12),
            width: 40,
            height: 4,
            decoration: BoxDecoration(
              color: Colors.grey[300],
              borderRadius: BorderRadius.circular(2),
            ),
          ),

          // Header
          Padding(
            padding: const EdgeInsets.all(20),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                const Txt(
                  text: 'your_birthdate',
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.w600,
                    color: Colors.black,
                    fontFamily: 'Inter',
                  ),
                ),
                GestureDetector(
                  onTap: () => Navigator.pop(context),
                  child: Container(
                    padding: const EdgeInsets.all(8),
                    decoration: BoxDecoration(
                      color: Colors.grey[100],
                      shape: BoxShape.circle,
                    ),
                    child: const Icon(Icons.close, size: 20),
                  ),
                ),
              ],
            ),
          ),

          // Month/Year selector
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20),
            child: Row(
              children: [
                Expanded(
                  child: GestureDetector(
                    onTap: () {
                      setState(() {
                        showMonthPicker = !showMonthPicker;
                        showYearPicker = false;
                      });
                    },
                    child: Container(
                      padding: const EdgeInsets.symmetric(
                          vertical: 12, horizontal: 16),
                      decoration: BoxDecoration(
                        color: const Color(0xFFF5F5F5),
                        borderRadius: BorderRadius.circular(12),
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            months[selectedMonth - 1],
                            style: const TextStyle(
                              fontSize: 16,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                          Icon(
                            showMonthPicker
                                ? Icons.keyboard_arrow_up
                                : Icons.keyboard_arrow_down,
                            color: Colors.grey[600],
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
                const SizedBox(width: 12),
                Expanded(
                  child: GestureDetector(
                    onTap: () {
                      setState(() {
                        showYearPicker = !showYearPicker;
                        showMonthPicker = false;
                      });
                    },
                    child: Container(
                      padding: const EdgeInsets.symmetric(
                          vertical: 12, horizontal: 16),
                      decoration: BoxDecoration(
                        color: const Color(0xFFF5F5F5),
                        borderRadius: BorderRadius.circular(12),
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            selectedYear.toString(),
                            style: const TextStyle(
                              fontSize: 16,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                          Icon(
                            showYearPicker
                                ? Icons.keyboard_arrow_up
                                : Icons.keyboard_arrow_down,
                            color: Colors.grey[600],
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),

          const SizedBox(height: 20),

          // Content area
          Expanded(
            child: showYearPicker
                ? _buildYearPicker()
                : showMonthPicker
                    ? _buildMonthPicker()
                    : _buildCalendar(),
          ),

          // Confirm button
          Padding(
            padding: const EdgeInsets.all(20),
            child: CustomButton(
              onClick: () => widget.onDateSelected(selectedDate),
              fontSize: 16,
              width: double.infinity,
              height: 50,
              borderRadius: 12,
              txtColor: AppNewColors.white,
              title: 'Confirm',
              backgroundColor: AppNewColors.primaryBtnColor,
              borderColor: AppNewColors.primaryBtnColor,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildYearPicker() {
    return ListView.builder(
      padding: const EdgeInsets.symmetric(horizontal: 20),
      itemCount: years.length,
      itemBuilder: (context, index) {
        final year = years[index];
        final isSelected = year == selectedYear;

        return GestureDetector(
          onTap: () {
            setState(() {
              selectedYear = year;
              selectedDate = DateTime(year, selectedMonth, selectedDate.day);
              showYearPicker = false;
            });
          },
          child: Container(
            margin: const EdgeInsets.only(bottom: 8),
            padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 20),
            decoration: BoxDecoration(
              color: isSelected
                  ? AppNewColors.primaryBtnColor.withOpacity(0.1)
                  : Colors.transparent,
              borderRadius: BorderRadius.circular(12),
              border: isSelected
                  ? Border.all(color: AppNewColors.primaryBtnColor)
                  : null,
            ),
            child: Text(
              year.toString(),
              style: TextStyle(
                fontSize: 16,
                fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400,
                color: isSelected ? AppNewColors.primaryBtnColor : Colors.black,
              ),
            ),
          ),
        );
      },
    );
  }

  Widget _buildMonthPicker() {
    return ListView.builder(
      padding: const EdgeInsets.symmetric(horizontal: 20),
      itemCount: months.length,
      itemBuilder: (context, index) {
        final month = months[index];
        final monthIndex = index + 1;
        final isSelected = monthIndex == selectedMonth;

        return GestureDetector(
          onTap: () {
            setState(() {
              selectedMonth = monthIndex;
              selectedDate =
                  DateTime(selectedYear, monthIndex, selectedDate.day);
              showMonthPicker = false;
            });
          },
          child: Container(
            margin: const EdgeInsets.only(bottom: 8),
            padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 20),
            decoration: BoxDecoration(
              color: isSelected
                  ? AppNewColors.primaryBtnColor.withOpacity(0.1)
                  : Colors.transparent,
              borderRadius: BorderRadius.circular(12),
              border: isSelected
                  ? Border.all(color: AppNewColors.primaryBtnColor)
                  : null,
            ),
            child: Text(
              month,
              style: TextStyle(
                fontSize: 16,
                fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400,
                color: isSelected ? AppNewColors.primaryBtnColor : Colors.black,
              ),
            ),
          ),
        );
      },
    );
  }

  Widget _buildCalendar() {
    final daysInMonth = DateTime(selectedYear, selectedMonth + 1, 0).day;
    final firstDayOfMonth = DateTime(selectedYear, selectedMonth, 1).weekday;
    final today = DateTime.now();

    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20),
      child: Column(
        children: [
          // Week days header
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                .map((day) => Container(
                      width: 40,
                      height: 40,
                      alignment: Alignment.center,
                      child: Text(
                        day,
                        style: TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.w500,
                          color: Colors.grey[600],
                        ),
                      ),
                    ))
                .toList(),
          ),
          const SizedBox(height: 10),
          // Calendar grid
          Expanded(
            child: GridView.builder(
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 7,
                mainAxisSpacing: 8,
                crossAxisSpacing: 8,
              ),
              itemCount: 42, // 6 weeks * 7 days
              itemBuilder: (context, index) {
                final dayNumber = index - firstDayOfMonth + 2;

                if (dayNumber < 1 || dayNumber > daysInMonth) {
                  return const SizedBox(); // Empty cell
                }

                final date = DateTime(selectedYear, selectedMonth, dayNumber);
                final isSelected = date.day == selectedDate.day &&
                    date.month == selectedDate.month &&
                    date.year == selectedDate.year;
                final isToday = date.day == today.day &&
                    date.month == today.month &&
                    date.year == today.year;
                final isFuture = date.isAfter(today);

                return GestureDetector(
                  onTap: isFuture
                      ? null
                      : () {
                          setState(() {
                            selectedDate = date;
                          });
                        },
                  child: Container(
                    decoration: BoxDecoration(
                      color: isSelected
                          ? AppNewColors.primaryBtnColor
                          : isToday
                              ? AppNewColors.primaryBtnColor.withOpacity(0.1)
                              : Colors.transparent,
                      borderRadius: BorderRadius.circular(8),
                      border: isToday && !isSelected
                          ? Border.all(color: AppNewColors.primaryBtnColor)
                          : null,
                    ),
                    alignment: Alignment.center,
                    child: Text(
                      dayNumber.toString(),
                      style: TextStyle(
                        fontSize: 16,
                        fontWeight:
                            isSelected ? FontWeight.w600 : FontWeight.w400,
                        color: isFuture
                            ? Colors.grey[300]
                            : isSelected
                                ? Colors.white
                                : isToday
                                    ? AppNewColors.primaryBtnColor
                                    : Colors.black,
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}