import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controller/detail_controller.dart';
import '../widgets/detail_header_widget.dart';
import '../widgets/detail_info_card_widget.dart';
import '../widgets/detail_stat_widget.dart';

class DetailPage extends GetView<DetailController> {
  static const String namedRoute = '/tank-detail-page';
  const DetailPage({super.key});

  @override
  Widget build(BuildContext context) {
    var detailCtrl = controller;
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blueGrey,
        foregroundColor: Colors.white,
        title: const Text('Tank Details'),
        centerTitle: true,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back),
          onPressed: () => Get.back(),
        ),
      ),
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              Colors.blueGrey[800]!,
              Colors.blueGrey[600]!,
              Colors.blueGrey[300]!,
              Colors.blue[100]!,
            ],
          ),
        ),
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // Header Card mit Datum und Gesamtpreis
                DetailHeaderWidget(tank: detailCtrl.tank),

                const SizedBox(height: 16),

                // Hauptinformationen
                DetailInfoCardWidget(
                  title: 'Tankstelleninformationen',
                  children: [
                    DetailStatWidget(
                      icon: Icons.location_on,
                      label: 'Standort',
                      value: detailCtrl.tank.szLocation.isNotEmpty
                          ? detailCtrl.tank.szLocation
                          : 'Nicht angegeben',
                      iconColor: Colors.red,
                    ),
                    const SizedBox(height: 16),
                    DetailStatWidget(
                      icon: Icons.calendar_today,
                      label: 'Datum',
                      value: detailCtrl.tank.szDate,
                      iconColor: Colors.blueGrey,
                    ),
                  ],
                ),

                const SizedBox(height: 16),

                // Tankdaten
                DetailInfoCardWidget(
                  title: 'Tankdaten',
                  children: [
                    DetailStatWidget(
                      icon: Icons.local_gas_station,
                      label: 'Liter getankt',
                      value: '${detailCtrl.tank.szLiters} L',
                      iconColor: Colors.orange,
                      valueSize: 24,
                      valueWeight: FontWeight.bold,
                    ),
                    const SizedBox(height: 16),
                    Row(
                      children: [
                        Expanded(
                          child: DetailStatWidget(
                            icon: Icons.euro,
                            label: 'Preis pro Liter',
                            value: '${detailCtrl.tank.szPricePerLiter}€',
                            iconColor: Colors.green,
                          ),
                        ),
                        const SizedBox(width: 16),
                        Expanded(
                          child: DetailStatWidget(
                            icon: Icons.receipt,
                            label: 'Gesamtpreis',
                            value: '${detailCtrl.tank.szPriceTotal}€',
                            iconColor: Colors.green[700]!,
                            valueWeight: FontWeight.bold,
                          ),
                        ),
                      ],
                    ),
                  ],
                ),

                const SizedBox(height: 16),

                // Fahrzeugdaten
                DetailInfoCardWidget(
                  title: 'Fahrzeugdaten',
                  children: [
                    DetailStatWidget(
                      icon: Icons.speed,
                      label: 'Kilometerstand',
                      value: '${detailCtrl.tank.szOdometer} km',
                      iconColor: Colors.blue,
                      valueSize: 24,
                      valueWeight: FontWeight.bold,
                    ),
                  ],
                ),

                const SizedBox(height: 24),

                // Aktionsbuttons
                Row(
                  children: [
                    Expanded(
                      child: ElevatedButton.icon(
                        onPressed: () {
                          // Bearbeiten Funktion
                          detailCtrl.editEntry();
                        },
                        icon: const Icon(Icons.edit),
                        label: const Text('Bearbeiten'),
                        style: ElevatedButton.styleFrom(
                          backgroundColor: Colors.blueGrey[700],
                          foregroundColor: Colors.white,
                          padding: const EdgeInsets.symmetric(vertical: 16),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(12),
                          ),
                        ),
                      ),
                    ),
                    const SizedBox(width: 12),
                    Expanded(
                      child: ElevatedButton.icon(
                        onPressed: () {
                          // Löschen Funktion
                          detailCtrl.deleteEntry();
                        },
                        icon: const Icon(Icons.delete),
                        label: const Text('Löschen'),
                        style: ElevatedButton.styleFrom(
                          backgroundColor: Colors.red[700],
                          foregroundColor: Colors.white,
                          padding: const EdgeInsets.symmetric(vertical: 16),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(12),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
