@extends('admin.layouts.app')

@section('title', $title)

@section('content')
<div class="col-md-12">
    <div class="bgc-white bd bdrs-3 p-20 mB-20">

        {{-- Header --}}
        <div class="peers ai-c jc-sb mB-20">
            <div class="peer">
                <h4 class="c-grey-900 mB-0">
                    <i class="ti-shopping-cart c-purple-500 mR-10"></i>
                    Module Marketplace
                </h4>
                <small class="c-grey-600">Browse and purchase ChargePanda modules.</small>
            </div>
            <div class="peer">
                <form action="{{ route('ch-admin.marketplace.refresh') }}" method="POST" class="d-inline">
                    @csrf
                    <button type="submit" class="btn btn-secondary btn-sm">
                        <i class="ti-reload mR-5"></i> Refresh Catalog
                    </button>
                </form>
            </div>
        </div>

        {{-- Catalog error states --}}
        @if($catalogStatus === 'missing-license')
            <div class="alert alert-warning">
                <i class="ti-key mR-5"></i>
                <strong>License key not configured.</strong>
                Add your ChargePanda license key in <a href="{{ route('ch-admin.settings.show', ['update']) }}">Settings</a> to browse available modules.
            </div>
        @elseif($catalogStatus === 'error')
            <div class="alert alert-danger">
                <i class="ti-alert mR-5"></i>
                <strong>Could not reach the module catalog.</strong>
                Showing cached data if available.
                <form action="{{ route('ch-admin.marketplace.refresh') }}" method="POST" class="d-inline">
                    @csrf
                    <button type="submit" class="btn btn-link p-0 align-baseline">Try again</button>.
                </form>
            </div>
        @endif

        @if($modules->isEmpty())
            <div class="text-center pY-40">
                <i class="ti-shopping-cart" style="font-size:48px; color:#ccc;"></i>
                <p class="c-grey-600 mT-10">No modules available in the catalog yet.</p>
            </div>
        @else

            {{-- Legend --}}
            <div class="mB-20">
                <span class="badge bg-success mR-5">Installed</span>
                <span class="badge bg-warning text-dark mR-5">Update Available</span>
                <span class="badge bg-primary mR-5">Purchased</span>
                <span class="badge bg-info mR-5">Free</span>
                <span class="badge bg-secondary mR-5">Not Owned</span>
                <span class="badge bg-danger mR-5">Support Expired</span>
            </div>

            <div class="row">
                @foreach($modules as $module)
                <div class="col-md-6 col-lg-4 mB-20">
                    <div class="bd bdrs-3 p-20 h-100" style="border: 1px solid #e0e0e0;">

                        {{-- Module header --}}
                        <div class="peers ai-c mB-10">
                            <div class="peer peer-greed">
                                <strong class="c-grey-900">{{ $module['name'] }}</strong>
                                @if($module['latest_version'])
                                    <small class="c-grey-600 mL-5">v{{ $module['latest_version'] }}</small>
                                @endif
                            </div>
                            <div class="peer">
                                @switch($module['state'])
                                    @case('installed_active')
                                        <span class="badge bg-success">Installed</span>
                                        @break
                                    @case('installed_inactive')
                                        <span class="badge bg-warning text-dark">Inactive</span>
                                        @break
                                    @case('update_available')
                                        <span class="badge bg-warning text-dark">Update Available</span>
                                        @break
                                    @case('purchased_available')
                                        <span class="badge bg-primary">Purchased</span>
                                        @break
                                    @case('free_available')
                                        <span class="badge bg-info">Free</span>
                                        @break
                                    @case('support_expired')
                                        <span class="badge bg-danger">Support Expired</span>
                                        @break
                                    @default
                                        @if($module['price'] > 0)
                                            <span class="badge bg-secondary">${{ number_format($module['price'], 0) }}</span>
                                        @else
                                            <span class="badge bg-secondary">Free</span>
                                        @endif
                                @endswitch
                            </div>
                        </div>

                        {{-- Description --}}
                        @if($module['description'])
                            <p class="c-grey-600 mB-10" style="font-size:13px; min-height:36px;">
                                {{ \Illuminate\Support\Str::limit($module['description'], 100) }}
                            </p>
                        @endif

                        {{-- Installed version info --}}
                        @if($module['is_installed'])
                            <small class="c-grey-600 d-block mB-10">
                                Installed: <code>v{{ $module['installed_version'] }}</code>
                                @if($module['update_available'])
                                    → <code>v{{ $module['latest_version'] }}</code>
                                @endif
                            </small>
                        @endif

                        {{-- Support expiry info --}}
                        @if($module['support_expires_at'] && in_array($module['state'], ['installed_active','purchased_available','update_available']))
                            <small class="c-grey-600 d-block mB-10">
                                <i class="ti-shield-check mR-3"></i>
                                Support until {{ \Carbon\Carbon::parse($module['support_expires_at'])->format('d M Y') }}
                            </small>
                        @endif

                        {{-- Action button --}}
                        <div class="mT-10">
                            @switch($module['state'])

                                @case('not_owned')
                                    <a href="{{ $module['buy_url'] }}" target="_blank" class="btn btn-primary btn-sm">
                                        <i class="ti-shopping-cart mR-5"></i>
                                        Buy — ${{ number_format($module['price'], 0) }}
                                    </a>
                                    @break

                                @case('free_available')
                                @case('purchased_available')
                                    <a href="{{ $module['buy_url'] }}" target="_blank" class="btn btn-success btn-sm">
                                        <i class="ti-download mR-5"></i> Get on ChargePanda
                                    </a>
                                    @break

                                @case('installed_active')
                                    <a href="{{ route('ch-admin.modules.index') }}" class="btn btn-secondary btn-sm">
                                        <i class="ti-settings mR-5"></i> Manage
                                    </a>
                                    @break

                                @case('installed_inactive')
                                    @if($module['module_id'])
                                        <form action="{{ route('ch-admin.modules.activate', $module['module_id']) }}" method="POST" class="d-inline">
                                            @csrf @method('PATCH')
                                            <button type="submit" class="btn btn-warning btn-sm">
                                                <i class="ti-check mR-5"></i> Activate
                                            </button>
                                        </form>
                                    @endif
                                    @break

                                @case('update_available')
                                    @if($module['module_id'] && $module['download_url'])
                                        <button class="btn btn-info btn-sm apply-update-btn"
                                                data-module-id="{{ $module['module_id'] }}"
                                                data-module-name="{{ $module['name'] }}"
                                                data-download-url="{{ $module['download_url'] }}"
                                                data-checksum="{{ $module['checksum'] }}"
                                                data-version="{{ $module['latest_version'] }}"
                                                data-changelog="{{ $module['changelog'] }}"
                                                data-apply-url="{{ route('ch-admin.modules.apply-update', $module['module_id']) }}">
                                            <i class="ti-arrow-up mR-5"></i> Update to v{{ $module['latest_version'] }}
                                        </button>
                                    @else
                                        <a href="{{ route('ch-admin.modules.index') }}" class="btn btn-secondary btn-sm">
                                            <i class="ti-reload mR-5"></i> Check Updates
                                        </a>
                                    @endif
                                    @break

                                @case('support_expired')
                                    <a href="{{ $module['buy_url'] }}" target="_blank" class="btn btn-link btn-sm p-0">
                                        <i class="ti-reload mR-3"></i> Renew Support
                                    </a>
                                    @break

                            @endswitch
                        </div>

                    </div>
                </div>
                @endforeach
            </div>

        @endif

    </div>
</div>

{{-- Apply update modal --}}
<div class="modal fade" id="applyUpdateModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Apply Update</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Update <strong id="updateModuleName"></strong> to version <strong id="updateModuleVersion"></strong>?</p>
                <div id="updateChangelog" class="alert alert-secondary" style="font-size:13px; display:none;"></div>
                <div id="updateProgress" style="display:none;">
                    <div class="d-flex ai-c">
                        <div class="spinner-border spinner-border-sm mR-10" role="status"></div>
                        <span>Downloading and applying update…</span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-info btn-sm" id="confirmUpdateBtn">
                    <i class="ti-arrow-up mR-5"></i> Apply Update
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
    // -------------------------------------------------------------------------
    // Apply update
    // -------------------------------------------------------------------------
    let pendingUpdateData = null;
    const modal = new bootstrap.Modal(document.getElementById('applyUpdateModal'));

    document.querySelectorAll('.apply-update-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
            pendingUpdateData = {
                applyUrl:    btn.dataset.applyUrl,
                downloadUrl: btn.dataset.downloadUrl,
                checksum:    btn.dataset.checksum,
                version:     btn.dataset.version,
                changelog:   btn.dataset.changelog,
            };

            document.getElementById('updateModuleName').textContent    = btn.dataset.moduleName;
            document.getElementById('updateModuleVersion').textContent  = btn.dataset.version;

            const changelogEl = document.getElementById('updateChangelog');
            if (btn.dataset.changelog) {
                changelogEl.textContent = btn.dataset.changelog;
                changelogEl.style.display = 'block';
            } else {
                changelogEl.style.display = 'none';
            }

            document.getElementById('updateProgress').style.display = 'none';
            document.getElementById('confirmUpdateBtn').disabled     = false;

            modal.show();
        });
    });

    document.getElementById('confirmUpdateBtn').addEventListener('click', function () {
        if (! pendingUpdateData) return;

        this.disabled = true;
        document.getElementById('updateProgress').style.display = 'block';

        fetch(pendingUpdateData.applyUrl, {
            method:  'POST',
            headers: {
                'Content-Type':     'application/json',
                'X-CSRF-TOKEN':     document.querySelector('meta[name="_token"]').content,
                'Accept':           'application/json',
            },
            body: JSON.stringify({
                download_url: pendingUpdateData.downloadUrl,
                checksum:     pendingUpdateData.checksum,
                version:      pendingUpdateData.version,
                changelog:    pendingUpdateData.changelog,
            }),
        })
        .then(function (res) { return res.json(); })
        .then(function (data) {
            modal.hide();
            if (data.success) {
                window.location.reload();
            } else {
                alert('Update failed: ' + (data.error ?? 'Unknown error'));
            }
        })
        .catch(function (err) {
            modal.hide();
            alert('Update request failed: ' + err.message);
        });
    });
})();
</script>
@endpush