import 'package:core_localization/core_localization.dart';
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import '../models/billing_invoice_model.dart';

/// Section showing invoices awaiting approval.
class PendingInvoicesSection extends StatelessWidget {
  /// Creates a [PendingInvoicesSection].
  const PendingInvoicesSection({required this.invoices, super.key});

  /// The list of pending invoices.
  final List<BillingInvoice> invoices;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Row(
          children: <Widget>[
            Container(
              width: 8,
              height: 8,
              decoration: const BoxDecoration(
                color: UiColors.textWarning,
                shape: BoxShape.circle,
              ),
            ),
            const SizedBox(width: UiConstants.space2),
            Text(
              t.client_billing.awaiting_approval,
              style: UiTypography.title2b.textPrimary,
            ),
            const SizedBox(width: UiConstants.space2),
            Container(
              width: 24,
              height: 24,
              decoration: const BoxDecoration(
                color: UiColors.accent,
                shape: BoxShape.circle,
              ),
              child: Center(
                child: Text(
                  '${invoices.length}',
                  style: UiTypography.footnote2b.textPrimary,
                ),
              ),
            ),
          ],
        ),
        const SizedBox(height: UiConstants.space3),
        ...invoices.map(
          (BillingInvoice invoice) => Padding(
            padding: const EdgeInsets.only(bottom: UiConstants.space2),
            child: _PendingInvoiceCard(invoice: invoice),
          ),
        ),
      ],
    );
  }
}

class _PendingInvoiceCard extends StatelessWidget {
  const _PendingInvoiceCard({required this.invoice});

  final BillingInvoice invoice;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: UiColors.white,
        borderRadius: UiConstants.radiusLg,
        border: Border.all(color: UiColors.border),
        boxShadow: <BoxShadow>[
          BoxShadow(
            color: UiColors.black.withValues(alpha: 0.04),
            blurRadius: 8,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Padding(
        padding: const EdgeInsets.all(UiConstants.space4),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Row(
              children: <Widget>[
                const Icon(
                  UiIcons.mapPin,
                  size: 14,
                  color: UiColors.iconSecondary,
                ),
                const SizedBox(width: UiConstants.space1),
                Expanded(
                  child: Text(
                    invoice.locationAddress,
                    style: UiTypography.footnote2r.textSecondary,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
            const SizedBox(height: UiConstants.space1),
            Text(invoice.title, style: UiTypography.body2b.textPrimary),
            const SizedBox(height: UiConstants.space1),
            Row(
              children: <Widget>[
                Text(
                  invoice.clientName,
                  style: UiTypography.footnote2r.textSecondary,
                ),
                const SizedBox(width: UiConstants.space2),
                Text('•', style: UiTypography.footnote2r.textInactive),
                const SizedBox(width: UiConstants.space2),
                Text(
                  invoice.date,
                  style: UiTypography.footnote2r.textSecondary,
                ),
              ],
            ),
            const SizedBox(height: UiConstants.space3),
            Row(
              children: <Widget>[
                Container(
                  width: 6,
                  height: 6,
                  decoration: const BoxDecoration(
                    color: UiColors.textWarning,
                    shape: BoxShape.circle,
                  ),
                ),
                const SizedBox(width: UiConstants.space2),
                Text(
                  t.client_billing.pending_badge,
                  style: UiTypography.titleUppercase4b.copyWith(
                    color: UiColors.textWarning,
                  ),
                ),
              ],
            ),
            const SizedBox(height: UiConstants.space4),
            Container(
              padding: const EdgeInsets.symmetric(vertical: UiConstants.space3),
              decoration: const BoxDecoration(
                border: Border.symmetric(
                  horizontal: BorderSide(color: UiColors.border),
                ),
              ),
              child: Row(
                children: <Widget>[
                  Expanded(
                    child: _buildStatItem(
                      UiIcons.dollar,
                      '\$${invoice.totalAmount.toStringAsFixed(2)}',
                      'Total',
                    ),
                  ),
                  Container(width: 1, height: 30, color: UiColors.border),
                  Expanded(
                    child: _buildStatItem(
                      UiIcons.users,
                      '${invoice.workersCount}',
                      'Workers',
                    ),
                  ),
                  Container(width: 1, height: 30, color: UiColors.border),
                  Expanded(
                    child: _buildStatItem(
                      UiIcons.clock,
                      invoice.totalHours.toStringAsFixed(1),
                      'HRS',
                    ),
                  ),
                ],
              ),
            ),
            const SizedBox(height: UiConstants.space4),
            SizedBox(
              width: double.infinity,
              child: UiButton.primary(
                text: 'Review & Approve',
                onPressed: () {},
                size: UiButtonSize.small,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildStatItem(IconData icon, String value, String label) {
    return Column(
      children: <Widget>[
        Icon(icon, size: 14, color: UiColors.iconSecondary),
        const SizedBox(height: 2),
        Text(value, style: UiTypography.body2b.textPrimary),
        Text(
          label.toUpperCase(),
          style: UiTypography.titleUppercase4m.textSecondary,
        ),
      ],
    );
  }
}
