import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/workout_controller.dart';
import '../models/workout.dart';
import '../utils/formatters.dart';
import '../services/sync_service.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final workoutCtrl = Get.find<WorkoutController>();
    final syncService = Get.find<SyncService>();

    return Scaffold(
      body: CustomScrollView(
        slivers: [
          // 1. شريط العنوان المخصص (Premium Header)
          SliverAppBar(
            expandedHeight: 200,
            floating: false,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              title: const Text("Tracker Running",
                  style: TextStyle(fontWeight: FontWeight.w800)),
              background: Container(
                decoration: const BoxDecoration(
                  gradient: LinearGradient(
                    colors: [Color(0xFFFF5722), Color(0xFFE64A19)],
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                  ),
                ),
                child: Center(
                  child: Icon(Icons.directions_run,
                      size: 80, color: Colors.white.withOpacity(0.3)),
                ),
              ),
            ),
            actions: [
              Obx(() => IconButton(
                    icon: Icon(
                        syncService.isOnline
                            ? Icons.cloud_done
                            : Icons.cloud_off,
                        color:
                            syncService.isOnline ? Colors.white : Colors.red),
                    onPressed: () {},
                  )),
            ],
          ),

          // 2. حالة المزامنة السريعة
          SliverToBoxAdapter(
            child: Obx(() => syncService.pendingCount > 0
                ? Container(
                    padding: const EdgeInsets.all(8),
                    color: Colors.orange.withOpacity(0.2),
                    child: Center(
                      child: Text(
                        "لديك ${syncService.pendingCount} تمارين بانتظار المزامنة..",
                        style:
                            const TextStyle(fontSize: 12, color: Colors.orange),
                      ),
                    ),
                  )
                : const SizedBox.shrink()),
          ),

          // 3. أزرار البدء السريع (Quick Actions)
          SliverToBoxAdapter(
            child: Padding(
              padding: const EdgeInsets.all(20.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text("ابدأ رحلتك اليوم",
                      style:
                          TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
                  const SizedBox(height: 15),
                  Row(
                    children: [
                      _buildStartCard(
                        title: "ركض",
                        icon: Icons.run_circle,
                        color: const Color(0xFFFF5722),
                        onTap: () =>
                            workoutCtrl.startWorkout(WorkoutType.running),
                      ),
                      const SizedBox(width: 15),
                      _buildStartCard(
                        title: "مشي",
                        icon: Icons.directions_walk,
                        color: Colors.green,
                        onTap: () =>
                            workoutCtrl.startWorkout(WorkoutType.walking),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),

          // 4. عرض حالة التمرين الحالي (إذا كان نشطاً)
          SliverToBoxAdapter(
            child: Obx(() => workoutCtrl.currentWorkout.value != null
                ? _buildActiveWorkoutCard(workoutCtrl)
                : const SizedBox.shrink()),
          ),

          // 5. قسم الإحصائيات أو التمرين الأخير
          SliverToBoxAdapter(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
              child: Card(
                child: Padding(
                  padding: const EdgeInsets.all(20.0),
                  child: Column(
                    children: [
                      const Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text("آخر تمرين",
                              style: TextStyle(fontWeight: FontWeight.bold)),
                          Text("عرض الكل",
                              style: TextStyle(
                                  color: Color(0xFFFF5722), fontSize: 12)),
                        ],
                      ),
                      const Divider(height: 30, color: Colors.white10),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
                          _buildMiniStat("المسافة", "0.0 كم"),
                          _buildMiniStat("الوقت", "00:00"),
                          _buildMiniStat("السعرات", "0"),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildStartCard(
      {required String title,
      required IconData icon,
      required Color color,
      required VoidCallback onTap}) {
    return Expanded(
      child: GestureDetector(
        onTap: onTap,
        child: Container(
          padding: const EdgeInsets.all(20),
          decoration: BoxDecoration(
            color: color.withOpacity(0.1),
            borderRadius: BorderRadius.circular(20),
            border: Border.all(color: color.withOpacity(0.3), width: 2),
          ),
          child: Column(
            children: [
              Icon(icon, size: 40, color: color),
              const SizedBox(height: 10),
              Text(title,
                  style: TextStyle(
                      fontSize: 18, fontWeight: FontWeight.bold, color: color)),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildActiveWorkoutCard(WorkoutController ctrl) {
    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: Container(
        padding: const EdgeInsets.all(20),
        decoration: BoxDecoration(
          color: const Color(0xFFFF5722),
          borderRadius: BorderRadius.circular(20),
        ),
        child: Column(
          children: [
            const Text("التمرين قيد التسجيل...",
                style: TextStyle(
                    color: Colors.white, fontWeight: FontWeight.bold)),
            const SizedBox(height: 15),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                _buildWhiteStat("المسافة",
                    "${Formatters.distanceKm(ctrl.liveDistance.value)} كم"),
                _buildWhiteStat(
                    "الوقت", Formatters.time(ctrl.elapsedSeconds.value)),
                _buildWhiteStat(
                    "السرعة", Formatters.speedKmh(ctrl.liveSpeed.value)),
              ],
            ),
            const SizedBox(height: 20),
            Row(
              children: [
                Expanded(
                  child: ElevatedButton(
                    onPressed: () => ctrl.stopWorkout(),
                    style: ElevatedButton.styleFrom(
                        backgroundColor: Colors.white,
                        foregroundColor: Colors.red),
                    child: const Text("إنهاء"),
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }

  Widget _buildMiniStat(String label, String value) {
    return Column(
      children: [
        Text(label, style: const TextStyle(fontSize: 12, color: Colors.grey)),
        Text(value,
            style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
      ],
    );
  }

  Widget _buildWhiteStat(String label, String value) {
    return Column(
      children: [
        Text(label,
            style: const TextStyle(fontSize: 12, color: Colors.white70)),
        Text(value,
            style: const TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
                color: Colors.white)),
      ],
    );
  }
}