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

class ExpenseDetailScreen extends StatelessWidget {
  const ExpenseDetailScreen({super.key});

  Color _getStatusColor(String status) {
    switch (status) {
      case 'Request':
        return Colors.blue;
      case 'Review':
        return Colors.orange;
      case 'Approved':
        return Colors.green;
      case 'Paid':
        return Colors.purple;
      case 'Closed':
        return Colors.grey;
      default:
        return Colors.black;
    }
  }

  @override
  Widget build(BuildContext context) {
    final Map<String, String> expense =
        Get.arguments['expense'] as Map<String, String>;
    final Color statusColor = _getStatusColor(expense['status']!);
    final ProjectController projectController = Get.find<ProjectController>();

    return Scaffold(
      backgroundColor: const Color(0xFFF7F7F7),
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(72),
        child: AppBar(
          backgroundColor: Colors.white,
          elevation: 1,
          automaticallyImplyLeading: false,
          titleSpacing: 0,
          title: Padding(
            padding: MySpacing.xy(16, 0),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                IconButton(
                  icon: const Icon(Icons.arrow_back_ios_new,
                      color: Colors.black, size: 20),
                  onPressed: () => Get.back(),
                ),
                MySpacing.width(8),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      MyText.titleLarge(
                        'Expense Details',
                        fontWeight: 700,
                        color: Colors.black,
                      ),
                      MySpacing.height(2),
                      Obx(() {
                        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],
                                ),
                              ),
                            ],
                          ),
                        );
                      }),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Card(
          elevation: 6,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20),
          ),
          clipBehavior: Clip.antiAlias,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Header Section
              Container(
                width: double.infinity,
                padding: const EdgeInsets.all(20),
                decoration: const BoxDecoration(
                  gradient: LinearGradient(
                    colors: [Color(0xFFFF4B2B), Color(0xFFFF416C)],
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                  ),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      expense['title'] ?? 'N/A',
                      style: const TextStyle(
                        fontSize: 22,
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),
                    const SizedBox(height: 6),
                    Text(
                      expense['amount'] ?? '₹ 0',
                      style: const TextStyle(
                        fontSize: 26,
                        fontWeight: FontWeight.w700,
                        color: Colors.white,
                      ),
                    ),
                    const SizedBox(height: 12),
                    Container(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 12, vertical: 6),
                      decoration: BoxDecoration(
                        color: Colors.white.withOpacity(0.15),
                        borderRadius: BorderRadius.circular(20),
                      ),
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Icon(Icons.flag, size: 16, color: statusColor),
                          const SizedBox(width: 6),
                          Text(
                            expense['status'] ?? 'N/A',
                            style: const TextStyle(
                              color: Colors.white,
                              fontWeight: FontWeight.w600,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),

              // Details Section
              Padding(
                padding: const EdgeInsets.all(20),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    _detailRow(Icons.calendar_today, "Date & Time",
                        expense['date'] ?? 'N/A'),
                    _detailRow(Icons.category_outlined, "Expense Type",
                        "${expense['category']} (GST: ${expense['gstNo'] ?? 'N/A'})"),
                    _detailRow(Icons.payment, "Payment Mode",
                        expense['paymentMode'] ?? 'N/A'),
                    _detailRow(Icons.person, "Paid By",
                        expense['paidBy'] ?? 'N/A'),
                    _detailRow(Icons.access_time, "Transaction Date",
                        expense['transactionDate'] ?? 'N/A'),
                    _detailRow(Icons.location_on_outlined, "Location",
                        expense['location'] ?? 'N/A'),
                    _detailRow(Icons.store, "Supplier Name",
                        expense['supplierName'] ?? 'N/A'),
                    _detailRow(Icons.confirmation_num_outlined,
                        "Transaction ID", expense['transactionId'] ?? 'N/A'),
                    _detailRow(Icons.description, "Description",
                        expense['description'] ?? 'N/A'),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _detailRow(IconData icon, String title, String value) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 16),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            padding: const EdgeInsets.all(8),
            decoration: BoxDecoration(
              color: Colors.grey.shade100,
              borderRadius: BorderRadius.circular(10),
            ),
            child: Icon(icon, size: 20, color: Colors.grey[800]),
          ),
          const SizedBox(width: 12),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: const TextStyle(
                    fontSize: 13,
                    color: Colors.grey,
                    fontWeight: FontWeight.w500,
                  ),
                ),
                const SizedBox(height: 4),
                Text(
                  value,
                  style: const TextStyle(
                    fontSize: 15,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}