import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controller/home_controller.dart';
import '../widgets/my_drop_down_year_widget.dart';
import '../widgets/my_styled_loading_indicator.dart';

class HomePage extends GetView<HomeController> {
  static const String namedRoute = '/home-page';
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    var homCtrl = controller;
    return PopScope(
      canPop: false,
      child: SafeArea(
        child: Scaffold(
          appBar: AppBar(
            toolbarHeight: 100,
            backgroundColor: Colors.blueGrey,
            foregroundColor: Colors.white,
            title: Column(
              children: [
                const Text('Tank List'),
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 18),
                  decoration: BoxDecoration(
                    color: Colors.blue.shade700,
                    borderRadius: BorderRadius.circular(8),
                    border: Border.all(color: Colors.white, width: 2),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.white.withAlpha(120),
                        spreadRadius: 1,
                        blurRadius: 2,
                        offset: const Offset(0, 3),
                      ),
                    ],
                  ),
                  width: 150,
                  height: 50,
                  child: MyDropDownYear(homCtrl: homCtrl),
                ),
              ],
            ),
            centerTitle: true,
            actions: [
              IconButton(
                icon: const Icon(Icons.refresh),
                onPressed: () {
                  homCtrl.onInit();
                },
              ),
              IconButton(
                icon: const Icon(Icons.gas_meter),
                onPressed: () {
                  homCtrl.goToGasStations();
                },
              ),
              IconButton(
                icon: const Icon(Icons.collections),
                onPressed: () {
                  homCtrl.goToGraphPage();
                },
              ),
              IconButton(
                onPressed: () => homCtrl.logout(),
                icon: Icon(Icons.logout),
              ),
            ],
          ),
          floatingActionButton: FloatingActionButton(
            backgroundColor: Colors.blueGrey,
            onPressed: () {
              homCtrl.navigateToAddTankEntry();
            },
            child: const Icon(Icons.add),
          ),
          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: Obx(
              () => homCtrl.isLoading.value == false
                  ? homCtrl.listTankModel.isEmpty
                        ? MyStyledLoadingIndicator()
                        : ListView.builder(
                            padding: const EdgeInsets.all(16),
                            itemBuilder: (context, index) {
                              var tank = homCtrl.listTankModel[index];
                              return Card(
                                elevation: 2,
                                margin: const EdgeInsets.only(bottom: 12),
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(12),
                                ),
                                child: InkWell(
                                  borderRadius: BorderRadius.circular(12),
                                  onTap: () {
                                    // Tap action if needed
                                    homCtrl.viewTankDetails(tank);
                                  },
                                  child: Padding(
                                    padding: const EdgeInsets.all(16),
                                    child: Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.spaceBetween,
                                          children: [
                                            Row(
                                              children: [
                                                Container(
                                                  padding: const EdgeInsets.all(
                                                    8,
                                                  ),
                                                  decoration: BoxDecoration(
                                                    color: Colors.blueGrey[50],
                                                    borderRadius:
                                                        BorderRadius.circular(
                                                          8,
                                                        ),
                                                  ),
                                                  child: Icon(
                                                    Icons.local_gas_station,
                                                    color: Colors.blueGrey[700],
                                                    size: 24,
                                                  ),
                                                ),
                                                const SizedBox(width: 12),
                                                Column(
                                                  crossAxisAlignment:
                                                      CrossAxisAlignment.start,
                                                  children: [
                                                    Text(
                                                      tank.szDate,
                                                      style: const TextStyle(
                                                        fontSize: 16,
                                                        fontWeight:
                                                            FontWeight.w600,
                                                      ),
                                                    ),
                                                    const SizedBox(height: 2),
                                                    Text(
                                                      '${tank.szLiters} Liter',
                                                      style: TextStyle(
                                                        fontSize: 14,
                                                        color: Colors.grey[600],
                                                      ),
                                                    ),
                                                  ],
                                                ),
                                              ],
                                            ),
                                            Container(
                                              padding:
                                                  const EdgeInsets.symmetric(
                                                    horizontal: 12,
                                                    vertical: 6,
                                                  ),
                                              decoration: BoxDecoration(
                                                color: Colors.green[50],
                                                borderRadius:
                                                    BorderRadius.circular(20),
                                              ),
                                              child: Text(
                                                '${tank.szPriceTotal}€',
                                                style: TextStyle(
                                                  fontSize: 16,
                                                  fontWeight: FontWeight.bold,
                                                  color: Colors.green[700],
                                                ),
                                              ),
                                            ),
                                          ],
                                        ),
                                        const SizedBox(height: 12),
                                        Divider(
                                          color: Colors.grey[300],
                                          height: 1,
                                        ),
                                        const SizedBox(height: 12),
                                        Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.spaceBetween,
                                          children: [
                                            _buildInfoChip(
                                              icon: Icons.euro,
                                              label: 'Preis/L',
                                              value: '${tank.szPricePerLiter}€',
                                            ),
                                            _buildInfoChip(
                                              icon: Icons.speed,
                                              label: 'Km-Stand',
                                              value: '${tank.szOdometer} km',
                                            ),
                                          ],
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                              );
                            },
                            itemCount: homCtrl.listTankModel.length,
                          )
                  : Center(
                      child: CircularProgressIndicator(color: Colors.blueGrey),
                    ),
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildInfoChip({
    required IconData icon,
    required String label,
    required String value,
  }) {
    return Row(
      children: [
        Icon(icon, size: 16, color: Colors.blueGrey[600]),
        const SizedBox(width: 4),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              label,
              style: TextStyle(fontSize: 11, color: Colors.grey[600]),
            ),
            Text(
              value,
              style: const TextStyle(fontSize: 13, fontWeight: FontWeight.w600),
            ),
          ],
        ),
      ],
    );
  }
}