import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:intl/intl.dart';
import 'package:niogu_app/core/components/top_back_bar_app.dart';
import 'package:niogu_app/core/constants/app_color.dart';
import 'package:niogu_app/core/constants/app_font_size.dart';
import 'package:niogu_app/core/widgets/custom_error_screen.dart';
import 'package:niogu_app/features/online_store/presentation/providers/online_store_provider.dart';
import 'package:sizer/sizer.dart';

class FullProductReviewScreen extends ConsumerStatefulWidget {
  final String productId;
  const FullProductReviewScreen({super.key, required this.productId});

  @override
  ConsumerState<FullProductReviewScreen> createState() =>
      _FullProductReviewScreenState();
}

class _FullProductReviewScreenState
    extends ConsumerState<FullProductReviewScreen> {
  final Map<int, bool> _expandedStates = {};

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final bool isTablet = 100.w >= 600;

        final productCommentState = ref.watch(
          productCommentStreamProvider(widget.productId),
        );

        return SafeArea(
          top: false,
          bottom: true,
          right: false,
          left: false,
          child: Scaffold(
            backgroundColor: Colors.white,
            appBar: TopBackBarApp(
              title: "Ulasan Lengkap Produk",
              onTap: () => context.pop(),
            ),
            body: productCommentState.when(
              data: (comments) {
                return ListView.separated(
                  padding: EdgeInsets.symmetric(horizontal: 5.w, vertical: 2.h),
                  itemCount: comments.length,
                  separatorBuilder: (context, index) =>
                      Divider(height: 4.h, color: Colors.grey.shade100),
                  itemBuilder: (context, index) {
                    final comment = comments[index];
                    final bool isExpanded = _expandedStates[index] ?? false;

                    return Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  comment.name,
                                  style: TextStyle(
                                    fontWeight: FontWeight.bold,
                                    fontSize: isTablet
                                        ? (AppFontSize.medium - 1.25).sp
                                        : (AppFontSize.small - 1.25).sp,
                                  ),
                                ),

                                SizedBox(height: 0.75.h),

                                Text(
                                  "${DateFormat('dd MMMM yyyy').format(comment.date)}",
                                  style: TextStyle(
                                    color: Colors.grey.shade700,
                                    fontSize: isTablet
                                        ? (AppFontSize.medium - 1.25).sp
                                        : (AppFontSize.small - 1.25).sp,
                                  ),
                                ),
                              ],
                            ),
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  "${comment.variantName != null && comment.variantName!.isNotEmpty ? comment.variantName : ''}",
                                  style: TextStyle(
                                    fontWeight: FontWeight.w600,
                                    fontSize: isTablet
                                        ? (AppFontSize.medium - 1.25).sp
                                        : (AppFontSize.small - 1.25).sp,
                                  ),
                                ),

                                SizedBox(height: 0.75.h),

                                Row(
                                  children: List.generate(
                                    5,
                                    (starIndex) => Icon(
                                      Icons.star_rounded,
                                      color: starIndex < comment.rating
                                          ? Colors.orange
                                          : Colors.grey.shade300,
                                      size: 4.w,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),

                        SizedBox(height: 1.5.h),

                        if (comment.comment != null &&
                            comment.comment!.isNotEmpty)
                          Text(
                            comment.comment!,
                            maxLines: isExpanded ? null : 2,
                            overflow: isExpanded
                                ? TextOverflow.visible
                                : TextOverflow.ellipsis,
                            style: TextStyle(
                              fontSize: isTablet
                                  ? (AppFontSize.medium - 1.5).sp
                                  : (AppFontSize.small - 1.5).sp,
                              color: Colors.black87,
                              height: 1.5,
                            ),
                          )
                        else
                          Text(
                            "Tidak ada ulasan",
                            style: TextStyle(
                              fontSize: isTablet
                                  ? (AppFontSize.medium - 1.5).sp
                                  : (AppFontSize.small - 1.5).sp,
                              color: Colors.black87,
                              height: 1.5,
                            ),
                          ),

                        if (comment.comment != null &&
                            comment.comment!.isNotEmpty)
                          GestureDetector(
                            onTap: () => setState(
                              () => _expandedStates[index] = !isExpanded,
                            ),
                            child: Padding(
                              padding: EdgeInsets.symmetric(vertical: 1.h),
                              child: Row(
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  Text(
                                    isExpanded ? "Tutup" : "Lihat Selengkapnya",
                                    style: TextStyle(
                                      color: AppColor.primaryColor,
                                      fontSize: isTablet
                                          ? (AppFontSize.medium - 1.25).sp
                                          : (AppFontSize.small - 1.25).sp,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                  Icon(
                                    isExpanded
                                        ? Icons.keyboard_arrow_up
                                        : Icons.keyboard_arrow_down,
                                    color: AppColor.primaryColor,
                                    size: 4.w,
                                  ),
                                ],
                              ),
                            ),
                          ),
                      ],
                    );
                  },
                );
              },
              error: (error, stackTrace) => CustomErrorScreen(
                message: "Ups, terjadi kesalahan",
                onRefresh: () {},
              ),
              loading: () => const SizedBox(),
            ),
          ),
        );
      },
    );
  }
}
