import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../database/database.dart';
import '../../services/export_service.dart';
import '../replay/replay_screen.dart';
import 'package:go_router/go_router.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 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(
                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),
                        ),
                        if (r.motorcycleVariant != null && r.motorcycleVariant!.isNotEmpty)
                          Text(r.motorcycleVariant!, style: const TextStyle(color: Colors.white70, fontSize: 12)),
                      ],
                    ),
                  ),
                  if (r.motorcycleId != null)
                    OutlinedButton(
                      style: OutlinedButton.styleFrom(foregroundColor: Colors.cyanAccent, side: const BorderSide(color: Colors.cyanAccent)),
                      onPressed: () => context.push('/garage/${r.motorcycleId}'),
                      child: const Text('View Specs'),
                    ),
                ],
              ),
            ),
          ],
          _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),
          OutlinedButton.icon(
            onPressed: () {
              ref.read(exportServiceProvider).exportRide(r.id, asGpx: false);
            },
            icon: const Icon(Icons.table_chart),
            label: const Text('Export CSV'),
          ),
          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);
                // Also delete telemetry and events
                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,
        children: [
          Text(label, style: const TextStyle(color: Colors.white70)),
          Text(value, style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
        ],
      ),
    );
  }
}