{{-- resources/views/admin/system/versions/index.blade.php --}}
@extends('admin.layouts.app')

@section('title', 'System Versions')
@section('page_title', 'System Versions')
@section('breadcrumb', 'Manage platform releases and changelog')

@section('content')

{{-- Header with CTA --}}
<div class="card mb-4">
    <div class="card-body" style="display:flex;align-items:center;justify-content:space-between;">
        <div>
            <h5 style="margin:0;font-size:1rem;font-weight:600;">
                <i class="bi bi-tag" style="color:var(--clay);margin-right:8px;"></i>
                Release Management
            </h5>
            <p style="margin:0;font-size:.8rem;color:var(--muted);margin-top:4px;">
                Create and manage system versions, publish releases, and notify users
            </p>
        </div>
        <a href="{{ route('admin.system.versions.create') }}"
           class="btn btn-primary">
            <i class="bi bi-plus-circle me-1"></i>
            New Version
        </a>
    </div>
</div>

{{-- Versions Table --}}
<div class="card">
    <div class="card-header">
        <span class="card-title">
            Versions
            <span style="font-size:.75rem;font-weight:400;color:var(--muted);margin-left:6px;">
                {{ $versions->total() }} total
            </span>
        </span>
    </div>

    @if($versions->isEmpty())
        <div class="card-body text-center py-5">
            <i class="bi bi-tag" style="font-size:2.5rem;color:var(--muted)"></i>
            <p class="fw-semibold mt-3 mb-1">No versions yet</p>
            <p class="text-muted" style="font-size:.82rem;">
                Create your first system version
            </p>
            <a href="{{ route('admin.system.versions.create') }}"
               class="btn btn-sm btn-primary mt-2">
                Create Version
            </a>
        </div>
    @else
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>Version</th>
                        <th>Title</th>
                        <th>Type</th>
                        <th>Status</th>
                        <th>Released</th>
                        <th>Flags</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($versions as $version)
                        <tr>
                            <td>
                                <div class="fw-semibold font-monospace" style="font-size:.85rem;">
                                    {{ $version->version }}
                                </div>
                            </td>
                            <td style="max-width:250px;">
                                <div class="fw-semibold" style="font-size:.82rem;">
                                    {{ $version->title }}
                                </div>
                                <div style="font-size:.7rem;color:var(--muted);
                                           white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
                                    {{ Str::limit($version->release_notes, 60, '…') }}
                                </div>
                            </td>
                            <td>
                                @php
                                    $typeColors = [
                                        'major'  => ['bg' => '#fee2e2', 'text' => '#991b1b'],
                                        'minor'  => ['bg' => '#fef3c7', 'text' => '#92400e'],
                                        'patch'  => ['bg' => '#dbeafe', 'text' => '#1e40af'],
                                        'hotfix' => ['bg' => '#fecaca', 'text' => '#7c2d12'],
                                    ];
                                    $color = $typeColors[$version->type] ?? ['bg' => '#f1f5f9', 'text' => '#64748b'];
                                @endphp
                                <span style="font-size:.7rem;font-weight:600;
                                           background:{{ $color['bg'] }};color:{{ $color['text'] }};
                                           padding:3px 10px;border-radius:4px;
                                           text-transform:capitalize;">
                                    {{ $version->type }}
                                </span>
                            </td>
                            <td>
                                <span class="badge-status bs-{{ $version->status }}">
                                    {{ ucfirst($version->status) }}
                                </span>
                            </td>
                            <td style="color:var(--muted);font-size:.75rem;">
                                @if($version->released_at)
                                    {{ $version->released_at->format('d M Y H:i') }}
                                @else
                                    <span style="color:var(--muted);">—</span>
                                @endif
                            </td>
                            <td>
                                <div style="display:flex;gap:4px;font-size:.65rem;">
                                    @if($version->requires_migration)
                                        <span title="Requires migration"
                                              style="background:#fee2e2;color:#991b1b;
                                                     padding:2px 6px;border-radius:3px;">
                                            🔄 Migration
                                        </span>
                                    @endif
                                    @if($version->force_notify)
                                        <span title="Force notify users"
                                              style="background:#dbeafe;color:#1e40af;
                                                     padding:2px 6px;border-radius:3px;">
                                            🔔 Notify
                                        </span>
                                    @endif
                                </div>
                            </td>
                            <td>
                                <div style="display:flex;gap:4px;align-items:center;">
                                    @if($version->status !== 'published')
                                        <form method="POST"
                                              action="{{ route('admin.system.versions.publish', $version) }}"
                                              style="display:inline;"
                                              onsubmit="return confirm('Publish version {{ $version->version }}? This will notify users.')">
                                            @csrf
                                            <button type="submit"
                                                    class="btn btn-xs btn-outline-success"
                                                    title="Publish version">
                                                <i class="bi bi-check-circle"></i>
                                            </button>
                                        </form>
                                    @endif
                                    <a href="{{ route('admin.system.versions.edit', $version) }}"
                                       class="btn btn-xs btn-outline-secondary"
                                       title="Edit version">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        {{-- Pagination --}}
        @if($versions->hasPages())
            <div class="card-body" style="border-top:1px solid var(--border);padding:12px 18px;">
                {{ $versions->links() }}
            </div>
        @endif
    @endif
</div>

{{-- Version Type Legend --}}
<div class="row g-3 mt-4">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-info-circle me-2" style="color:var(--clay)"></i>
                    Version Types
                </span>
            </div>
            <div class="card-body">
                <div style="display:grid;gap:10px;font-size:.82rem;">
                    <div style="display:flex;gap:10px;align-items:start;">
                        <span style="background:#fee2e2;color:#991b1b;padding:3px 10px;
                                    border-radius:4px;font-weight:600;white-space:nowrap;">
                            Major
                        </span>
                        <span style="color:var(--muted);line-height:1.4;">
                            Breaking changes, new features, significant improvements (e.g., 1.0.0 → 2.0.0)
                        </span>
                    </div>
                    <div style="display:flex;gap:10px;align-items:start;">
                        <span style="background:#fef3c7;color:#92400e;padding:3px 10px;
                                    border-radius:4px;font-weight:600;white-space:nowrap;">
                            Minor
                        </span>
                        <span style="color:var(--muted);line-height:1.4;">
                            New features, backward compatible (e.g., 1.0.0 → 1.1.0)
                        </span>
                    </div>
                    <div style="display:flex;gap:10px;align-items:start;">
                        <span style="background:#dbeafe;color:#1e40af;padding:3px 10px;
                                    border-radius:4px;font-weight:600;white-space:nowrap;">
                            Patch
                        </span>
                        <span style="color:var(--muted);line-height:1.4;">
                            Bug fixes, improvements (e.g., 1.0.0 → 1.0.1)
                        </span>
                    </div>
                    <div style="display:flex;gap:10px;align-items:start;">
                        <span style="background:#fecaca;color:#7c2d12;padding:3px 10px;
                                    border-radius:4px;font-weight:600;white-space:nowrap;">
                            Hotfix
                        </span>
                        <span style="color:var(--muted);line-height:1.4;">
                            Critical security or stability fixes (e.g., 1.0.0 → 1.0.0-hotfix1)
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-flag me-2" style="color:var(--clay)"></i>
                    Release Flags
                </span>
            </div>
            <div class="card-body">
                <div style="display:grid;gap:10px;font-size:.82rem;">
                    <div>
                        <div class="fw-semibold mb-1">🔄 Requires Migration</div>
                        <p style="color:var(--muted);margin:0;line-height:1.4;">
                            Check this if the version requires database migrations to be run. Users will be notified before upgrade.
                        </p>
                    </div>
                    <div>
                        <div class="fw-semibold mb-1">🔔 Force Notify</div>
                        <p style="color:var(--muted);margin:0;line-height:1.4;">
                            When published, this version will send a notification to all properties even if they have notifications disabled. Use for critical updates only.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection