import 'package:flutter/material.dart';
import 'package:em2rp/models/user_model.dart';
import 'package:em2rp/utils/colors.dart';

class UserCard extends StatelessWidget {
  final UserModel user;
  final VoidCallback onEdit;
  final VoidCallback onDelete;

  // Hauteurs fixes selon le device
  static const double _mobileHeight = 150;
  static const double _desktopHeight = 280;

  const UserCard({
    Key? key,
    required this.user,
    required this.onEdit,
    required this.onDelete,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    final isMobile = width < 600;
    final cardHeight = isMobile ? _mobileHeight : _desktopHeight;

    return SizedBox(
      height: cardHeight, // Hauteur fixe
      child: Card(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
        elevation: 3,
        child: Padding(
          padding: const EdgeInsets.all(12),
          child: isMobile
              ? _buildMobileRow(context)
              : _buildDesktopColumn(context),
        ),
      ),
    );
  }

  Widget _buildMobileRow(BuildContext context) {
    return Row(
      children: [
        _profileAvatar(48),
        const SizedBox(width: 12),
        Expanded(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center, // Centré verticalement
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text("${user.firstName} ${user.lastName}",
                  style: Theme.of(context).textTheme.titleSmall),
              Text(user.email, style: Theme.of(context).textTheme.bodySmall),
              const SizedBox(height: 8),
              Row(
                children: [
                  Flexible(
                    child: ElevatedButton.icon(
                      icon: const Icon(Icons.edit, size: 14),
                      label: const Text("Modifier"),
                      onPressed: onEdit,
                      style: ElevatedButton.styleFrom(
                        backgroundColor: AppColors.rouge,
                        foregroundColor: AppColors.blanc,
                        padding: const EdgeInsets.symmetric(
                            horizontal: 8, vertical: 4),
                        textStyle: const TextStyle(fontSize: 12),
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(6)),
                      ),
                    ),
                  ),
                  const SizedBox(width: 8),
                  Flexible(
                    child: ElevatedButton.icon(
                      icon: const Icon(Icons.delete, size: 14),
                      label: const Text("Supprimer"),
                      onPressed: onDelete,
                      style: ElevatedButton.styleFrom(
                        backgroundColor: AppColors.gris,
                        foregroundColor: AppColors.blanc,
                        padding: const EdgeInsets.symmetric(
                            horizontal: 8, vertical: 4),
                        textStyle: const TextStyle(fontSize: 12),
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(6)),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildDesktopColumn(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween, // Écarte haut/bas
      children: [
        _profileAvatar(80),
        Column(
          children: [
            Text("${user.firstName} ${user.lastName}",
                style: Theme.of(context).textTheme.titleSmall),
            const SizedBox(height: 4),
            Text(user.email, style: Theme.of(context).textTheme.bodySmall),
            const SizedBox(height: 4),
            Text(user.role,
                style: Theme.of(context)
                    .textTheme
                    .bodySmall!
                    .copyWith(color: AppColors.gris)),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            ElevatedButton.icon(
              icon: const Icon(Icons.edit, size: 18),
              label: const Text("Modifier"),
              onPressed: onEdit,
              style: ElevatedButton.styleFrom(
                backgroundColor: AppColors.rouge,
                foregroundColor: AppColors.blanc,
                padding:
                    const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(8)),
              ),
            ),
            ElevatedButton.icon(
              icon: const Icon(Icons.delete, size: 18),
              label: const Text("Supprimer"),
              onPressed: onDelete,
              style: ElevatedButton.styleFrom(
                backgroundColor: AppColors.gris,
                foregroundColor: AppColors.blanc,
                padding:
                    const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(8)),
              ),
            ),
          ],
        ),
      ],
    );
  }

  Widget _profileAvatar(double size) {
    return CircleAvatar(
      radius: size / 2,
      backgroundImage: user.profilePhotoUrl.isNotEmpty
          ? NetworkImage(user.profilePhotoUrl)
          : null,
      backgroundColor: Colors.grey[200],
      child: user.profilePhotoUrl.isEmpty
          ? Icon(Icons.person, size: size * 0.6, color: AppColors.noir)
          : null,
    );
  }
}