import 'package:flutter/material.dart';

class MenuDrawer extends StatelessWidget {
  const MenuDrawer({
    super.key,
    this.onMenuItemTapped,
    this.selectedItem,
  });

  final ValueChanged<String>? onMenuItemTapped;
  final String? selectedItem;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        color: Color.fromARGB(255, 30, 31, 35),
        border: Border(
          right: BorderSide(color: Colors.white12, width: 0.5),
        ),
      ),
      child: Column(
        children: [
          const SizedBox(height: 8),
          _MenuItemTile(
            icon: Icons.note,
            label: 'Todas mis notas',
            selected: selectedItem == 'all_notes',
            onTap: () => onMenuItemTapped?.call('all_notes'),
          ),
          Expanded(
            child: SingleChildScrollView(
              child: Column(
                children: const [
                  SizedBox.shrink(),
                ],
              ),
            ),
          ),
          _MenuItemTile(
            icon: Icons.delete_outline,
            label: 'Mis notas borradas',
            selected: selectedItem == 'deleted_notes',
            onTap: () => onMenuItemTapped?.call('deleted_notes'),
          ),
          const Divider(color: Colors.white12, height: 16),
          _MenuItemTile(
            icon: Icons.settings,
            label: 'Configuración',
            onTap: () => onMenuItemTapped?.call('settings'),
          ),
          const SizedBox(height: 6),
        ],
      ),
    );
  }
}

class _MenuItemTile extends StatelessWidget {
  const _MenuItemTile({
    required this.icon,
    required this.label,
    this.selected = false,
    this.onTap,
  });

  final IconData icon;
  final String label;
  final bool selected;
  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
    final Color backgroundColor = selected
        ? Colors.white.withValues(alpha: 0.10)
        : Colors.transparent;
    final Color foregroundColor = selected ? Colors.white : Colors.white70;

    return AnimatedContainer(
      duration: const Duration(milliseconds: 180),
      curve: Curves.easeOutCubic,
      margin: EdgeInsets.only(
        left: selected ? 0 : 8,
        right: 8,
        top: 2,
        bottom: 2,
      ),
      decoration: BoxDecoration(
        color: backgroundColor,
        borderRadius: selected
            ? const BorderRadius.only(
                topRight: Radius.circular(999),
                bottomRight: Radius.circular(999),
              )
            : BorderRadius.circular(12),
      ),
      child: ListTile(
        leading: Icon(icon, color: foregroundColor),
        title: Text(
          label,
          style: TextStyle(color: foregroundColor, fontSize: 14),
        ),
        onTap: onTap,
        hoverColor: Colors.white.withValues(alpha: 0.1),
      ),
    );
  }
}