import 'package:flutter/material.dart';
import 'package:flutter_quill/flutter_quill.dart' as quill;
import 'package:marco/helpers/widgets/my_text.dart';

class CommentEditorCard extends StatefulWidget {
  final quill.QuillController controller;
  final VoidCallback onCancel;
  final Future<void> Function(quill.QuillController controller) onSave;

  const CommentEditorCard({
    super.key,
    required this.controller,
    required this.onCancel,
    required this.onSave,
  });

  @override
  State<CommentEditorCard> createState() => _CommentEditorCardState();
}

class _CommentEditorCardState extends State<CommentEditorCard> {
  bool _isSubmitting = false;

  Future<void> _handleSave() async {
    if (_isSubmitting) return;
    setState(() => _isSubmitting = true);

    try {
      await widget.onSave(widget.controller);
    } finally {
      if (mounted) setState(() => _isSubmitting = false);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        quill.QuillSimpleToolbar(
          controller: widget.controller,
          configurations: const quill.QuillSimpleToolbarConfigurations(
            showBoldButton: true,
            showItalicButton: true,
            showUnderLineButton: true,
            showListBullets: false,
            showListNumbers: false,
            showAlignmentButtons: true,
            showLink: true,
            showFontSize: false,
            showFontFamily: false,
            showColorButton: false,
            showBackgroundColorButton: false,
            showUndo: false,
            showRedo: false,
            showCodeBlock: false,
            showQuote: false,
            showSuperscript: false,
            showSubscript: false,
            showInlineCode: false,
            showDirection: false,
            showListCheck: false,
            showStrikeThrough: false,
            showClearFormat: false,
            showDividers: false,
            showHeaderStyle: false,
            multiRowsDisplay: false,
          ),
        ),
        const SizedBox(height: 24),
        Container(
          height: 140,
          padding: const EdgeInsets.all(8),
          decoration: BoxDecoration(
            border: Border.all(color: Colors.grey.shade300),
            borderRadius: BorderRadius.circular(8),
            color: const Color(0xFFFDFDFD),
          ),
          child: quill.QuillEditor.basic(
            controller: widget.controller,
            configurations: const quill.QuillEditorConfigurations(
              autoFocus: true,
              expands: false,
              scrollable: true,
            ),
          ),
        ),
        const SizedBox(height: 16),

        // 👇 Buttons same as BaseBottomSheet
        Row(
          children: [
            Expanded(
              child: ElevatedButton.icon(
                onPressed: _isSubmitting ? null : widget.onCancel,
                icon: const Icon(Icons.close, color: Colors.white),
                label: MyText.bodyMedium(
                  "Cancel",
                  color: Colors.white,
                  fontWeight: 600,
                ),
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.grey,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12),
                  ),
                  padding: const EdgeInsets.symmetric(vertical: 8),
                ),
              ),
            ),
            const SizedBox(width: 12),
            Expanded(
              child: ElevatedButton.icon(
                onPressed: _isSubmitting ? null : _handleSave,
                icon: const Icon(Icons.check_circle_outline, color: Colors.white),
                label: MyText.bodyMedium(
                  _isSubmitting ? "Submitting..." : "Submit",
                  color: Colors.white,
                  fontWeight: 600,
                ),
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.indigo,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12),
                  ),
                  padding: const EdgeInsets.symmetric(vertical: 8),
                ),
              ),
            ),
          ],
        ),
      ],
    );
  }
}