import 'package:flutter/material.dart';
import 'package:notas/models/category.dart';
import 'package:notas/theme/app_colors.dart';
import 'package:notas/widgets/category_style.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: AppColors.drawerBackground,
        border: Border(right: BorderSide(color: AppColors.border, 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 =
                              CategoryStyle.iconForCodePoint(
                                category.iconCodePoint,
                              );

                          return _MenuItemTile(
                            icon: categoryIcon,
                            label: category.name,
                            selected: selectedItem == categoryId,
                            onTap: () => onMenuItemTapped?.call(categoryId),
                            onLongPress: onEditCategory == null
                                ? null
                                : () => onEditCategory?.call(category),
                            iconColor: Color(
                              category.colorValue ??
                                  AppColors.categoryFallback.value,
                            ),
                            textColor: Color(
                              category.colorValue ??
                                  AppColors.categoryFallback.value,
                            ),
                            trailing: IconButton(
                              padding: const EdgeInsets.all(8),
                              constraints: const BoxConstraints(
                                minWidth: 0,
                                minHeight: 0,
                              ),
                              icon: const Icon(
                                Icons.more_vert,
                                color: AppColors.textSecondary,
                                size: 20,
                              ),
                              onPressed: () => onEditCategory?.call(category),
                            ),
                          );
                        }).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: AppColors.destructiveAccent,
            textColor: AppColors.destructiveAccent,
          ),
          const Divider(color: AppColors.border, height: 16),
          _MenuItemTile(
            icon: Icons.settings,
            label: 'Configuración',
            onTap: () => onMenuItemTapped?.call('settings'),
          ),
          const SizedBox(height: 6),
        ],
      ),
    );
  }
}

class _MenuItemTile extends StatefulWidget {
  const _MenuItemTile({
    required this.icon,
    required this.label,
    this.selected = false,
    this.onTap,
    this.onLongPress,
    this.iconColor,
    this.textColor,
    this.trailing,
  });

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

  @override
  State<_MenuItemTile> createState() => _MenuItemTileState();
}

class _MenuItemTileState extends State<_MenuItemTile> {
  bool _hovering = false;

  @override
  Widget build(BuildContext context) {
    final bool active = widget.selected || _hovering;
    final Color backgroundColor = active
        ? AppColors.hover
        : AppColors.transparent;
    final Color foregroundColor = active
        ? AppColors.textPrimary
        : AppColors.textSecondary;
    final Widget? trailing = _hovering ? widget.trailing : null;

    return MouseRegion(
      onEnter: (_) {
        setState(() => _hovering = true);
      },
      onExit: (_) {
        setState(() => _hovering = false);
      },
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 180),
        curve: Curves.easeOutCubic,
        margin: const EdgeInsets.only(right: 8, top: 2, bottom: 2),
        child: Material(
          color: backgroundColor,
          borderRadius: const BorderRadius.only(
            topRight: Radius.circular(999),
            bottomRight: Radius.circular(999),
          ),
          clipBehavior: Clip.antiAlias,
          child: ListTile(
            contentPadding: const EdgeInsets.only(left: 16, right: 8),
            leading: Icon(
              widget.icon,
              color: widget.iconColor ?? foregroundColor,
            ),
            trailing: trailing,
            title: Text(
              widget.label,
              style: TextStyle(
                color: widget.textColor ?? foregroundColor,
                fontSize: 14,
              ),
            ),
            onTap: widget.onTap,
            onLongPress: widget.onLongPress,
          ),
        ),
      ),
    );
  }
}