@extends('admin::layouts.app')

@section('title', "{$template->name} — Admin")

@section('content')
<div class="d-flex align-items-center mb-4">
    <a href="{{ route('admin.businesses.templates', $business) }}" class="btn btn-sm btn-outline-secondary me-3">
        <i class="bi bi-arrow-left"></i>
    </a>
    <div class="flex-grow-1">
        <h4 class="fw-bold mb-0">{{ $template->name }}</h4>
        <p class="text-muted small mb-0">
            {{ $template->business->name ?? 'Unknown Business' }}
            &middot; {{ $template->category }} &middot; {{ $template->language }}
        </p>
    </div>
    <div class="d-flex align-items-center gap-2">
        <span class="badge bg-{{ $template->statusBadgeClass() }}-subtle text-{{ $template->statusBadgeClass() }}-emphasis fs-6 text-uppercase px-3 py-2">
            {{ $template->status }}
        </span>
    </div>
</div>

@if ($errors->any())
    <div style="background:red;color:white;padding:10px;">
        @foreach ($errors->all() as $error)
            <div>{{ $error }}</div>
        @endforeach
    </div>
@endif

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm" role="alert">
        <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show border-0 shadow-sm" role="alert">
        <i class="bi bi-exclamation-circle me-2"></i>{{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

<div class="row g-4">

    {{-- Left: Edit form --}}
    <div class="col-lg-8">

        @if($template->status === 'REJECTED' && $template->rejection_reason)
            <div class="alert alert-danger border-0">
                <strong><i class="bi bi-x-circle me-1"></i>Rejected by Meta:</strong> {{ $template->rejection_reason }}
            </div>
        @endif

        @if($template->meta_error)
            <div class="alert alert-warning border-0 mb-4">
                <div class="d-flex justify-content-between align-items-start mb-2">
                    <strong><i class="bi bi-exclamation-triangle me-1"></i>Last Meta API Error</strong>
                </div>
                <p class="mb-2">"{{ $template->meta_error['message'] ?? 'Unknown error' }}"</p>
                <div class="row g-1 small text-muted mb-2">
                    @if(!empty($template->meta_error['type']))
                        <div class="col-auto"><span class="fw-semibold">Type:</span> {{ $template->meta_error['type'] }}</div>
                    @endif
                    @if(!empty($template->meta_error['code']))
                        <div class="col-auto ms-3"><span class="fw-semibold">Code:</span> {{ $template->meta_error['code'] }}{{ !empty($template->meta_error['error_subcode']) ? ' / ' . $template->meta_error['error_subcode'] : '' }}</div>
                    @endif
                    @if(!empty($template->meta_error['fbtrace_id']))
                        <div class="col-12"><span class="fw-semibold">Trace ID:</span> <code>{{ $template->meta_error['fbtrace_id'] }}</code></div>
                    @endif
                    @if(!empty($template->meta_error['error_user_msg']))
                        <div class="col-12"><span class="fw-semibold">Detail:</span> {{ $template->meta_error['error_user_msg'] }}</div>
                    @endif
                </div>
                <a class="small" data-bs-toggle="collapse" href="#metaRawError">Show full response</a>
                <div class="collapse mt-2" id="metaRawError">
                    <pre class="bg-dark text-light p-2 rounded small mb-0" style="font-size:0.75rem;">{{ json_encode($template->meta_error, JSON_PRETTY_PRINT) }}</pre>
                </div>
            </div>
        @endif

        <form action="{{ route('admin.businesses.templates.update', [$business, $template]) }}" method="POST">
            @csrf
            @method('PUT')

            {{-- Basic Info --}}
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-transparent border-bottom fw-semibold">Basic Info</div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Template Name</label>
                        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                               value="{{ old('name', $template->name) }}"
                               >
                        @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Category</label>
                            <select name="category" class="form-select @error('category') is-invalid @enderror">
                                @foreach(['MARKETING', 'UTILITY', 'AUTHENTICATION'] as $cat)
                                    <option value="{{ $cat }}" {{ old('category', $template->category) === $cat ? 'selected' : '' }}>{{ $cat }}</option>
                                @endforeach
                            </select>
                            @error('category')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Language</label>
                            <select name="language" class="form-select @error('language') is-invalid @enderror">
                                @foreach([
                                    'en'    => 'English',
                                    'en_US' => 'English (US)',
                                    'en_GB' => 'English (UK)',
                                    'hi'    => 'Hindi',
                                    'mr'    => 'Marathi',
                                    'gu'    => 'Gujarati',
                                    'ta'    => 'Tamil',
                                    'te'    => 'Telugu',
                                    'bn'    => 'Bengali',
                                    'kn'    => 'Kannada',
                                    'ml'    => 'Malayalam',
                                    'pa'    => 'Punjabi',
                                    'ur'    => 'Urdu',
                                ] as $code => $label)
                                    <option value="{{ $code }}" {{ old('language', $template->language) === $code ? 'selected' : '' }}>{{ $label }} ({{ $code }})</option>
                                @endforeach
                            </select>
                            @error('language')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                </div>
            </div>

            {{-- Header --}}
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-transparent border-bottom fw-semibold">Header <span class="text-muted fw-normal small">— optional TEXT</span></div>
                <div class="card-body">
                    <input type="text" name="header_text" class="form-control @error('header_text') is-invalid @enderror"
                           value="{{ old('header_text', $template->header_text) }}" maxlength="60">
                    @error('header_text')<div class="invalid-feedback">{{ $message }}</div>@enderror

                    @if(!empty($template->header_examples))
                        <div class="mt-2">
                            <label class="form-label small text-muted">Example for @{{1}}</label>
                            <input type="text" name="header_examples[]" class="form-control form-control-sm"
                                   value="{{ old('header_examples.0', $template->header_examples[0] ?? '') }}" maxlength="60">
                        </div>
                    @endif
                </div>
            </div>

            {{-- Body --}}
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-transparent border-bottom fw-semibold">Body <span class="text-danger">*</span></div>
                <div class="card-body">
                    <textarea name="body" rows="5" class="form-control @error('body') is-invalid @enderror"
                              maxlength="1024">{{ old('body', $template->body) }}</textarea>
                    @error('body')<div class="invalid-feedback">{{ $message }}</div>@enderror

                    @if(!empty($template->body_examples))
                        <div class="mt-3">
                            <p class="small text-muted mb-2">Variable examples:</p>
                            @foreach($template->body_examples as $i => $ex)
                                <div class="mb-2">
                                    <label class="form-label small text-muted mb-1">Example for &#123;&#123;{{ $i + 1 }}&#125;&#125;</label>
                                    <input type="text" name="body_examples[]" class="form-control form-control-sm"
                                           value="{{ old("body_examples.$i", $ex) }}" maxlength="255">
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>

            {{-- Footer --}}
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-transparent border-bottom fw-semibold">Footer <span class="text-muted fw-normal small">— optional</span></div>
                <div class="card-body">
                    <input type="text" name="footer" class="form-control @error('footer') is-invalid @enderror"
                           value="{{ old('footer', $template->footer) }}" maxlength="60">
                    @error('footer')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>

            {{-- Buttons --}}
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-transparent border-bottom fw-semibold">Buttons <span class="text-muted fw-normal small">— optional, max 3</span></div>
                <div class="card-body">
                    <div id="buttons-list">
                        @forelse($template->buttons ?? [] as $i => $btn)
                            <div class="border rounded p-3 mb-2 btn-row" data-index="{{ $i }}">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span class="small fw-semibold text-muted">Button {{ $i + 1 }}</span>
                                    <button type="button" class="btn btn-sm btn-outline-danger btn-remove-row py-0 px-2">×</button>
                                </div>
                                <div class="row g-2">
                                    <div class="col-md-4">
                                        <label class="form-label small">Type</label>
                                        <select name="buttons[{{ $i }}][type]" class="form-select form-select-sm btn-type-select">
                                            <option value="QUICK_REPLY" {{ ($btn['type'] ?? '') === 'QUICK_REPLY' ? 'selected' : '' }}>Quick Reply</option>
                                            <option value="URL" {{ ($btn['type'] ?? '') === 'URL' ? 'selected' : '' }}>URL</option>
                                            <option value="PHONE_NUMBER" {{ ($btn['type'] ?? '') === 'PHONE_NUMBER' ? 'selected' : '' }}>Phone Number</option>
                                        </select>
                                    </div>
                                    <div class="col-md-8">
                                        <label class="form-label small">Text</label>
                                        <input type="text" name="buttons[{{ $i }}][text]" class="form-control form-control-sm"
                                               value="{{ old("buttons.$i.text", $btn['text'] ?? '') }}" maxlength="25">
                                    </div>
                                    <div class="col-12 url-field" style="{{ ($btn['type'] ?? '') !== 'URL' ? 'display:none;' : '' }}">
                                        <label class="form-label small">URL</label>
                                        <input type="text" name="buttons[{{ $i }}][url]"
                                            class="form-control form-control-sm @error("buttons.$i.url") is-invalid @enderror"
                                            value="{{ old("buttons.$i.url", $btn['url'] ?? '') }}" maxlength="2000">
                                        @error("buttons.$i.url")
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-12 phone-field" style="{{ ($btn['type'] ?? '') !== 'PHONE_NUMBER' ? 'display:none;' : '' }}">
                                        <label class="form-label small">Phone Number</label>
                                        <input type="text" name="buttons[{{ $i }}][phone_number]"
                                            class="form-control form-control-sm @error("buttons.$i.phone_number") is-invalid @enderror"
                                            value="{{ old("buttons.$i.phone_number", $btn['phone_number'] ?? '') }}" maxlength="20">
                                        <div class="form-text">Include country code, e.g. +919876543210</div>
                                        @error("buttons.$i.phone_number")
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        @empty
                            <p class="text-muted small mb-2" id="no-buttons-msg">No buttons on this template.</p>
                        @endforelse
                    </div>

                    <button type="button" id="add-btn-button" class="btn btn-sm btn-outline-primary mt-1"
                            {{ count($template->buttons ?? []) >= 3 ? 'disabled' : '' }}>
                        <i class="bi bi-plus-lg me-1"></i>Add Button
                    </button>

                    {{-- Template for new button rows (hidden) --}}
                    <template id="button-row-template">
                        <div class="border rounded p-3 mb-2 btn-row" data-index="__i__">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="small fw-semibold text-muted btn-label">Button __n__</span>
                                <button type="button" class="btn btn-sm btn-outline-danger btn-remove-row py-0 px-2">×</button>
                            </div>
                            <div class="row g-2">
                                <div class="col-md-4">
                                    <label class="form-label small">Type</label>
                                    <select name="buttons[__i__][type]" class="form-select form-select-sm btn-type-select">
                                        <option value="QUICK_REPLY" selected>Quick Reply</option>
                                        <option value="URL">URL</option>
                                        <option value="PHONE_NUMBER">Phone Number</option>
                                    </select>
                                </div>
                                <div class="col-md-8">
                                    <label class="form-label small">Text</label>
                                    <input type="text" name="buttons[__i__][text]" class="form-control form-control-sm" maxlength="25">
                                </div>
                                <div class="col-12 url-field" style="display:none;">
                                    <label class="form-label small">URL</label>
                                    <input type="text" name="buttons[__i__][url]" class="form-control form-control-sm" maxlength="2000">
                                </div>
                                <div class="col-12 phone-field" style="display:none;">
                                    <label class="form-label small">Phone Number</label>
                                    <input type="text" name="buttons[__i__][phone_number]" class="form-control form-control-sm" maxlength="20">
                                    <div class="form-text">Include country code, e.g. +919876543210</div>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>

            <script>
            (function () {
                const list     = document.getElementById('buttons-list');
                const addBtn   = document.getElementById('add-btn-button');
                const tpl      = document.getElementById('button-row-template');

                function reindex() {
                    list.querySelectorAll('.btn-row').forEach(function (row, i) {
                        row.dataset.index = i;
                        row.querySelector('.btn-label') && (row.querySelector('.btn-label').textContent = 'Button ' + (i + 1));
                        row.querySelectorAll('[name]').forEach(function (el) {
                            el.name = el.name.replace(/buttons\[\d+\]/, 'buttons[' + i + ']');
                        });
                    });
                }

                function updateAddBtn() {
                    const count = list.querySelectorAll('.btn-row').length;
                    addBtn.disabled = count >= 3;
                    let msg = document.getElementById('no-buttons-msg');
                    if (count === 0) {
                        if (!msg) {
                            msg = document.createElement('p');
                            msg.id = 'no-buttons-msg';
                            msg.className = 'text-muted small mb-2';
                            msg.textContent = 'No buttons on this template.';
                            list.prepend(msg);
                        }
                    } else if (msg) {
                        msg.remove();
                    }
                }

                function toggleButtonFields(select) {
                    const row        = select.closest('.btn-row');
                    const urlField   = row.querySelector('.url-field');
                    const phoneField = row.querySelector('.phone-field');
                    urlField.style.display   = select.value === 'URL'          ? '' : 'none';
                    phoneField.style.display = select.value === 'PHONE_NUMBER' ? '' : 'none';
                }

                addBtn.addEventListener('click', function () {
                    const clone = tpl.content.cloneNode(true);
                    list.appendChild(clone);
                    reindex();
                    updateAddBtn();
                    list.querySelectorAll('.btn-row:last-child .btn-type-select').forEach(toggleButtonFields);
                });

                list.addEventListener('click', function (e) {
                    if (e.target.closest('.btn-remove-row')) {
                        e.target.closest('.btn-row').remove();
                        reindex();
                        updateAddBtn();
                    }
                });

                list.addEventListener('change', function (e) {
                    if (e.target.classList.contains('btn-type-select')) {
                        toggleButtonFields(e.target);
                    }
                });

                // init on load
                list.querySelectorAll('.btn-type-select').forEach(toggleButtonFields);
                updateAddBtn();
            })();
            </script>

            {{-- Admin Notes --}}
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-transparent border-bottom fw-semibold">Admin Notes</div>
                <div class="card-body">
                    <textarea name="admin_notes" rows="3" class="form-control"
                              placeholder="Internal notes — not visible to the business.">{{ old('admin_notes', $template->admin_notes) }}</textarea>
                </div>
            </div>

            <div class="d-flex gap-2 justify-content-end pb-4">
                <a href="{{ route('admin.businesses.templates', $business) }}" class="btn btn-outline-secondary">Cancel</a>
                <button type="submit" class="btn btn-primary">Save Changes</button>
            </div>
        </form>
    </div>

    {{-- Right: Preview + Actions + Meta info --}}
    <div class="col-lg-4">

        {{-- WhatsApp Preview --}}
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-transparent border-bottom fw-semibold">Preview</div>
            <div class="card-body">
                <div class="p-3 rounded-3" style="background: #dcf8c6; font-size: 0.9rem; min-height: 80px; word-break: break-word;">
                    @if($template->header_text)
                        <div class="fw-bold mb-1" style="color: #111827;">{{ $template->header_text }}</div>
                    @endif
                    <div style="color: #111827; white-space: pre-line;">{{ $template->body }}</div>
                    @if($template->footer)
                        <div class="small mt-1" style="color: #6b7280;">{{ $template->footer }}</div>
                    @endif
                </div>
                @if(!empty($template->buttons))
                    <div class="d-grid gap-1 mt-2">
                        @foreach($template->buttons as $button)
                            <div class="btn btn-sm btn-outline-secondary text-truncate" style="pointer-events:none;">
                                @if($button['type'] === 'QUICK_REPLY')
                                    <i class="bi bi-reply me-1"></i>
                                @else
                                    <i class="bi bi-box-arrow-up-right me-1"></i>
                                @endif
                                {{ $button['text'] }}
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>

        {{-- Submit to Meta --}}
        @if($template->status === 'DRAFT')
            <div class="card border-0 shadow-sm mb-4 border-success">
                <div class="card-header bg-transparent border-bottom fw-semibold text-success">
                    <i class="bi bi-send me-1"></i> Submit to Meta
                </div>
                <div class="card-body">
                    <p class="small text-muted mb-3">
                        Once you're satisfied with this template, submit it to Meta's WhatsApp Cloud API
                        using the business's credentials. The status will change to <strong>PENDING</strong>.
                    </p>
                    <form action="{{ route('admin.businesses.templates.submit', [$business, $template]) }}" method="POST"
                          onsubmit="return confirm('Submit this template to Meta on behalf of {{ addslashes($template->business->name ?? 'this business') }}?')">
                        @csrf
                        <button type="submit" class="btn btn-success w-100">
                            <i class="bi bi-send me-1"></i> Submit to Meta
                        </button>
                    </form>
                </div>
            </div>
        @endif

        {{-- Refresh status --}}
        @if($template->status !== 'DRAFT')
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-transparent border-bottom fw-semibold">Sync Status</div>
                <div class="card-body">
                    <p class="small text-muted mb-3">Fetch the latest approval status from Meta.</p>
                    <form action="{{ route('admin.businesses.templates.refresh', [$business, $template]) }}" method="POST">
                        @csrf
                        <button type="submit" class="btn btn-outline-primary w-100">
                            <i class="bi bi-arrow-clockwise me-1"></i> Refresh from Meta
                        </button>
                    </form>
                </div>
            </div>
        @endif

        {{-- Meta Details --}}
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-transparent border-bottom fw-semibold">Details</div>
            <div class="card-body">
                <dl class="row small mb-0">
                    <dt class="col-5 text-muted">Business</dt>
                    <dd class="col-7">{{ $template->business->name ?? '—' }}</dd>

                    <dt class="col-5 text-muted">Category</dt>
                    <dd class="col-7">{{ $template->category }}</dd>

                    <dt class="col-5 text-muted">Language</dt>
                    <dd class="col-7">{{ $template->language }}</dd>

                    @if($template->meta_template_id)
                        <dt class="col-5 text-muted">Meta ID</dt>
                        <dd class="col-7 font-monospace small">{{ $template->meta_template_id }}</dd>
                    @endif

                    @if($template->submitted_at)
                        <dt class="col-5 text-muted">Submitted</dt>
                        <dd class="col-7">{{ $template->submitted_at->format('d M Y, H:i') }}</dd>
                    @endif

                    <dt class="col-5 text-muted">Created</dt>
                    <dd class="col-7">{{ $template->created_at->format('d M Y') }}</dd>
                </dl>
            </div>
        </div>

    </div>
</div>
@endsection