import 'package:flutter/material.dart';
import 'package:get/get.dart';
import './tank_controller.dart';

class TankPage extends GetView<TankController> {
  static const namedRoute = '/tank-stop-page';
  const TankPage({super.key});

  @override
  Widget build(BuildContext context) {
    var tankCtrl = controller;
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text(
            'Tankstopp erfassen',
            style: TextStyle(color: Colors.grey.shade300),
          ),
          backgroundColor: Colors.transparent, // Mach die AppBar transparent
          elevation: 0, // Entferne den Schatten unter der AppBar
          centerTitle: true,
          actions: [
            IconButton(
              icon: Icon(Icons.list, color: Colors.grey.shade300),
              onPressed: () async {
                // Handle logout logic here
                controller.goToTankStopsView();
              },
            ),
            IconButton(
              icon: Icon(Icons.logout, color: Colors.grey.shade300),
              onPressed: () async {
                // Handle logout logic here
                controller.logoutSessionAndGoToLoginPage();
              },
            ),
          ],
        ),
        extendBodyBehindAppBar: true, // Erweitere den Body hinter die AppBar
        body: Stack(
          children: [
            Container(
              height: double.infinity,
              width: double.infinity,
              decoration: const BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('lib/images/backgroundPitstopBlack.png'),
                  fit: BoxFit
                      .cover, // Skaliert das Bild, um den Container zu füllen
                  alignment: Alignment
                      .bottomCenter, // Richte das Bild am unteren Rand aus
                ),
              ),
            ),
            Obx(
              () => PopScope(
                canPop: false,
                child: SingleChildScrollView(
                  padding: EdgeInsets.only(
                    top: MediaQuery.of(context).padding.top +
                        kToolbarHeight +
                        20,
                    left: 20,
                    right: 20,
                    bottom: 20,
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      CircleAvatar(
                        backgroundColor: Colors.blue,
                        radius: 40,
                        child: Text(
                          controller.circleAvatarUserChar.value,
                          style: const TextStyle(
                            color: Colors.black,
                            fontSize: 24,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                      const SizedBox(height: 5),
                      Text(
                        controller.userNameToDisplay.value,
                        style: const TextStyle(
                          fontSize: 20,
                          backgroundColor: Colors.black87,
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          letterSpacing: 3,
                        ),
                      ),
                      const SizedBox(height: 20),
                      inputFields(),
                      const SizedBox(height: 20),
                      Container(
                        padding: const EdgeInsets.all(10),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          color: Colors.black.withValues(alpha: 0.9),
                        ),
                        child: Text.rich(
                          TextSpan(
                            text: 'Summe: ',
                            style: TextStyle(
                              fontSize: 18,
                              color: Colors.grey.shade300,
                            ),
                            children: <TextSpan>[
                              TextSpan(
                                // Hier kommt der Wert als separater TextSpan
                                text: controller.rxSummePreisString.value,
                                // Doppelt so groß wie der Standardtext',
                                style: TextStyle(
                                  fontSize: 30, // Doppelt so groß wie 18
                                  color: Colors.blue, // Blaue Farbe
                                  fontWeight: FontWeight
                                      .bold, // Optional: Fetter Text, um ihn hervorzuheben
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                      const SizedBox(height: 20),
                      SizedBox(
                        width: 350,
                        height: 50,
                        child: Obx(
                          () => ElevatedButton(
                            style: ElevatedButton.styleFrom(
                              backgroundColor: Colors.blue.withValues(
                                alpha: 0.9,
                              ), // Button-Farbe
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(
                                  10,
                                ), // Abgerundete Ecken
                              ),
                            ),
                            onPressed: () {
                              controller.saveTankstopp();
                            },
                            child: tankCtrl.isEditMode.value == true ? Text(
                              'Tankstop erfassen',
                              style:
                                  TextStyle(color: Colors.white, fontSize: 20),
                            ): Text(
                                    'Tankstop updaten',
                                    style: TextStyle(
                                        color: Colors.white, fontSize: 20),
                                  ),
                          ),
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.only(top: 20, bottom: 50),
                        child: Text(
                          'Hinweis: Alle Felder sind Pflichtfelder.',
                          style: TextStyle(
                            fontSize: 16,
                            color: Colors.red.shade300,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget inputFields() {
    return SizedBox(
      width: 320,
      child: Form(
        key: controller.formKeyTank,
        autovalidateMode: AutovalidateMode.onUserInteraction,
        child: Column(
          children: [
            TextFormField(
              validator: (value) => controller.validateOrt(value),
              focusNode: controller.firstFocusNode, // Setze den FocusNode
              //onTap: () => controller.selectDateTime(Get.context!),
              controller: controller.ortController,
              decoration: InputDecoration(
                labelText: 'Ort der Tankstelle',
                labelStyle: const TextStyle(color: Colors.white, fontSize: 20),
                errorStyle: const TextStyle(color: Colors.red, fontSize: 16),
                filled: true,
                fillColor: Colors.black.withValues(alpha: 0.9),
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                  borderSide: const BorderSide(color: Colors.white, width: 2),
                ),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                  borderSide: BorderSide.none, // Entferne den Rand
                ),
              ),
              style: const TextStyle(color: Colors.white),
            ),
            SizedBox(height: 20),
            TextFormField(
              //focusNode: controller.firstFocusNode, // Setze den FocusNode
              readOnly: true,
              onTap: () => controller.selectDateTime(Get.context!),
              keyboardType: TextInputType.text,
              controller: controller.dateController,
              decoration: InputDecoration(
                labelText: 'Datum',
                labelStyle: const TextStyle(color: Colors.white, fontSize: 20),
                errorStyle: const TextStyle(color: Colors.red, fontSize: 16),
                filled: true,
                fillColor: Colors.black.withValues(alpha: 0.9),
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                  borderSide: const BorderSide(color: Colors.white, width: 2),
                ),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                  borderSide: BorderSide.none, // Entferne den Rand
                ),
              ),
              style: const TextStyle(color: Colors.white),
            ),
            SizedBox(height: 20),
            TextFormField(
              validator: (value) => controller.validateKilometerStand(value),
              keyboardType: TextInputType.number,
              controller: controller.kilometerStandEdittingController,
              decoration: InputDecoration(
                labelText: 'Kilometerstand',
                labelStyle: const TextStyle(color: Colors.white, fontSize: 20),
                errorStyle: const TextStyle(color: Colors.red, fontSize: 16),
                filled: true,
                fillColor: Colors.black.withValues(alpha: 0.9),
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                  borderSide: const BorderSide(color: Colors.white, width: 2),
                ),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                  borderSide: BorderSide.none, // Entferne den Rand
                ),
              ),
            ),
            SizedBox(height: 20),
            TextFormField(
              validator: (value) => controller.validateMenge(value),
              keyboardType: TextInputType.number,
              controller: controller.mengeController,
              decoration: InputDecoration(
                labelText: 'Menge (in Litern)',
                labelStyle: const TextStyle(color: Colors.white, fontSize: 20),
                errorStyle: const TextStyle(color: Colors.red, fontSize: 16),
                filled: true,
                fillColor: Colors.black.withValues(alpha: 0.9),
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                  borderSide: const BorderSide(color: Colors.white, width: 2),
                ),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                  borderSide: BorderSide.none, // Entferne den Rand
                ),
              ),
            ),
            SizedBox(height: 20),
            TextFormField(
              onChanged: (value) {
                // Update the sum price when the price per liter changes
                controller.updateSumPrice();
              },
              validator: (value) => controller.validatePricePerLiter(value),
              keyboardType: TextInputType.number,
              controller: controller.pricePerLiterController,
              decoration: InputDecoration(
                labelText: 'Preis pro Liter',
                labelStyle: const TextStyle(color: Colors.white, fontSize: 20),
                errorStyle: const TextStyle(color: Colors.red, fontSize: 16),
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                  borderSide: const BorderSide(color: Colors.white, width: 2),
                ),
                filled: true,
                fillColor: Colors.black.withValues(alpha: 0.9),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                  //borderSide: BorderSide.none, // Entferne den Rand
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}