import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:lba/gen/assets.gen.dart';
import 'package:lba/screens/nearby/nearby.dart';
import 'package:lba/widgets/interestsUserInfo.dart';
import 'package:lba/widgets/loginButton.dart';

class UserInfo extends StatefulWidget {
  const UserInfo({super.key});

  @override
  State<UserInfo> createState() => _UserInfoState();
}

class _UserInfoState extends State<UserInfo> {
  DateTime? selectedDate;
  String? selectedGender;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                IconButton(
                  icon: SvgPicture.asset(Assets.icons.back.path),
                  onPressed: () => Navigator.pop(context),
                ),
              ],
            ),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 24),
              child: Center(child: SvgPicture.asset(Assets.images.logo.path)),
            ),
            const SizedBox(height: 24),
            const Padding(
              padding: EdgeInsets.fromLTRB(25, 0, 25, 20),
              child: Text(
                "what do you like to be called in this application?",
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  color: Color.fromARGB(255, 117, 117, 117),
                ),
              ),
            ),
            const Padding(
              padding: EdgeInsets.fromLTRB(25, 0, 25, 0),
              child: TextField(
                decoration: InputDecoration(
                  counterText: '',
                  hintText: "Enter here...",
                  hintStyle: TextStyle(fontWeight: FontWeight.w500, color: Colors.grey),
                  filled: true,
                  fillColor: Color.fromARGB(133, 250, 250, 250),
                  enabledBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(12)),
                    borderSide: BorderSide(color: Color.fromARGB(255, 14, 63, 102)),
                  ),
                  focusedBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(12)),
                    borderSide: BorderSide(color: Colors.grey, width: 2),
                  ),
                ),
              ),
            ),
            const SizedBox(height: 24),
            const Padding(
              padding: EdgeInsets.fromLTRB(25, 0, 25, 10),
              child: Text(
                "Gender",
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  color: Color.fromARGB(255, 117, 117, 117),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 25),
              child: Wrap(
                spacing: 10,
                children: [
                  ChoiceChip(
                    label: const Text("Male"),
                    selected: selectedGender == "Male",
                    onSelected: (_) => setState(() => selectedGender = "Male"),
                  ),
                  ChoiceChip(
                    label: const Text("Female"),
                    selected: selectedGender == "Female",
                    onSelected: (_) => setState(() => selectedGender = "Female"),
                  ),
                  ChoiceChip(
                    label: const Text("Prefer not to say"),
                    selected: selectedGender == "Prefer not to say",
                    onSelected: (_) => setState(() => selectedGender = "Prefer not to say"),
                  ),
                ],
              ),
            ),
            const SizedBox(height: 24),
            const Padding(
              padding: EdgeInsets.fromLTRB(25, 0, 25, 15),
              child: Text(
                "Birth Date?",
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  color: Color.fromARGB(255, 117, 117, 117),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.fromLTRB(25, 0, 25, 0),
              child: TextField(
                readOnly: true,
                decoration: InputDecoration(
                  hintText: selectedDate != null
                      ? "${selectedDate!.month}/${selectedDate!.day}/${selectedDate!.year}"
                      : "mm/dd/yyyy",
                  hintStyle: const TextStyle(fontWeight: FontWeight.w500, color: Colors.grey),
                  filled: true,
                  fillColor: const Color.fromARGB(133, 250, 250, 250),
                  enabledBorder: const OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(12)),
                    borderSide: BorderSide(color: Color.fromARGB(255, 14, 63, 102)),
                  ),
                  focusedBorder: const OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(12)),
                    borderSide: BorderSide(color: Colors.grey, width: 2),
                  ),
                  suffixIcon: IconButton(
                    icon: SvgPicture.asset(Assets.icons.clander.path),
                    onPressed: () async {
                      final result = await showModalBottomSheet<DateTime>(
                        context: context,
                        builder: (_) => const _DatePickerSheet(),
                      );
                      if (result != null) {
                        setState(() {
                          selectedDate = result;
                        });
                      }
                    },
                  ),
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.fromLTRB(25, 25, 25, 10),
              child: Text(
                "Interests / Preferences",
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  color: Color.fromARGB(255, 117, 117, 117),
                ),
              ),
            ),
            Interests(icon: Assets.icons.shoppingCart.path,title: "Shopping & Retail",options: ["Fashion & Clothing","Electronics & Gadgets","Shoes & Accessories"],),
            SizedBox(height: 30,),
            Center(child: SizedBox(
              width: 300,
              child: LogInButton(text: "Submit", onPressed:() {
                Navigator.push(context, MaterialPageRoute(builder: 
                (context) => Nearby(),
                ));
              },))),
          ],
        ),
      ),
    );
  }
}


class _DatePickerSheet extends StatefulWidget {
  const _DatePickerSheet();

  @override
  State<_DatePickerSheet> createState() => _DatePickerSheetState();
}

class _DatePickerSheetState extends State<_DatePickerSheet> {
  late DateTime now;
  late int selectedYear;
  late int selectedMonth;
  int? selectedDay;

  late final List<int> years;

  final List<String> months = [
    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
  ];

  @override
  void initState() {
    super.initState();
    now = DateTime.now();
    selectedYear = now.year;
    selectedMonth = now.month;
    years = List.generate(100, (index) => now.year - index);
  }

  List<DateTime?> getCalendarDays() {
    final firstDayOfMonth = DateTime(selectedYear, selectedMonth, 1);
    final lastDayOfMonth = DateTime(selectedYear, selectedMonth + 1, 0);
    final daysInMonth = lastDayOfMonth.day;

    List<DateTime?> days = [];

    // Add empty days for alignment
    for (int i = 0; i < firstDayOfMonth.weekday - 1; i++) {
      days.add(null);
    }

    // Add actual days
    for (int day = 1; day <= daysInMonth; day++) {
      days.add(DateTime(selectedYear, selectedMonth, day));
    }

    return days;
  }

  @override
  Widget build(BuildContext context) {
    final days = getCalendarDays();
    final weekdays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

    return Container(
      padding: const EdgeInsets.all(16),
      constraints: BoxConstraints(
        maxHeight: MediaQuery.of(context).size.height * 0.7,
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          // Month and year selection
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              // Month selection
              SizedBox(
                width: 200,
                child: DropdownButton<int>(
                  value: selectedMonth,
                  isExpanded: true,
                  items: List.generate(12, (index) {
                    return DropdownMenuItem(
                      value: index + 1,
                      child: Text(months[index]),
                    );
                  }),
                  onChanged: (value) {
                    setState(() {
                      selectedMonth = value!;
                      selectedDay = null;
                    });
                  },
                ),
              ),

              // Year selection
              SizedBox(
                width: 120,
                child: DropdownButton<int>(
                  value: selectedYear,
                  isExpanded: true,
                  items: years.map((year) {
                    return DropdownMenuItem(
                      value: year,
                      child: Text(year.toString()),
                    );
                  }).toList(),
                  onChanged: (value) {
                    setState(() {
                      selectedYear = value!;
                      selectedDay = null;
                    });
                  },
                ),
              ),
            ],
          ),

          const SizedBox(height: 16),

          // Weekday headers
          Row(
            children: weekdays.map((day) {
              return Expanded(
                child: Center(
                  child: Text(
                    day,
                    style: const TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.grey,
                    ),
                  ),
                ),
              );
            }).toList(),
          ),

          const SizedBox(height: 8),

          // Calendar grid
          Expanded(
            child: GridView.count(
              crossAxisCount: 7,
              shrinkWrap: true,
              children: days.map((date) {
                return date == null
                    ? const SizedBox.shrink()
                    : InkWell(
                        onTap: () => setState(() => selectedDay = date.day),
                        child: Container(
                          margin: const EdgeInsets.all(4),
                          decoration: BoxDecoration(
                            color: selectedDay == date.day
                                ? Colors.blue
                                : Colors.transparent,
                            shape: BoxShape.circle,
                          ),
                          child: Center(
                            child: Text(
                              date.day.toString(),
                              style: TextStyle(
                                color: selectedDay == date.day
                                    ? Colors.white
                                    : Colors.black,
                                fontWeight: selectedDay == date.day
                                    ? FontWeight.bold
                                    : FontWeight.normal,
                              ),
                            ),
                          ),
                        ),
                      );
              }).toList(),
            ),
          ),

          const SizedBox(height: 16),

          // Confirm button
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              minimumSize: const Size(double.infinity, 50),
              backgroundColor: Colors.blue,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(12),
              ),
            ),
            onPressed: () {
              if (selectedDay != null) {
                Navigator.pop(
                  context,
                  DateTime(selectedYear, selectedMonth, selectedDay!),
                );
              }
            },
            child: const Text(
              "Confirm",
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ],
      ),
    );
  }
}