@extends('backend.layout.master-tailwind')
@section('title', __('Edit All Words'))

@section('admin_styles')
<style>
.lang-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    align-items: start;
}
@@media (max-width: 900px) { .lang-grid { grid-template-columns: 1fr; } }

/* ── String list ─────────────────────────────────── */
.lang-search {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.lang-search input {
    display: block;
    width: 100%;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    box-sizing: border-box;
}

.lang-search input:focus { outline: none; border-color: var(--accent); }

.lang-list-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 8px 16px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-3);
}

.lang-list {
    height: 480px;
    overflow-y: auto;
}

.single-string-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background .1s;
}

.single-string-wrap:last-child { border-bottom: none; }

.single-string-wrap:hover { background: var(--hover); }

.single-string-wrap.active {
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    border-left: 3px solid var(--accent);
}

.single-string-wrap .string-part,
.single-string-wrap .translated-part {
    padding: 9px 16px;
    font-size: 13px;
    color: var(--text);
    word-break: break-word;
}

.single-string-wrap .string-part {
    color: var(--text);
    border-right: 1px solid var(--border);
}

.single-string-wrap .translated-part {
    color: var(--text-2);
}

.single-string-wrap.active .string-part { color: var(--accent); }

/* ── Translate form ──────────────────────────────── */
.source-box {
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 14px;
}

.source-box .source-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-3);
    margin: 0 0 4px;
}

.source-box .source-value {
    font-size: 13px;
    color: var(--text);
    margin: 0;
    word-break: break-word;
}

.lang-field label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
    margin-bottom: 4px;
}

.lang-field textarea {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    line-height: 1.6;
    resize: vertical;
    min-height: 120px;
    box-sizing: border-box;
}

.lang-field textarea:focus { outline: none; border-color: var(--accent); }

.hint-text {
    font-size: 12px;
    color: var(--text-3);
    margin-bottom: 14px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.hint-text svg { flex-shrink: 0; margin-top: 1px; }

/* ── Add word dialog ─────────────────────────────── */
#addWordDialog {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    padding: 0;
    width: 460px;
    max-width: 96vw;
    box-shadow: 0 16px 48px rgba(0,0,0,.35);
}

#addWordDialog::backdrop { background: rgba(0,0,0,.55); }

.dlg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.dlg-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.dlg-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    font-size: 16px;
}

.dlg-close:hover { background: var(--hover); color: var(--text); }

.dlg-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dlg-field label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
    margin-bottom: 4px;
}

.dlg-field input {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    box-sizing: border-box;
}

.dlg-field input:focus { outline: none; border-color: var(--accent); }

.dlg-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
}

@@media (max-width: 600px) {
    .lang-list { height: 320px; }
    .lang-list-head .col-trans,
    .single-string-wrap .translated-part { display: none; }
    .lang-list-head,
    .single-string-wrap { grid-template-columns: 1fr; }
}
</style>
@endsection

@section('content')
<div class="page">
    <div class="page-head">
        <div>
            <h1 class="page-title">{{ __('Edit All Words') }}</h1>
            <p class="page-sub">{{ $language->name }}</p>
        </div>
        <div class="page-actions">
            @can('language-word-add')
            <button class="btn sm" onclick="document.getElementById('addWordDialog').showModal()">
                {{ __('Add New Word') }}
            </button>
            @endcan
            <button id="regenerate_source_text_btn" class="btn ghost sm">
                {{ __('Regenerate Source Texts') }}
            </button>
            <a href="{{ route('admin.languages') }}" class="btn ghost sm">{{ __('All Languages') }}</a>
        </div>
    </div>

    <x-validation.error/>

    <div class="lang-grid">

        {{-- ── String list ── --}}
        <div class="card" style="overflow:hidden">
            <div class="card-head">
                <div class="card-title">{{ __('Source Strings') }}</div>
                @php $count = is_object($all_word) ? count((array)$all_word) : count($all_word ?? []); @endphp
                <span class="tag">{{ $count }} {{ __('strings') }}</span>
            </div>

            <div class="lang-search">
                <input type="text" id="word_search" placeholder="{{ __('Search source text…') }}">
            </div>

            <div class="lang-list-head">
                <span>{{ __('Source Text') }}</span>
                <span class="col-trans">{{ __('Translation') }}</span>
            </div>

            <div class="lang-list" id="lang-list">
                @foreach((array)($all_word ?? []) as $key => $value)
                <div class="single-string-wrap">
                    <div class="string-part" data-key="{{ $key }}">{{ $key }}</div>
                    <div class="translated-part" data-trans="{{ $value }}">{{ $key === $value ? '' : $value }}</div>
                </div>
                @endforeach
            </div>
        </div>

        {{-- ── Translate form ── --}}
        <div class="card">
            <div class="card-head">
                <div class="card-title">{{ __('Translate To') }} <strong style="color:var(--accent)">{{ $language->name }}</strong></div>
            </div>
            <div class="card-body">
                <p class="hint-text">
                    <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="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
                    {{ __('Click a source string on the left to edit its translation.') }}
                </p>

                <div class="source-box" id="source-box" style="display:none">
                    <p class="source-label">{{ __('Selected source text') }}</p>
                    <p class="source-value" id="source-value"></p>
                </div>

                <form action="{{ route('admin.languages.words.update', $lang_slug) }}" method="POST" id="langauge_translate_form">
                    @csrf
                    <input type="hidden" name="type" value="{{ $type }}">
                    <input type="hidden" name="string_key">

                    <div class="lang-field" style="margin-bottom:14px">
                        <label>{{ __('Translation') }}</label>
                        <textarea name="translate_word" placeholder="{{ __('Enter translated text…') }}"></textarea>
                    </div>

                    @can('language-word-edit')
                    <button type="submit" class="btn primary" id="update-btn" disabled>
                        {{ __('Update Changes') }}
                    </button>
                    @endcan
                </form>
            </div>
        </div>

    </div>
</div>

{{-- ── Add New Word dialog ── --}}
<dialog id="addWordDialog">
    <div class="dlg-head">
        <p class="dlg-title">{{ __('Add New Translatable String') }}</p>
        <button class="dlg-close" type="button" onclick="document.getElementById('addWordDialog').close()">×</button>
    </div>
    <form action="{{ route('admin.languages.add.new.word') }}" method="post">
        @csrf
        <div class="dlg-body">
            <input type="hidden" name="lang_slug" value="{{ $lang_slug }}">
            <div class="dlg-field">
                <label>{{ __('Source String') }}</label>
                <input type="text" name="new_string" placeholder="{{ __('e.g. Welcome back') }}" required>
            </div>
            <div class="dlg-field">
                <label>{{ __('Translated String') }}</label>
                <input type="text" name="translate_string" placeholder="{{ __('Translation') }}">
            </div>
        </div>
        <div class="dlg-foot">
            <button type="button" class="btn ghost sm" onclick="document.getElementById('addWordDialog').close()">{{ __('Cancel') }}</button>
            <button type="submit" class="btn primary sm">{{ __('Add String') }}</button>
        </div>
    </form>
</dialog>
@endsection

@section('script')
<script>
(function ($) {
    'use strict';

    /* ── Click a string row ── */
    $(document).on('click', '.lang-list .single-string-wrap', function () {
        var $row   = $(this);
        var key    = $row.find('.string-part').data('key');
        var trans  = $row.find('.translated-part').data('trans');

        // Highlight active row
        $('.single-string-wrap').removeClass('active');
        $row.addClass('active');

        // Populate form
        $('#source-box').show();
        $('#source-value').text(key);
        $('#langauge_translate_form input[name="string_key"]').val(key);
        $('#langauge_translate_form textarea[name="translate_word"]').val(trans === key ? '' : trans);
        $('#update-btn').prop('disabled', false);

        // Scroll form panel into view on mobile
        if (window.innerWidth < 900) {
            document.querySelector('.lang-field textarea').scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
    });

    /* ── Search ── */
    $(document).on('keyup', '#word_search', function () {
        var q = $(this).val().toLowerCase().trim();
        $('.lang-list .single-string-wrap').each(function () {
            var text = $(this).find('.string-part').text().toLowerCase();
            $(this).toggle(!q || text.includes(q));
        });
    });

    /* ── Regenerate ── */
    $(document).on('click', '#regenerate_source_text_btn', function (e) {
        e.preventDefault();
        Swal.fire({
            title: '{{ __("Are you sure?") }}',
            text:  '{{ __("It will delete current source texts, you will lose your current translated data!") }}',
            icon:  'warning',
            showCancelButton:   true,
            confirmButtonColor: '#6366f1',
            cancelButtonColor:  '#ef4444',
            confirmButtonText:  '{{ __("Yes, Generate!") }}'
        }).then(function (result) {
            if (!result.isConfirmed) return;
            $.ajax({
                type: 'POST',
                url:  '{{ route("admin.languages.regenerate.source.texts") }}',
                data: { _token: '{{ csrf_token() }}', slug: '{{ $language->slug }}' },
                success: function () {
                    toastr.success('{{ __("Regenerate source success") }}');
                    location.reload();
                }
            });
        });
    });

    /* ── Close dialog on backdrop click ── */
    document.getElementById('addWordDialog').addEventListener('click', function (e) {
        var r = this.getBoundingClientRect();
        if (e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom) {
            this.close();
        }
    });

}(jQuery));
</script>
@endsection