EME_APP/eme-frontend/lib/screens/detail_screen.dart

import "package:flutter/material.dart";
import "package:google_fonts/google_fonts.dart";
import "../demo_identity.dart";
import "../theme/ensup_colors.dart";
import "../models/materiel_item.dart";
import "../widgets/ensup_top_bar.dart";
import "../widgets/brand_corners.dart";
import "../widgets/status_pill.dart";
import "checklist_depart_screen.dart";

/// Détail d'un matériel : caractéristiques, accessoires du kit et lancement de
/// l'emprunt.
class DetailScreen extends StatelessWidget {
  const DetailScreen({super.key, required this.item});

  final MaterielItem item;

  void _demarrer(BuildContext context) {
    Navigator.of(context).push(
      MaterialPageRoute(builder: (_) => ChecklistDepartScreen(item: item)),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: EnsupColors.soft,
      body: Stack(
        children: [
          Center(
            child: ConstrainedBox(
              constraints: const BoxConstraints(maxWidth: 1280, maxHeight: 820),
              child: Container(
                margin: const EdgeInsets.all(24),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(16),
                  boxShadow: [
                    BoxShadow(
                      color: EnsupColors.text.withValues(alpha: 0.14),
                      blurRadius: 60,
                      offset: const Offset(0, 18),
                    ),
                  ],
                ),
                clipBehavior: Clip.antiAlias,
                child: Column(
                  children: [
                    EnsupTopBar(
                      brandText: "Détail matériel",
                      campusTag: DemoIdentity.campusTag,
                      userName: DemoIdentity.userName,
                      userInitials: DemoIdentity.userInitials,
                      onBack: () => Navigator.of(context).pop(),
                    ),
                    Expanded(
                      child: SingleChildScrollView(
                        padding: const EdgeInsets.symmetric(
                          horizontal: 24,
                          vertical: 26,
                        ),
                        child: LayoutBuilder(
                          builder: (context, constraints) {
                            if (constraints.maxWidth < 760) {
                              return Column(
                                crossAxisAlignment: CrossAxisAlignment.stretch,
                                children: [
                                  _colonneGauche(),
                                  const SizedBox(height: 20),
                                  _colonneDroite(context),
                                ],
                              );
                            }
                            return Row(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Expanded(flex: 3, child: _colonneGauche()),
                                const SizedBox(width: 20),
                                Expanded(
                                  flex: 2,
                                  child: _colonneDroite(context),
                                ),
                              ],
                            );
                          },
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
          const Positioned.fill(child: BrandCorners()),
        ],
      ),
    );
  }

  Widget _colonneGauche() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          padding: const EdgeInsets.all(18),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(12),
            border: Border.all(color: EnsupColors.line, width: 1.5),
            boxShadow: [
              BoxShadow(
                color: EnsupColors.text.withValues(alpha: 0.04),
                blurRadius: 12,
                offset: const Offset(0, 4),
              ),
            ],
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                width: 42,
                height: 42,
                decoration: BoxDecoration(
                  color: EnsupColors.cyan.withValues(alpha: 0.1),
                  borderRadius: BorderRadius.circular(10),
                ),
                child: Icon(item.icon, color: EnsupColors.blue3, size: 21),
              ),
              const SizedBox(height: 12),
              Text(
                item.nom,
                style: GoogleFonts.darkerGrotesque(
                  fontSize: 24,
                  height: 1,
                  fontWeight: FontWeight.w900,
                  color: EnsupColors.text,
                ),
              ),
              const SizedBox(height: 12),
              _row("Référence", item.reference),
              _row("Catégorie", item.categorie),
              _row("Marque", item.marque),
              _row("Modèle", item.modele),
              _row("État", item.etatGeneral, valueColor: EnsupColors.green),
              _row("Campus", item.campus),
              _rowStatut(),
            ],
          ),
        ),
        if (item.accessoires.isNotEmpty) ...[
          const SizedBox(height: 18),
          Text(
            "ACCESSOIRES INCLUS DANS LE KIT",
            style: GoogleFonts.darkerGrotesque(
              fontSize: 13,
              fontWeight: FontWeight.w700,
              color: EnsupColors.muted,
              letterSpacing: 0.8,
            ),
          ),
          const SizedBox(height: 10),
          Wrap(
            spacing: 6,
            runSpacing: 6,
            children: item.accessoires.map(_tag).toList(),
          ),
        ],
      ],
    );
  }

  Widget _row(String cle, String valeur, {Color? valueColor}) {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 8),
      decoration: const BoxDecoration(
        border: Border(bottom: BorderSide(color: EnsupColors.line)),
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            cle,
            style: GoogleFonts.titilliumWeb(
              fontSize: 13,
              color: EnsupColors.muted,
            ),
          ),
          const SizedBox(width: 16),
          Expanded(
            child: Text(
              valeur,
              textAlign: TextAlign.right,
              style: GoogleFonts.titilliumWeb(
                fontSize: 13,
                fontWeight: FontWeight.w600,
                color: valueColor ?? EnsupColors.text,
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _rowStatut() {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            "Statut",
            style: GoogleFonts.titilliumWeb(
              fontSize: 13,
              color: EnsupColors.muted,
            ),
          ),
          StatusPill(disponible: item.disponible),
        ],
      ),
    );
  }

  Widget _tag(String label) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 5),
      decoration: BoxDecoration(
        color: EnsupColors.teal.withValues(alpha: 0.1),
        borderRadius: BorderRadius.circular(6),
      ),
      child: Text(
        label,
        style: GoogleFonts.darkerGrotesque(
          fontSize: 13,
          fontWeight: FontWeight.w600,
          color: EnsupColors.teal,
        ),
      ),
    );
  }

  Widget _colonneDroite(BuildContext context) {
    return Column(
      children: [
        Container(
          height: 180,
          width: double.infinity,
          decoration: BoxDecoration(
            color: EnsupColors.cyan.withValues(alpha: 0.045),
            borderRadius: BorderRadius.circular(12),
            border: Border.all(
              color: EnsupColors.cyan.withValues(alpha: 0.18),
              width: 1.5,
            ),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                width: 72,
                height: 72,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(16),
                  boxShadow: [
                    BoxShadow(
                      color: EnsupColors.blue3.withValues(alpha: 0.1),
                      blurRadius: 14,
                      offset: const Offset(0, 4),
                    ),
                  ],
                ),
                child: Icon(item.icon, size: 36, color: EnsupColors.blue3),
              ),
              const SizedBox(height: 10),
              Text(
                "Aperçu du matériel",
                style: GoogleFonts.titilliumWeb(
                  fontSize: 13,
                  color: EnsupColors.muted,
                ),
              ),
            ],
          ),
        ),
        const SizedBox(height: 14),
        SizedBox(
          width: double.infinity,
          child: FilledButton.icon(
            onPressed: item.disponible ? () => _demarrer(context) : null,
            icon: const Icon(Icons.arrow_forward, size: 18),
            label: Text(
              "Démarrer l'emprunt",
              style: GoogleFonts.darkerGrotesque(
                fontWeight: FontWeight.w700,
                fontSize: 16,
              ),
            ),
            style: FilledButton.styleFrom(
              backgroundColor: EnsupColors.cyan,
              padding: const EdgeInsets.symmetric(vertical: 16),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10),
              ),
            ),
          ),
        ),
        const SizedBox(height: 10),
        SizedBox(
          width: double.infinity,
          child: OutlinedButton(
            onPressed: () => Navigator.of(context).pop(),
            style: OutlinedButton.styleFrom(
              foregroundColor: EnsupColors.text2,
              side: const BorderSide(color: EnsupColors.line, width: 1.5),
              padding: const EdgeInsets.symmetric(vertical: 14),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10),
              ),
            ),
            child: Text(
              "Retour au catalogue",
              style: GoogleFonts.darkerGrotesque(
                fontWeight: FontWeight.w700,
                fontSize: 15,
              ),
            ),
          ),
        ),
      ],
    );
  }
}