import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:go_router/go_router.dart';

import '../../core/app_colors.dart';
import '../components/app_checkbox.dart';
import '../components/custom_app_bar.dart';
import '../components/gradient_button.dart';
import '../components/period_selector.dart';
import '../components/content_parser.dart'; // ✅ Парсер контента
import '../event/subscription_details_event.dart';
import '../state/susbcription_details_state.dart';
import '../viewmodel/susbcription_details_bloc.dart';

class SubscriptionDetailsScreen extends StatelessWidget {
  final int subscriptionId;

  const SubscriptionDetailsScreen({super.key, required this.subscriptionId});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(gradient: AppColors.phoneScreenBg),
        child: SafeArea(
          child: Column(
            children: [
              const SizedBox(height: 16),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 20),
                child: BlocConsumer<
                    SubscriptionDetailsBloc,
                    SubscriptionDetailsState
                >(
                  listenWhen: (previous, current) =>
                  current is DetailsContentState && current.isSuccess,
                  listener: (context, state) {
                    if (state is DetailsContentState && state.isSuccess) {
                      context.pop(true);
                    }
                  },
                  builder: (context, state) {
                    String title = "Загрузка...";
                    if (state is DetailsContentState) {
                      title = state.subscription.title;
                    }
                    return CustomAppBar(title: title);
                  },
                ),
              ),
              const SizedBox(height: 20),

              // 🔹 Контент
              Expanded(
                child: Stack(
                  children: [
                    // Волна снизу
                    Positioned(
                      bottom: 0,
                      left: 0,
                      right: 0,
                      child: Opacity(
                        opacity: 0.5,
                        child: Image.asset('assets/wave.png'),
                      ),
                    ),
                    BlocBuilder<
                        SubscriptionDetailsBloc,
                        SubscriptionDetailsState
                    >(
                      builder: (context, state) {
                        if (state is DetailsLoading) {
                          return const Center(
                            child: CircularProgressIndicator(
                              color: Color(0xFF80FFD1),
                            ),
                          );
                        }
                        if (state is DetailsError) {
                          return Center(
                            child: Text(
                              state.message,
                              style: const TextStyle(color: Colors.white),
                            ),
                          );
                        }
                        if (state is DetailsContentState) {
                          return _buildContent(context, state);
                        }
                        return const SizedBox();
                      },
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildContent(BuildContext context, DetailsContentState state) {
    final bool isAvailableForPurchase = state.subscription.isActive;

    return SingleChildScrollView(
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 🔹 Обёртка для растягивания контента на всю ширину
          Column(
            crossAxisAlignment: CrossAxisAlignment.stretch, // ✅ Растягивает детей на всю ширину
            mainAxisSize: MainAxisSize.min, // ✅ Не занимает лишнее место по вертикали
            children: ContentParser.parseContent(
              textJson: state.subscription.fullDescriptionJson,
              text: state.subscription.fullDescription,
            ),
          ),

          if (isAvailableForPurchase) ...[
            const SizedBox(height: 30),
            _ActionCard(state: state),
            const SizedBox(height: 30),
            GradientButton(
              text: state.isAlreadyPurchased ? 'Продлить' : 'Активировать',
              onTap: () {
                context.read<SubscriptionDetailsBloc>().add(
                  ActivateSubscriptionPressed(),
                );
              },
              enabled: state.isAgreed,
              width: double.infinity,
              height: 56,
              fontSize: 16,
              showArrows: true,
            ),
          ],
          const SizedBox(height: 20),
        ],
      ),
    );
  }
}

class _ActionCard extends StatelessWidget {
  final DetailsContentState state;

  const _ActionCard({required this.state});

  @override
  Widget build(BuildContext context) {
    final List<String> periodTitles = state.subscription.options
        .map((e) => e.title)
        .toList();

    final int selectedIndex = state.subscription.options.indexOf(
      state.selectedPeriod,
    );

    return Container(
      padding: const EdgeInsets.all(24),
      decoration: BoxDecoration(
        color: const Color(0xFF131B47),
        borderRadius: BorderRadius.circular(30),
        border: Border.all(color: Colors.white.withOpacity(0.1)),
      ),
      child: Column(
        children: [
          const Text(
            "Выберите период действия",
            style: TextStyle(color: Colors.white, fontWeight: FontWeight.w500),
          ),
          const SizedBox(height: 20),

          PeriodSelector(
            periods: periodTitles,
            currentIndex: selectedIndex != -1 ? selectedIndex : 0,
            onSelect: (index) {
              final selectedOption = state.subscription.options[index];
              context.read<SubscriptionDetailsBloc>().add(
                SelectPeriodEvent(selectedOption),
              );
            },
          ),

          const SizedBox(height: 30),

          _PriceRow(price: state.selectedPeriod.pricePrint),

          const SizedBox(height: 20),

          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              AppCheckbox(
                value: state.isAgreed,
                onChanged: (bool? value) {
                  if (value != null) {
                    context.read<SubscriptionDetailsBloc>().add(
                      ToggleAgreementEvent(value),
                    );
                  }
                },
              ),
              const SizedBox(width: 12),
              const Flexible(
                child: Text(
                  'Я подтверждаю, что ознакомился со всеми условиями предоставления подписки и принимаю их безоговорочно',
                  style: TextStyle(color: Colors.white70, fontSize: 12),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class _PriceRow extends StatelessWidget {
  final String price;

  const _PriceRow({required this.price});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white.withOpacity(0.05),
        borderRadius: BorderRadius.circular(20),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image.asset("assets/icons/money_icon.png", width: 72, height: 72),
          const SizedBox(width: 15),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text("Стоимость:", style: TextStyle(color: Color(0xFF80FFD1))),
              Text(
                price,
                style: const TextStyle(
                  color: Color(0xFF80FFD1),
                  fontSize: 22,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}