import 'package:flutter/material.dart';

import '../helper/display_formats.dart';
import '../models/bauteil_model.dart';
import '../theme/app_theme.dart';
import 'bauteil_photo.dart';

class BauteilCard extends StatelessWidget {
  const BauteilCard({
    super.key,
    required this.bauteil,
    required this.filamentDetails,
    required this.onAction,
  });
  final BauteilModel bauteil;
  final String filamentDetails;
  final ValueChanged<String> onAction;

  @override
  Widget build(BuildContext context) => Card(
    margin: EdgeInsets.zero,
    elevation: 0,
    color: Colors.white,
    surfaceTintColor: Colors.transparent,
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(18)),
    child: Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      bauteil.name,
                      style: const TextStyle(
                        fontWeight: FontWeight.w700,
                        fontSize: 18,
                      ),
                    ),
                    const SizedBox(height: 6),
                    Text(
                      bauteil.verwendung,
                      style: const TextStyle(color: AppTheme.muted),
                    ),
                    const SizedBox(height: 6),
                    Text(
                      DisplayFormats.date(bauteil.erstelltAm),
                      style: const TextStyle(
                        color: AppTheme.muted,
                        fontSize: 12,
                      ),
                    ),
                  ],
                ),
              ),
              const SizedBox(width: 12),
              Column(
                children: [
                  PopupMenuButton<String>(
                    tooltip: 'Bauteil verwalten',
                    onSelected: onAction,
                    itemBuilder: (context) => const [
                      PopupMenuItem(
                        value: 'edit',
                        child: ListTile(
                          leading: Icon(Icons.edit_outlined),
                          title: Text('Bearbeiten'),
                          contentPadding: EdgeInsets.zero,
                        ),
                      ),
                      PopupMenuItem(
                        value: 'duplicate',
                        child: ListTile(
                          leading: Icon(Icons.copy_outlined),
                          title: Text('Duplizieren'),
                          contentPadding: EdgeInsets.zero,
                        ),
                      ),
                      PopupMenuItem(
                        value: 'delete',
                        child: ListTile(
                          leading: Icon(Icons.delete_outline),
                          title: Text('Löschen'),
                          contentPadding: EdgeInsets.zero,
                        ),
                      ),
                    ],
                  ),
                  BauteilPhoto(bytes: bauteil.fotoBytes, size: 72),
                ],
              ),
            ],
          ),
          const SizedBox(height: 16),
          Wrap(
            spacing: 8,
            runSpacing: 8,
            children: [
              _detail(DisplayFormats.duration(bauteil.druckdauerMinuten)),
              _detail(
                'Bauteil ${DisplayFormats.number(bauteil.gewichtGramm)} g',
              ),
              _detail('Abfall ${DisplayFormats.number(bauteil.abfallGramm)} g'),
              _detail(
                'Gesamt ${DisplayFormats.number(bauteil.gesamtverbrauchGramm)} g',
              ),
              if (bauteil.filamente.length > 1)
                _detail(
                  'Mehrfarbdruck · ${bauteil.filamente.length} Filamente',
                ),
            ],
          ),
          const SizedBox(height: 14),
          Text(
            filamentDetails,
            style: const TextStyle(color: AppTheme.muted, height: 1.5),
          ),
        ],
      ),
    ),
  );

  Widget _detail(String text) => Container(
    padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 8),
    decoration: BoxDecoration(
      color: AppTheme.inputSurface,
      borderRadius: BorderRadius.circular(8),
    ),
    child: Text(text, style: const TextStyle(color: AppTheme.teal)),
  );
}