@extends('layouts.main')
@section('title', 'Template: ' . $template->name)
@section('container')

<style>
    .json-viewer {
        background: #1e1e2e;
        color: #cdd6f4;
        border-radius: 8px;
        padding: 16px;
        font-size: 11.5px;
        line-height: 1.7;
        max-height: 460px;
        overflow-y: auto;
        white-space: pre-wrap;
        word-break: break-word;
        font-family: 'Consolas', 'Courier New', monospace;
    }
    .parser-viewer {
        background: #282c34;
        color: #abb2bf;
        border-radius: 8px;
        padding: 16px;
        font-size: 11px;
        line-height: 1.6;
        max-height: 460px;
        overflow-y: auto;
        white-space: pre-wrap;
        word-break: break-word;
        font-family: 'Consolas', 'Courier New', monospace;
    }
    .status-pill {
        display: inline-block; padding: 2px 10px; border-radius: 20px;
        font-size: 11px; font-weight: 600;
    }
    .s-draft    { background:#e2e3e5; color:#41464b; }
    .s-active   { background:#d1e7dd; color:#0a3622; }
    .s-archived { background:#fff3cd; color:#856404; }
    .btn-xs { padding: 2px 8px; font-size: 11px; border-radius: 4px; }
    .version-row td { font-size: 12px; vertical-align: middle; cursor: pointer; }
    .version-row:hover { background: #f8f9fa; }
    .code-header {
        display: flex; justify-content: space-between; align-items: center;
        padding: 8px 12px;
        background: #12131a;
        border-radius: 8px 8px 0 0;
        color: #cdd6f4;
        font-size: 11px;
    }
    .code-wrap .json-viewer,
    .code-wrap .parser-viewer {
        border-radius: 0 0 8px 8px;
    }
    .meta-chip {
        background: #f4f6fa;
        border: 1px solid #e0e4ec;
        border-radius: 6px;
        padding: 6px 12px;
        font-size: 12px;
        display: inline-block;
    }
</style>

@if(session('success'))
<div class="alert alert-success alert-dismissible fade show py-2 mb-2" role="alert">
    <i class="fa fa-check-circle me-1"></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 py-2 mb-2" role="alert">
    <i class="fa fa-exclamation-circle me-1"></i> {{ session('error') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<div class="row mb-3">
    <div class="col-12">
        <div class="card">
            <div class="card-header p-2" style="background:var(--secondary);">
                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <div>
                        <h4 class="card-title mb-0" style="color:#fff;">
                            <i class="fa fa-file-text-o me-2"></i>{{ $template->name }}
                        </h4>
                        @if($template->description)
                        <div style="color:rgba(255,255,255,.7);font-size:12px;">{{ $template->description }}</div>
                        @endif
                    </div>
                    <div class="d-flex gap-2 flex-wrap">
                        @php $sc = ['draft'=>'s-draft','active'=>'s-active','archived'=>'s-archived'][$template->status] ?? 's-draft'; @endphp
                        <span class="status-pill {{ $sc }}">{{ ucfirst($template->status) }}</span>
                        <span class="badge" style="background:rgba(255,255,255,.15);color:#fff;">v{{ $template->current_version }}</span>
                    </div>
                </div>
            </div>

            <div class="card-body p-2 d-flex gap-2 flex-wrap align-items-center">
                {{-- Action buttons --}}
                @if(Auth::user()->hasActionAccess('ai_report.manage') || Auth::user()->isSuperAdmin())
                    <form action="{{ route('ai-report-templates.generate-parser', $template->id) }}" method="POST">
                        @csrf
                        <button class="btn btn-sm btn-info">
                            <i class="fa fa-code me-1"></i> Generate PHP Parser
                        </button>
                    </form>
                    @if($template->status === 'draft')
                    <form action="{{ route('ai-report-templates.activate', $template->id) }}" method="POST">
                        @csrf
                        <button class="btn btn-sm btn-success">
                            <i class="fa fa-check me-1"></i> Activate Template
                        </button>
                    </form>
                    @endif
                @endif

                @if(Auth::user()->hasActionAccess('ai_report.delete') || Auth::user()->isSuperAdmin())
                <form action="{{ route('ai-report-templates.destroy', $template->id) }}" method="POST"
                      onsubmit="return confirm('Delete this template permanently?')">
                    @csrf @method('DELETE')
                    <button class="btn btn-sm btn-outline-danger">
                        <i class="fa fa-trash me-1"></i> Delete
                    </button>
                </form>
                @endif

                <a href="{{ route('ai-report-templates.index') }}" class="btn btn-sm btn-light ms-auto">
                    <i class="fa fa-arrow-left me-1"></i> All Templates
                </a>
            </div>
        </div>
    </div>
</div>

<div class="row g-3">

    {{-- ── JSON Config ──────────────────────────────────────────── --}}
    <div class="col-lg-6">
        <div class="card h-100">
            <div class="card-header p-2" style="background:var(--secondary);">
                <h6 class="mb-0" style="color:#fff;">
                    <i class="fa fa-code me-2"></i>Mapping Configuration (JSON)
                </h6>
            </div>
            <div class="card-body p-0">
                <div class="code-wrap">
                    <div class="code-header">
                        <span>v{{ $template->current_version }} — config.json</span>
                        <button class="btn btn-xs" style="background:rgba(255,255,255,.1);color:#cdd6f4;"
                                onclick="copyCode('json-viewer-main')">
                            <i class="fa fa-copy me-1"></i> Copy
                        </button>
                    </div>
                    <pre class="json-viewer mb-0" id="json-viewer-main">{{ json_encode($template->config_json, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
                </div>
            </div>
        </div>
    </div>

    {{-- ── PHP Parser ───────────────────────────────────────────── --}}
    <div class="col-lg-6">
        @php $latestV = $template->getLatestVersion(); @endphp
        <div class="card h-100">
            <div class="card-header p-2" style="background:var(--secondary);">
                <div class="d-flex justify-content-between align-items-center">
                    <h6 class="mb-0" style="color:#fff;">
                        <i class="fa fa-file-code-o me-2"></i>Generated PHP Parser
                    </h6>
                    @if($latestV && $latestV->hasParser())
                    <button class="btn btn-xs" style="background:rgba(255,255,255,.1);color:#cdd6f4;"
                            onclick="copyCode('parser-viewer-main')">
                        <i class="fa fa-copy me-1"></i> Copy
                    </button>
                    @endif
                </div>
            </div>
            <div class="card-body p-0">
                @if($latestV && $latestV->hasParser())
                <div class="code-wrap">
                    <div class="code-header">
                        <span>
                            <i class="fa fa-check-circle text-success me-1"></i>
                            {{ $latestV->parser_class_name }}
                        </span>
                        <span style="color:rgba(255,255,255,.4);">v{{ $latestV->version_number }}</span>
                    </div>
                    <pre class="parser-viewer mb-0" id="parser-viewer-main">{{ $latestV->generated_parser_code }}</pre>
                </div>
                @else
                <div class="text-center text-muted py-5">
                    <i class="fa fa-code fa-3x mb-3 d-block" style="color:#ddd;"></i>
                    <p class="mb-1 fw-semibold">No PHP parser generated yet</p>
                    <p class="small mb-3">The parser lets you run this report without calling OpenAI.</p>
                    @if(Auth::user()->hasActionAccess('ai_report.manage') || Auth::user()->isSuperAdmin())
                    <form action="{{ route('ai-report-templates.generate-parser', $template->id) }}" method="POST">
                        @csrf
                        <button class="btn btn-sm btn-info">
                            <i class="fa fa-code me-1"></i> Generate Parser Now
                        </button>
                    </form>
                    @endif
                </div>
                @endif
            </div>
        </div>
    </div>

</div>

{{-- ── Version History ──────────────────────────────────────── --}}
<div class="row mt-3">
    <div class="col-12">
        <div class="card">
            <div class="card-header p-2" style="background:var(--secondary);">
                <h6 class="mb-0" style="color:#fff;">
                    <i class="fa fa-history me-2"></i>Version History
                </h6>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive active-projects">
                    <table class="table table-hover mb-0">
                        <thead>
                            <tr>
                                <th>Version</th>
                                <th>Changelog</th>
                                <th>PHP Parser</th>
                                <th>Created By</th>
                                <th>Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($template->versions as $v)
                            <tr class="version-row">
                                <td>
                                    <span class="badge" style="background:var(--secondary);color:#fff;">
                                        v{{ $v->version_number }}
                                    </span>
                                    @if($v->version_number === $template->current_version)
                                    <span class="badge" style="background:#e8f5e9;color:#2e7d32;font-size:10px;">Current</span>
                                    @endif
                                </td>
                                <td>{{ $v->changelog ?: '—' }}</td>
                                <td>
                                    @if($v->hasParser())
                                        <span class="badge" style="background:#e8f5e9;color:#2e7d32;">
                                            <i class="fa fa-check me-1"></i>{{ $v->parser_class_name }}
                                        </span>
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </td>
                                <td>{{ $v->creator?->name ?? '—' }}</td>
                                <td class="text-muted">{{ $v->created_at->format('d M Y H:i') }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script nonce="{{ $cspNonce }}">
function copyCode(elId) {
    var text = document.getElementById(elId).textContent;
    navigator.clipboard.writeText(text).then(function() {
        var btn = event.target.closest('button');
        var orig = btn.innerHTML;
        btn.innerHTML = '<i class="fa fa-check me-1"></i> Copied!';
        setTimeout(function() { btn.innerHTML = orig; }, 2000);
    });
}
</script>
@endsection