import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../config/emoji_config.dart';
import '../generated/assets.dart';

/// 表情选择面板
class EmojiPanel extends StatefulWidget {
  final Function(EmojiItem emoji) onEmojiSelected;
  final bool isVisible;

  const EmojiPanel({
    super.key,
    required this.onEmojiSelected,
    required this.isVisible,
  });

  @override
  State<EmojiPanel> createState() => _EmojiPanelState();
}

class _EmojiPanelState extends State<EmojiPanel> {
  @override
  Widget build(BuildContext context) {
    if (!widget.isVisible) {
      return const SizedBox.shrink();
    }

    final hasRecent = EmojiConfig.hasRecentEmojis();
    final List<EmojiItem> recentEmojis = hasRecent ? EmojiConfig.getRecentEmojis() : [];

    return AnimatedContainer(
      duration: const Duration(milliseconds: 200),
      height: widget.isVisible ? 320.h : 0,
      color: Colors.white,
      child: Column(
        children: [
          // 表情内容区域
          Expanded(
            child: SingleChildScrollView(
              padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 12.h),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // 最近使用部分（如果有）
                  if (hasRecent) ...[
                    Text(
                      '最近使用',
                      style: TextStyle(
                        fontSize: 14.sp,
                        color: Colors.grey[600],
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                    SizedBox(height: 12.h),
                    _buildEmojiGrid(recentEmojis),
                    SizedBox(height: 20.h),
                  ],
                  // 所有表情部分
                  Text(
                    '所有表情',
                    style: TextStyle(
                      fontSize: 14.sp,
                      color: Colors.grey[600],
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  SizedBox(height: 12.h),
                  _buildEmojiGrid(EmojiConfig.allEmojis),
                ],
              ),
            ),
          ),
          // 底部分类栏
          Container(
            height: 90.h,
            padding: EdgeInsets.only(left: 16.w,top: 10.h),
            child: Align(
              alignment: Alignment.topLeft,
              child: Container(
                  width: 40.w,
                  height: 40.w,
                  decoration: BoxDecoration(
                    color: Colors.grey[200],
                    borderRadius: BorderRadius.circular(8.r),
                  ),
                  padding: EdgeInsets.all(8.w),
                  child: Image.asset(
                    Assets.imagesEmojiTab,
                    fit: BoxFit.contain,
                  ),
                ),
            ),
          ),
        ],
      ),
    );
  }

  /// 构建表情网格
  Widget _buildEmojiGrid(List<EmojiItem> emojis) {
    return GridView.builder(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 7, // 每行7个表情
        mainAxisSpacing: 6.h, // 上下间隔
        crossAxisSpacing: 12.w, // 左右间隔
      ),
      itemCount: emojis.length,
      itemBuilder: (context, index) {
        final emoji = emojis[index];
        return GestureDetector(
          onTap: () {
            // 添加到最近使用
            EmojiConfig.addToRecentEmojis(emoji);
            // 回调选中的表情
            widget.onEmojiSelected(emoji);
            // 刷新界面以更新最近使用
            setState(() {});
          },
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(4.r),
            ),
            child: Image.asset(
              emoji.path,
              fit: BoxFit.contain,
            ),
          ),
        );
      },
    );
  }

}