import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/svg.dart';
import 'package:maps_launcher/maps_launcher.dart';
import 'package:proxibuy/core/config/app_colors.dart';
import 'package:proxibuy/core/gen/assets.gen.dart';
import 'package:proxibuy/data/models/offer_model.dart';
import 'package:proxibuy/data/repositories/offer_repository.dart';
import 'package:proxibuy/presentation/product_detail/bloc/product_detail_bloc.dart';
import 'package:proxibuy/presentation/product_detail/bloc/product_detail_event.dart';
import 'package:proxibuy/presentation/product_detail/bloc/product_detail_state.dart';
import 'package:slide_countdown/slide_countdown.dart';

class ProductDetailPage extends StatelessWidget {
  final String offerId;

  const ProductDetailPage({super.key, required this.offerId});

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => ProductDetailBloc(
        offerRepository: context.read<OfferRepository>(),
      )..add(ProductDetailFetchRequested(offerId: offerId)),
      child: Scaffold(
        body: BlocBuilder<ProductDetailBloc, ProductDetailState>(
          builder: (context, state) {
            if (state is ProductDetailLoadInProgress || state is ProductDetailInitial) {
              return const Center(child: CircularProgressIndicator());
            }
            if (state is ProductDetailLoadFailure) {
              return Center(child: Text('خطا: ${state.error}'));
            }
            if (state is ProductDetailLoadSuccess) {
              return ProductDetailView(offer: state.offer);
            }
            return const SizedBox.shrink();
          },
        ),
      ),
    );
  }
}

class ProductDetailView extends StatefulWidget {
  final OfferModel offer;

  const ProductDetailView({super.key, required this.offer});

  @override
  State<ProductDetailView> createState() => _ProductDetailViewState();
}

class _ProductDetailViewState extends State<ProductDetailView> {
  late List<String> imageList;
  late String selectedImage;
  final String _uploadKey = 'upload_image';

  @override
  void initState() {
    super.initState();
    imageList = List.from(widget.offer.imageUrls)..add(_uploadKey);
    selectedImage = imageList.first;
  }

  void _launchMaps(double lat, double lon, String title) {
    MapsLauncher.launchCoordinates(lat, lon, title);
  }

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.rtl,
      child: SingleChildScrollView(
        child: Stack(
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                _buildMainImage(context),
                const SizedBox(height: 52.5),
                _buildProductInfo(),
              ],
            ),
            Positioned(
              top: 400 - 52.5,
              left: 0,
              right: 0,
              child: _buildThumbnailList(),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildMainImage(BuildContext context) {
    return Stack(
      children: [
        SizedBox(
          height: 400,
          width: double.infinity,
          child: AnimatedSwitcher(
            duration: const Duration(milliseconds: 300),
            transitionBuilder: (child, animation) {
              return FadeTransition(opacity: animation, child: child);
            },
            child: Image.network(
              selectedImage,
              key: ValueKey<String>(selectedImage),
              fit: BoxFit.cover,
              width: double.infinity,
              height: 400,
              loadingBuilder: (context, child, progress) {
                return progress == null
                    ? child
                    : const Center(child: CircularProgressIndicator());
              },
            ),
          ),
        ),
        Positioned(
          top: 40,
          left: 16,
          child: GestureDetector(
            child: SvgPicture.asset(Assets.icons.back.path),
            onTap: () {
              Navigator.pop(context);
            },
          ),
        ),
      ],
    );
  }

  Widget _buildThumbnailList() {
    return Directionality(
      textDirection: TextDirection.ltr,
      child: Container(
        height: 105,
        padding: const EdgeInsets.symmetric(vertical: 8),
        child: ListView.separated(
          scrollDirection: Axis.horizontal,
          padding: const EdgeInsets.symmetric(horizontal: 16),
          itemCount: imageList.length,
          separatorBuilder: (_, __) => const SizedBox(width: 8),
          itemBuilder: (context, index) {
            final img = imageList[index];
            if (img == _uploadKey) {
              return _buildUploadButton();
            }
            final isSelected = selectedImage == img;
            return _buildThumbnail(img, isSelected);
          },
        ),
      ),
    );
  }

  Widget _buildThumbnail(String img, bool isSelected) {
    const grayscaleMatrix = <double>[
      0.2126, 0.7152, 0.0722, 0, 0,
      0.2126, 0.7152, 0.0722, 0, 0,
      0.2126, 0.7152, 0.0722, 0, 0,
      0,      0,      0,      1, 0,
    ];

    return GestureDetector(
      onTap: () => setState(() => selectedImage = img),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        decoration: BoxDecoration(
          border: Border.all(
            color: isSelected ? AppColors.selectedImg : Colors.transparent,
            width: 2.5,
          ),
          borderRadius: BorderRadius.circular(12),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.15),
              blurRadius: 7,
              spreadRadius: 0,
            ),
          ],
        ),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(8),
          child: ColorFiltered(
            colorFilter: ColorFilter.matrix(isSelected ? <double>[
              1, 0, 0, 0, 0,
              0, 1, 0, 0, 0,
              0, 0, 1, 0, 0,
              0, 0, 0, 1, 0,
            ] : grayscaleMatrix),
            child: Image.network(img, width: 90, height: 90, fit: BoxFit.cover),
          ),
        ),
      ),
    );
  }

  Widget _buildUploadButton() {
    return GestureDetector(
      onTap: () {
        print("Upload image tapped!");
      },
      child: Container(
        width: 90,
        height: 90,
        decoration: BoxDecoration(
          color: Colors.grey[200],
          borderRadius: BorderRadius.circular(8),
          border: Border.all(color: Colors.grey.shade400, width: 1.5),
        ),
        child: Padding(
          padding: const EdgeInsets.all(9.0),
          child: SvgPicture.asset(Assets.icons.addImg.path),
        ),
      ),
    );
  }

  Widget _buildProductInfo() {
    final remainingDuration = widget.offer.expiryTime.isAfter(DateTime.now())
        ? widget.offer.expiryTime.difference(DateTime.now())
        : Duration.zero;

    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 24.0).copyWith(bottom: 24.0, top: 24.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              SvgPicture.asset(Assets.icons.shop.path, height: 30),
              const SizedBox(width: 6),
              Text(widget.offer.storeName, style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
            ],
          ),
          const SizedBox(height: 16),
          _buildInfoRow(icon: Assets.icons.location, text: widget.offer.address),
          const SizedBox(height: 12),
          ExpandableInfoRow(
            icon: Assets.icons.clock,
            titleWidget: Row(
              children: [
                Text(
                  widget.offer.isOpen ? "باز است" : "بسته است",
                  style: TextStyle(
                    fontSize: 16,
                    color: widget.offer.isOpen ? Colors.green.shade700 : Colors.red.shade700,
                    fontWeight: FontWeight.normal,
                  ),
                ),
              ],
            ),
            children: widget.offer.workingHours.map((wh) => Padding(
              padding: const EdgeInsets.only(right: 10.0, bottom: 8.0, top: 4.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(wh.day, style: const TextStyle(fontSize: 15, fontWeight: FontWeight.bold)),
                  wh.isOpen
                      ? Text(wh.shifts.map((s) => '${s.openAt} - ${s.closeAt}').join(' | '), style: const TextStyle(fontSize: 15, color: AppColors.hint))
                      : const Text('تعطیل', style: TextStyle(fontSize: 15, color: Colors.red)),
                ],
              ),
            )).toList(),
          ),
          const SizedBox(height: 12),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              InkWell(
                onTap: () => _launchMaps(widget.offer.latitude, widget.offer.longitude, widget.offer.storeName),
                borderRadius: BorderRadius.circular(8),
                child: Padding(
                  padding: const EdgeInsets.all(4.0),
                  child: Row(
                    children: [
                      SvgPicture.asset(
                        Assets.icons.map.path,
                        width: 25,
                        height: 25,
                        colorFilter: const ColorFilter.mode(AppColors.button, BlendMode.srcIn),
                      ),
                      const SizedBox(width: 8),
                      const Text('مسیر فروشگاه روی نقشه', style: TextStyle(fontSize: 17, color: AppColors.button)),
                    ],
                  ),
                ),
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Container(
                    width: 60,
                    padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                    decoration: const BoxDecoration(
                      color: AppColors.selectedImg,
                      borderRadius: BorderRadius.only(topLeft: Radius.circular(8), topRight: Radius.circular(8)),
                    ),
                    child: Center(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(widget.offer.rating.toString(), style: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 11)),
                          const SizedBox(width: 2),
                          SvgPicture.asset(Assets.icons.star.path, colorFilter: const ColorFilter.mode(Colors.white, BlendMode.srcIn)),
                        ],
                      ),
                    ),
                  ),
                  Container(
                    height: 30,
                    width: 60,
                    padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                    decoration: BoxDecoration(
                      color: Colors.grey[200],
                      borderRadius: const BorderRadius.only(bottomLeft: Radius.circular(8), bottomRight: Radius.circular(8)),
                    ),
                    child: Center(child: Text('${widget.offer.ratingCount} نفر', style: const TextStyle(color: Colors.black, fontSize: 11, fontWeight: FontWeight.bold))),
                  ),
                ],
              ),
            ],
          ),
          const SizedBox(height: 30),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 11),
                decoration: BoxDecoration(
                  color: AppColors.singleOfferType,
                  borderRadius: BorderRadius.circular(20),
                ),
                child: Text("تخفیف ${widget.offer.discountType}", style: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 14)),
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text('(${widget.offer.discount})', style: const TextStyle(fontSize: 16, color: AppColors.singleOfferType, fontWeight: FontWeight.normal)),
                      const SizedBox(width: 8),
                      Text(
                        widget.offer.originalPrice.toStringAsFixed(0),
                        style: TextStyle(fontSize: 16, color: Colors.grey.shade600, decoration: TextDecoration.lineThrough),
                      ),
                    ],
                  ),
                  const SizedBox(height: 1),
                  Text('${widget.offer.finalPrice.toStringAsFixed(0)} تومان', style: const TextStyle(color: AppColors.singleOfferType, fontSize: 22, fontWeight: FontWeight.bold)),
                ],
              ),
            ],
          ),
          const SizedBox(height: 24),
          _buildInfoRow(icon: Assets.icons.timerPause, text: "مهلت استفاده از تخفیف"),
          const SizedBox(height: 10),
          if (remainingDuration > Duration.zero)
            Column(
              children: [
                Localizations.override(
                  context: context,
                  locale: const Locale('en'),
                  child: SlideCountdown(
                    duration: remainingDuration,
                    slideDirection: SlideDirection.up,
                    separator: ':',
                    style: const TextStyle(
                      fontSize: 85,
                      fontWeight: FontWeight.bold,
                      color: AppColors.countdown,
                    ),
                    separatorStyle: const TextStyle(
                      fontSize: 40,
                      color: AppColors.countdown,
                    ),
                      decoration: const BoxDecoration(
                      color: Colors.white,
                    ),
                    shouldShowDays: (duration) => duration.inDays > 0,
                  ),
                ),
                const Padding(
                  padding: EdgeInsets.symmetric(horizontal: 60.0), 
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text("ثانیه", style: TextStyle(fontSize: 14, color: AppColors.selectedImg)),
                      Text("دقیقه", style: TextStyle(fontSize: 14, color: AppColors.selectedImg)),
                      Text("ساعت", style: TextStyle(fontSize: 14, color: AppColors.selectedImg)),
                    ],
                  ),
                ),
              ],
            ),
        ],
      ),
    );
  }

  Widget _buildInfoRow({required SvgGenImage icon, required String text}) {
    return Row(
      children: [
        SvgPicture.asset(icon.path, width: 22, height: 22, colorFilter: ColorFilter.mode(Colors.grey.shade600, BlendMode.srcIn)),
        const SizedBox(width: 6),
        Expanded(child: Text(text, style: const TextStyle(fontSize: 16, color: AppColors.hint))),
      ],
    );
  }
}

class ExpandableInfoRow extends StatefulWidget {
  final SvgGenImage icon;
  final Widget titleWidget;
  final List<Widget> children;

  const ExpandableInfoRow({
    super.key,
    required this.icon,
    required this.titleWidget,
    this.children = const [],
  });

  @override
  State<ExpandableInfoRow> createState() => _ExpandableInfoRowState();
}

class _ExpandableInfoRowState extends State<ExpandableInfoRow> {
  bool _isExpanded = false;

  void _toggleExpand() {
    if (widget.children.isNotEmpty) {
      setState(() {
        _isExpanded = !_isExpanded;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        InkWell(
          onTap: _toggleExpand,
          child: Row(
            children: [
              SvgPicture.asset(widget.icon.path, width: 22, height: 22, colorFilter: ColorFilter.mode(Colors.grey.shade600, BlendMode.srcIn)),
              const SizedBox(width: 6),
              Expanded(child: widget.titleWidget),
              if (widget.children.isNotEmpty)
                AnimatedRotation(
                  turns: _isExpanded ? 0.5 : 0,
                  duration: const Duration(milliseconds: 200),
                  child: const Icon(Icons.keyboard_arrow_down, color: Colors.black),
                ),
            ],
          ),
        ),
        AnimatedCrossFade(
          firstChild: Container(),
          secondChild: Column(children: widget.children),
          crossFadeState: _isExpanded ? CrossFadeState.showSecond : CrossFadeState.showFirst,
          duration: const Duration(milliseconds: 300),
        ),
      ],
    );
  }
}