import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import '../widgets/app_background.dart';
import '../widgets/settings_bar.dart';
import '../widgets/onboarding_button.dart';
import '../models/leave_request.dart';
import '../services/request_service.dart';

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

  @override
  State<RequestLeaveScreen> createState() => _RequestLeaveScreenState();
}

class _RequestLeaveScreenState extends State<RequestLeaveScreen> {
  // Dropdown value - initialize with default
  String leaveType = "إجازة مرضية ";

  // Toggle switch
  bool isTimedLeave = false;

  // Date & time selectors
  DateTime? fromDate = DateTime.now();
  DateTime? toDate = DateTime.now();

  TimeOfDay? fromTime = const TimeOfDay(hour: 12, minute: 00);
  TimeOfDay? toTime = const TimeOfDay(hour: 12, minute: 00);

  // Text controller for reason
  final TextEditingController reasonController = TextEditingController();

  // Use the singleton instance
  final RequestService _requestService = RequestService();

  /// PICK DATE
  Future<void> pickDate(bool isFrom) async {
    DateTime initial = isFrom ? fromDate! : toDate!;
    DateTime? newDate = await showDatePicker(
      context: context,
      initialDate: initial,
      firstDate: DateTime(2020),
      lastDate: DateTime(2035),
      builder: (context, child) {
        return Theme(data: ThemeData.dark(), child: child!);
      },
    );

    if (newDate != null) {
      setState(() {
        if (isFrom) {
          fromDate = newDate;
        } else {
          toDate = newDate;
        }
      });
    }
  }

  /// PICK TIME
  Future<void> pickTime(bool isFrom) async {
    TimeOfDay initial = isFrom ? fromTime! : toTime!;
    TimeOfDay? newTime = await showTimePicker(
      context: context,
      initialTime: initial,
      builder: (context, child) {
        return Theme(data: ThemeData.dark(), child: child!);
      },
    );

    if (newTime != null) {
      setState(() {
        if (isFrom) {
          fromTime = newTime;
        } else {
          toTime = newTime;
        }
      });
    }
  }

  // Method to save the leave request
  Future<void> _saveLeaveRequest() async {
    if (reasonController.text.isEmpty) {
      // Show an error message if reason is empty
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text('الرجاء إدخال السبب'),
          backgroundColor: Colors.red,
        ),
      );
      return;
    }

    // Create a new leave request with default status "waiting"
    final leaveRequest = LeaveRequest(
      id: DateTime.now().millisecondsSinceEpoch.toString(),
      leaveType: leaveType, // Use the current leaveType value
      isTimedLeave: isTimedLeave,
      fromDate: fromDate!,
      toDate: toDate!,
      fromTime: fromTime!,
      toTime: toTime!,
      reason: reasonController.text,
      requestDate: DateTime.now(),
      status: "waiting", // Default status
    );

    try {
      // Save the leave request
      await _requestService.addLeaveRequest(leaveRequest);

      // Show a success message
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text('تم إرسال طلب الأجازة بنجاح'),
          backgroundColor: Colors.green,
        ),
      );

      // Navigate back to the previous screen
      Navigator.pop(context);
    } catch (e) {
      // Show an error message if something went wrong
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('حدث خطأ: $e'), backgroundColor: Colors.red),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AppBackground(
        child: SafeArea(
          child: Column(
            children: [
              // In your RequestLeaveScreen's build method, replace the SettingsBar with this:
              SettingsBar(
                selectedIndex: -1,
                onTap: (_) {},
                showBackButton: true,
                onBackTap: () => Navigator.pop(context),
                iconPaths: const [
                  "assets/images/user.svg",
                  "assets/images/bell.svg",
                ],
              ),

              // Title
              // const SizedBox(height: 30),
              Flexible(
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 25),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // Fixed alignment for "طلب أجازة"
                      const Align(
                        alignment: Alignment.topRight,
                        child: Text(
                          "طلب أجازة ",
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 28,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),

                      const SizedBox(height: 10),
                      //=============================
                      // DROPDOWN: نوع الإجازة
                      //=============================
                      Align(
                        alignment: Alignment.centerRight,
                        child: const Text(
                          "نوع الإجازة",
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 18,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                      ),

                      const SizedBox(height: 5),

                      // Modified dropdown with disabled state
                      Directionality(
                        textDirection: TextDirection.rtl,
                        child: Opacity(
                          opacity: isTimedLeave ? 0.45 : 1.0,
                          child: IgnorePointer(
                            ignoring: isTimedLeave,
                            child: Container(
                              width: double.infinity,
                              padding: const EdgeInsets.symmetric(
                                horizontal: 20,
                              ),
                              height: 58,
                              decoration: BoxDecoration(
                                color:
                                    isTimedLeave
                                        ? Colors.grey[300]
                                        : Colors.white,
                                borderRadius: BorderRadius.circular(14),
                                boxShadow: const [
                                  BoxShadow(
                                    color: Color(0x22000000),
                                    blurRadius: 8,
                                    offset: Offset(0, 3),
                                  ),
                                ],
                              ),
                              child: DropdownButtonHideUnderline(
                                child: DropdownButton<String>(
                                  value: leaveType,
                                  icon: const Icon(
                                    Icons.keyboard_arrow_down_rounded,
                                    color: Colors.black,
                                    size: 28,
                                  ),
                                  style: const TextStyle(
                                    color: Colors.black,
                                    fontSize: 17,
                                  ),
                                  isExpanded: true,
                                  onChanged: (value) {
                                    setState(() {
                                      leaveType = value!;
                                      // Set toggle based on selected value
                                      isTimedLeave = value == "أجازة زمنية";
                                    });
                                  },
                                  items: [
                                    DropdownMenuItem(
                                      value: "إجازة مرضية ",
                                      child: Directionality(
                                        textDirection: TextDirection.rtl,
                                        child: Align(
                                          alignment: Alignment.centerRight,
                                          child: Text("إجازة مرضية "),
                                        ),
                                      ),
                                    ),
                                    DropdownMenuItem(
                                      value: "إجازة مدفوعة",
                                      child: Directionality(
                                        textDirection: TextDirection.rtl,
                                        child: Align(
                                          alignment: Alignment.centerRight,
                                          child: Text("إجازة مدفوعة"),
                                        ),
                                      ),
                                    ),
                                    DropdownMenuItem(
                                      value: "إجازة غير مدفوعة",
                                      child: Directionality(
                                        textDirection: TextDirection.rtl,
                                        child: Align(
                                          alignment: Alignment.centerRight,
                                          child: Text("إجازة غير مدفوعة"),
                                        ),
                                      ),
                                    ),
                                    DropdownMenuItem(
                                      value: "أجازة زمنية",
                                      child: Directionality(
                                        textDirection: TextDirection.rtl,
                                        child: Align(
                                          alignment: Alignment.centerRight,
                                          child: Text("أجازة زمنية"),
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ),
                        ),
                      ),

                      const SizedBox(height: 25),

                      //=============================
                      // PERFECT CUSTOM TOGGLE (NEW)
                      //=============================
                      GestureDetector(
                        onTap: () {
                          setState(() {
                            isTimedLeave = !isTimedLeave;
                            // Set leave type to "أجازة زمنية" when toggle is ON
                            if (isTimedLeave) {
                              leaveType = "أجازة زمنية";
                            }
                          });
                        },
                        child: Row(
                          children: [
                            // ---------- TOGGLE ----------
                            AnimatedContainer(
                              duration: const Duration(milliseconds: 250),
                              width: 75,
                              height: 30,
                              padding: const EdgeInsets.symmetric(
                                horizontal: 4,
                              ),
                              decoration: BoxDecoration(
                                color:
                                    isTimedLeave
                                        ? const Color(
                                          0xFF0A6B4A,
                                        ) // ON green track
                                        : const Color(
                                          0xFF9E9E9E,
                                        ), // OFF grey track
                                borderRadius: BorderRadius.circular(40),
                              ),
                              child: Align(
                                alignment:
                                    isTimedLeave
                                        ? Alignment.centerRight
                                        : Alignment.centerLeft,
                                child: AnimatedContainer(
                                  duration: const Duration(milliseconds: 250),
                                  width: 30,
                                  height: 30,
                                  decoration: BoxDecoration(
                                    color:
                                        isTimedLeave
                                            ? const Color(0xFF12BE85) // ON knob
                                            : Colors.white, // OFF knob
                                    shape: BoxShape.circle,
                                    boxShadow: [
                                      BoxShadow(
                                        color: const Color(0x2D000000),
                                        blurRadius: 6,
                                        offset: const Offset(0, 2),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                            ),

                            const SizedBox(width: 14),

                            // ---------- Dot (ALWAYS visible) ----------
                            Container(
                              width: 10,
                              height: 10,
                              decoration: const BoxDecoration(
                                color: Color(0xFF32C59A),
                                shape: BoxShape.circle,
                              ),
                            ),

                            const SizedBox(width: 6),

                            // ---------- Line (ALWAYS visible) ----------
                            Expanded(
                              child: Container(
                                height: 2,
                                color: const Color(0xFF32C59A),
                              ),
                            ),

                            const SizedBox(width: 12),

                            // ---------- Label ----------
                            const Text(
                              "إجازة زمنية",
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 19,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                          ],
                        ),
                      ),

                      const SizedBox(height: 20),

                      // =============================
                      // DATE PICKER BOX
                      // =============================
                      Container(
                        padding: const EdgeInsets.all(16),
                        decoration: BoxDecoration(
                          color: const Color(0xFFF4F4F4),
                          borderRadius: BorderRadius.circular(16),
                          boxShadow: const [
                            BoxShadow(
                              color: Color(0x33000000),
                              blurRadius: 10,
                              offset: Offset(0, 4),
                            ),
                          ],
                        ),
                        child: Column(
                          children: [
                            Row(
                              mainAxisAlignment:
                                  MainAxisAlignment.end, // ALIGN RIGHT
                              children: [
                                // TEXT aligned right
                                const Text(
                                  "فترة الإجازة",
                                  style: TextStyle(
                                    color: Colors.black,
                                    fontSize: 18,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),

                                const SizedBox(width: 8),

                                // 🟢 YOUR CUSTOM SVG ICON
                                SvgPicture.asset(
                                  "assets/images/calendar.svg", // <-- replace with your icon filename
                                  width: 24,
                                  height: 24,
                                  color: Color(
                                    0xFF007C46,
                                  ), // Optional: match your green
                                ),
                              ],
                            ),

                            const SizedBox(height: 15),

                            // From date row
                            _dateRow(
                              label: "من",
                              date: fromDate!,
                              time: fromTime!,
                              onDateTap:
                                  isTimedLeave ? null : () => pickDate(true),
                              onTimeTap: () => pickTime(true),
                            ),

                            const SizedBox(height: 15),

                            // To date row
                            _dateRow(
                              label: "الى",
                              date: toDate!,
                              time: toTime!,
                              onDateTap:
                                  isTimedLeave ? null : () => pickDate(false),
                              onTimeTap: () => pickTime(false),
                            ),
                          ],
                        ),
                      ),

                      const SizedBox(height: 10),

                      // =============================
                      // REASON TEXTFIELD (Two Containers)
                      // =============================
                      Align(
                        alignment: Alignment.centerRight,
                        child: Directionality(
                          textDirection: TextDirection.rtl,
                          child: const Text(
                            "السبب",
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 18,
                              fontWeight: FontWeight.w600,
                            ),
                          ),
                        ),
                      ),

                      // OUTER BORDER CONTAINER
                      Container(
                        padding: const EdgeInsets.all(
                          12,
                        ), // border thickness space
                        decoration: BoxDecoration(
                          border: Border.all(
                            color: Color(0xFF00FFAA), // green border
                            width: 0.5,
                          ),
                          borderRadius: BorderRadius.circular(14),
                        ),

                        // INNER TEXTFIELD CONTAINER
                        child: Container(
                          height: 70,
                          padding: const EdgeInsets.symmetric(
                            horizontal: 14,
                            vertical: 10,
                          ),
                          decoration: BoxDecoration(
                            color: const Color(0xFFEAEAEA),
                            borderRadius: BorderRadius.circular(12),
                          ),
                          // Added Directionality to fix text direction
                          child: Directionality(
                            textDirection: TextDirection.rtl,
                            child: TextField(
                              controller: reasonController,
                              maxLines: 5,
                              textAlign:
                                  TextAlign
                                      .right, // Added this to align text to the right
                              decoration: const InputDecoration(
                                border: InputBorder.none,
                                hintText:
                                    "اكتب السبب", // Added placeholder text
                                hintStyle: TextStyle(color: Colors.grey),
                              ),
                            ),
                          ),
                        ),
                      ),

                      const SizedBox(height: 20),

                      // CONFIRM BUTTON
                      Center(
                        child: OnboardingButton(
                          text: "تأكيد الطلب",
                          backgroundColor: const Color(0xFFD1FEF0),
                          textColor: Colors.black, // Changed to black
                          onPressed: _saveLeaveRequest, // Call the save method
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  // ===============================================================
  // CUSTOM DATE ROW WIDGET
  // ===============================================================
  Widget _dateRow({
    required String label,
    required DateTime date,
    required TimeOfDay time,
    required VoidCallback? onDateTap,
    required VoidCallback onTimeTap,
  }) {
    bool dateDisabled = onDateTap == null;

    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 12),
      height: 55,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
      ),
      child: Row(
        children: [
          // -----------------------
          // DATE PART (can be disabled)
          // -----------------------
          Opacity(
            opacity: dateDisabled ? 0.45 : 1,
            child: IgnorePointer(
              ignoring: dateDisabled,
              child: GestureDetector(
                onTap: onDateTap,
                child: Row(
                  children: [
                    const Icon(Icons.arrow_drop_down),
                    const SizedBox(width: 4),
                    Text(
                      "${date.year}-${date.month}-${date.day}",
                      style: const TextStyle(fontSize: 16),
                    ),
                    const SizedBox(width: 10),
                    Text(
                      _weekday(date.weekday),
                      style: const TextStyle(fontSize: 16),
                    ),
                  ],
                ),
              ),
            ),
          ),

          const Spacer(),

          // -----------------------
          // TIME PART (always active)
          // -----------------------
          GestureDetector(
            onTap: onTimeTap,
            child: Text(
              "${time.hour}:${time.minute.toString().padLeft(2, '0')}",
              style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
            ),
          ),

          const SizedBox(width: 10),

          Text(
            label,
            style: const TextStyle(color: Colors.black, fontSize: 15),
          ),
        ],
      ),
    );
  }

  String _weekday(int day) {
    switch (day) {
      case 1:
        return "الإثنين";
      case 2:
        return "الثلاثاء";
      case 3:
        return "الأربعاء";
      case 4:
        return "الخميس";
      case 5:
        return "الجمعة";
      case 6:
        return "السبت";
      case 7:
        return "الأحد";
      default:
        return "";
    }
  }
}