@extends('layouts.app')

@section('title', 'WhatsApp Templates')

@push('style')
    <style>
        .tpl-card { border: 1px solid #e9ecef; border-radius: 12px; background: #fff; transition: box-shadow .2s, border-color .2s; }
        .tpl-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); border-color: #25D366; }
        .tpl-category-badge { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
        .tpl-preview { background: #f0f2f5; border-radius: 10px; padding: 12px 14px; }
        .tpl-bubble { background: #dcf8c6; border-radius: 10px 0 10px 10px; padding: 10px 12px; font-size: 13px; line-height: 1.6; color: #1a1a2e; }
        .tpl-bubble-cta { border-top: 1px solid #c8e6c9; margin-top: 8px; padding-top: 8px; text-align: center; font-size: 13px; color: #00a884; font-weight: 600; }
    </style>
@endpush

@section('content')
    @php
        $routePrefix = strtolower(auth()->user()->role->name);
        $canManage   = auth()->user()->hasPermissionName('whatsapp.templates.manage');
    @endphp

    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-4">
        <div>
            <h3 class="mb-0"><span class="text-success me-2"><i class="ri-file-list-3-line"></i></span>Message Templates</h3>
            <span class="text-secondary fs-13">Manage pre-approved WhatsApp Business message templates.</span>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route($routePrefix . '.whatsapp.index') }}"
               class="btn btn-outline-secondary py-1 px-3 fs-14 fw-medium rounded-3">
                <i class="ri-arrow-left-line me-1"></i> Back
            </a>
            @if($canManage)
                <button class="btn btn-primary py-1 px-3 fs-14 fw-medium rounded-3"
                        data-bs-toggle="modal" data-bs-target="#createTplModal">
                    <i class="ri-add-line me-1"></i> New Template
                </button>
            @endif
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show">{{ session('success') }}<button class="btn-close" data-bs-dismiss="alert"></button></div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger"><ul class="mb-0 ps-3">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div>
    @endif

    {{-- Category Filter --}}
    <div class="card bg-white border-0 rounded-3 mb-4">
        <div class="card-body p-3 d-flex flex-wrap gap-2 align-items-center">
            <span class="text-secondary fs-13 me-2">Filter by category:</span>
            @foreach(['All', 'Marketing', 'Utility', 'Authentication'] as $cat)
                <button type="button"
                        class="btn btn-sm {{ $loop->first ? 'btn-success' : 'btn-outline-secondary' }} rounded-pill category-filter"
                        data-cat="{{ $cat }}">{{ $cat }}</button>
            @endforeach
        </div>
    </div>

    @if($templates->isEmpty())
        <div class="card bg-white border-0 rounded-3">
            <div class="card-body text-center py-5 text-muted">
                <i class="ri-file-list-3-line d-block mb-2" style="font-size:48px;opacity:.3;"></i>
                <p class="mb-1 fw-semibold">No templates yet</p>
                <p class="fs-13">
                    @if($canManage)
                        Create your first template to get started. Templates must be approved by Meta before use.
                    @else
                        No approved templates available. Contact your company admin to add templates.
                    @endif
                </p>
            </div>
        </div>
    @else
        <div class="row g-4" id="tpl-grid">
            @foreach($templates as $tpl)
                <div class="col-md-6 col-xxl-4 tpl-item" data-cat="{{ $tpl->category }}">
                    <div class="tpl-card p-4 h-100 d-flex flex-column">
                        {{-- Header --}}
                        <div class="d-flex justify-content-between align-items-start mb-3">
                            <div>
                                <h6 class="fw-bold mb-1 fs-14">{{ $tpl->name }}</h6>
                                <span class="badge tpl-category-badge
                            @if($tpl->category === 'Marketing') bg-primary-subtle text-primary
                            @elseif($tpl->category === 'Utility') bg-info-subtle text-info
                            @else bg-secondary-subtle text-secondary
                            @endif">
                            {{ $tpl->category }}
                        </span>
                            </div>
                            @if($tpl->status === 'APPROVED')
                                <span class="badge bg-success-subtle text-success fs-11">
                            <i class="ri-checkbox-circle-line me-1"></i>Approved
                        </span>
                            @elseif($tpl->status === 'PENDING')
                                <span class="badge bg-warning-subtle text-warning fs-11">
                            <i class="ri-time-line me-1"></i>Pending
                        </span>
                            @else
                                <span class="badge bg-danger-subtle text-danger fs-11"
                                      title="{{ $tpl->rejection_reason }}">
                            <i class="ri-close-circle-line me-1"></i>Rejected
                        </span>
                            @endif
                        </div>

                        {{-- Preview Bubble --}}
                        <div class="tpl-preview mb-3 flex-grow-1">
                            <div class="tpl-bubble">
                                {{ $tpl->body }}
                                @if($tpl->cta_text)
                                    <div class="tpl-bubble-cta">
                                        <i class="ri-external-link-line me-1"></i>{{ $tpl->cta_text }}
                                    </div>
                                @endif
                            </div>
                        </div>

                        {{-- Actions --}}
                        <div class="d-flex gap-2 mt-auto">
                            @if($tpl->status === 'APPROVED')
                                <button type="button"
                                        class="btn btn-sm btn-outline-success flex-grow-1 use-tpl-btn"
                                        data-body="{{ $tpl->body }}"
                                        title="Copy text to clipboard to use in a chat">
                                    <i class="ri-send-plane-line me-1"></i>Use Template
                                </button>
                            @else
                                <button type="button" class="btn btn-sm btn-outline-secondary flex-grow-1" disabled>
                                    <i class="ri-time-line me-1"></i>{{ $tpl->status === 'PENDING' ? 'Awaiting Approval' : 'Rejected' }}
                                </button>
                            @endif

                            @if($canManage)
                                <form method="POST"
                                      action="{{ route($routePrefix . '.whatsapp.templates.destroy', $tpl) }}"
                                      onsubmit="return confirm('Delete template \'{{ $tpl->name }}\'? This cannot be undone.')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-outline-danger" title="Delete">
                                        <i class="ri-delete-bin-line"></i>
                                    </button>
                                </form>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif

    {{-- Create Template Modal --}}
    @if($canManage)
        <div class="modal fade" id="createTplModal" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content border-0 rounded-4 shadow">
                    <div class="modal-header border-0 pb-0">
                        <h5 class="modal-title fw-bold">Create Message Template</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-info fs-13 py-2 mb-4">
                            <i class="ri-information-line me-1"></i>
                            Templates must be approved by <strong>Meta / WhatsApp Business</strong> before use. Approval typically takes 1–24 hours.
                        </div>

                        <form method="POST" action="{{ route($routePrefix . '.whatsapp.templates.store') }}">
                            @csrf
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">Template Name <span class="text-danger">*</span></label>
                                    <input type="text" name="name" class="form-control"
                                           placeholder="e.g. invoice_notification" required
                                           pattern="[a-z0-9_]+" title="Lowercase letters, numbers, underscores only">
                                    <div class="form-text">Lowercase, numbers & underscores only. No spaces.</div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">Category <span class="text-danger">*</span></label>
                                    <select name="category" class="form-select" required>
                                        <option value="Marketing">Marketing</option>
                                        <option value="Utility" selected>Utility</option>
                                        <option value="Authentication">Authentication</option>
                                    </select>
                                </div>
                                <div class="col-12">
                                    <label class="form-label fw-semibold">Body Text <span class="text-danger">*</span></label>
                                    <textarea name="body" id="tpl-body-input" class="form-control" rows="5"
                                              placeholder="Hi {{1}}, your invoice {{2}} for ₹{{3}} is due on {{4}}.&#10;&#10;Use {{1}}, {{2}}, etc. for dynamic variables." required></textarea>
                                    <div class="form-text">Use <code>{{1}}</code>, <code>{{2}}</code> for dynamic values (name, amount, date, etc.)</div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">CTA Button Text <span class="text-secondary fw-normal">(optional)</span></label>
                                    <input type="text" name="cta_text" class="form-control" placeholder="e.g. View Invoice">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">CTA URL <span class="text-secondary fw-normal">(optional)</span></label>
                                    <input type="url" name="cta_url" class="form-control" placeholder="https://…">
                                </div>

                                {{-- Live Preview --}}
                                <div class="col-12">
                                    <label class="form-label fw-semibold">Live Preview</label>
                                    <div style="background:#f0f2f5; border-radius:10px; padding:14px;">
                                        <div class="tpl-bubble" id="tpl-live-preview" style="max-width:420px;display:inline-block;">
                                            <em class="text-muted fs-13">Start typing to see a preview…</em>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12 d-flex gap-2 justify-content-end">
                                    <button type="button" class="btn btn-outline-secondary px-4" data-bs-dismiss="modal">Cancel</button>
                                    <button type="submit" class="btn btn-primary px-4">
                                        <i class="ri-send-plane-line me-1"></i>Submit for Approval
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endif

@endsection

@push('script')
    <script>
        $(function () {
            // Category filter
            $('.category-filter').on('click', function () {
                $('.category-filter').removeClass('btn-success').addClass('btn-outline-secondary');
                $(this).removeClass('btn-outline-secondary').addClass('btn-success');
                const cat = this.dataset.cat;
                $('.tpl-item').each(function () {
                    $(this).toggle(cat === 'All' || $(this).data('cat') === cat);
                });
            });

            // Live preview in create modal
            $('#tpl-body-input').on('input', function () {
                const val = this.value.replace(/\n/g, '<br>');
                $('#tpl-live-preview').html(val || '<em class="text-muted fs-13">Start typing to see a preview…</em>');
            });

            // "Use Template" — copy to clipboard
            $('.use-tpl-btn').on('click', function () {
                const body = this.dataset.body;
                if (navigator.clipboard) {
                    navigator.clipboard.writeText(body).then(() => {
                        const orig = $(this).html();
                        $(this).html('<i class="ri-check-line me-1"></i>Copied!');
                        setTimeout(() => $(this).html(orig), 2000);
                    });
                }
            });

            // Tooltips
            document.querySelectorAll('[title]').forEach(el => {
                if (el.dataset.bsToggle !== 'tooltip') return;
                new bootstrap.Tooltip(el);
            });
        });
    </script>
@endpush