import 'package:siro_admin/constant/theme.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../../controller/admin/ride_admin_controller.dart';

class Rides extends StatelessWidget {
  Rides({super.key});
  final RideAdminController rideAdminController = Get.put(RideAdminController());

  @override
  Widget build(BuildContext context) {
    final cs = Theme.of(context).colorScheme;

    return Scaffold(
      backgroundColor: cs.surface,
      body: Column(
        children: [
          _buildAppBar(context, cs),
          Expanded(
            child: GetBuilder<RideAdminController>(
              builder: (controller) {
                if (controller.isLoading) {
                  return _buildLoadingState(cs);
                }

                return SingleChildScrollView(
                  physics: const BouncingScrollPhysics(),
                  padding: const EdgeInsets.all(16),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      _buildChartSection(controller, cs),
                      const SizedBox(height: 16),
                      _buildMonthlyTotal(controller, cs),
                      const SizedBox(height: 16),
                      _buildRideDetails(controller, cs),
                    ],
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildAppBar(BuildContext context, ColorScheme cs) {
    return Container(
      padding: const EdgeInsets.fromLTRB(16, 50, 16, 16),
      decoration: BoxDecoration(
        color: cs.surface,
        border: Border(bottom: BorderSide(color: cs.outline)),
      ),
      child: Row(
        children: [
          GestureDetector(
            onTap: () => Get.back(),
            child: Container(
              padding: const EdgeInsets.all(8),
              decoration: BoxDecoration(
                color: cs.surfaceContainerHighest,
                borderRadius: BorderRadius.circular(10),
                border: Border.all(color: cs.outline),
              ),
              child: Icon(Icons.arrow_back_ios_new_rounded,
                  color: cs.onSurfaceVariant, size: 16),
            ),
          ),
          const SizedBox(width: 12),
          Container(
            padding: const EdgeInsets.all(8),
            decoration: BoxDecoration(
              color: cs.primary.withValues(alpha: 0.12),
              borderRadius: BorderRadius.circular(10),
              border: Border.all(color: cs.primary.withValues(alpha: 0.25)),
            ),
            child: Icon(Icons.map_rounded, color: cs.primary, size: 18),
          ),
          const SizedBox(width: 10),
          Text(
            'شاشة الرحلات',
            style: TextStyle(
              color: cs.onSurface,
              fontSize: 18,
              fontWeight: FontWeight.w700,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildLoadingState(ColorScheme cs) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          SizedBox(
            width: 40,
            height: 40,
            child: CircularProgressIndicator(
              color: cs.primary,
              strokeWidth: 2,
              backgroundColor: cs.primary.withValues(alpha: 0.1),
            ),
          ),
          const SizedBox(height: 16),
          Text('جاري تحميل الرحلات...',
              style: TextStyle(color: cs.onSurfaceVariant, fontSize: 13)),
        ],
      ),
    );
  }

  Widget _buildChartSection(RideAdminController controller, ColorScheme cs) {
    return Container(
      height: 280,
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: cs.surfaceContainerHighest,
        borderRadius: BorderRadius.circular(20),
        border: Border.all(color: cs.primary.withValues(alpha: 0.15)),
        boxShadow: [
          BoxShadow(
            color: cs.primary.withValues(alpha: 0.06),
            blurRadius: 20,
            offset: const Offset(0, 8),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Container(
                padding: const EdgeInsets.all(8),
                decoration: BoxDecoration(
                  color: cs.primary.withValues(alpha: 0.12),
                  borderRadius: BorderRadius.circular(10),
                  border: Border.all(color: cs.primary.withValues(alpha: 0.25)),
                ),
                child: Icon(Icons.trending_up_rounded,
                    color: cs.primary, size: 16),
              ),
              const SizedBox(width: 10),
              Text(
                'رحلات الشهر',
                style: TextStyle(
                  color: cs.onSurface,
                  fontSize: 14,
                  fontWeight: FontWeight.w700,
                ),
              ),
            ],
          ),
          const SizedBox(height: 16),
          Expanded(
            child: Directionality(
              textDirection: TextDirection.ltr,
              child: LineChart(
                LineChartData(
                  lineBarsData: [
                    LineChartBarData(
                      spots: controller.chartData,
                      isCurved: true,
                      color: cs.primary,
                      barWidth: 3,
                      dotData: const FlDotData(show: true),
                      belowBarData: BarAreaData(
                        show: true,
                        color: cs.primary.withValues(alpha: 0.08),
                      ),
                      isStrokeJoinRound: true,
                    ),
                  ],
                  titlesData: FlTitlesData(
                    show: true,
                    topTitles: const AxisTitles(
                        sideTitles: SideTitles(showTitles: false)),
                    rightTitles: const AxisTitles(
                        sideTitles: SideTitles(showTitles: false)),
                    bottomTitles: AxisTitles(
                      sideTitles: SideTitles(
                        showTitles: true,
                        reservedSize: 24,
                        getTitlesWidget: (v, _) => Text(
                          '${v.toInt()}',
                          style: TextStyle(
                              color: cs.onSurfaceVariant, fontSize: 9),
                        ),
                      ),
                    ),
                    leftTitles: AxisTitles(
                      sideTitles: SideTitles(
                        showTitles: true,
                        reservedSize: 36,
                        getTitlesWidget: (v, _) => Text(
                          v.toInt().toString(),
                          style: TextStyle(
                              color: cs.onSurfaceVariant, fontSize: 9),
                        ),
                      ),
                    ),
                  ),
                  gridData: FlGridData(
                    show: true,
                    drawVerticalLine: false,
                    getDrawingHorizontalLine: (_) => FlLine(
                        color: cs.outline.withValues(alpha: 0.5),
                        strokeWidth: 1),
                  ),
                  borderData: FlBorderData(show: false),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildMonthlyTotal(RideAdminController controller, ColorScheme cs) {
    final count = controller.jsonResponse['message']?[0]
            ['current_month_rides_count'] ??
        '0';

    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: cs.surfaceContainerHighest,
        borderRadius: BorderRadius.circular(16),
        border: Border.all(color: cs.primary.withValues(alpha: 0.15)),
      ),
      child: Row(
        children: [
          Container(
            padding: const EdgeInsets.all(12),
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [
                  cs.primary.withValues(alpha: 0.20),
                  cs.primary.withValues(alpha: 0.08),
                ],
              ),
              borderRadius: BorderRadius.circular(14),
              border: Border.all(color: cs.primary.withValues(alpha: 0.25)),
            ),
            child: Icon(Icons.calendar_today_rounded,
                color: cs.primary, size: 24),
          ),
          const SizedBox(width: 16),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'إجمالي رحلات الشهر',
                style: TextStyle(
                    color: cs.onSurfaceVariant, fontSize: 12),
              ),
              const SizedBox(height: 4),
              Text(
                '$count',
                style: TextStyle(
                  color: cs.onSurface,
                  fontSize: 28,
                  fontWeight: FontWeight.w800,
                  height: 1,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildRideDetails(RideAdminController controller, ColorScheme cs) {
    if (controller.ridesDetails.isEmpty) return const SizedBox.shrink();

    final details = controller.ridesDetails[0];

    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: cs.surfaceContainerHighest,
        borderRadius: BorderRadius.circular(20),
        border: Border.all(color: cs.outline),
        boxShadow: [
          BoxShadow(
            color: cs.shadow.withValues(alpha: 0.06),
            blurRadius: 20,
            offset: const Offset(0, 8),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Container(
                padding: const EdgeInsets.all(8),
                decoration: BoxDecoration(
                  color: cs.warning.withValues(alpha: 0.12),
                  borderRadius: BorderRadius.circular(10),
                  border: Border.all(
                      color: cs.warning.withValues(alpha: 0.25)),
                ),
                child: Icon(Icons.analytics_rounded,
                    color: cs.warning, size: 16),
              ),
              const SizedBox(width: 10),
              Text(
                'تفاصيل الرحلات',
                style: TextStyle(
                  color: cs.onSurface,
                  fontSize: 14,
                  fontWeight: FontWeight.w700,
                ),
              ),
            ],
          ),
          const SizedBox(height: 16),
          _buildDetailGrid(details, cs),
        ],
      ),
    );
  }

  Widget _buildDetailGrid(dynamic details, ColorScheme cs) {
    final items = [
      _DetailItem('متوسط مدة السائق', details['driver_avg_duration'] ?? '',
          Icons.timer_rounded, cs.tertiary),
      _DetailItem('عدد السائقين', details['num_Driver'] ?? '',
          Icons.people_rounded, cs.primary),
      _DetailItem('إجمالي الرحلات', details['total_rides'] ?? '',
          Icons.route_rounded, cs.primary),
      _DetailItem('رحلات نشطة', details['ongoing_rides'] ?? '',
          Icons.play_circle_rounded, cs.warning),
      _DetailItem('مكتملة', details['completed_rides'] ?? '',
          Icons.check_circle_rounded, cs.success),
      _DetailItem('ملغاة', details['cancelled_rides'] ?? '',
          Icons.cancel_rounded, cs.error),
      _DetailItem('أطول مدة', details['longest_duration'] ?? '',
          Icons.hourglass_top_rounded, cs.tertiary),
      _DetailItem('إجمالي المسافة', '${details['total_distance'] ?? 0} km',
          Icons.straighten_rounded, cs.primary),
      _DetailItem('متوسط المسافة', '${details['average_distance'] ?? 0} km',
          Icons.speed_rounded, cs.warning),
      _DetailItem('أطول مسافة', '${details['longest_distance'] ?? 0} km',
          Icons.arrow_forward_rounded, cs.tertiary),
      _DetailItem('إجمالي أرباح السائقين',
          '\$${details['total_driver_earnings'] ?? 0}', Icons.payments_rounded,
          cs.success),
      _DetailItem('إجمالي أرباح الشركة',
          '\$${details['total_company_earnings'] ?? 0}',
          Icons.business_center_rounded, cs.primary),
      _DetailItem('نسبة الشركة', '${details['companyPercent'] ?? 0}%',
          Icons.pie_chart_rounded, cs.warning),
    ];

    return GridView.builder(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        childAspectRatio: 2.2,
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
      ),
      itemCount: items.length,
      itemBuilder: (context, index) {
        final item = items[index];
        return Container(
          padding: const EdgeInsets.all(12),
          decoration: BoxDecoration(
            color: cs.surface,
            borderRadius: BorderRadius.circular(12),
            border: Border.all(color: item.color.withValues(alpha: 0.15)),
          ),
          child: Row(
            children: [
              Container(
                padding: const EdgeInsets.all(6),
                decoration: BoxDecoration(
                  color: item.color.withValues(alpha: 0.12),
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Icon(item.icon, color: item.color, size: 16),
              ),
              const SizedBox(width: 8),
              Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      item.label,
                      style: TextStyle(
                        color: cs.onSurfaceVariant,
                        fontSize: 10,
                      ),
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                    const SizedBox(height: 2),
                    Text(
                      item.value,
                      style: TextStyle(
                        color: cs.onSurface,
                        fontSize: 13,
                        fontWeight: FontWeight.w700,
                      ),
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ],
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}

class _DetailItem {
  final String label, value;
  final IconData icon;
  final Color color;
  _DetailItem(this.label, this.value, this.icon, this.color);
}