import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/details_controller.dart';
import '../widgets/detail_header.dart';
import '../widgets/detail_info_card.dart';
import '../widgets/progress_ring.dart';
import '../widgets/action_button.dart';

class DetailsPage extends GetView<DetailsController> {
  static const String namedRoute = '/details-page';
  const DetailsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey.shade50,
      body: Obx(() {
        final filament = controller.filament.value;        
        if (filament == null) {
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(Icons.error_outline, size: 64, color: Colors.grey),
                SizedBox(height: 16),
                Text(
                  'Filament nicht gefunden',
                  style: TextStyle(fontSize: 18, color: Colors.grey.shade600),
                ),
              ],
            ),
          );
        }

        return CustomScrollView(
          slivers: [
            // App Bar
            SliverAppBar(
              expandedHeight: 0,
              floating: true,
              pinned: true,
              backgroundColor: Colors.white,
              elevation: 0,
              leading: IconButton(
                icon: Icon(Icons.arrow_back, color: Colors.grey.shade800),
                onPressed: () => Get.back(),
              ),
              actions: [
                IconButton(
                  icon: Icon(Icons.share, color: Colors.grey.shade800),
                  onPressed: () {
                    // Share functionality
                  },
                ),
              ],
            ),

            // Content
            SliverToBoxAdapter(
              child: Column(
                children: [
                  // Header with color and name
                  DetailHeader(
                    name: filament.name,
                    type: filament.type,
                    color: filament.color,
                  ),

                  SizedBox(height: 24),

                  // Usage Progress Ring
                  Container(
                    margin: EdgeInsets.symmetric(horizontal: 16),
                    padding: EdgeInsets.all(24),
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        colors: [Colors.white, Colors.blue.shade50],
                        begin: Alignment.topLeft,
                        end: Alignment.bottomRight,
                      ),
                      borderRadius: BorderRadius.circular(24),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.black.withAlpha(5),
                          blurRadius: 15,
                          offset: Offset(0, 5),
                        ),
                      ],
                    ),
                    child: Column(
                      children: [
                        Text(
                          'Verbrauch',
                          style: TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.w600,
                            color: Colors.grey.shade700,
                          ),
                        ),
                        SizedBox(height: 20),
                        ProgressRing(
                          progress: controller.usagePercentage / 100,
                          size: 140,
                          strokeWidth: 14,
                          backgroundColor: Colors.grey.shade300,
                          progressColor: Colors.blue,
                        ),
                        SizedBox(height: 20),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: [
                            _buildStatItem(
                              'Verwendet',
                              '${filament.weightUsed.toStringAsFixed(0)}g',
                              Colors.orange,
                            ),
                            Container(
                              width: 1,
                              height: 40,
                              color: Colors.grey.shade300,
                            ),
                            _buildStatItem(
                              'Verbleibend',
                              '${controller.remainingWeight.toStringAsFixed(0)}g',
                              Colors.green,
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),

                  SizedBox(height: 24),

                  // Info Grid
                  Padding(
                    padding: EdgeInsets.symmetric(horizontal: 16),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'Details',
                          style: TextStyle(
                            fontSize: 20,
                            fontWeight: FontWeight.bold,
                            color: Colors.grey.shade800,
                          ),
                        ),
                        SizedBox(height: 16),
                        GridView.count(
                          crossAxisCount: 2,
                          shrinkWrap: true,
                          physics: NeverScrollableScrollPhysics(),
                          mainAxisSpacing: 12,
                          crossAxisSpacing: 12,
                          childAspectRatio: 1.6,
                          children: [
                            DetailInfoCard(
                              icon: Icons.scale,
                              label: 'Gesamtgewicht',
                              value: '${filament.weight.toStringAsFixed(0)}g',
                              color: Colors.blue,
                            ),
                            DetailInfoCard(
                              icon: Icons.euro,
                              label: 'Preis',
                              value: '€${filament.price.toStringAsFixed(2)}',
                              color: Colors.green,
                            ),
                            if (filament.printingTemp != null)
                              DetailInfoCard(
                                icon: Icons.thermostat,
                                label: 'Drucktemperatur',
                                value: '${filament.printingTemp}°C',
                                color: Colors.orange,
                              ),
                            if (filament.bedTemp != null)
                              DetailInfoCard(
                                icon: Icons.heat_pump,
                                label: 'Bett Temperatur',
                                value: '${filament.bedTemp}°C',
                                color: Colors.red,
                              ),
                            DetailInfoCard(
                              icon: Icons.inventory_2,
                              label: 'Anzahl Rollen',
                              value: '${filament.pices}',
                              color: Colors.purple,
                            ),
                            if (filament.manufacturer != null)
                              DetailInfoCard(
                                icon: Icons.business,
                                label: 'Hersteller',
                                value: filament.manufacturer!,
                                color: Colors.indigo,
                              ),
                          ],
                        ),

                        // Purchase Date
                        if (filament.purchaseDate != null) ...[
                          SizedBox(height: 12),
                          Container(
                            width: double.infinity,
                            padding: EdgeInsets.all(16),
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(16),
                              boxShadow: [
                                BoxShadow(
                                  color: Colors.black.withAlpha(5),
                                  blurRadius: 10,
                                  offset: Offset(0, 4),
                                ),
                              ],
                            ),
                            child: Row(
                              children: [
                                Container(
                                  padding: EdgeInsets.all(10),
                                  decoration: BoxDecoration(
                                    color: Colors.teal.withAlpha(10),
                                    borderRadius: BorderRadius.circular(12),
                                  ),
                                  child: Icon(
                                    Icons.calendar_today,
                                    color: Colors.teal,
                                    size: 24,
                                  ),
                                ),
                                SizedBox(width: 12),
                                Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      'Kaufdatum',
                                      style: TextStyle(
                                        fontSize: 12,
                                        color: Colors.grey.shade600,
                                        fontWeight: FontWeight.w500,
                                      ),
                                    ),
                                    SizedBox(height: 4),
                                    Text(
                                      filament.purchaseDate!,
                                      style: TextStyle(
                                        fontSize: 18,
                                        fontWeight: FontWeight.bold,
                                        color: Colors.grey.shade800,
                                      ),
                                    ),
                                  ],
                                ),
                              ],
                            ),
                          ),
                        ],

                        // Notes
                        if (filament.notes != null && filament.notes!.isNotEmpty) ...[
                          SizedBox(height: 24),
                          Text(
                            'Notizen',
                            style: TextStyle(
                              fontSize: 20,
                              fontWeight: FontWeight.bold,
                              color: Colors.grey.shade800,
                            ),
                          ),
                          SizedBox(height: 12),
                          Container(
                            width: double.infinity,
                            padding: EdgeInsets.all(20),
                            decoration: BoxDecoration(
                              color: Colors.amber.shade50,
                              borderRadius: BorderRadius.circular(16),
                              border: Border.all(
                                color: Colors.amber.shade200,
                                width: 1,
                              ),
                            ),
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Icon(
                                  Icons.notes,
                                  color: Colors.amber.shade700,
                                  size: 24,
                                ),
                                SizedBox(width: 12),
                                Expanded(
                                  child: Text(
                                    filament.notes!,
                                    style: TextStyle(
                                      fontSize: 15,
                                      color: Colors.grey.shade800,
                                      height: 1.5,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ],
                    ),
                  ),

                  SizedBox(height: 32),

                  // Action Buttons
                  Padding(
                    padding: EdgeInsets.symmetric(horizontal: 16),
                    child: Row(
                      children: [
                        Expanded(
                          child: ActionButton(
                            icon: Icons.edit,
                            label: 'Bearbeiten',
                            color: Colors.blue,
                            onPressed: () => controller.onEditPressed(),
                          ),
                        ),
                        SizedBox(width: 12),
                        Expanded(
                          child: ActionButton(
                            icon: Icons.delete,
                            label: 'Löschen',
                            color: Colors.red,
                            isOutlined: true,
                            onPressed: () {
                              _showDeleteDialog(context);
                            },
                          ),
                        ),
                      ],
                    ),
                  ),

                  SizedBox(height: 32),
                ],
              ),
            ),
          ],
        );
      }),
    );
  }

  Widget _buildStatItem(String label, String value, Color color) {
    return Column(
      children: [
        Text(
          label,
          style: TextStyle(
            fontSize: 13,
            color: Colors.grey.shade600,
            fontWeight: FontWeight.w500,
          ),
        ),
        SizedBox(height: 6),
        Text(
          value,
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.bold,
            color: color,
          ),
        ),
      ],
    );
  }

  void _showDeleteDialog(BuildContext context) {
    Get.dialog(
      AlertDialog(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
        title: Row(
          children: [
            Icon(Icons.warning_amber_rounded, color: Colors.orange, size: 28),
            SizedBox(width: 12),
            Text('Filament löschen?'),
          ],
        ),
        content: Text(
          'Möchten Sie dieses Filament wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.',
          style: TextStyle(fontSize: 15),
        ),
        actions: [
          TextButton(
            onPressed: () => Get.back(),
            child: Text(
              'Abbrechen',
              style: TextStyle(color: Colors.grey.shade600),
            ),
          ),
          ElevatedButton(
            onPressed: () {
              Get.back();
              controller.deleteFilament();
            },
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.red,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(12),
              ),
            ),
            child: Text('Löschen'),
          ),
        ],
      ),
    );
  }
}
