<?php





function simplyTranslateButton(string $fieldId, string $fieldLabel, string $fieldType, array $translations, string $inputName): string
{
    $available = Translator::available();
    if (count($available) < 2) {
        return '';
    }

    $defaultCode = Translator::getDefaultCode();
    $hasTranslations = false;
    foreach ($translations as $code => $val) {
        if ($code !== $defaultCode && $val !== '') {
            $hasTranslations = true;
            break;
        }
    }

    $safeId = htmlspecialchars($fieldId);
    $safeLabel = htmlspecialchars($fieldLabel);
    $isTextarea = ($fieldType === 'textarea');

    $html = '';

     
    $html .= '<button type="button" onclick="openTranslationModal(\'' . $safeId . '\')" '
           . 'class="tl-globe-btn' . ($hasTranslations ? ' tl-globe-btn--active' : '') . '" '
           . 'title="Translate into other languages" id="tl-btn-' . $safeId . '">'
           . '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">'
           . '<circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/>'
           . '<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>'
           . '</svg></button>';

     
    $html .= '<div class="tl-overlay" id="tl-modal-' . $safeId . '">';
    $html .= '<div class="tl-modal">';

     
    $html .= '<div class="tl-modal__header">';
    $html .= '<div class="tl-modal__title">';
    $html .= '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0;color:#6366f1;">'
           . '<circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/>'
           . '<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>'
           . '</svg>';
    $html .= '<span>Translate: ' . $safeLabel . '</span>';
    $html .= '</div>';
    $html .= '<button type="button" onclick="closeTranslationModal(\'' . $safeId . '\')" class="tl-modal__close">'
           . '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>'
           . '</button>';
    $html .= '</div>';

     
    $html .= '<div class="tl-modal__body">';
    foreach ($available as $lang) {
        $code = $lang['code'];
        $isDefault = ($code === $defaultCode);
        $flag = Translator::flagCode($code);
        $name = htmlspecialchars($lang['name']);
        $native = htmlspecialchars($lang['native_name']);
        $dir = ($lang['direction'] ?? 'ltr') === 'rtl' ? 'rtl' : 'ltr';
        $val = htmlspecialchars($translations[$code] ?? '');

        $html .= '<div class="tl-lang-row">';
        $html .= '<div class="tl-lang-row__label">';
        $html .= '<span class="fi fi-' . $flag . ' fis" style="width:16px;height:16px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,0.08);flex-shrink:0;"></span>';
        $html .= '<span class="tl-lang-row__name">' . $name . '</span>';
        if ($isDefault) {
            $html .= '<span class="tl-lang-row__badge">Default</span>';
        }
        $html .= '</div>';

        if ($isDefault) {
            $html .= '<div class="tl-lang-row__note">Uses the main field value</div>';
        } else {
            if ($isTextarea) {
                $html .= '<textarea name="' . htmlspecialchars($inputName) . '[' . $code . ']" '
                       . 'rows="2" dir="' . $dir . '" '
                       . 'placeholder="Leave empty for default" '
                       . 'class="tl-lang-row__input">' . $val . '</textarea>';
            } else {
                $html .= '<input type="text" name="' . htmlspecialchars($inputName) . '[' . $code . ']" '
                       . 'value="' . $val . '" dir="' . $dir . '" '
                       . 'placeholder="Leave empty for default" '
                       . 'class="tl-lang-row__input">';
            }
        }
        $html .= '</div>';
    }
    $html .= '</div>';

     
    $html .= '<div class="tl-modal__footer">';
    $html .= '<button type="button" onclick="closeTranslationModal(\'' . $safeId . '\')" '
           . 'class="tl-modal__done">Done</button>';
    $html .= '</div>';

    $html .= '</div></div>';  

    return $html;
}



function simplyTranslateModalAssets(): void
{
    static $output = false;
    if ($output) return;
    $output = true;
    ?>
    <style>
    .tl-globe-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:7px;border:1px dashed #d1d5db;background:#fff;color:#9ca3af;cursor:pointer;transition:all .12s;flex-shrink:0;padding:0}
    .tl-globe-btn:hover{border-color:#818cf8;color:#6366f1;background:#eef2ff}
    .tl-globe-btn--active{border-style:solid;border-color:#c7d2fe;background:#eef2ff;color:#4f46e5}
    .tl-overlay{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);align-items:center;justify-content:center}
    .tl-overlay.open{display:flex}
    .tl-modal{background:#fff;border-radius:14px;width:480px;max-width:95vw;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.2);animation:tlIn .2s ease}
    @keyframes tlIn{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
    .tl-modal__header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #e5e7eb;flex-shrink:0}
    .tl-modal__title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#111827}
    .tl-modal__close{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:none;background:#f3f4f6;border-radius:7px;cursor:pointer;color:#6b7280}
    .tl-modal__close:hover{background:#e5e7eb;color:#111}
    .tl-modal__body{padding:12px 18px;overflow-y:auto;flex:1}
    .tl-lang-row{padding:10px 0;border-bottom:1px solid #f3f4f6}
    .tl-lang-row:last-child{border-bottom:none}
    .tl-lang-row__label{display:flex;align-items:center;gap:8px;margin-bottom:6px}
    .tl-lang-row__name{font-size:13px;font-weight:600;color:#374151}
    .tl-lang-row__badge{font-size:10px;font-weight:600;color:#6366f1;background:#eef2ff;padding:1px 6px;border-radius:4px}
    .tl-lang-row__note{font-size:12px;color:#9ca3af;font-style:italic}
    .tl-lang-row__input{width:100%;padding:7px 10px;border:1px solid #d1d5db;border-radius:7px;font-size:13px;outline:none;transition:border-color .12s}
    .tl-lang-row__input:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.08)}
    .tl-modal__footer{display:flex;justify-content:flex-end;padding:12px 18px;border-top:1px solid #e5e7eb;flex-shrink:0}
    .tl-modal__done{padding:7px 18px;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;border:none;background:#4f46e5;color:#fff;transition:background .12s}
    .tl-modal__done:hover{background:#4338ca}
    </style>
    <script>
    function openTranslationModal(id){
        var m=document.getElementById('tl-modal-'+id);
        if(m){m.classList.add('open');m.addEventListener('click',function(e){if(e.target===m)closeTranslationModal(id)},{once:true});}
    }
    function closeTranslationModal(id){
        var m=document.getElementById('tl-modal-'+id);
        if(m){
            m.classList.remove('open');
            
            var btn=document.getElementById('tl-btn-'+id);
            if(btn){
                var hasVal=false;
                m.querySelectorAll('.tl-lang-row__input').forEach(function(inp){if(inp.value.trim()!=='')hasVal=true;});
                btn.classList.toggle('tl-globe-btn--active',hasVal);
            }
        }
    }
    document.addEventListener('keydown',function(e){if(e.key==='Escape'){document.querySelectorAll('.tl-overlay.open').forEach(function(m){m.classList.remove('open')});}});
    </script>
    <?php
}
