import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:intl/intl.dart';
import 'package:sefer_driver/constant/colors.dart';
import 'package:sefer_driver/controller/payment/driver_payment_controller.dart';

// --- NEW LIGHT & DYNAMIC DESIGN PALETTE (TWITTER BLUE INSPIRED) ---
const kLightBackgroundColor = Color(0xFFF5F8FA); // Off-white
const kCardBackgroundColor = Color(0xFFFFFFFF); // Pure white for cards
const kPrimaryBlue = Color(0xFF1DA1F2); // Twitter Blue
const kSecondaryBlue = Color(0xFFE8F5FE); // Very light blue for accents
const kPrimaryTextColor = Color(0xFF14171A); // Almost black
const kSecondaryTextColor = Color(0xFF657786); // Gray for subtitles
const kGreenAccent = Color(0xFF17BF63); // Green for income

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

  @override
  Widget build(BuildContext context) {
    // Controller initialization remains the same.
    Get.put(DriverWalletHistoryController());

    return Scaffold(
      backgroundColor: AppColor.secondaryColor,
      appBar: AppBar(
        title: Text(
          'Weekly Payments'.tr,
          style: const TextStyle(
            color: AppColor.blueColor,
            fontWeight: FontWeight.bold,
          ),
        ),
        backgroundColor: kCardBackgroundColor,
        elevation: 0.5,
        centerTitle: true,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios, color: kPrimaryBlue),
          onPressed: () => Get.back(),
        ),
      ),
      body: GetBuilder<DriverWalletHistoryController>(
        builder: (controller) {
          // Smooth transition between loading and content states.
          return AnimatedSwitcher(
            duration: const Duration(milliseconds: 500),
            child: controller.isLoading
                ? _buildLoadingState()
                : _buildContentState(controller),
          );
        },
      ),
    );
  }

  /// Builds the loading state UI.
  Widget _buildLoadingState() {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          CircularProgressIndicator(
            valueColor: AlwaysStoppedAnimation<Color>(kPrimaryBlue),
          ),
          SizedBox(height: 20),
          Text(
            "Fetching Weekly Data...".tr,
            style: TextStyle(color: kSecondaryTextColor, fontSize: 16),
          ),
        ],
      ),
    );
  }

  /// Builds the main content when data is available.
  Widget _buildContentState(DriverWalletHistoryController controller) {
    if (controller.weeklyList.isEmpty) {
      return _buildEmptyState();
    }

    return ListView(
      padding: const EdgeInsets.all(16.0),
      children: [
        _buildTotalSummaryCard(controller),
        const SizedBox(height: 24),
        _buildSectionTitle('Transaction Details'.tr),
        const SizedBox(height: 8),
        _buildTransactionList(controller),
      ],
    );
  }

  /// A prominent card to display the total weekly amount.
  Widget _buildTotalSummaryCard(DriverWalletHistoryController controller) {
    return Container(
      padding: const EdgeInsets.all(24),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [kPrimaryBlue, kPrimaryBlue.withOpacity(0.8)],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        borderRadius: BorderRadius.circular(20),
        boxShadow: [
          BoxShadow(
            color: kPrimaryBlue.withOpacity(0.3),
            blurRadius: 12,
            offset: const Offset(0, 6),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            'Total Weekly Earnings'.tr,
            style: const TextStyle(
              color: Colors.white70,
              fontSize: 18,
            ),
          ),
          const SizedBox(height: 8),
          Text(
            '${controller.weeklyList.isEmpty ? '0' : controller.weeklyList[0]['totalAmount'].toString()} ${'L.E'.tr}',
            style: const TextStyle(
              color: Colors.white,
              fontSize: 40,
              fontWeight: FontWeight.bold,
            ),
          ),
        ],
      ),
    );
  }

  /// Builds the list of transaction cards.
  Widget _buildTransactionList(DriverWalletHistoryController controller) {
    return ListView.builder(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      itemCount: controller.weeklyList.length,
      itemBuilder: (BuildContext context, int index) {
        var transaction = controller.weeklyList[index];
        return _TransactionCard(transaction: transaction);
      },
    );
  }

  /// A user-friendly message for when there are no transactions.
  Widget _buildEmptyState() {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(
            Icons.receipt_long_outlined,
            size: 80,
            color: Colors.grey.shade300,
          ),
          const SizedBox(height: 20),
          Text(
            'No Transactions Yet'.tr,
            style: const TextStyle(
              color: kPrimaryTextColor,
              fontSize: 22,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 8),
          Text(
            'Your weekly payment history will appear here.'.tr,
            textAlign: TextAlign.center,
            style: const TextStyle(
              color: kSecondaryTextColor,
              fontSize: 16,
            ),
          ),
        ],
      ),
    );
  }

  /// A helper for creating styled section titles.
  Widget _buildSectionTitle(String title) {
    return Text(
      title,
      style: const TextStyle(
        color: kPrimaryTextColor,
        fontSize: 20,
        fontWeight: FontWeight.bold,
      ),
    );
  }
}

/// A custom widget for a single transaction card for better code organization.
class _TransactionCard extends StatelessWidget {
  final Map<String, dynamic> transaction;

  const _TransactionCard({required this.transaction});

  /// Helper to get descriptive details for each payment method.
  ({IconData icon, String title, Color color}) _getPaymentDetails(
      String paymentMethod) {
    switch (paymentMethod) {
      case 'visa':
        return (
          icon: Icons.credit_card,
          title: 'Visa Payout'.tr,
          color: kPrimaryBlue
        );
      case 'fromBudget':
        return (
          icon: Icons.arrow_upward,
          title: 'Points Purchase'.tr,
          color: Colors.orange
        );
      case 'Remainder':
        return (
          icon: Icons.account_balance_wallet_outlined,
          title: 'Cash Balance'.tr,
          color: kGreenAccent
        );
      default:
        return (
          icon: Icons.receipt_long,
          title: paymentMethod.tr,
          color: kSecondaryTextColor
        );
    }
  }

  @override
  Widget build(BuildContext context) {
    final details = _getPaymentDetails(transaction['paymentMethod']);
    final date = DateTime.parse(transaction['dateUpdated']);
    final formattedDate = DateFormat('MMM d, yyyy').format(date);
    final formattedTime = DateFormat('hh:mm a').format(date);

    return Card(
      margin: const EdgeInsets.symmetric(vertical: 8.0),
      elevation: 2,
      shadowColor: Colors.grey.withOpacity(0.1),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Row(
          children: [
            // Icon
            Container(
              padding: const EdgeInsets.all(12),
              decoration: BoxDecoration(
                color: details.color.withOpacity(0.1),
                borderRadius: BorderRadius.circular(12),
              ),
              child: Icon(details.icon, color: details.color, size: 28),
            ),
            const SizedBox(width: 16),
            // Title and Date
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    details.title,
                    style: const TextStyle(
                      color: kPrimaryTextColor,
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 4),
                  Text(
                    '$formattedDate at $formattedTime',
                    style: const TextStyle(
                      color: kSecondaryTextColor,
                      fontSize: 13,
                    ),
                  ),
                ],
              ),
            ),
            // Amount
            Text(
              '${transaction['amount']} ${'L.E'.tr}',
              style: const TextStyle(
                color: kPrimaryTextColor,
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
    );
  }
}