@extends('layouts.app')

@section('content')
<style>
.rc-stat-card{background:#fff;border:1px solid #e2e8f0;border-radius:.75rem;padding:1.25rem 1.5rem;display:flex;align-items:center;gap:1rem;}
.rc-stat-icon{width:48px;height:48px;border-radius:.5rem;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0;}
.rc-stat-icon.blue{background:rgba(59,130,246,.12);color:#3b82f6;}
.rc-stat-icon.green{background:rgba(22,163,74,.12);color:#16a34a;}
.rc-stat-icon.yellow{background:rgba(234,179,8,.12);color:#ca8a04;}
.rc-badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font-size:.72rem;font-weight:600;}
.rc-badge.published{background:rgba(22,163,74,.12);color:#15803d;}
.rc-badge.draft{background:rgba(100,116,139,.12);color:#475569;}
.rc-badge.archived{background:rgba(234,179,8,.12);color:#b45309;}
</style>

<div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-4">
    <div>
        <h4 class="mb-1 fw-bold">Release Center</h4>
        <div class="text-secondary small">Build, publish and track software releases across all PBX nodes</div>
    </div>
    <a href="{{ route('release-center.create') }}" class="btn btn-primary d-flex align-items-center gap-2">
        <i data-lucide="plus" style="width:16px;height:16px;"></i> New Release
    </a>
</div>

@if(session('success'))
<div class="alert alert-success border-0 d-flex align-items-center gap-2 mb-4">
    <i data-lucide="check-circle" style="width:18px;height:18px;flex-shrink:0;"></i>
    {{ session('success') }}
</div>
@endif
@if(session('error'))
<div class="alert alert-danger border-0 d-flex align-items-center gap-2 mb-4">
    <i data-lucide="x-circle" style="width:18px;height:18px;flex-shrink:0;"></i>
    {{ session('error') }}
</div>
@endif

{{-- Stats --}}
<div class="row g-3 mb-4">
    <div class="col-6 col-lg-3">
        <div class="rc-stat-card">
            <div class="rc-stat-icon blue"><i data-lucide="package" style="width:22px;height:22px;"></i></div>
            <div>
                <div class="fs-4 fw-bold lh-1">{{ $releases->total() }}</div>
                <div class="text-secondary small">Total Releases</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="rc-stat-card">
            <div class="rc-stat-icon green"><i data-lucide="server" style="width:22px;height:22px;"></i></div>
            <div>
                <div class="fs-4 fw-bold lh-1">{{ $onlineNodes }}<span class="text-secondary fs-6">/{{ $totalNodes }}</span></div>
                <div class="text-secondary small">Nodes Online</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="rc-stat-card">
            <div class="rc-stat-icon yellow"><i data-lucide="arrow-up-circle" style="width:22px;height:22px;"></i></div>
            <div>
                <div class="fs-4 fw-bold lh-1">{{ $needsUpdate }}</div>
                <div class="text-secondary small">Pending Updates</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="rc-stat-card">
            <div class="rc-stat-icon blue"><i data-lucide="tag" style="width:22px;height:22px;"></i></div>
            <div>
                <div class="fs-4 fw-bold lh-1">{{ $latestRelease ? 'v'.$latestRelease->version : '—' }}</div>
                <div class="text-secondary small">Latest Release</div>
            </div>
        </div>
    </div>
</div>

@if($latestRelease)
<div class="alert border-0 mb-4 d-flex align-items-center gap-3"
     style="background:#eff6ff;border-left:3px solid #3b82f6!important;border-radius:.5rem;">
    <i data-lucide="broadcast" style="width:18px;height:18px;color:#3b82f6;flex-shrink:0;"></i>
    <span>
        <strong>Latest published:</strong>
        <code>v{{ $latestRelease->version }}</code> — {{ $latestRelease->name }}
        <span class="text-secondary ms-2" style="font-size:.8rem;">Published {{ $latestRelease->published_at->diffForHumans() }}</span>
    </span>
</div>
@endif

<div class="row g-4">
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-bottom d-flex justify-content-between align-items-center py-3">
                <h6 class="mb-0 fw-semibold">Releases</h6>
                <div class="d-flex gap-2">
                    <a href="{{ route('release-center.nodes') }}" class="btn btn-sm btn-outline-secondary">
                        <i data-lucide="server" style="width:13px;height:13px;" class="me-1"></i>Nodes
                    </a>
                    <a href="{{ route('release-center.deployments') }}" class="btn btn-sm btn-outline-secondary">
                        <i data-lucide="clock" style="width:13px;height:13px;" class="me-1"></i>History
                    </a>
                </div>
            </div>
            <div class="card-body p-0">
                @if($releases->isEmpty())
                <div class="text-center py-5 text-secondary">
                    <i data-lucide="package" style="width:40px;height:40px;opacity:.3;" class="mb-3 d-block mx-auto"></i>
                    <div class="fw-semibold">No releases yet</div>
                    <div class="small mb-3">Create your first release to get started</div>
                    <a href="{{ route('release-center.create') }}" class="btn btn-sm btn-primary">
                        <i data-lucide="plus" style="width:13px;height:13px;" class="me-1"></i>Create Release
                    </a>
                </div>
                @else
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0" style="font-size:.875rem;">
                        <thead style="background:#f8fafc;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:#64748b;">
                            <tr>
                                <th class="ps-4 py-3">Version</th>
                                <th class="py-3">Name</th>
                                <th class="py-3">Channel</th>
                                <th class="py-3">Status</th>
                                <th class="py-3">Deployments</th>
                                <th class="py-3">Published</th>
                                <th class="py-3"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($releases as $release)
                            <tr>
                                <td class="ps-4"><code>v{{ $release->version }}</code></td>
                                <td>
                                    <div class="fw-semibold">{{ $release->name }}</div>
                                    @if($release->description)
                                    <div class="text-secondary small">{{ Str::limit($release->description, 55) }}</div>
                                    @endif
                                </td>
                                <td><span class="badge bg-secondary bg-opacity-10 text-secondary">{{ ucfirst($release->channel) }}</span></td>
                                <td><span class="rc-badge {{ $release->status }}">{{ ucfirst($release->status) }}</span></td>
                                <td class="text-secondary">{{ $release->deployments_count ?? 0 }}</td>
                                <td class="text-secondary small">{{ $release->published_at?->format('d M Y') ?? '—' }}</td>
                                <td class="pe-3">
                                    <a href="{{ route('release-center.show', $release) }}" class="btn btn-sm btn-outline-primary">View</a>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @if($releases->hasPages())
                <div class="p-3 border-top">{{ $releases->links() }}</div>
                @endif
                @endif
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white border-bottom py-3">
                <h6 class="mb-0 fw-semibold">Recent Deployments</h6>
            </div>
            <div class="card-body p-0">
                @if($recentActivity->isEmpty())
                <div class="text-center py-4 text-secondary small">No deployments yet</div>
                @else
                @foreach($recentActivity as $activity)
                <div class="d-flex align-items-start gap-3 px-3 py-3 {{ !$loop->last ? 'border-bottom' : '' }}">
                    <span class="rc-badge {{ $activity->status }} mt-1">{{ ucfirst($activity->status) }}</span>
                    <div class="flex-fill">
                        <div class="fw-semibold small">{{ $activity->node->node_name ?? 'Unknown' }}</div>
                        <div class="text-secondary" style="font-size:.75rem;"><code>v{{ $activity->release->version ?? '?' }}</code></div>
                    </div>
                    <div class="text-secondary" style="font-size:.72rem;white-space:nowrap;">{{ $activity->created_at->diffForHumans(null,true) }}</div>
                </div>
                @endforeach
                @endif
            </div>
        </div>

        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-bottom py-3"><h6 class="mb-0 fw-semibold">Quick Actions</h6></div>
            <div class="list-group list-group-flush" style="font-size:.875rem;">
                <a href="{{ route('release-center.create') }}" class="list-group-item list-group-item-action d-flex align-items-center gap-3 py-3">
                    <i data-lucide="plus-circle" style="width:16px;height:16px;color:#3b82f6;"></i>
                    <span>Create New Release</span>
                    <i data-lucide="chevron-right" style="width:14px;height:14px;" class="ms-auto text-secondary"></i>
                </a>
                <a href="{{ route('release-center.nodes') }}" class="list-group-item list-group-item-action d-flex align-items-center gap-3 py-3">
                    <i data-lucide="server" style="width:16px;height:16px;color:#16a34a;"></i>
                    <span>View Connected Nodes</span>
                    <i data-lucide="chevron-right" style="width:14px;height:14px;" class="ms-auto text-secondary"></i>
                </a>
                <a href="{{ route('release-center.deployments') }}" class="list-group-item list-group-item-action d-flex align-items-center gap-3 py-3">
                    <i data-lucide="clock" style="width:16px;height:16px;color:#ca8a04;"></i>
                    <span>Deployment History</span>
                    <i data-lucide="chevron-right" style="width:14px;height:14px;" class="ms-auto text-secondary"></i>
                </a>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
if (window.lucide) lucide.createIcons();
</script>
@endpush