import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:marco/controller/dashboard/dashboard_controller.dart';
import 'package:marco/helpers/widgets/my_text.dart';

class ExpenseByStatusWidget extends StatelessWidget {
  final DashboardController controller;

  const ExpenseByStatusWidget({super.key, required this.controller});

  Widget _buildStatusTile({
    required IconData icon,
    required Color color,
    required String title,
    required String amount,
    required String count,
  }) {
    return Container(
      margin: const EdgeInsets.only(bottom: 8),
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      decoration: BoxDecoration(
        color: Colors.grey.shade100,
        borderRadius: BorderRadius.circular(12),
      ),
      child: Row(
        children: [
          CircleAvatar(
            backgroundColor: Colors.white,
            radius: 20,
            child: Icon(icon, color: color, size: 22),
          ),
          const SizedBox(width: 12),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                MyText.titleMedium(
                  title,
                  fontWeight: 600,
                ),
                const SizedBox(height: 2),
                MyText.bodyMedium(
                  amount,
                  color: Colors.blue,
                ),
              ],
            ),
          ),
          MyText.titleMedium(
            count,
            color: Colors.blue,
            fontWeight: 600,
          ),
          const Icon(Icons.chevron_right, color: Colors.blue, size: 22),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Obx(() {
      final data = controller.pendingExpensesData.value;

      if (controller.isPendingExpensesLoading.value) {
        return const Center(child: CircularProgressIndicator());
      }

      if (data == null) {
        return Center(
          child: MyText.bodyMedium("No expense status data available"),
        );
      }

      return Card(
        elevation: 2,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              MyText.titleLarge(
                "Expense - By Status",
                fontWeight: 700,
              ),
              const SizedBox(height: 4),
              MyText.bodyMedium(
                controller.projectController.selectedProjectName.value,
                color: Colors.grey.shade600,
              ),
              const SizedBox(height: 16),

              // Pending Payment
              _buildStatusTile(
                icon: Icons.currency_rupee,
                color: Colors.blue,
                title: "Pending Payment",
                amount: "₹${data.processPending.amount.toStringAsFixed(1)}K",
                count: data.processPending.count.toString(),
              ),

              // Pending Approve
              _buildStatusTile(
                icon: Icons.check_circle_outline,
                color: Colors.orange,
                title: "Pending Approve",
                amount: "₹${data.approvePending.amount.toStringAsFixed(1)}K",
                count: data.approvePending.count.toString(),
              ),

              // Pending Review
              _buildStatusTile(
                icon: Icons.search,
                color: Colors.grey.shade700,
                title: "Pending Review",
                amount: "₹${data.reviewPending.amount.toStringAsFixed(1)}K",
                count: data.reviewPending.count.toString(),
              ),

              // Draft
              _buildStatusTile(
                icon: Icons.insert_drive_file_outlined,
                color: Colors.cyan,
                title: "Draft",
                amount: "₹${data.draft.amount.toStringAsFixed(1)}K",
                count: data.draft.count.toString(),
              ),

              const SizedBox(height: 8),
              Divider(color: Colors.grey.shade300),
              const SizedBox(height: 8),

              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      MyText.bodyMedium(
                        "Project Spendings:",
                        fontWeight: 600,
                      ),
                      MyText.bodySmall(
                        "(All Processed Payments)",
                        color: Colors.grey.shade600,
                      ),
                    ],
                  ),
                  MyText.titleLarge(
                    "₹${(data.totalAmount / 1000).toStringAsFixed(2)}K  >",
                    color: Colors.blue,
                    fontWeight: 700,
                  ),
                ],
              ),
            ],
          ),
        ),
      );
    });
  }
}