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

@section('title', $template->name . ' — BizWap')

@section('content')
<div class="d-flex align-items-center mb-4">
    <a href="{{ route('business.templates.index') }}" 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->category }} &middot; {{ $template->language }}
            &middot; Created {{ $template->created_at->format('d M Y') }}
        </p>
    </div>
    <span class="badge bg-{{ $template->statusBadgeClass() }}-subtle text-{{ $template->statusBadgeClass() }}-emphasis fs-6 text-uppercase px-3 py-2">
        {{ $template->status }}
    </span>
</div>

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ 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" role="alert">
        {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

<div class="row g-4">

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

        @if($template->status === 'REJECTED' && $template->rejection_reason)
            <div class="alert alert-danger">
                <strong>Rejected by Meta:</strong> {{ $template->rejection_reason }}
            </div>
        @endif

        @if($template->meta_error)
            <div class="alert alert-warning border-0">
                <strong><i class="bi bi-exclamation-triangle me-1"></i>Last sync error from Meta</strong>
                <p class="mb-1 mt-1">"{{ $template->meta_error['message'] ?? 'Unknown error' }}"</p>
                @if(!empty($template->meta_error['fbtrace_id']))
                    <p class="small text-muted mb-1">Trace ID: <code>{{ $template->meta_error['fbtrace_id'] }}</code></p>
                @endif
                <p class="small text-muted mb-0">Contact support if this persists.</p>
            </div>
        @endif

        @if($template->status === 'DRAFT')
            <div class="alert alert-warning border-0">
                <i class="bi bi-hourglass-split me-2"></i>
                This template is a <strong>draft</strong>. Our team will review and submit it to Meta on your behalf.
            </div>
        @endif

        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-transparent border-bottom fw-semibold">Template Content</div>
            <div class="card-body">

                @if($template->header_text)
                    <div class="mb-3">
                        <p class="small text-muted mb-1 fw-semibold text-uppercase tracking-wide">Header</p>
                        <p class="mb-0">{{ $template->header_text }}</p>
                    </div>
                    <hr class="my-3">
                @endif

                <div class="mb-3">
                    <p class="small text-muted mb-1 fw-semibold text-uppercase tracking-wide">Body</p>
                    <p class="mb-0" style="white-space: pre-line;">{{ $template->body }}</p>
                </div>

                @if($template->footer)
                    <hr class="my-3">
                    <div class="mb-3">
                        <p class="small text-muted mb-1 fw-semibold text-uppercase tracking-wide">Footer</p>
                        <p class="mb-0 text-muted">{{ $template->footer }}</p>
                    </div>
                @endif

                @if(!empty($template->buttons))
                    <hr class="my-3">
                    <div>
                        <p class="small text-muted mb-2 fw-semibold text-uppercase tracking-wide">Buttons</p>
                        @foreach($template->buttons as $button)
                            <span class="badge bg-light text-dark border me-2 mb-1 px-3 py-2">
                                @if($button['type'] === 'QUICK_REPLY')
                                    <i class="bi bi-reply me-1"></i>
                                @else
                                    <i class="bi bi-link-45deg me-1"></i>
                                @endif
                                {{ $button['text'] }}
                                @if(!empty($button['url']))
                                    <span class="text-muted small ms-1">({{ $button['url'] }})</span>
                                @endif
                            </span>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>

        @if(!empty($template->body_examples) || !empty($template->header_examples))
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-transparent border-bottom fw-semibold">Variable Examples</div>
                <div class="card-body">
                    @if(!empty($template->header_examples))
                        <p class="small text-muted mb-1">Header:</p>
                        @foreach($template->header_examples as $i => $ex)
                            <span class="badge bg-secondary-subtle text-secondary-emphasis me-1">&#123;&#123;{{ $i + 1 }}&#125;&#125; = {{ $ex }}</span>
                        @endforeach
                    @endif
                    @if(!empty($template->body_examples))
                        <p class="small text-muted mt-2 mb-1">Body:</p>
                        @foreach($template->body_examples as $i => $ex)
                            <span class="badge bg-secondary-subtle text-secondary-emphasis me-1">&#123;&#123;{{ $i + 1 }}&#125;&#125; = {{ $ex }}</span>
                        @endforeach
                    @endif
                </div>
            </div>
        @endif

    </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>

        @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">
                        Check if Meta has approved or updated your template status.
                    </p>
                    <form action="{{ route('business.templates.refresh', $template->id) }}" method="POST">
                        @csrf
                        <button type="submit" class="btn btn-outline-primary w-100">
                            <i class="bi bi-arrow-clockwise me-1"></i> Refresh Status
                        </button>
                    </form>
                </div>
            </div>
        @endif

        <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">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