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

import '../../../../core/app_export.dart';

class UserCommentsWidget extends StatefulWidget {
  final List<Map<String, dynamic>> comments;
  final VoidCallback? onAddComment;

  const UserCommentsWidget({
    super.key,
    required this.comments,
    this.onAddComment,
  });

  @override
  State<UserCommentsWidget> createState() => _UserCommentsWidgetState();
}

class _UserCommentsWidgetState extends State<UserCommentsWidget> {
  bool _isExpanded = false;

  Widget _buildCommentItem(BuildContext context, Map<String, dynamic> comment) {
    final theme = Theme.of(context);
    final userName = comment['userName'] as String? ?? '';
    final userAvatar = comment['userAvatar'] as String? ?? '';
    final semanticLabel = comment['semanticLabel'] as String? ?? '';
    final commentText = comment['comment'] as String? ?? '';
    final timestamp = comment['timestamp'] as String? ?? '';
    final rating = comment['rating'] as int? ?? 0;

    return Container(
      margin: EdgeInsets.only(bottom: 3.h),
      padding: EdgeInsets.all(4.w),
      decoration: BoxDecoration(
        color: theme.colorScheme.surface.withValues(alpha: 0.5),
        borderRadius: BorderRadius.circular(8),
        border: Border.all(
          color: theme.colorScheme.outline.withValues(alpha: 0.2),
          width: 1,
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // User info and rating
          Row(
            children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(20),
                child: CustomImageWidget(
                  imageUrl: userAvatar,
                  width: 40,
                  height: 40,
                  fit: BoxFit.cover,
                  semanticLabel: semanticLabel,
                ),
              ),
              SizedBox(width: 3.w),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      userName,
                      style: theme.textTheme.bodyMedium?.copyWith(
                        fontWeight: FontWeight.w600,
                        color: theme.colorScheme.onSurface,
                      ),
                      overflow: TextOverflow.ellipsis,
                    ),
                    Text(
                      timestamp,
                      style: theme.textTheme.bodySmall?.copyWith(
                        color:
                            theme.colorScheme.onSurface.withValues(alpha: 0.6),
                      ),
                    ),
                  ],
                ),
              ),
              // Rating stars
              Row(
                children: List.generate(
                    5,
                    (index) => CustomIconWidget(
                          iconName: index < rating ? 'star' : 'star_border',
                          color: index < rating
                              ? AppTheme.accentYellow
                              : theme.colorScheme.onSurface
                                  .withValues(alpha: 0.3),
                          size: 16,
                        )),
              ),
            ],
          ),
          SizedBox(height: 2.h),
          // Comment text
          Text(
            commentText,
            style: theme.textTheme.bodyMedium?.copyWith(
              color: theme.colorScheme.onSurface,
            ),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);

    return Container(
      width: double.infinity,
      padding: EdgeInsets.all(4.w),
      decoration: BoxDecoration(
        color: theme.colorScheme.surface,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: theme.shadowColor.withValues(alpha: 0.1),
            blurRadius: 8,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Header with expand/collapse
          GestureDetector(
            onTap: () {
              setState(() {
                _isExpanded = !_isExpanded;
              });
            },
            child: Row(
              children: [
                Expanded(
                  child: Text(
                    'Comentarios de usuarios (${widget.comments.length})',
                    style: theme.textTheme.titleMedium?.copyWith(
                      fontWeight: FontWeight.w600,
                      color: theme.colorScheme.onSurface,
                    ),
                  ),
                ),
                CustomIconWidget(
                  iconName: _isExpanded ? 'expand_less' : 'expand_more',
                  color: theme.colorScheme.onSurface.withValues(alpha: 0.6),
                  size: 24,
                ),
              ],
            ),
          ),

          if (_isExpanded) ...[
            SizedBox(height: 3.h),
            // Add comment button
            GestureDetector(
              onTap: widget.onAddComment,
              child: Container(
                width: double.infinity,
                padding: EdgeInsets.all(3.w),
                decoration: BoxDecoration(
                  color: AppTheme.accentYellow.withValues(alpha: 0.1),
                  borderRadius: BorderRadius.circular(8),
                  border: Border.all(
                    color: AppTheme.accentYellow.withValues(alpha: 0.3),
                    width: 1,
                  ),
                ),
                child: Row(
                  children: [
                    CustomIconWidget(
                      iconName: 'add_comment',
                      color: AppTheme.primaryBlack,
                      size: 20,
                    ),
                    SizedBox(width: 2.w),
                    Text(
                      'Agregar comentario',
                      style: theme.textTheme.bodyMedium?.copyWith(
                        fontWeight: FontWeight.w500,
                        color: AppTheme.primaryBlack,
                      ),
                    ),
                  ],
                ),
              ),
            ),
            SizedBox(height: 3.h),
            // Comments list
            if (widget.comments.isEmpty)
              Container(
                width: double.infinity,
                padding: EdgeInsets.all(6.w),
                child: Column(
                  children: [
                    CustomIconWidget(
                      iconName: 'comment',
                      color: theme.colorScheme.onSurface.withValues(alpha: 0.4),
                      size: 32,
                    ),
                    SizedBox(height: 2.h),
                    Text(
                      'Aún no hay comentarios',
                      style: theme.textTheme.bodyMedium?.copyWith(
                        color:
                            theme.colorScheme.onSurface.withValues(alpha: 0.6),
                      ),
                      textAlign: TextAlign.center,
                    ),
                    SizedBox(height: 1.h),
                    Text(
                      '¡Sé el primero en compartir tu experiencia!',
                      style: theme.textTheme.bodySmall?.copyWith(
                        color:
                            theme.colorScheme.onSurface.withValues(alpha: 0.5),
                      ),
                      textAlign: TextAlign.center,
                    ),
                  ],
                ),
              )
            else
              ...widget.comments
                  .map((comment) => _buildCommentItem(context, comment))
                  .toList(),
          ],
        ],
      ),
    );
  }
}
