import 'package:flutter/material.dart';
import '../theme/etm_theme.dart';

/// Badge 🔒 violet pour les fonctionnalités Pro.
/// S'utilise en tant que widget standalone ou via ETMTheme.proLock().
class ProLockBadge extends StatelessWidget {
  final String featureName;

  const ProLockBadge({super.key, required this.featureName});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => _showProSheet(context),
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 3),
        decoration: BoxDecoration(
          color: ETMTheme.proColor.withValues(alpha: 0.15),
          border: Border.all(color: ETMTheme.proColor.withValues(alpha: 0.4)),
          borderRadius: BorderRadius.circular(8),
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Icon(Icons.lock_rounded, size: 11, color: ETMTheme.proColor),
            const SizedBox(width: 3),
            Text(
              'Pro',
              style: TextStyle(
                fontSize: 10,
                fontWeight: FontWeight.bold,
                color: ETMTheme.proColor,
              ),
            ),
          ],
        ),
      ),
    );
  }

  void _showProSheet(BuildContext context) {
    showModalBottomSheet(
      context: context,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
      ),
      builder: (_) => Padding(
        padding: const EdgeInsets.fromLTRB(24, 16, 24, 32),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              width: 36, height: 4,
              decoration: BoxDecoration(
                color: Colors.grey.shade300,
                borderRadius: BorderRadius.circular(2),
              ),
            ),
            const SizedBox(height: 20),
            const Icon(Icons.lock_rounded, color: ETMTheme.proColor, size: 36),
            const SizedBox(height: 12),
            Text(
              featureName,
              style: const TextStyle(
                  fontSize: 17, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 8),
            const Text(
              'Cette fonctionnalité est disponible en version Pro.',
              textAlign: TextAlign.center,
              style: TextStyle(color: Color(0xFF6B7280)),
            ),
            const SizedBox(height: 24),
            SizedBox(
              width: double.infinity,
              child: ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: ETMTheme.proColor,
                  foregroundColor: Colors.white,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(12)),
                  padding: const EdgeInsets.symmetric(vertical: 14),
                ),
                onPressed: () => Navigator.pop(context),
                child: const Text('En savoir plus'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}