import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:html/parser.dart' as html_parser;
import 'package:manager_api_new/api.dart';
import 'package:manager_app/Components/multi_input_modal.dart';
import 'package:manager_app/Components/multi_string_input_html_modal.dart';
import 'package:manager_app/Models/managerContext.dart';
import 'package:manager_app/app_context.dart';
import 'package:manager_app/constants.dart';
import 'package:provider/provider.dart';
import 'package:auto_size_text/auto_size_text.dart';

class MultiStringInputContainer extends StatelessWidget {
  final Color color;
  final String label;
  final String modalLabel;
  final List<TranslationDTO> initialValue;
  final Function(List<TranslationDTO>) onGetResult;
  final int maxLines;
  final bool isTitle;
  final List<ResourceType>? resourceTypes;
  final bool isHTML;
  final double fontSize;
  final bool isMandatory;
  final bool showPreview;

  const MultiStringInputContainer({
    Key? key,
    this.color = kSecond,
    required this.label,
    required this.modalLabel,
    required this.initialValue,
    required this.onGetResult,
    required this.maxLines,
    required this.isTitle,
    this.resourceTypes,
    this.isHTML = false,
    this.fontSize = 18,
    this.isMandatory = true,
    this.showPreview = false,
  }) : super(key: key);

  String _plainTextPreview(String htmlOrText) {
    if (htmlOrText.trim().isEmpty) return "";
    try {
      final doc = html_parser.parse(htmlOrText);
      final text = (doc.body?.text ?? htmlOrText).trim();
      return text.isEmpty ? htmlOrText.trim() : text;
    } catch (_) {
      return htmlOrText;
    }
  }

  @override
  Widget build(BuildContext context) {
    final appContext = Provider.of<AppContext>(context);
    final managerAppContext = appContext.getContext();

    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Align(
          alignment: AlignmentDirectional.centerStart,
          child: Text(
            label,
            style: TextStyle(
              fontWeight: FontWeight.w400,
              fontSize: fontSize,
            ),
          ),
        ),
        const SizedBox(height: 8, width: 10),
        Container(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
          /*decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(12),
            border: Border.all(color: Colors.grey.shade400, width: 1.2),
          ),*/
          child: InkWell(
            onTap: () {
              List<TranslationDTO> newValues = [];
              List<TranslationDTO> initials = initialValue;

              // Préparer les valeurs pour toutes les langues
              managerAppContext.selectedConfiguration!.languages!.forEach((lang) {
                if (initials.any((iv) => iv.language == lang)) {
                  newValues.add(TranslationDTO.fromJson(
                      jsonDecode(jsonEncode(initials.firstWhere((e) => e.language == lang)))!)!);
                } else {
                  newValues.add(TranslationDTO(language: lang, value: ""));
                }
              });

              if (isHTML) {
                showMultiStringInputHTML(
                  label,
                  modalLabel,
                  isTitle,
                  initials,
                  newValues,
                  onGetResult,
                  maxLines,
                  resourceTypes,
                  context,
                  isMandatory,
                );
              } else {
                showMultiStringInput(
                  label,
                  modalLabel,
                  isTitle,
                  initials,
                  newValues,
                  onGetResult,
                  maxLines,
                  resourceTypes,
                  context,
                );
              }
            },
            child: showPreview
                ? Builder(builder: (context) {
                    final languages = managerAppContext.selectedConfiguration!.languages!;
                    final completed = initialValue
                        .where((t) => (t.value ?? "").trim().isNotEmpty)
                        .length;
                    final currentTranslation = initialValue.isNotEmpty
                        ? (initialValue.firstWhere(
                                (t) => t.language == 'FR',
                                orElse: () => initialValue.first)
                            .value ??
                            "")
                        : "";
                    final preview = _plainTextPreview(currentTranslation);
                    return Container(
                      height: 54,
                      width: 200,
                      padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
                      decoration: BoxDecoration(
                        color: color,
                        borderRadius: BorderRadius.circular(50),
                      ),
                      alignment: Alignment.centerLeft,
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            preview.isEmpty ? "Aucun texte —" : preview,
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(
                              color: kWhite,
                              fontWeight: FontWeight.w600,
                              fontSize: 13,
                              fontStyle: preview.isEmpty ? FontStyle.italic : FontStyle.normal,
                            ),
                          ),
                          const SizedBox(height: 2),
                          Text(
                            "$completed / ${languages.length} langues traduites",
                            style: const TextStyle(
                              color: kWhite,
                              fontWeight: FontWeight.w400,
                              fontSize: 11,
                            ),
                          ),
                        ],
                      ),
                    );
                  })
                : Container(
                    height: 50,
                    width: 180,
                    decoration: BoxDecoration(
                      color: color,
                      borderRadius: BorderRadius.circular(50),
                    ),
                    alignment: Alignment.center,
                    child: Text(
                      resourceTypes == null ? "Changer traductions" : "Changer ressources",
                      style: const TextStyle(
                        color: kWhite,
                        fontWeight: FontWeight.w400,
                        fontSize: 16,
                      ),
                    ),
                  ),
          )
        ),
      ],
    );
  }
}