manager-app/lib/Components/translation_input_and_resource_container.dart

import 'package:flutter/material.dart';
import 'package:manager_app/l10n/app_localizations.dart';
import 'package:flutter_quill/flutter_quill.dart';
import 'package:flutter_quill_delta_from_html/flutter_quill_delta_from_html.dart';
import 'package:manager_api_new/api.dart';
import 'package:manager_app/Components/resource_input_container.dart';
import 'package:manager_app/Helpers/quill_html_converter.dart';
import 'package:manager_app/Models/managerContext.dart' show ManagerAppContext;
import 'package:manager_app/Services/ai_translate_service.dart';
import 'package:manager_app/app_context.dart';
import 'package:manager_app/constants.dart';
import 'package:provider/provider.dart';

import 'ai_quota_hint.dart';
import 'flag_decoration.dart';
import 'message_notification.dart';

class TranslationInputAndResourceContainer extends StatefulWidget {
  TranslationInputAndResourceContainer({
    Key? key,
    required this.isTitle,
    required this.values,
    required this.newValues,
    required this.onGetResult,
    required this.maxLines,
    required this.resourceTypes,
  }) : super(key: key);

  bool isTitle;
  List<TranslationAndResourceDTO> values;
  List<TranslationAndResourceDTO> newValues;
  Function onGetResult;
  int maxLines;
  List<ResourceType>? resourceTypes;

  @override
  State<TranslationInputAndResourceContainer> createState() =>
      _TranslationInputAndResourceContainerState();
}

class _TranslationInputAndResourceContainerState
    extends State<TranslationInputAndResourceContainer> {
  late Map<String, QuillController> _controllers;

  /// Meme piege que dans `translation_input_container` : sans `focusNode` ni
  /// `scrollController`, `QuillEditor.basic` en cree de neufs a chaque
  /// construction et le champ perd le curseur des qu'un rebuild survient.
  late Map<String, FocusNode> _focusNodes;
  late Map<String, ScrollController> _editorScrollControllers;
  int _selected = 0;
  bool _isEnforcingLimit = false;
  bool _isTranslating = false;
  int _quotaRefreshToken = 0;

  @override
  void initState() {
    super.initState();
    _controllers = _buildControllers();
    _focusNodes = {
      for (final translation in widget.newValues)
        translation.language!: FocusNode(),
    };
    _editorScrollControllers = {
      for (final translation in widget.newValues)
        translation.language!: ScrollController(),
    };
  }

  static const _emptyDelta = [{'insert': '\n'}];

  List<dynamic> _htmlToDeltaJson(String html) {
    if (html.trim().isEmpty) return _emptyDelta;
    final ops = HtmlToDelta().convert(html).toJson();
    return ops.isEmpty ? _emptyDelta : ops;
  }

  Map<String, QuillController> _buildControllers() {
    final map = <String, QuillController>{};
    for (final translation in widget.newValues) {
      final html = translation.value ?? '';
      final controller = QuillController(
        document: Document.fromJson(_htmlToDeltaJson(html)),
        selection: const TextSelection.collapsed(offset: 0),
      );
      _setupListener(translation.language!, controller);
      map[translation.language!] = controller;
    }
    return map;
  }

  void _setupListener(String lang, QuillController controller) {
    controller.document.changes.listen((_) {
      if (!mounted || _isEnforcingLimit) return;
      final limit = widget.isTitle ? kTitleMaxLength : kDescriptionMaxLength;
      final plain = controller.document.toPlainText().trimRight();
      if (plain.length > limit) {
        WidgetsBinding.instance.addPostFrameCallback((_) {
          if (mounted && !_isEnforcingLimit) {
            _isEnforcingLimit = true;
            controller.undo();
            _isEnforcingLimit = false;
          }
        });
        return;
      }
      widget.newValues
          .firstWhere((e) => e.language == lang)
          .value = _controllerToHtml(controller);
    });
  }

  String _controllerToHtml(QuillController controller) {
    return quillOpsToHtml(controller.document.toDelta().toJson());
  }

  Future<void> _translateWithAI() async {
    final appContext = context.read<AppContext>().getContext() as ManagerAppContext;
    if (appContext.instanceDTO?.isAssistant != true) return;

    final source = widget.newValues.firstWhere(
      (t) => t.value != null && t.value!.trim().isNotEmpty && t.value!.trim() != '<p><br></p>',
      orElse: () => widget.newValues.first,
    );

    if (source.value == null || source.value!.trim().isEmpty) {
      showNotification(kError, kWhite, AppLocalizations.of(context)!.noSourceTextToTranslate, context, null);
      return;
    }

    final targetLangs = widget.newValues
        .where((t) => t.language != source.language)
        .map((t) => t.language!)
        .toList();

    if (targetLangs.isEmpty) return;

    setState(() => _isTranslating = true);

    try {
      final translations = await AiTranslateService.translate(
        host: appContext.host!,
        accessToken: appContext.accessToken!,
        instanceId: appContext.instanceId!,
        text: source.value!,
        sourceLang: source.language!,
        targetLangs: targetLangs,
      );

      setState(() {
        for (final translation in widget.newValues) {
          final lang = translation.language!;
          if (lang == source.language) continue;
          final translated = translations[lang];
          if (translated == null) continue;
          // On ne touche qu'au texte, pas à la ressource liée
          translation.value = translated;
          _controllers[lang]?.dispose();
          final controller = QuillController(
            document: Document.fromJson(_htmlToDeltaJson(translated)),
            selection: const TextSelection.collapsed(offset: 0),
          );
          _setupListener(lang, controller);
          _controllers[lang] = controller;
        }
      });

      showNotification(kSuccess, kWhite, AppLocalizations.of(context)!.translationApplied, context, null);
    } catch (e) {
      // Le backend renvoie un message explicite (quota dépassé, assistant désactivé…) :
      // on l'affiche tel quel plutôt qu'une erreur générique.
      final message = e is AiTranslateException
          ? e.localized(AppLocalizations.of(context)!)
          : AppLocalizations.of(context)!.aiTranslateError;
      final color = (e is AiTranslateException && e.isQuotaExceeded) ? Colors.orange : kError;
      showNotification(color, kWhite, message, context, null);
    } finally {
      setState(() {
        _isTranslating = false;
        _quotaRefreshToken++;
      });
    }
  }

  @override
  void dispose() {
    for (final c in _controllers.values) {
      c.dispose();
    }
    for (final node in _focusNodes.values) {
      node.dispose();
    }
    for (final c in _editorScrollControllers.values) {
      c.dispose();
    }
    super.dispose();
  }

  /// ⚠️ Même règle Quill que `translation_input_container` : la map de
  /// contrôleurs est bâtie une fois, tous les éditeurs restent montés dans un
  /// `IndexedStack`, et la bascule de langue ne reconstruit rien.
  @override
  Widget build(BuildContext context) {
    final l = AppLocalizations.of(context)!;

    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Flexible(
          child: SingleChildScrollView(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SizedBox(width: 132, child: _buildRail()),
                const SizedBox(width: kSpace5),
                Expanded(child: _buildPane(l)),
              ],
            ),
          ),
        ),
        _buildActionBar(l),
      ],
    );
  }

  Widget _buildRail() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        for (var index = 0; index < widget.newValues.length; index++)
          _buildRailRow(index),
      ],
    );
  }

  Widget _buildRailRow(int index) {
    final translation = widget.newValues[index];
    final lang = translation.language!;
    final isSelected = index == _selected;
    final isFilled = _isFilled(translation);

    return Padding(
      padding: const EdgeInsets.only(bottom: kSpace2),
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          borderRadius: BorderRadius.circular(kRadiusInput),
          onTap: () => setState(() => _selected = index),
          child: Container(
            padding: const EdgeInsets.symmetric(
                horizontal: kSpace3, vertical: kSpace3),
            decoration: BoxDecoration(
              color: isSelected ? kSurface : Colors.transparent,
              border: Border.all(
                  color: isSelected ? kPrimaryColor : Colors.transparent),
              borderRadius: BorderRadius.circular(kRadiusInput),
            ),
            child: Row(
              children: [
                FlagDecoration(language: lang),
                const SizedBox(width: kSpace3),
                Expanded(
                  child: Text(lang.toUpperCase(),
                      style: TextStyle(
                          fontSize: 12.5,
                          fontWeight:
                              isSelected ? FontWeight.w600 : FontWeight.w400,
                          color: kInk)),
                ),
                // Une ressource comptée à part du texte : les deux se règlent
                // langue par langue, et il faut voir les deux d'un coup d'œil.
                if (translation.resourceId != null)
                  const Padding(
                    padding: EdgeInsets.only(right: kSpace1),
                    child: Icon(Icons.attachment, size: 12, color: kInk3),
                  ),
                Container(
                  width: 8,
                  height: 8,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: isFilled ? kSuccess : Colors.transparent,
                    border: isFilled ? null : Border.all(color: kLine),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  bool _isFilled(TranslationAndResourceDTO translation) {
    final value = (translation.value ?? '').trim();
    return (value.isNotEmpty && value != '<p><br></p>') ||
        translation.resourceId != null;
  }

  Widget _buildPane(AppLocalizations l) {
    final selected = widget.newValues[_selected];
    final reference = _reference();
    final limit = widget.isTitle ? kTitleMaxLength : kDescriptionMaxLength;
    final controller = _controllers[selected.language!];
    final length =
        controller?.document.toPlainText().trimRight().length ?? 0;

    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        if (reference != null) ...[
          Container(
            padding: const EdgeInsets.symmetric(
                horizontal: kSpace4, vertical: kSpace3),
            decoration: BoxDecoration(
              color: kSurface2,
              border: Border.all(color: kLineSoft),
              borderRadius: BorderRadius.circular(kRadiusInput),
            ),
            child: Row(
              children: [
                Text(reference.language!.toUpperCase(),
                    style: const TextStyle(
                        fontSize: 10.5,
                        fontWeight: FontWeight.w600,
                        letterSpacing: 0.5,
                        color: kInk3)),
                const SizedBox(width: kSpace3),
                Expanded(
                  child: Text(_plainText(reference.value ?? ''),
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                      style: kTextSmall),
                ),
              ],
            ),
          ),
          const SizedBox(height: kSpace4),
        ],
        if (_controllers.isNotEmpty)
          IndexedStack(
            index: _selected,
            children: [
              for (final translation in widget.newValues)
                _buildEditor(translation.language!),
            ],
          ),
        if (_controllers.isNotEmpty) ...[
          const SizedBox(height: kSpace2),
          Text("$length / $limit", style: kTextHint),
          const SizedBox(height: kSpace5),
        ],
        if (widget.resourceTypes != null)
          // La ressource suit la langue affichée : c'est la seule façon de voir
          // qu'on est en train d'en régler une par langue.
          IndexedStack(
            index: _selected,
            children: [
              for (final translation in widget.newValues)
                ResourceInputContainer(
                  key: ValueKey('resource-${translation.language}'),
                  label: l.resourceToDisplayLabel,
                  initialValue: translation.resourceId,
                  inResourceTypes: widget.resourceTypes!,
                  isLanguageTab: true,
                  isSmall: true,
                  onChanged: (ResourceDTO resource) {
                    setState(() {
                      translation.resourceId = resource.id;
                      translation.resource = resource.id == null ? null : resource;
                    });
                  },
                ),
            ],
          ),
      ],
    );
  }

  TranslationAndResourceDTO? _reference() {
    final selected = widget.newValues[_selected];
    for (final translation in widget.newValues) {
      if (translation.language == selected.language) continue;
      if ((translation.value ?? '').trim().isNotEmpty) return translation;
    }
    return null;
  }

  String _plainText(String html) {
    return html
        .replaceAll(RegExp(r'<[^>]*>'), ' ')
        .replaceAll(RegExp(r'\s+'), ' ')
        .trim();
  }

  Widget _buildEditor(String lang) {
    final controller = _controllers[lang];
    if (controller == null) return const SizedBox.shrink();

    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        QuillSimpleToolbar(
          controller: controller,
          config: _buildToolbarConfig(),
        ),
        Container(
          height: widget.isTitle ? 100 : 200,
          decoration: BoxDecoration(
            color: kSurface,
            border: Border.all(color: kLine),
            borderRadius: const BorderRadius.only(
              bottomLeft: Radius.circular(kRadiusInput),
              bottomRight: Radius.circular(kRadiusInput),
            ),
          ),
          child: QuillEditor.basic(
            controller: controller,
            focusNode: _focusNodes[lang],
            scrollController: _editorScrollControllers[lang],
            config: const QuillEditorConfig(
              scrollable: true,
              expands: false,
              padding: EdgeInsets.all(8),
              autoFocus: false,
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildActionBar(AppLocalizations l) {
    final instance = context.watch<AppContext>().getContext()?.instanceDTO;
    if (instance?.isAssistant != true) return const SizedBox.shrink();

    return Padding(
      padding: const EdgeInsets.only(top: kSpace4),
      child: Row(
        children: [
          if (_isTranslating)
            const SizedBox(
                width: 18,
                height: 18,
                child: CircularProgressIndicator(strokeWidth: 2))
          else
            TextButton.icon(
              onPressed: _translateWithAI,
              icon: const Icon(Icons.auto_awesome, size: 15, color: kPrimaryColor),
              label: Text(l.translateWithAi,
                  style: const TextStyle(
                      fontSize: 13,
                      fontWeight: FontWeight.w600,
                      color: kPrimaryColor)),
            ),
          const SizedBox(width: kSpace3),
          Flexible(child: AiQuotaHint(key: ValueKey(_quotaRefreshToken))),
        ],
      ),
    );
  }

  QuillSimpleToolbarConfig _buildToolbarConfig() {
    return QuillSimpleToolbarConfig(
      showBoldButton: true,
      showItalicButton: true,
      showColorButton: true,
      showBackgroundColorButton: true,
      showListBullets: !widget.isTitle,
      showListNumbers: !widget.isTitle,
      showListCheck: false,
      showClearFormat: true,
      showUnderLineButton: false,
      showStrikeThrough: false,
      showInlineCode: false,
      showSubscript: false,
      showSuperscript: false,
      showSmallButton: false,
      showLineHeightButton: false,
      showHeaderStyle: false,
      showLink: false,
      showSearchButton: false,
      showQuote: false,
      showCodeBlock: false,
      showIndent: false,
      showAlignmentButtons: false,
      showLeftAlignment: false,
      showCenterAlignment: false,
      showRightAlignment: false,
      showJustifyAlignment: false,
      showDirection: false,
      showUndo: false,
      showRedo: false,
      showClipboardCut: false,
      showClipboardCopy: false,
      showClipboardPaste: false,
    );
  }
}