import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:marco/controller/project_controller.dart';
import 'package:marco/controller/expense/expense_screen_controller.dart';
import 'package:marco/helpers/utils/date_time_utils.dart';
import 'package:marco/helpers/widgets/my_spacing.dart';
import 'package:marco/helpers/widgets/my_text.dart';
import 'package:marco/model/expense/expense_list_model.dart';
import 'package:marco/view/expense/expense_detail_screen.dart';
import 'package:marco/model/expense/add_expense_bottom_sheet.dart';

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

  @override
  State<ExpenseMainScreen> createState() => _ExpenseMainScreenState();
}

class _ExpenseMainScreenState extends State<ExpenseMainScreen> {
  final RxBool isHistoryView = false.obs;
  final TextEditingController searchController = TextEditingController();
  final RxString searchQuery = ''.obs;
  final ProjectController projectController = Get.find<ProjectController>();
  final ExpenseController expenseController = Get.put(ExpenseController());

  @override
  void initState() {
    super.initState();
    expenseController.fetchExpenses(); // Load expenses from API
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: _ExpenseAppBar(projectController: projectController),
      body: SafeArea(
        child: Column(
          children: [
            _SearchAndFilter(
              searchController: searchController,
              onChanged: (value) => searchQuery.value = value,
              onFilterTap: _openFilterBottomSheet,
            ),
            _ToggleButtons(isHistoryView: isHistoryView),
            Expanded(
              child: Obx(() {
                if (expenseController.isLoading.value) {
                  return const Center(child: CircularProgressIndicator());
                }

                if (expenseController.errorMessage.isNotEmpty) {
                  return Center(
                    child: MyText.bodyMedium(
                      expenseController.errorMessage.value,
                      color: Colors.red,
                    ),
                  );
                }

                if (expenseController.expenses.isEmpty) {
                  return Center(child: MyText.bodyMedium("No expenses found."));
                }

                final filteredList =
                    expenseController.expenses.where((expense) {
                  final query = searchQuery.value.toLowerCase();
                  return query.isEmpty ||
                      expense.expensesType.name.toLowerCase().contains(query) ||
                      expense.supplerName.toLowerCase().contains(query) ||
                      expense.paymentMode.name.toLowerCase().contains(query);
                }).toList();

                // Sort by latest transaction date first
                filteredList.sort(
                    (a, b) => b.transactionDate.compareTo(a.transactionDate));

                final now = DateTime.now();
                final currentMonthList = filteredList
                    .where((e) =>
                        e.transactionDate.month == now.month &&
                        e.transactionDate.year == now.year)
                    .toList();

                final historyList = filteredList
                    .where((e) => e.transactionDate
                        .isBefore(DateTime(now.year, now.month, 1)))
                    .toList();

                final listToShow =
                    isHistoryView.value ? historyList : currentMonthList;

                return _ExpenseList(expenseList: listToShow);
              }),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.red,
        onPressed: showAddExpenseBottomSheet,
        child: const Icon(Icons.add, color: Colors.white),
      ),
    );
  }

  void _openFilterBottomSheet() {
    Get.bottomSheet(
      Container(
        padding: const EdgeInsets.all(16),
        decoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
        ),
        child: Wrap(
          runSpacing: 10,
          children: [
            MyText.bodyLarge(
              'Filter Expenses',
              fontWeight: 700,
            ),
            ListTile(
              leading: const Icon(Icons.date_range),
              title: MyText.bodyMedium('Date Range'),
              onTap: () {},
            ),
            ListTile(
              leading: const Icon(Icons.work_outline),
              title: MyText.bodyMedium('Project'),
              onTap: () {},
            ),
            ListTile(
              leading: const Icon(Icons.check_circle_outline),
              title: MyText.bodyMedium('Status'),
              onTap: () {},
            ),
          ],
        ),
      ),
    );
  }
}

// AppBar Widget
class _ExpenseAppBar extends StatelessWidget implements PreferredSizeWidget {
  final ProjectController projectController;

  const _ExpenseAppBar({required this.projectController});

  @override
  Size get preferredSize => const Size.fromHeight(72);

  @override
  Widget build(BuildContext context) {
    return PreferredSize(
      preferredSize: preferredSize,
      child: AppBar(
        backgroundColor: const Color(0xFFF5F5F5),
        elevation: 0.5,
        automaticallyImplyLeading: false,
        titleSpacing: 0,
        title: Padding(
          padding: MySpacing.xy(16, 0),
          child: Row(
            children: [
              IconButton(
                icon: const Icon(Icons.arrow_back_ios_new,
                    color: Colors.black, size: 20),
                onPressed: () => Get.offNamed('/dashboard'),
              ),
              MySpacing.width(8),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    MyText.titleLarge(
                      'Expenses',
                      fontWeight: 700,
                      color: Colors.black,
                    ),
                    MySpacing.height(2),
                    GetBuilder<ProjectController>(
                      builder: (_) {
                        final projectName =
                            projectController.selectedProject?.name ??
                                'Select Project';
                        return InkWell(
                          onTap: () => Get.toNamed('/project-selector'),
                          child: Row(
                            children: [
                              const Icon(Icons.work_outline,
                                  size: 14, color: Colors.grey),
                              MySpacing.width(4),
                              Expanded(
                                child: MyText.bodySmall(
                                  projectName,
                                  fontWeight: 600,
                                  overflow: TextOverflow.ellipsis,
                                  color: Colors.grey[700],
                                ),
                              ),
                            ],
                          ),
                        );
                      },
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// Search and Filter Widget
class _SearchAndFilter extends StatelessWidget {
  final TextEditingController searchController;
  final ValueChanged<String> onChanged;
  final VoidCallback onFilterTap;

  const _SearchAndFilter({
    required this.searchController,
    required this.onChanged,
    required this.onFilterTap,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: MySpacing.fromLTRB(12, 10, 12, 0),
      child: Row(
        children: [
          Expanded(
            child: SizedBox(
              height: 35,
              child: TextField(
                controller: searchController,
                onChanged: onChanged,
                decoration: InputDecoration(
                  contentPadding: const EdgeInsets.symmetric(horizontal: 12),
                  prefixIcon:
                      const Icon(Icons.search, size: 20, color: Colors.grey),
                  hintText: 'Search expenses...',
                  filled: true,
                  fillColor: Colors.white,
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10),
                    borderSide: BorderSide(color: Colors.grey.shade300),
                  ),
                  enabledBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10),
                    borderSide: BorderSide(color: Colors.grey.shade300),
                  ),
                ),
              ),
            ),
          ),
          MySpacing.width(8),
          IconButton(
            icon: const Icon(Icons.tune, color: Colors.black),
            onPressed: null, // Disabled as per request
          ),
        ],
      ),
    );
  }
}

// Toggle Buttons Widget
class _ToggleButtons extends StatelessWidget {
  final RxBool isHistoryView;

  const _ToggleButtons({required this.isHistoryView});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: MySpacing.fromLTRB(8, 12, 8, 5),
      child: Obx(() {
        return Container(
          padding: const EdgeInsets.all(2),
          decoration: BoxDecoration(
            color: const Color(0xFFF0F0F0),
            borderRadius: BorderRadius.circular(10),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.05),
                blurRadius: 4,
                offset: const Offset(0, 2),
              ),
            ],
          ),
          child: Row(
            children: [
              _ToggleButton(
                label: 'Expenses',
                icon: Icons.receipt_long,
                selected: !isHistoryView.value,
                onTap: () => isHistoryView.value = false,
              ),
              _ToggleButton(
                label: 'History',
                icon: Icons.history,
                selected: isHistoryView.value,
                onTap: () => isHistoryView.value = true,
              ),
            ],
          ),
        );
      }),
    );
  }
}

class _ToggleButton extends StatelessWidget {
  final String label;
  final IconData icon;
  final bool selected;
  final VoidCallback onTap;

  const _ToggleButton({
    required this.label,
    required this.icon,
    required this.selected,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: GestureDetector(
        onTap: onTap,
        child: AnimatedContainer(
          duration: const Duration(milliseconds: 200),
          padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 10),
          decoration: BoxDecoration(
            color: selected ? Colors.red : Colors.transparent,
            borderRadius: BorderRadius.circular(8),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(icon,
                  size: 16, color: selected ? Colors.white : Colors.grey),
              const SizedBox(width: 6),
              MyText.bodyMedium(
                label,
                color: selected ? Colors.white : Colors.grey,
                fontWeight: 600,
                fontSize: 13,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// Expense List Widget (Dynamic)
class _ExpenseList extends StatelessWidget {
  final List<ExpenseModel> expenseList;

  const _ExpenseList({required this.expenseList});

  @override
  Widget build(BuildContext context) {
    if (expenseList.isEmpty) {
      return Center(child: MyText.bodyMedium('No expenses found.'));
    }

    return ListView.separated(
      padding: const EdgeInsets.fromLTRB(12, 12, 12, 80),
      itemCount: expenseList.length,
      separatorBuilder: (_, __) =>
          Divider(color: Colors.grey.shade300, height: 20),
      itemBuilder: (context, index) {
        final expense = expenseList[index];

        final formattedDate = DateTimeUtils.convertUtcToLocal(
          expense.transactionDate.toIso8601String(),
          format: 'dd MMM yyyy, hh:mm a',
        );

        return GestureDetector(
          onTap: () => Get.to(
            () => const ExpenseDetailScreen(),
            arguments: {'expense': expense},
          ),
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 4),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      children: [
              
                        MyText.bodyMedium(
                          expense.expensesType.name,
                          fontWeight: 700,
                        ),
                      ],
                    ),
                    MyText.bodyMedium(
                      '₹ ${expense.amount.toStringAsFixed(2)}',
                      fontWeight: 600,
                    ),
                  ],
                ),
                const SizedBox(height: 6),
                Row(
                  children: [
                    MyText.bodySmall(
                      formattedDate,
                      color: Colors.grey[600],
                    ),
                    const Spacer(),
                    MyText.bodySmall(
                      expense.status.name,
                      fontWeight: 600,
                      color: Colors.black,
                    ),
                  ],
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}