import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:provider/provider.dart';

import '../models/fuel_entry.dart';
import '../services/app_state.dart';
import '../widgets/receipt_thumbnail.dart';
import 'edit_fuel_entry_screen.dart';

/// The single place to view a receipt's photo and its logged data
/// together, with edit/delete for the entry — reached by tapping a receipt
/// row on either the Receipts tab or a vehicle's detail page. Looks up
/// [entryId] fresh from [AppState] on every build (rather than taking a
/// [FuelEntry] directly) so it reflects an edit made via
/// [EditFuelEntryScreen] as soon as that screen is popped back to this one.
class ReceiptDetailScreen extends StatelessWidget {
  final String entryId;

  const ReceiptDetailScreen({super.key, required this.entryId});

  Future<void> _deleteEntry(BuildContext context, FuelEntry entry) async {
    final confirmed = await showDialog<bool>(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('Delete fuel entry?'),
        content: const Text('This will remove the entry and its receipt photo.'),
        actions: [
          TextButton(onPressed: () => Navigator.of(context).pop(false), child: const Text('Cancel')),
          TextButton(
            onPressed: () => Navigator.of(context).pop(true),
            child: const Text('Delete', style: TextStyle(color: Colors.red)),
          ),
        ],
      ),
    );
    if (confirmed == true && context.mounted) {
      await context.read<AppState>().deleteFuelEntry(entry.id);
      if (context.mounted) Navigator.of(context).pop();
    }
  }

  @override
  Widget build(BuildContext context) {
    final appState = context.watch<AppState>();
    final entry = appState.fuelEntryById(entryId);

    if (entry == null) {
      return const Scaffold(body: Center(child: Text('Receipt not found')));
    }

    final vehicle = appState.vehicleById(entry.vehicleId);
    final dateFormat = DateFormat.yMMMd().add_jm();
    final currencyFormat = NumberFormat.simpleCurrency();

    return Scaffold(
      appBar: AppBar(
        title: const Text('Receipt'),
        actions: [
          IconButton(
            icon: const Icon(Icons.edit_outlined),
            tooltip: 'Edit fuel entry',
            onPressed: () => Navigator.of(context).push(
              MaterialPageRoute(builder: (_) => EditFuelEntryScreen(entry: entry)),
            ),
          ),
          IconButton(
            icon: const Icon(Icons.delete_outline),
            tooltip: 'Delete fuel entry',
            onPressed: () => _deleteEntry(context, entry),
          ),
        ],
      ),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          Center(child: ReceiptThumbnail(entry: entry, size: 240)),
          const SizedBox(height: 8),
          Text(
            'Tap the photo to view it full-screen.',
            style: Theme.of(context).textTheme.bodySmall,
            textAlign: TextAlign.center,
          ),
          const SizedBox(height: 24),
          if (vehicle != null) ...[
            ListTile(
              contentPadding: EdgeInsets.zero,
              leading: const Icon(Icons.directions_car_outlined),
              title: Text(vehicle.displayLabel),
              subtitle: Text('VIN: ${vehicle.vin}'),
            ),
            const Divider(height: 24),
          ],
          _DetailRow(label: 'Date & time', value: dateFormat.format(entry.date)),
          _DetailRow(label: 'Gallons', value: '${entry.gallons.toStringAsFixed(3)} gal'),
          _DetailRow(label: 'Price per gallon', value: currencyFormat.format(entry.pricePerGallon)),
          _DetailRow(label: 'Total cost', value: currencyFormat.format(entry.totalCost)),
        ],
      ),
    );
  }
}

class _DetailRow extends StatelessWidget {
  final String label;
  final String value;

  const _DetailRow({required this.label, required this.value});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            label,
            style: Theme.of(context)
                .textTheme
                .bodyMedium
                ?.copyWith(color: Theme.of(context).colorScheme.onSurfaceVariant),
          ),
          Text(value, style: Theme.of(context).textTheme.titleMedium),
        ],
      ),
    );
  }
}