import 'package:flutter/material.dart';

import 'package:notas/data/note_body.dart';
import 'package:notas/models/note.dart';
import 'package:notas/theme/app_palette.dart';

class NoteCard extends StatelessWidget {
  const NoteCard({
    super.key,
    required this.note,
    this.isSelected = false,
    this.borderColor,
    this.onTap,
    this.onDelete,
    this.onChangeCategory,
    this.showSelectionBorder = true,
  });

  final Note note;
  final bool isSelected;
  final Color? borderColor;
  final VoidCallback? onTap;
  final VoidCallback? onDelete;
  final ValueChanged<BuildContext>? onChangeCategory;
  final bool showSelectionBorder;

  @override
  Widget build(BuildContext context) {
    final AppPalette palette = Theme.of(context).extension<AppPalette>()!;
    final String bodyText = noteBodyToPlainText(note.body).trim();

    return Material(
      color: Colors.transparent, // 1. Fondo completamente transparente
      shape: BorderDirectional(
        start: BorderSide(
          color: (isSelected && showSelectionBorder)
              ? palette.accent
              : Colors.transparent,
          width: isSelected ? 1.6 : 1.0,
        ),
      ),
      child: InkWell(
        borderRadius: BorderRadius.circular(14),
        onTap: onTap,
        hoverColor:
            Colors.transparent, // 2. Desactiva el efecto hover (pasar el ratón)
        splashColor:
            Colors.transparent, // 3. Desactiva el efecto de onda al hacer clic
        highlightColor:
            Colors.transparent, // Desactiva el brillo al mantener pulsado
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Expanded(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      note.title.isEmpty ? 'Sin título' : note.title,
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                        color: palette.textPrimary,
                        fontSize: 15,
                        fontWeight: FontWeight.w700,
                      ),
                    ),
                    const SizedBox(height: 6),
                    Text(
                      bodyText.isEmpty ? ' ' : bodyText,
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                        color: palette.textSecondary,
                        fontSize: 14,
                        height: 1.2,
                      ),
                    ),
                    const SizedBox(height: 4),
                  ],
                ),
              ),
              const SizedBox(width: 8),
              Builder(
                builder: (BuildContext buttonContext) {
                  return PopupMenuButton<String>(
                    icon: Icon(Icons.more_vert, color: palette.textSecondary),
                    onSelected: (String value) {
                      switch (value) {
                        case 'category':
                          onChangeCategory?.call(buttonContext);
                          return;
                        case 'delete':
                          onDelete?.call();
                          return;
                      }
                    },
                    itemBuilder: (BuildContext context) =>
                        <PopupMenuEntry<String>>[
                          const PopupMenuItem<String>(
                            value: 'category',
                            child: Text('Modificar categoría'),
                          ),
                          PopupMenuItem<String>(
                            value: 'delete',
                            child: Row(
                              children: const [
                                Icon(Icons.delete_outline, color: Colors.red),
                                SizedBox(width: 10),
                                Text(
                                  'Eliminar',
                                  style: TextStyle(color: Colors.red),
                                ),
                              ],
                            ),
                          ),
                        ],
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}