import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:ln_jq_app/storage_service.dart';
import 'controller.dart';

// 假设您的 Controller 在这里，如果还没有，可以先创建一个空类
// import 'controller.dart';

// 为了演示，我们先创建一个空的 Controller
// class MineController extends GetxController {}

class MinePage extends GetView<MineController> {
  const MinePage({super.key});

  @override
  Widget build(BuildContext context) {
    return GetBuilder<MineController>(
      init: MineController(),
      id: 'mine',
      builder: (_) {
        // 将所有 UI 构建逻辑放在这里
        return Scaffold(
          backgroundColor: Colors.grey[100],
          body: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.all(12.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  _buildUserInfoCard(),
                  const SizedBox(height: 12),
                  _buildDriverScoreCard(),
                  const SizedBox(height: 12),
                  _buildMonthlyRecordCard(),
                  const SizedBox(height: 12),
                  _buildTipsCard(),
                  const SizedBox(height: 20),
                  _buildLogoutButton(),
                ],
              ),
            ),
          ),
        );
      },
    );
  }

  /// 1. 构建顶部用户信息卡片
  Widget _buildUserInfoCard() {
    return Card(
      elevation: 2,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Row(
              children: [
                const CircleAvatar(
                  radius: 25,
                  backgroundColor: Colors.blue,
                  child: Icon(Icons.person, color: Colors.white, size: 40),
                ),
                const SizedBox(width: 16),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        "${StorageService.to.name}",
                        style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
                      ),
                      const SizedBox(height: 4),
                      Text(
                        "${StorageService.to.phone}",
                        style: TextStyle(color: Colors.grey, fontSize: 11),
                      ),
                      const SizedBox(height: 4),
                      Text(
                        StorageService.to.hasVehicleInfo ? "已绑定车辆" : '未绑定车辆',
                        style: TextStyle(color: Colors.orange, fontSize: 12),
                      ),
                    ],
                  ),
                ),
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                  decoration: BoxDecoration(
                    color: Colors.blue[50],
                    borderRadius: BorderRadius.circular(12),
                    border: Border.all(color: Colors.blue, width: 0.5),
                  ),
                  child: const Row(
                    children: [
                      Icon(Icons.shield_outlined, color: Colors.blue, size: 14),
                      SizedBox(width: 4),
                      Text(
                        '已认证',
                        style: TextStyle(
                          color: Colors.blue,
                          fontSize: 10,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          const Divider(height: 1),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                _buildStatItem('0', '违章总数'),
                _buildStatItem('0', '扣分总数'),
                _buildStatItem('0', '已处理'),
              ],
            ),
          ),
        ],
      ),
    );
  }

  // 用户信息卡片中的小统计项
  Widget _buildStatItem(String value, String label) {
    return Column(
      children: [
        Text(value, style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
        const SizedBox(height: 4),
        Text(label, style: const TextStyle(color: Colors.grey, fontSize: 12)),
      ],
    );
  }

  /// 2. 构建驾驶得分卡片
  Widget _buildDriverScoreCard() {
    return Card(
      elevation: 2,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              '驾驶得分',
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
            const Text('本月表现', style: TextStyle(fontSize: 12, color: Colors.grey)),
            const SizedBox(height: 20),
            Center(
              child: SizedBox(
                width: 100,
                height: 100,
                child: Stack(
                  fit: StackFit.expand,
                  children: [
                    CircularProgressIndicator(
                      value: 0.8, // 假设得分80%
                      strokeWidth: 8,
                      backgroundColor: Colors.grey[200],
                      valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
                    ),
                    Center(
                      child: Text(
                        '10',
                        style: TextStyle(
                          fontSize: 32,
                          fontWeight: FontWeight.bold,
                          color: Colors.blue,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            const SizedBox(height: 20),
            _buildScoreDetailRow(Icons.directions_car, '安全驾驶', '无违章记录', true),
            const Divider(),
            _buildScoreDetailRow(Icons.timer, '准时率', '100%准时到达', true),
            const Divider(),
            _buildScoreDetailRow(Icons.thumb_up, '服务质量', '用户满意度高', true),
            const Divider(),
            Padding(
              padding: const EdgeInsets.only(top: 12.0),
              child: Row(
                children: [
                  const Text(
                    '优秀驾驶员',
                    style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
                  ),
                  const Spacer(),
                  Container(
                    padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
                    decoration: BoxDecoration(
                      color: Colors.blue,
                      borderRadius: BorderRadius.circular(16),
                    ),
                    child: const Text(
                      'A+',
                      style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 驾驶得分卡片中的评分项
  Widget _buildScoreDetailRow(
    IconData icon,
    String title,
    String subtitle,
    bool isCompleted,
  ) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8.0),
      child: Row(
        children: [
          CircleAvatar(
            radius: 20,
            backgroundColor: Colors.blue.withOpacity(0.1),
            child: Icon(icon, color: Colors.blue, size: 24),
          ),
          const SizedBox(width: 12),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: const TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
                ),
                Text(subtitle, style: const TextStyle(fontSize: 12, color: Colors.grey)),
              ],
            ),
          ),
          if (isCompleted) const Icon(Icons.check_circle, color: Colors.blue),
        ],
      ),
    );
  }

  /// 3. 构建本月记录卡片
  Widget _buildMonthlyRecordCard() {
    return Card(
      elevation: 2,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              '本月记录',
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 8),
            _buildRecordRow(Icons.autorenew, '加氢预约践行率', '100%'),
            const Divider(),
            _buildRecordRow(Icons.report_problem_outlined, '违章', '0起'),
            const Divider(),
            _buildRecordRow(Icons.warning_amber_rounded, '危险驾驶', '0起'),
            const Divider(),
            _buildRecordRow(Icons.car_crash_outlined, '交通事故', '0起'),
          ],
        ),
      ),
    );
  }

  // 本月记录中的列表项
  Widget _buildRecordRow(IconData icon, String title, String value) {
    return ListTile(
      contentPadding: EdgeInsets.zero,
      leading: CircleAvatar(
        radius: 20,
        backgroundColor: Colors.blue.withOpacity(0.1),
        child: Icon(icon, color: Colors.blue, size: 24),
      ),
      title: Text(title, style: const TextStyle(fontSize: 14)),
      trailing: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(value, style: const TextStyle(color: Colors.grey, fontSize: 14)),
          const SizedBox(width: 8),
          const Icon(Icons.arrow_forward_ios, size: 14, color: Colors.grey),
        ],
      ),
      onTap: () {
        // TODO: 处理点击事件
      },
    );
  }

  /// 4. 构建提示信息卡片
  Widget _buildTipsCard() {
    return Card(
      elevation: 2,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            _buildInfoItem(Icons.info_outline, '保持良好的驾驶习惯，提高安全评分'),
            const SizedBox(height: 10),
            _buildInfoItem(Icons.rule, '遵守交通规则，避免违章扣分'),
            const SizedBox(height: 10),
            _buildInfoItem(Icons.headset_mic_outlined, '如有疑问请联系客服: 400-123-4567'),
          ],
        ),
      ),
    );
  }

  // 提示信息卡片中的列表项
  Widget _buildInfoItem(IconData icon, String text) {
    return Row(
      children: [
        Icon(icon, color: Colors.blue, size: 20),
        const SizedBox(width: 10),
        Expanded(
          child: Text(text, style: const TextStyle(fontSize: 12, color: Colors.black54)),
        ),
      ],
    );
  }

  /// 5. 构建退出登录按钮
  Widget _buildLogoutButton() {
    return ElevatedButton(
      onPressed: () {
        controller.logout();
      },
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.red[400],
        foregroundColor: Colors.white,
        minimumSize: const Size(double.infinity, 48),
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24)),
        elevation: 2,
      ),
      child: const Text(
        '退出登录',
        style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
      ),
    );
  }
}