import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../../controllers/detail_screen_controller.dart';
import '../../models/payment_card_model.dart';
import '../../providers/payment_card_provider.dart';
import '../../routes/app_routes.dart';
import '../../utils/payment_card_utils.dart';
import '../payment_card/payment_card_form_sheet.dart';
import '../../l10n/app_localizations.dart';

/// 상세 화면 결제 정보 섹션
/// 현재 구독에 연결된 결제수단 정보를 요약하여 보여준다.
class DetailPaymentInfoSection extends StatelessWidget {
  final DetailScreenController controller;
  final Animation<double> fadeAnimation;
  final Animation<Offset> slideAnimation;

  const DetailPaymentInfoSection({
    super.key,
    required this.controller,
    required this.fadeAnimation,
    required this.slideAnimation,
  });

  @override
  Widget build(BuildContext context) {
    return Consumer2<DetailScreenController, PaymentCardProvider>(
      builder: (context, detailController, paymentCardProvider, child) {
        final baseColor = detailController.getCardColor();
        final paymentCard = paymentCardProvider.getCardById(
          detailController.selectedPaymentCardId ??
              detailController.subscription.paymentCardId,
        );

        return FadeTransition(
          opacity: fadeAnimation,
          child: SlideTransition(
            position: slideAnimation,
            child: Container(
              decoration: BoxDecoration(
                color: Theme.of(context).colorScheme.surface,
                borderRadius: BorderRadius.circular(20),
                border: Border.all(
                  color: Theme.of(context)
                      .colorScheme
                      .outline
                      .withValues(alpha: 0.3),
                  width: 1,
                ),
              ),
              child: Padding(
                padding: const EdgeInsets.all(24),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      children: [
                        Container(
                          padding: const EdgeInsets.all(8),
                          decoration: BoxDecoration(
                            color: baseColor.withValues(alpha: 0.1),
                            borderRadius: BorderRadius.circular(12),
                          ),
                          child: Icon(
                            Icons.credit_card_rounded,
                            color: baseColor,
                            size: 22,
                          ),
                        ),
                        const SizedBox(width: 12),
                        Text(
                          AppLocalizations.of(context).paymentCard,
                          style: TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.w700,
                            color: Theme.of(context).colorScheme.onSurface,
                          ),
                        ),
                        const Spacer(),
                        TextButton.icon(
                          onPressed: () {
                            Navigator.of(context)
                                .pushNamed(AppRoutes.paymentCardManagement);
                          },
                          icon: const Icon(Icons.settings_rounded, size: 18),
                          label: Text(
                            AppLocalizations.of(context).paymentCardManagement,
                          ),
                        ),
                      ],
                    ),
                    const SizedBox(height: 16),
                    _PaymentCardInfoTile(
                      card: paymentCard,
                      onTap: () async {
                        if (paymentCard != null) {
                          await PaymentCardFormSheet.show(
                            context,
                            card: paymentCard,
                          );
                        } else {
                          Navigator.of(context)
                              .pushNamed(AppRoutes.paymentCardManagement);
                        }
                      },
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}

class _PaymentCardInfoTile extends StatelessWidget {
  final PaymentCardModel? card;
  final VoidCallback onTap;

  const _PaymentCardInfoTile({
    required this.card,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    final scheme = Theme.of(context).colorScheme;
    final loc = AppLocalizations.of(context);
    final hasCard = card != null;
    final chipColor = hasCard
        ? PaymentCardUtils.colorFromHex(card!.colorHex)
        : scheme.onSurfaceVariant;
    final icon = hasCard
        ? PaymentCardUtils.iconForName(card!.iconName)
        : Icons.credit_card_off_rounded;

    return Material(
      color: scheme.surfaceContainerHighest,
      borderRadius: BorderRadius.circular(16),
      child: InkWell(
        borderRadius: BorderRadius.circular(16),
        onTap: onTap,
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Row(
            children: [
              CircleAvatar(
                radius: 20,
                backgroundColor: chipColor.withValues(alpha: 0.15),
                child: Icon(
                  icon,
                  color: chipColor,
                  size: 20,
                ),
              ),
              const SizedBox(width: 16),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      loc.paymentCard,
                      style: TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.w600,
                        color: scheme.onSurfaceVariant,
                      ),
                    ),
                    const SizedBox(height: 4),
                    Text(
                      hasCard
                          ? '${card!.issuerName} · ****${card!.last4}'
                          : loc.paymentCardUnassigned,
                      style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.w700,
                        color: scheme.onSurface,
                      ),
                    ),
                  ],
                ),
              ),
              Icon(
                hasCard ? Icons.edit_rounded : Icons.add_rounded,
                color: scheme.onSurfaceVariant,
              ),
            ],
          ),
        ),
      ),
    );
  }
}