import 'dart:ui';
import 'package:flutter/material.dart';
import 'navigation_screen.dart';

class RouteRecommendationScreen extends StatelessWidget {
  final List<dynamic> routes;
  final String selectedSpeed;

  const RouteRecommendationScreen({
    super.key,
    required this.routes,
    required this.selectedSpeed,
  });

  // Logika penghitungan waktu berdasarkan kecepatan
  int calculateAdjustedTime(int baseTime) {
    if (selectedSpeed == "Lambat") {
      return (baseTime * 1.3).round(); // +30% waktu
    } else if (selectedSpeed == "Cepat") {
      return (baseTime * 0.8).round(); // -20% waktu
    }
    return baseTime; // Sedang (Base)
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        title: const Text("Rekomendasi Rute",
            style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
        backgroundColor: Colors.transparent,
        elevation: 0,
        iconTheme: const IconThemeData(color: Colors.white),
      ),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [Color(0xFF3949AB), Color(0xFF00BCD4)],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
        ),
        child: SafeArea(
          child: routes.isEmpty
              ? const Center(child: Text("Tidak ada rute yang ditemukan.", style: TextStyle(color: Colors.white)))
              : ListView.builder(
                  padding: const EdgeInsets.all(20),
                  itemCount: routes.length,
                  itemBuilder: (context, index) {
                    final route = routes[index];
                    final adjustedTime = calculateAdjustedTime((route['waktu_dasar'] as num).toInt());
                    final double accuracy = ((route['skor'] as num).toDouble() * 100);

                    return Padding(
                      padding: const EdgeInsets.only(bottom: 20),
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(20),
                        child: BackdropFilter(
                          filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
                          child: Container(
                            decoration: BoxDecoration(
                              color: Colors.white.withOpacity(0.15),
                              borderRadius: BorderRadius.circular(20),
                              border: Border.all(color: Colors.white.withOpacity(0.3)),
                            ),
                            child: ListTile(
                              contentPadding: const EdgeInsets.all(20),
                              title: Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Expanded(
                                    child: Text(
                                      route['nama_rute'],
                                      style: const TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.bold),
                                    ),
                                  ),
                                  Container(
                                    padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                                    decoration: BoxDecoration(
                                      color: Colors.greenAccent.withOpacity(0.2),
                                      borderRadius: BorderRadius.circular(8),
                                    ),
                                    child: Text(
                                      "${accuracy.toStringAsFixed(1)}% Akurasi",
                                      style: const TextStyle(color: Colors.greenAccent, fontSize: 12, fontWeight: FontWeight.bold),
                                    ),
                                  ),
                                ],
                              ),
                              subtitle: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  const SizedBox(height: 12),
                                  Row(
                                    children: [
                                      const Icon(Icons.straighten, color: Colors.white70, size: 16),
                                      const SizedBox(width: 8),
                                      Flexible(
                                        child: FittedBox(
                                          fit: BoxFit.scaleDown,
                                          alignment: Alignment.centerLeft,
                                          child: Text("${route['jarak']} KM", style: const TextStyle(color: Colors.white70)),
                                        ),
                                      ),
                                      const SizedBox(width: 20),
                                      const Icon(Icons.terrain, color: Colors.white70, size: 16),
                                      const SizedBox(width: 8),
                                      Flexible(
                                        child: FittedBox(
                                          fit: BoxFit.scaleDown,
                                          alignment: Alignment.centerLeft,
                                          child: Text("Medan ${route['kondisi_medan']}", style: const TextStyle(color: Colors.white70)),
                                        ),
                                      ),
                                    ],
                                  ),
                                  const SizedBox(height: 12),
                                  Row(
                                    children: [
                                      const Icon(Icons.timer, color: Colors.white, size: 18),
                                      const SizedBox(width: 8),
                                      Text(
                                        "Target Waktu : $adjustedTime menit",
                                        style: const TextStyle(color: Colors.white, fontWeight: FontWeight.w600, fontSize: 16),
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                              onTap: () {
                                Navigator.push(
                                  context,
                                  MaterialPageRoute(
                                    builder: (context) => NavigationScreen(
                                      routeData: route,
                                      targetMinutes: adjustedTime,
                                    ),
                                  ),
                                );
                              },
                              trailing: const Icon(Icons.chevron_right, color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    );
                  },
                ),
        ),
      ),
    );
  }
}