import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/list_controller.dart';
import '../widgets/filament_card.dart';
import '../widgets/empty_state.dart';
import '../widgets/modern_loading_indicator.dart';

class ListPage extends GetView<ListController> {
  static const String namedRoute = '/list-page';
  const ListPage({super.key});

  @override
  Widget build(BuildContext context) {
    var listCtrl = controller;
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [Colors.blue.shade50, Colors.purple.shade50],
          ),
        ),
        child: SafeArea(
          child: Column(
            children: [
              // Custom AppBar
              Container(
                padding: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
                decoration: BoxDecoration(
                  color: Colors.white.withAlpha(230),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withAlpha(10),
                      blurRadius: 10,
                      offset: Offset(0, 2),
                    ),
                  ],
                ),
                child: Row(
                  children: [
                    IconButton(
                      icon: Icon(Icons.arrow_back),
                      color: Colors.deepPurple.shade700,
                      onPressed: () => Get.back(),
                    ),
                    SizedBox(width: 8),
                    Icon(
                      Icons.view_list_rounded,
                      color: Colors.deepPurple.shade600,
                      size: 28,
                    ),
                    SizedBox(width: 12),
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            'Filament Liste',
                            style: TextStyle(
                              fontSize: 20,
                              fontWeight: FontWeight.bold,
                              color: Colors.deepPurple.shade700,
                            ),
                          ),
                          Obx(
                            () => Text(
                              '${listCtrl.filamentList.length} ${listCtrl.filamentList.length == 1 ? 'Eintrag' : 'Einträge'}',
                              style: TextStyle(
                                fontSize: 12,
                                color: Colors.grey.shade600,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      decoration: BoxDecoration(
                        gradient: LinearGradient(
                          colors: [
                            Colors.deepPurple.shade600,
                            Colors.deepPurple.shade400,
                          ],
                        ),
                        borderRadius: BorderRadius.circular(12),
                        boxShadow: [
                          BoxShadow(
                            color: Colors.deepPurple.shade300.withAlpha(100),
                            blurRadius: 8,
                            offset: Offset(0, 4),
                          ),
                        ],
                      ),
                      child: Material(
                        color: Colors.transparent,
                        child: InkWell(
                          onTap: () => listCtrl.addNewFilament(),
                          borderRadius: BorderRadius.circular(12),
                          child: Padding(
                            padding: EdgeInsets.symmetric(
                              horizontal: 16,
                              vertical: 10,
                            ),
                            child: Row(
                              children: [
                                Icon(Icons.add, color: Colors.white, size: 20),
                                SizedBox(width: 6),
                                Text(
                                  'Neu',
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontWeight: FontWeight.w600,
                                    fontSize: 14,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),

              // List Content
              Expanded(
                child: Obx(() {
                  if (listCtrl.isLoadingFilament.value) {
                    return ModernLoadingIndicator(
                      message: 'Filamente werden geladen...',
                    );
                  } else if (listCtrl.filamentList.isEmpty) {
                    return EmptyState(
                      title: 'Keine Filamente vorhanden',
                      message:
                          'Füge dein erstes Filament hinzu, um mit der Verwaltung zu beginnen.',
                      icon: Icons.inbox_outlined,
                      actionLabel: 'Erstes Filament hinzufügen',
                      onActionPressed: () => listCtrl.addNewFilament(),
                    );
                  } else {
                    return ListView.builder(
                      padding: EdgeInsets.only(top: 8, bottom: 16),
                      itemCount: listCtrl.filamentList.length,
                      itemBuilder: (context, index) {
                        final filament = listCtrl.filamentList[index];
                        return FilamentCard(
                          filament: filament,
                          onTap: () {
                            // Optional: Detail-Ansicht öffnen
                          },
                          onEdit: () {
                            // Optional: Bearbeiten-Dialog öffnen
                          },
                          onDelete: () {
                            // Optional: Lösch-Bestätigung anzeigen
                            _showDeleteConfirmation(
                              context,
                              listCtrl,
                              filament,
                            );
                          },
                        );
                      },
                    );
                  }
                }),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void _showDeleteConfirmation(
    BuildContext context,
    ListController controller,
    filament,
  ) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
        title: Row(
          children: [
            Icon(Icons.warning_amber_rounded, color: Colors.orange.shade600),
            SizedBox(width: 12),
            Text('Filament löschen?'),
          ],
        ),
        content: Text(
          'Möchtest du "${filament.name}" wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.',
          style: TextStyle(fontSize: 15),
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: Text('Abbrechen'),
          ),
          ElevatedButton(
            onPressed: () {
              // controller.deleteFilament(filament.id);
              Navigator.pop(context);
              Get.snackbar(
                'Gelöscht',
                '${filament.name} wurde entfernt',
                snackPosition: SnackPosition.BOTTOM,
                backgroundColor: Colors.red.shade100,
                colorText: Colors.red.shade900,
                duration: Duration(seconds: 2),
              );
            },
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.red.shade600,
              foregroundColor: Colors.white,
            ),
            child: Text('Löschen'),
          ),
        ],
      ),
    );
  }
}