import 'package:flutter/material.dart';
import 'package:notas/models/category.dart';

class MenuDrawer extends StatelessWidget {
  const MenuDrawer({
    super.key,
    this.onMenuItemTapped,
    this.selectedItem,
    this.categories = const [],
    this.onCreateCategory,
    this.onEditCategory,
  });

  final ValueChanged<String>? onMenuItemTapped;
  final String? selectedItem;
  final List<Category> categories;
  final VoidCallback? onCreateCategory;
  final ValueChanged<Category>? onEditCategory;

  @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: [
                  if (categories.isNotEmpty)
                    Padding(
                      padding: const EdgeInsets.only(top: 8.0),
                      child: Column(
                        children: categories.map((category) {
                          final categoryId = 'category_${category.id}';
                          final IconData categoryIcon = category.iconCodePoint == null
                              ? Icons.folder_outlined
                              : IconData(
                                  category.iconCodePoint!,
                                  fontFamily: 'MaterialIcons',
                                );
                          
                          return _MenuItemTile(
                            icon: categoryIcon,
                            label: category.name,
                            selected: selectedItem == categoryId,
                            onTap: () => onMenuItemTapped?.call(categoryId),
                            iconColor: Color(category.colorValue ?? 0xFFFFC107),
                            textColor: Color(category.colorValue ?? 0xFFFFC107),
                            trailing: selectedItem == categoryId
                                ? IconButton(
                                    icon: const Icon(
                                      Icons.more_vert,
                                      color: Colors.white70,
                                    ),
                                    onPressed: () => onEditCategory?.call(category),
                                  )
                                : null,
                          );
                        }).toList(),
                      ),
                    ),
                  _MenuItemTile(
                    icon: Icons.add_circle_outline,
                    label: 'Crear categoría',
                    onTap: onCreateCategory,
                  ),
                ],
              ),
            ),
          ),
          _MenuItemTile(
            icon: Icons.delete_outline,
            label: 'Mis notas borradas',
            selected: selectedItem == 'deleted_notes',
            onTap: () => onMenuItemTapped?.call('deleted_notes'),
            iconColor: Colors.redAccent,
            textColor: Colors.redAccent,
          ),
          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,
    this.iconColor,
    this.textColor,
    this.trailing,
  });

  final IconData icon;
  final String label;
  final bool selected;
  final VoidCallback? onTap;
  final Color? iconColor;
  final Color? textColor;
  final Widget? trailing;

  @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(
        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: iconColor ?? foregroundColor),
        trailing: trailing,
        title: Text(
          label,
          style: TextStyle(color: textColor ?? foregroundColor, fontSize: 14),
        ),
        onTap: onTap,
        hoverColor: Colors.white.withValues(alpha: 0.1),
      ),
    );
  }
}