import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../../models/subscription_model.dart';
import '../../controllers/detail_screen_controller.dart';
import '../../providers/locale_provider.dart';
import '../../services/currency_util.dart';
import '../website_icon.dart';
import '../../l10n/app_localizations.dart';

/// 상세 화면 상단 헤더 섹션
/// 서비스 아이콘, 이름, 결제 정보를 표시합니다.
class DetailHeaderSection extends StatelessWidget {
  final SubscriptionModel subscription;
  final DetailScreenController controller;
  final Animation<double> fadeAnimation;
  final Animation<Offset> slideAnimation;
  final Animation<double> rotateAnimation;

  const DetailHeaderSection({
    super.key,
    required this.subscription,
    required this.controller,
    required this.fadeAnimation,
    required this.slideAnimation,
    required this.rotateAnimation,
  });

  @override
  Widget build(BuildContext context) {
    return Consumer<DetailScreenController>(
      builder: (context, controller, child) {
        final baseColor = controller.getCardColor();

        return Container(
          height: 320,
          decoration: BoxDecoration(color: baseColor),
          child: Stack(
            children: [
              // 배경 패턴
              Positioned(
                top: -50,
                right: -50,
                child: RotationTransition(
                  turns: rotateAnimation,
                  child: Container(
                    width: 200,
                    height: 200,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: Colors.white.withValues(alpha: 0.1),
                    ),
                  ),
                ),
              ),
              Positioned(
                bottom: -30,
                left: -30,
                child: Container(
                  width: 150,
                  height: 150,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.white.withValues(alpha: 0.08),
                  ),
                ),
              ),
              // 콘텐츠
              SafeArea(
                child: Padding(
                  padding: const EdgeInsets.all(24),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // 뒤로가기 버튼
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          IconButton(
                            icon: const Icon(
                              Icons.arrow_back_ios_new_rounded,
                              color: Colors.white,
                            ),
                            onPressed: () => Navigator.of(context).pop(),
                          ),
                          IconButton(
                            icon: const Icon(
                              Icons.delete_outline_rounded,
                              color: Colors.white,
                            ),
                            onPressed: controller.deleteSubscription,
                          ),
                        ],
                      ),
                      const Spacer(),
                      // 서비스 정보
                      FadeTransition(
                        opacity: fadeAnimation,
                        child: SlideTransition(
                          position: slideAnimation,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              // 서비스 아이콘과 이름
                              Row(
                                children: [
                                  Hero(
                                    tag: 'icon_${subscription.id}',
                                    child: Container(
                                      width: 56,
                                      height: 56,
                                      decoration: BoxDecoration(
                                        color: Colors.white,
                                        borderRadius: BorderRadius.circular(16),
                                        boxShadow: [
                                          BoxShadow(
                                            color: Colors.black
                                                .withValues(alpha: 0.1),
                                            blurRadius: 8,
                                            offset: const Offset(0, 4),
                                          ),
                                        ],
                                      ),
                                      child: ClipRRect(
                                        borderRadius: BorderRadius.circular(16),
                                        child: WebsiteIcon(
                                          url: controller
                                              .websiteUrlController.text,
                                          serviceName: controller
                                              .serviceNameController.text,
                                          size: 48,
                                        ),
                                      ),
                                    ),
                                  ),
                                  const SizedBox(width: 16),
                                  Expanded(
                                    child: Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Text(
                                          controller.displayName ??
                                              controller
                                                  .serviceNameController.text,
                                          style: const TextStyle(
                                            fontSize: 28,
                                            fontWeight: FontWeight.w800,
                                            color: Colors.white,
                                            letterSpacing: -0.5,
                                            shadows: [
                                              Shadow(
                                                color: Colors.black26,
                                                offset: Offset(0, 2),
                                                blurRadius: 4,
                                              ),
                                            ],
                                          ),
                                        ),
                                        const SizedBox(height: 4),
                                        Text(
                                          AppLocalizations.of(context)
                                              .billingCyclePayment
                                              .replaceAll(
                                                  '@',
                                                  _getLocalizedBillingCycle(
                                                      context,
                                                      controller.billingCycle)),
                                          style: TextStyle(
                                            fontSize: 16,
                                            fontWeight: FontWeight.w500,
                                            color: Colors.white
                                                .withValues(alpha: 0.8),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                              const SizedBox(height: 20),
                              // 결제 정보 카드
                              Container(
                                padding: const EdgeInsets.all(16),
                                decoration: BoxDecoration(
                                  color: Colors.white.withValues(alpha: 0.15),
                                  borderRadius: BorderRadius.circular(16),
                                ),
                                child: Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    _InfoColumn(
                                      label: AppLocalizations.of(context)
                                          .nextBillingDate,
                                      value: AppLocalizations.of(context)
                                          .formatDate(
                                              controller.nextBillingDate),
                                    ),
                                    FutureBuilder<String>(
                                      future: () async {
                                        final locale = context
                                            .read<LocaleProvider>()
                                            .locale
                                            .languageCode;
                                        final amount = double.tryParse(
                                                controller
                                                    .monthlyCostController.text
                                                    .replaceAll(',', '')) ??
                                            0;
                                        return CurrencyUtil
                                            .formatAmountWithLocale(
                                          amount,
                                          controller.currency,
                                          locale,
                                        );
                                      }(),
                                      builder: (context, snapshot) {
                                        return _InfoColumn(
                                          label: AppLocalizations.of(context)
                                              .monthlyExpense,
                                          value: snapshot.data ?? '-',
                                          alignment: CrossAxisAlignment.end,
                                        );
                                      },
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        );
      },
    );
  }

  String _getLocalizedBillingCycle(BuildContext context, String cycle) {
    final loc = AppLocalizations.of(context);
    switch (cycle.toLowerCase()) {
      case '매월':
      case 'monthly':
      case '毎月':
      case '每月':
        return loc.billingCycleMonthly;
      case '분기별':
      case 'quarterly':
      case '四半期':
      case '每季度':
        return loc.billingCycleQuarterly;
      case '반기별':
      case 'half-yearly':
      case '半年ごと':
      case '每半年':
        return loc.billingCycleHalfYearly;
      case '매년':
      case 'yearly':
      case '年間':
      case '每年':
        return loc.billingCycleYearly;
      default:
        return cycle;
    }
  }
}

/// 정보 표시 컬럼
class _InfoColumn extends StatelessWidget {
  final String label;
  final String value;
  final CrossAxisAlignment alignment;

  const _InfoColumn({
    required this.label,
    required this.value,
    this.alignment = CrossAxisAlignment.start,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: alignment,
      children: [
        Text(
          label,
          style: TextStyle(
            fontSize: 14,
            fontWeight: FontWeight.w500,
            color: Colors.white.withValues(alpha: 0.8),
          ),
        ),
        const SizedBox(height: 4),
        Text(
          value,
          style: const TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.w700,
            color: Colors.white,
          ),
        ),
      ],
    );
  }
}