import 'dart:convert';
import 'package:deep_voice/routes/app_routes.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

/// A widget that displays a navigation card with different modes of transportation.
Widget navigationCard(
  BuildContext context, {
  required List<Map<String, dynamic>> modes,
  Map<String, dynamic>? navigation,
  double height = 300,
}) {
  int currentIndex = 0;

  return Container(
    height: height,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(16),
      color: Colors.white,
      boxShadow: const [
        BoxShadow(
          blurRadius: 8,
          color: Colors.black12,
          offset: Offset(0, 4),
        ),
      ],
    ),
    child: StatefulBuilder(
      builder: (context, setInnerState) {
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 路线图片
            ClipRRect(
              borderRadius:
                  const BorderRadius.vertical(top: Radius.circular(16)),
              child: AnimatedSwitcher(
                duration: const Duration(milliseconds: 300),
                child: Image.network(
                  modes[currentIndex]["image"] as String,
                  key: ValueKey<String>(modes[currentIndex]["ntype"] as String),
                  height: 160,
                  width: double.infinity,
                  fit: BoxFit.cover,
                ),
              ),
            ),

            // 导航方式切换按钮
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 4),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: List.generate(modes.length, (index) {
                  final isSelected = index == currentIndex;
                  return GestureDetector(
                    onTap: () {
                      setInnerState(() => currentIndex = index);
                    },
                    child: SizedBox(
                      width: 50,
                      child: Text(
                        modes[index]["ntype"] as String,
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          color: isSelected ? Colors.blue : Colors.black87,
                          fontSize: 12,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                    ),
                  );
                }),
              ),
            ),

            // 距离和耗时
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 8),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text('距离：${modes[currentIndex]["distance"]}',
                      style: const TextStyle(fontSize: 12, color: Colors.blue)),
                  IconButton(
                    icon: const Icon(Icons.turn_left,
                        color: Colors.blue, size: 20),
                    onPressed: () {
                      Get.toNamed(Routes.navigation);
                    },
                  ),
                ],
              ),
            ),

            // 导航实时数据显示
            if (navigation != null)
              Padding(
                padding: const EdgeInsets.all(8),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    // 圆形方向图标（如果有）
                    if (navigation["directionIcon"] != "")
                      Container(
                        width: 32,
                        height: 32,
                        decoration: const BoxDecoration(
                          shape: BoxShape.circle,
                          color: Colors.blue,
                        ),
                        child: ClipOval(
                          child: Image.memory(
                            base64Decode(navigation["directionIcon"]),
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),
                    const SizedBox(width: 8),
                    // 文字信息
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          if (navigation["currentRoad"] != null)
                            Text('当前道路：${navigation["currentRoad"]}',
                                style: const TextStyle(fontSize: 12)),
                          if (navigation["nextRoad"] != null)
                            Text('下一道路：${navigation["nextRoad"]}',
                                style: const TextStyle(fontSize: 12)),
                          if (navigation["distanceText"] != null)
                            Text('剩余距离：${navigation["distanceText"]}',
                                style: const TextStyle(fontSize: 12)),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
          ],
        );
      },
    ),
  );
}