import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

class TemplateView extends StatefulWidget {
  final int templateId;
  final int lastTemplateId;

  const TemplateView(this.templateId, this.lastTemplateId, {super.key});

  @override
  State<TemplateView> createState() => _TemplateViewState();
}

class _TemplateViewState extends State<TemplateView> {
  final List _categoryList = [
    {
      'id': 1,
      'name': '通用',
      'template': [
        {
          'id': 1,
          'name': '会议纪要',
          'icon': Icons.auto_stories,
          'tag': ['主题', '代办事项'],
          'desc': '',
        },
        {
          'id': 2,
          'name': 'Autopilot',
          'icon': Icons.auto_graph,
          'tag': ['自适应结构', '全场景适配'],
          'desc': '',
        },
        {
          'id': 3,
          'name': '推理Autopilot',
          'icon': Icons.add_to_drive_outlined,
          'tag': ['推理模型', '自动结构化'],
          'desc': '',
        },
        {
          'id': 4,
          'name': '通话',
          'icon': Icons.perm_phone_msg,
          'tag': ['主题', '代办事项'],
          'desc': '',
        },
      ],
    },
    {
      'id': 2,
      'name': '会议',
      'template': [
        {
          'id': 5,
          'name': '咨询',
          'icon': Icons.auto_stories,
          'tag': ['主题', '代办事项'],
          'desc': '',
        },
        {
          'id': 6,
          'name': '讨论',
          'icon': Icons.auto_graph,
          'tag': ['自适应结构', '全场景适配'],
          'desc': '',
        },
        {
          'id': 7,
          'name': '汇报',
          'icon': Icons.add_to_drive_outlined,
          'tag': ['推理模型', '自动结构化'],
          'desc': '',
        },
        {
          'id': 8,
          'name': '任务分配',
          'icon': Icons.perm_phone_msg,
          'tag': ['主题', '代办事项'],
          'desc': '',
        },
      ],
    },
    {
      'id': 3,
      'name': '演讲',
      'template': [
        {
          'id': 9,
          'name': '课堂笔记',
          'icon': Icons.auto_stories,
          'tag': ['主题', '代办事项'],
          'desc': '',
        },
        {
          'id': 10,
          'name': '讲座',
          'icon': Icons.auto_graph,
          'tag': ['自适应结构', '全场景适配'],
          'desc': '',
        },
        {
          'id': 11,
          'name': '培训',
          'icon': Icons.add_to_drive_outlined,
          'tag': ['推理模型', '自动结构化'],
          'desc': '',
        },
        {
          'id': 12,
          'name': 'Sermon',
          'icon': Icons.perm_phone_msg,
          'tag': ['主题', '代办事项'],
          'desc': '',
        },
      ],
    },
    {
      'id': 4,
      'name': '自定义',
      'template': [
        {
          'id': 13,
          'name': '自定义',
          'icon': Icons.auto_fix_high,
          'tag': [],
          'desc': '自定义模版',
        },
      ],
    },
  ];

  Map _templateData = {};

  @override
  void initState() {
    super.initState();
    outerLoop:
    for (var element in _categoryList) {
      List template = element['template'];
      for (var item in template) {
        if (item['id'] == widget.templateId) {
          _templateData = item;
          break outerLoop;
        }
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    final isDarkMode = Theme.of(context).brightness == Brightness.dark;

    return Scaffold(
      backgroundColor: isDarkMode ? Colors.black : Colors.grey[50],
      appBar: _buildAppBar(isDarkMode),
      body: _buildBody(context, isDarkMode),
    );
  }

  // 构建应用栏
  PreferredSizeWidget _buildAppBar(bool isDarkMode) {
    return AppBar(
      backgroundColor: isDarkMode ? Colors.black : Colors.white,
      elevation: 0.5,
      leading: IconButton(
        icon: Icon(
          Icons.arrow_back_ios,
          color: isDarkMode ? Colors.white : Colors.black,
          size: 20.sp,
        ),
        onPressed: () => Get.back(),
      ),
      title: Text(
        '选择总结模版',
        style: TextStyle(
          fontSize: 17.sp,
          fontWeight: FontWeight.w600,
          color: isDarkMode ? Colors.white : Colors.black,
        ),
      ),
      centerTitle: true,
    );
  }

  // 构建主体内容
  Widget _buildBody(BuildContext context, bool isDarkMode) {
    return Column(
      children: [
        Expanded(
          child: ListView.builder(
            itemCount: _categoryList.length,
            itemBuilder: (BuildContext context, int index) {
              Map data = _categoryList[index];
              return _item(data);
            },
          ),
        ),
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 20.w),
          child: GestureDetector(
            onTap: () {
              Get.back(result: _templateData);
            },
            child: Container(
              height: 48.w,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: Colors.black,
                borderRadius: BorderRadius.circular(12.r),
              ),
              child: Text(
                '就用这个模版',
                style: TextStyle(
                  fontSize: 16.sp,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }

  Widget _item(Map data) {
    return Column(
      children: [
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 10.w),
          child: Row(
            children: [
              Text(
                data['name'],
                style: TextStyle(
                  fontSize: 18.sp,
                  color: Colors.black87,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const Icon(
                Icons.keyboard_arrow_right,
                color: Colors.grey,
              )
            ],
          ),
        ),
        Container(
          height: 150.w,
          margin: EdgeInsets.only(bottom: 15.w),
          child: ListView.builder(
            itemCount: data['template'].length,
            scrollDirection: Axis.horizontal,
            padding: EdgeInsets.symmetric(horizontal: 8.w),
            itemBuilder: (BuildContext context, int index) {
              Map template = data['template'][index];
              return _template(template);
            },
          ),
        ),
      ],
    );
  }

  Widget _template(Map template) {
    return Container(
      width: 200.w,
      margin: EdgeInsets.symmetric(horizontal: 4.w),
      clipBehavior: Clip.hardEdge,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(14.w),
      ),
      child: GestureDetector(
        onTap: () {
          setState(() {
            _templateData = template;
          });
        },
        child: Stack(
          children: [
            Container(
              padding: EdgeInsets.all(5.w),
              decoration: BoxDecoration(
                color: Colors.white,
                gradient: _templateData['id'] == template['id']
                    ? const LinearGradient(
                        colors: [Colors.blue, Colors.pinkAccent],
                        begin: Alignment.centerLeft,
                        end: Alignment.centerRight,
                      )
                    : null,
              ),
              child: Container(
                width: double.infinity,
                padding: EdgeInsets.all(10.w),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10.w),
                  color: Colors.white,
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Padding(
                      padding: EdgeInsets.only(top: 5.w),
                      child: Icon(
                        template['icon'],
                        color: Colors.orange,
                        size: 30.w,
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.symmetric(vertical: 10.w),
                      child: Text(
                        template['name'],
                        style: TextStyle(
                          fontSize: 16.sp,
                          color: Colors.black87,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                    template['tag'].isNotEmpty
                        ? Wrap(
                            spacing: 5.w,
                            children: List.generate(
                              template['tag'].length,
                              (int idx) {
                                return Container(
                                  padding: EdgeInsets.symmetric(
                                      horizontal: 5.w, vertical: 2.w),
                                  decoration: BoxDecoration(
                                    color: Colors.grey[200],
                                    borderRadius: BorderRadius.circular(4.r),
                                  ),
                                  child: Text(
                                    template['tag'][idx],
                                    style: TextStyle(
                                      fontSize: 10.sp,
                                      color: Colors.grey[600],
                                    ),
                                  ),
                                );
                              },
                            ),
                          )
                        : Text(
                            template['desc'],
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(
                              fontSize: 12.sp,
                              color: Colors.grey[600],
                            ),
                          ),
                  ],
                ),
              ),
            ),
            if (widget.lastTemplateId == template['id'])
              Positioned(
                top: 0,
                left: 0,
                child: Container(
                  padding: EdgeInsets.symmetric(horizontal: 5.w, vertical: 1.w),
                  decoration: BoxDecoration(
                    color: Colors.blue,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(12.w),
                      bottomRight: Radius.circular(4.w),
                    ),
                  ),
                  child: Text(
                    '上次使用',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 12.sp,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            if (_templateData['id'] == template['id'])
              Positioned(
                right: -18.w,
                bottom: -18.w,
                child: Container(
                  width: 40.w,
                  height: 40.w,
                  padding: EdgeInsets.all(2.w),
                  alignment: Alignment.topLeft,
                  decoration: BoxDecoration(
                    color: Colors.pinkAccent,
                    borderRadius: BorderRadius.circular(40.r),
                  ),
                  child: Icon(
                    Icons.check,
                    color: Colors.white,
                    size: 18.w,
                  ),
                ),
              ),
          ],
        ),
      ),
    );
  }
}