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) {
    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(
              () => 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,
                      ),
                    ),
                    controller.isLoading.value
                        ? Text('Location is loading...')
                        : Text(
                            controller.rxOrtString.value,
                            style: const TextStyle(
                              fontSize: 15,
                              backgroundColor: Colors.black87,
                              color: Colors.blue,
                            ),
                          ),
                    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: 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: Text(
                          'Tankstop erfassen',
                          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
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
