@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(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

        <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) }}"
                               pattern="[a-z0-9_]+" title="Lowercase letters, numbers, underscores only">
                        @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</span></div>
                <div class="card-body">
                    @if(!empty($template->buttons))
                        @foreach($template->buttons as $i => $btn)
                            <div class="border rounded p-3 mb-2">
                                <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">
                                            <option value="QUICK_REPLY" {{ $btn['type'] === 'QUICK_REPLY' ? 'selected' : '' }}>Quick Reply</option>
                                            <option value="URL" {{ $btn['type'] === 'URL' ? 'selected' : '' }}>URL</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="{{ $btn['text'] }}" maxlength="25">
                                    </div>
                                    @if(!empty($btn['url']))
                                        <div class="col-12">
                                            <label class="form-label small">URL</label>
                                            <input type="text" name="buttons[{{ $i }}][url]" class="form-control form-control-sm"
                                                   value="{{ $btn['url'] }}" maxlength="2000">
                                        </div>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    @else
                        <p class="text-muted small mb-0">No buttons on this template.</p>
                    @endif
                </div>
            </div>

            {{-- 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: Actions + Meta info --}}
    <div class="col-lg-4">

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