import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../database/database.dart';
import '../../services/export_service.dart';
import '../../services/entitlements/entitlement_providers.dart';
import '../../services/entitlements/feature_access_service.dart';
import '../entitlements/widgets/pro_lock_badge.dart';
import '../replay/replay_screen.dart';
import '../map/map_screen.dart';
import 'package:go_router/go_router.dart';
import '../../core/theme/evolution_theme_config.dart';
import 'widgets/evolution_ride_details_view.dart';

class RideDetailScreen extends ConsumerStatefulWidget {
  final Ride ride;

  const RideDetailScreen({super.key, required this.ride});

  @override
  ConsumerState<RideDetailScreen> createState() => _RideDetailScreenState();
}

class _RideDetailScreenState extends ConsumerState<RideDetailScreen> {
  List<RideEvent> _events = [];
  bool _isLoadingEvents = true;

  @override
  void initState() {
    super.initState();
    _loadEvents();
  }

  Future<void> _loadEvents() async {
    final db = ref.read(databaseProvider);
    final events = await (db.select(
      db.rideEvents,
    )..where((e) => e.rideId.equals(widget.ride.id))).get();
    if (mounted) {
      setState(() {
        _events = events;
        _isLoadingEvents = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    final themeMode = ref.watch(dashboardThemeModeProvider);
    if (themeMode == DashboardThemeMode.evolution) {
      return EvolutionRideDetailsView(ride: widget.ride, events: _events);
    }

    final r = widget.ride;
    return Scaffold(
      appBar: AppBar(title: Text('Ride ${r.id} Details')),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          if (r.motorcycleMake != null && r.motorcycleModel != null) ...[
            Container(
              padding: const EdgeInsets.all(16),
              margin: const EdgeInsets.only(bottom: 16),
              decoration: BoxDecoration(
                color: Colors.cyanAccent.withValues(alpha: 0.1),
                borderRadius: BorderRadius.circular(12),
                border: Border.all(
                  color: Colors.cyanAccent.withValues(alpha: 0.5),
                ),
              ),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Icon(
                    Icons.two_wheeler,
                    color: Colors.cyanAccent,
                    size: 32,
                  ),
                  const SizedBox(width: 12),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '${r.motorcycleYear ?? ""} ${r.motorcycleMake} ${r.motorcycleModel}',
                          style: const TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.bold,
                          ),
                          softWrap: true,
                        ),
                        if (r.motorcycleVariant != null &&
                            r.motorcycleVariant!.isNotEmpty)
                          Text(
                            r.motorcycleVariant!,
                            style: const TextStyle(
                              color: Colors.white70,
                              fontSize: 12,
                            ),
                            softWrap: true,
                          ),
                        if (r.motorcycleId != null) ...[
                          const SizedBox(height: 8),
                          Align(
                            alignment: Alignment.centerLeft,
                            child: OutlinedButton(
                              style: OutlinedButton.styleFrom(
                                foregroundColor: Colors.cyanAccent,
                                side: const BorderSide(
                                  color: Colors.cyanAccent,
                                ),
                              ),
                              onPressed: () =>
                                  context.push('/garage/${r.motorcycleId}'),
                              child: const Text('View Specs'),
                            ),
                          ),
                        ],
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],

          // Map Preview Card
          Card(
            clipBehavior: Clip.antiAlias,
            margin: const EdgeInsets.only(bottom: 16),
            child: Container(
              padding: const EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: Colors.black45,
                border: Border.all(color: Colors.white12),
              ),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Icon(Icons.map, color: Colors.cyanAccent, size: 36),
                  const SizedBox(width: 16),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        const Text(
                          'ROUTE PREVIEW',
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 14,
                            letterSpacing: 1.5,
                            color: Colors.cyanAccent,
                          ),
                          softWrap: true,
                        ),
                        const SizedBox(height: 4),
                        const Text(
                          'View ride path and telemetry events on interactive map',
                          style: TextStyle(fontSize: 12, color: Colors.white70),
                          softWrap: true,
                        ),
                        const SizedBox(height: 12),
                        Align(
                          alignment: Alignment.centerLeft,
                          child: ElevatedButton(
                            onPressed: () {
                              Navigator.of(context).push(
                                MaterialPageRoute(
                                  builder: (_) => MapScreen(rideId: r.id),
                                ),
                              );
                            },
                            child: const Text('VIEW ROUTE'),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),

          _buildSectionHeader('SUMMARY'),
          _buildStatRow('Distance', '${r.distanceMiles.toStringAsFixed(2)} mi'),
          _buildStatRow(
            'Duration',
            '${r.endTime?.difference(r.startTime).inMinutes ?? 0} min',
          ),
          _buildStatRow(
            'Moving Time',
            '${(r.movingTime / 60).toStringAsFixed(1)} min',
          ),
          _buildStatRow(
            'Avg Speed',
            '${r.averageSpeed.toStringAsFixed(1)} mph',
          ),
          _buildStatRow('Top Speed', '${r.topSpeedMph.toStringAsFixed(1)} mph'),
          const Divider(),

          _buildSectionHeader('HANDLING'),
          _buildStatRow(
            'Max Lean (Left)',
            '${r.maxLeanLeft.toStringAsFixed(1)}°',
          ),
          _buildStatRow(
            'Max Lean (Right)',
            '${r.maxLeanRight.toStringAsFixed(1)}°',
          ),
          _buildStatRow(
            'Max Acceleration',
            '${r.maxAccelG.toStringAsFixed(2)} G',
          ),
          _buildStatRow('Max Braking', '${r.maxBrakingG.toStringAsFixed(2)} G'),
          const Divider(),

          _buildSectionHeader('ELEVATION'),
          _buildStatRow('Gain', '${r.elevationGain.toStringAsFixed(0)} m'),
          _buildStatRow('Loss', '${r.elevationLoss.toStringAsFixed(0)} m'),
          const Divider(),

          _buildSectionHeader('EVENTS'),
          if (_isLoadingEvents)
            const Center(child: CircularProgressIndicator())
          else if (_events.isEmpty)
            const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text('No events recorded.'),
            )
          else
            ..._events.map(
              (e) => ListTile(
                dense: true,
                leading: const Icon(
                  Icons.warning_amber,
                  color: Colors.amberAccent,
                ),
                title: Text(e.eventType),
                subtitle: Text(e.timestamp.toLocal().toString().split('.')[0]),
                trailing: Text(
                  e.value.toStringAsFixed(1),
                  style: const TextStyle(fontWeight: FontWeight.bold),
                ),
              ),
            ),
          const Divider(),

          _buildSectionHeader('ACTIONS'),
          ElevatedButton.icon(
            onPressed: () {
              Navigator.of(context).push(
                MaterialPageRoute(builder: (_) => ReplayScreen(rideId: r.id)),
              );
            },
            icon: const Icon(Icons.play_arrow),
            label: const Text('Replay Ride'),
          ),
          const SizedBox(height: 8),
          OutlinedButton.icon(
            onPressed: () {
              ref.read(exportServiceProvider).exportRide(r.id, asGpx: true);
            },
            icon: const Icon(Icons.share),
            label: const Text('Export GPX'),
          ),
          const SizedBox(height: 8),
          Builder(
            builder: (context) {
              final isProCsv = ref
                  .watch(featureAccessProvider)
                  .canAccess(MotorSignalFeature.csvExport);
              return OutlinedButton.icon(
                onPressed: () {
                  if (!isProCsv) {
                    showProUpgradeSheet(
                      context,
                      ref,
                      feature: MotorSignalFeature.csvExport,
                    );
                    return;
                  }
                  ref
                      .read(exportServiceProvider)
                      .exportRide(r.id, asGpx: false);
                },
                icon: const Icon(Icons.table_chart),
                label: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    const Text('Export CSV'),
                    if (!isProCsv) ...[
                      const SizedBox(width: 8),
                      const ProBadge(),
                    ],
                  ],
                ),
              );
            },
          ),
          const SizedBox(height: 8),
          TextButton.icon(
            onPressed: () async {
              final confirm = await showDialog<bool>(
                context: context,
                builder: (c) => AlertDialog(
                  title: const Text('Delete Ride?'),
                  content: const Text('This cannot be undone.'),
                  actions: [
                    TextButton(
                      onPressed: () => Navigator.pop(c, false),
                      child: const Text('CANCEL'),
                    ),
                    TextButton(
                      onPressed: () => Navigator.pop(c, true),
                      child: const Text(
                        'DELETE',
                        style: TextStyle(color: Colors.redAccent),
                      ),
                    ),
                  ],
                ),
              );

              if (confirm == true && mounted) {
                final db = ref.read(databaseProvider);
                await (db.delete(
                  db.telemetrySamples,
                )..where((t) => t.rideId.equals(r.id))).go();
                await (db.delete(
                  db.rideEvents,
                )..where((e) => e.rideId.equals(r.id))).go();
                await (db.delete(
                  db.rides,
                )..where((ride) => ride.id.equals(r.id))).go();
                if (context.mounted) {
                  Navigator.of(context).pop();
                }
              }
            },
            icon: const Icon(Icons.delete, color: Colors.redAccent),
            label: const Text(
              'Delete Ride',
              style: TextStyle(color: Colors.redAccent),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildSectionHeader(String title) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8),
      child: Text(
        title,
        style: const TextStyle(
          color: Colors.cyanAccent,
          fontSize: 14,
          fontWeight: FontWeight.bold,
          letterSpacing: 2,
        ),
      ),
    );
  }

  Widget _buildStatRow(String label, String value) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 4),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
            child: Text(label, style: const TextStyle(color: Colors.white70)),
          ),
          const SizedBox(width: 12),
          Flexible(
            child: Text(
              value,
              style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
              textAlign: TextAlign.right,
              softWrap: true,
            ),
          ),
        ],
      ),
    );
  }
}