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

class MeetingMineView extends StatefulWidget {
  const MeetingMineView({super.key});

  @override
  State<MeetingMineView> createState() => _MeetingMineViewState();
}

class _MeetingMineViewState extends State<MeetingMineView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[100],
      body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            alignment: Alignment.topCenter,
            image: AssetImage('assets/images/mine-background.png'),
            fit: BoxFit.fitWidth,
          ),
        ),
        child: SafeArea(
          child: ListView(
            padding: EdgeInsets.symmetric(horizontal: 12.w),
            children: [
              _head(),
              _statistics(),
              _box([
                _item(
                  Icons.article_outlined,
                  '转写记录',
                  onTap: () {},
                ),
              ]),
              _box([
                _item(
                  Icons.settings_outlined,
                  '设置',
                  onTap: () {},
                ),
                _item(
                  Icons.layers_outlined,
                  '模版社区',
                  onTap: () {},
                ),
                _item(
                  Icons.sync_alt_outlined,
                  '集成',
                  onTap: () {},
                ),
              ]),
              _box([
                _item(
                  Icons.cloud_upload_outlined,
                  'DEAPSOUND PRIVATE CLOUD',
                  description: '开启',
                  onTap: () {},
                ),
              ]),
              _box([
                _item(
                  Icons.language_outlined,
                  'WEB',
                  description: 'web.deapsound.com',
                  onTap: () {},
                ),
                _item(
                  Icons.settings_remote_outlined,
                  '我的DEAPSOUND设备',
                  onTap: () {},
                ),
              ]),
              _box([
                _item(
                  Icons.help_outline_rounded,
                  '帮助与反馈',
                  onTap: () {},
                ),
                _item(
                  Icons.info_outline_rounded,
                  '关于DEAPSOUND',
                  description: 'v1.0.0',
                  onTap: () {},
                ),
              ]),
            ],
          ),
        ),
      ),
    );
  }

  Widget _head() {
    return Padding(
      padding: EdgeInsets.symmetric(vertical: 20.w),
      child: GestureDetector(
        onTap: () {},
        child: Row(
          children: [
            Container(
              width: 50.w,
              height: 50.w,
              margin: EdgeInsets.only(right: 10.w),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(50.w),
                image: const DecorationImage(
                  image: NetworkImage(
                      'https://pic8.iqiyipic.com/image/20250403/ed/a7/a_100013977_m_601_m75_318_424.avif'),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Expanded(
              child: Text(
                'tianming liu',
                style: TextStyle(
                  color: Colors.black87,
                  fontSize: 20.sp,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            Icon(
              Icons.arrow_forward_ios,
              size: 16.w,
              color: Colors.grey[700],
            ),
          ],
        ),
      ),
    );
  }

  Widget _statistics() {
    return Container(
      padding: EdgeInsets.all(8.w),
      margin: EdgeInsets.only(bottom: 15.w),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16.w),
      ),
      child: Column(
        children: [
          Row(
            children: [
              _statisticsItem('2', '天', Colors.lime),
              _statisticsItem('4', '文件', Colors.lightGreen),
              _statisticsItem('1.5', '小时', Colors.blueGrey),
            ],
          ),
          Container(
            height: 80.w,
            padding: EdgeInsets.symmetric(horizontal: 2.w),
            margin: EdgeInsets.only(top: 8.w, bottom: 2.w),
            child: GridView.builder(
              scrollDirection: Axis.horizontal,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 7,
                mainAxisSpacing: 2.w,
                crossAxisSpacing: 2.w,
              ),
              itemCount: 364,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  decoration: BoxDecoration(
                    color: Colors.grey[200],
                    borderRadius: BorderRadius.circular(2.w),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }

  Widget _statisticsItem(String amount, String unit, Color color) {
    return Expanded(
      child: Container(
        height: 30.w,
        margin: EdgeInsets.symmetric(horizontal: 2.w),
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: color.withOpacity(0.2),
          borderRadius: BorderRadius.circular(8.w),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Text(
              amount,
              style: TextStyle(
                height: 0.1,
                color: Colors.black87,
                fontSize: 16.sp,
                fontWeight: FontWeight.bold,
              ),
            ),
            2.horizontalSpace,
            Text(
              unit,
              style: TextStyle(
                height: 0.1,
                color: Colors.grey,
                fontSize: 10.sp,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _box(List<Widget> children) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 5.w),
      margin: EdgeInsets.only(bottom: 15.w),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16.w),
      ),
      child: Column(
        children: children,
      ),
    );
  }

  Widget _item(
    IconData icon,
    String title, {
    String? description,
    Function()? onTap,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 12.w),
        child: Row(
          children: [
            Icon(
              icon,
              size: 24.w,
              color: Colors.grey,
            ),
            8.horizontalSpace,
            Expanded(
              child: Text(
                title,
                style: TextStyle(
                  color: Colors.black87,
                  fontSize: 16.sp,
                ),
              ),
            ),
            if (description != null)
              Padding(
                padding: EdgeInsets.only(right: 5.w),
                child: Text(
                  description,
                  style: TextStyle(
                    color: Colors.grey,
                    fontSize: 16.sp,
                  ),
                ),
              ),
            Icon(
              Icons.arrow_forward_ios,
              size: 16.w,
              color: Colors.grey,
            ),
          ],
        ),
      ),
    );
  }
}