@extends('adminlte::page')

@section('title', 'Profile Builder')

@section('content_header')
    <h1>Profile Builder</h1>
@stop

@section('content')
    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    {{-- Profile Visibility Status Banner --}}
    @if(Auth::user()->isProfilePrivate())
        <div class="alert alert-warning alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <h5><i class="icon fas fa-lock"></i> Profil Privat Aktif</h5>
            <p class="mb-0">
                Profil Anda saat ini bersifat privat dan tidak dapat diakses oleh publik. 
                <a href="{{ route('profile.settings') }}" class="alert-link">Klik di sini</a> untuk mengubah pengaturan visibilitas profil.
            </p>
        </div>
    @else
        <div class="alert alert-success alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <h5><i class="icon fas fa-globe"></i> Profil Publik Aktif</h5>
            <p class="mb-0">
                Profil Anda dapat diakses oleh semua orang. Anda dapat membagikan link profil Anda ke sosial media.
            </p>
        </div>
    @endif

    <div class="row">
        <div class="col-12 col-lg-6 mb-4">
            <h5 class="mb-2">Avatar Profil</h5>
            <div class="d-flex align-items-center mb-3">
                <img id="avatarPreview" src="{{ Auth::user()->profile_picture_url ?? asset('img/user-a-solid.svg') }}" alt="Avatar" style="width:120px;height:120px;border-radius:50%;object-fit:cover;border:3px solid #eee;box-shadow:0 2px 8px rgba(0,0,0,0.08);">
                <button type="button" class="btn btn-outline-primary ml-3" id="changeAvatarBtn" data-toggle="modal" data-target="#avatarModal">Ganti Avatar</button>
            </div>
            <!-- Modal Upload Avatar (Cropper.js) -->
            <div class="modal fade" id="avatarModal" tabindex="-1" role="dialog" aria-labelledby="avatarModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="avatarModalLabel">Upload & Crop Avatar</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <input type="file" id="avatarInput" accept="image/*" class="form-control mb-2">
                            <div style="width:100%;text-align:center;">
                                <img id="cropperPreview" src="" style="max-width:100%;max-height:300px;display:none;border-radius:50%;">
                            </div>
                            <div class="mt-2 d-flex justify-content-center align-items-center" id="cropperControls" style="display:none;gap:10px;">
                                <button type="button" class="btn btn-sm btn-secondary" id="rotateLeftBtn">⟲</button>
                                <button type="button" class="btn btn-sm btn-secondary" id="rotateRightBtn">⟳</button>
                                <button type="button" class="btn btn-sm btn-secondary" id="zoomInBtn">+</button>
                                <button type="button" class="btn btn-sm btn-secondary" id="zoomOutBtn">-</button>
                            </div>
                            <div id="avatarUploadStatus" class="text-muted small mt-2"></div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                            <button type="button" class="btn btn-primary" id="saveAvatarBtn" disabled>Simpan</button>
                        </div>
                    </div>
                </div>
            </div>
            <h5 class="mb-2">Semua Shortlink</h5>
            <input type="text" id="searchBox" class="form-control form-control-sm mb-2 w-100 d-inline-block" placeholder="Cari shortlink..." style="max-width:calc(100% - 40px);">
            <button type="button" id="clearSearchBtn" class="btn btn-sm btn-secondary mb-2 ml-2" style="vertical-align:top;">Clear</button>
            <div id="searchResultCount" class="text-muted small mb-2"></div>
            <ul id="allLinks" class="list-group min-vh-50" style="min-height:200px;">
                @foreach($shortlinks->where('show_on_profile', false) as $link)
                    <li class="list-group-item d-flex align-items-center" data-id="{{ $link->id }}" data-label="{{ strtolower($link->custom_label ?? $link->description ?? $link->id) }}">
                        <span class="handle mr-3" style="cursor:move;">☰</span>
                        <span>{{ $link->custom_label ?? $link->description ?? $link->id }}</span>
                    </li>
                @endforeach
                <li class="list-group-item text-center text-muted d-none" id="allLinksEmpty">Tidak ada shortlink ditemukan</li>
            </ul>
        </div>
        <div class="col-12 col-lg-6 mb-4">
            <h5 class="mb-2">Live Preview (Aktif)</h5>
            <form id="profileBuilderForm" action="{{ route('admin.profile-builder.save') }}" method="POST">
                @csrf
                <ul id="activeLinks" class="list-group mb-3 min-vh-50" style="min-height:200px;">
                    @foreach($shortlinks->where('show_on_profile', true) as $link)
                        <li class="list-group-item d-flex align-items-center" data-id="{{ $link->id }}" data-label="{{ strtolower($link->custom_label ?? $link->description ?? $link->id) }}">
                            <span class="handle mr-3" style="cursor:move;">☰</span>
                            <span>{{ $link->custom_label ?? $link->description ?? $link->id }}</span>
                        </li>
                    @endforeach
                    <li class="list-group-item text-center text-muted d-none" id="activeLinksEmpty">Tidak ada shortlink ditemukan</li>
                </ul>
                <input type="hidden" name="active_order" id="activeOrderInput">
                <input type="hidden" name="inactive_order" id="inactiveOrderInput">
                <button type="submit" class="btn btn-primary w-100">Simpan Urutan & Aktif/Nonaktif</button>
            </form>
            <div class="card p-3 mt-3">
                <div class="d-flex flex-column align-items-center">
                    <div class="device-mockup-android mb-2">
                        <div class="device-frame">
                            <iframe src="{{ url('/' . Auth::user()->username) }}" class="device-screen" frameborder="0"></iframe>
                        </div>
                        <div class="device-btn"></div>
                    </div>
                    <small class="text-muted">Live Preview Public Profile (Android Mockup)</small>
                </div>
            </div>
        </div>
    </div>
@stop

@push('css')
<!-- Cropper.js CSS -->
<link href="https://cdn.jsdelivr.net/npm/cropperjs@1.6.2/dist/cropper.min.css" rel="stylesheet">
<!-- FilePond CSS (hanya untuk modal) -->
<link href="https://cdn.jsdelivr.net/npm/filepond@4.30.4/dist/filepond.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/filepond-plugin-image-preview@4.6.11/dist/filepond-plugin-image-preview.min.css" rel="stylesheet">
<style>
.device-mockup-android {
    width: 360px;
    height: 720px;
    background: #222;
    border-radius: 36px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    position: relative;
    padding: 16px 8px 40px 8px;
    margin: 0 auto;
}
.device-mockup-android .device-frame {
    width: 100%;
    height: 100%;
    border-radius: 28px;
    overflow: hidden;
    background: #fff;
    position: relative;
}
.device-mockup-android .device-screen {
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
    border-radius: 28px;
}
.device-mockup-android .device-btn {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 6px;
    background: #444;
    border-radius: 3px;
}
.highlight-search {
    background: #ffe066;
    font-weight: bold;
    padding: 0 2px;
    border-radius: 2px;
}
@media (max-width: 500px) {
    .device-mockup-android {
        width: 100vw;
        height: 60vw;
        min-width: 200px;
        min-height: 350px;
        max-width: 100%;
        max-height: 80vw;
    }
}
</style>
@endpush

@push('js')
<!-- Modal Bootstrap (jika belum ada di layout) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- Cropper.js -->
<script src="https://cdn.jsdelivr.net/npm/cropperjs@1.6.2/dist/cropper.min.js"></script>
<!-- FilePond & Plugins JS (hanya untuk modal, pakai jsdelivr) -->
<script src="https://cdn.jsdelivr.net/npm/filepond@4.30.4/dist/filepond.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/filepond-plugin-image-preview@4.6.11/dist/filepond-plugin-image-preview.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/filepond-plugin-image-crop@2.0.7/dist/filepond-plugin-image-crop.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/filepond-plugin-image-rotate@3.0.5/dist/filepond-plugin-image-rotate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/filepond-plugin-image-resize@3.0.4/dist/filepond-plugin-image-resize.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/filepond-plugin-image-transform@3.10.1/dist/filepond-plugin-image-transform.min.js"></script>
<!-- SortableJS -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
let cropper = null;
let cropperImg = document.getElementById('cropperPreview');
let avatarInput = document.getElementById('avatarInput');
let saveAvatarBtn = document.getElementById('saveAvatarBtn');
let avatarStatus = document.getElementById('avatarUploadStatus');
let cropperControls = document.getElementById('cropperControls');

$('#avatarModal').on('shown.bs.modal', function () {
    avatarInput.value = '';
    cropperImg.style.display = 'none';
    cropperControls.style.display = 'none';
    saveAvatarBtn.disabled = true;
    avatarStatus.textContent = '';
    if (cropper) { cropper.destroy(); cropper = null; }
});

avatarInput.addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (!file) return;
    if (!file.type.match('image.*')) {
        avatarStatus.textContent = 'File harus berupa gambar.';
        return;
    }
    const reader = new FileReader();
    reader.onload = function(evt) {
        cropperImg.src = evt.target.result;
        cropperImg.style.display = '';
        if (cropper) cropper.destroy();
        cropper = new Cropper(cropperImg, {
            aspectRatio: 1,
            viewMode: 1,
            dragMode: 'move',
            autoCropArea: 1,
            background: false,
            minContainerWidth: 300,
            minContainerHeight: 300,
            ready() {
                cropperControls.style.display = '';
                saveAvatarBtn.disabled = false;
            }
        });
    };
    reader.readAsDataURL(file);
});

document.getElementById('rotateLeftBtn').onclick = function() { if (cropper) cropper.rotate(-90); };
document.getElementById('rotateRightBtn').onclick = function() { if (cropper) cropper.rotate(90); };
document.getElementById('zoomInBtn').onclick = function() { if (cropper) cropper.zoom(0.1); };
document.getElementById('zoomOutBtn').onclick = function() { if (cropper) cropper.zoom(-0.1); };

document.getElementById('saveAvatarBtn').onclick = function() {
    if (!cropper) return;
    saveAvatarBtn.disabled = true;
    avatarStatus.textContent = 'Mengupload...';
    cropper.getCroppedCanvas({ width: 120, height: 120, imageSmoothingQuality: 'high' }).toBlob(function(blob) {
        const formData = new FormData();
        formData.append('avatar', blob, 'avatar.png');
        fetch("{{ url('/admin/profile-avatar-upload') }}", {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.url) {
                document.getElementById('avatarPreview').src = data.url + '?t=' + Date.now();
                avatarStatus.textContent = 'Avatar berhasil diupdate!';
                setTimeout(() => { $('#avatarModal').modal('hide'); }, 800);
            } else {
                avatarStatus.textContent = 'Upload gagal.';
                saveAvatarBtn.disabled = false;
            }
        })
        .catch(() => {
            avatarStatus.textContent = 'Upload gagal.';
            saveAvatarBtn.disabled = false;
        });
    }, 'image/png', 0.95);
};
// SortableJS untuk list shortlink
const allLinks = document.getElementById('allLinks');
const activeLinks = document.getElementById('activeLinks');
new Sortable(allLinks, {
    group: 'links',
    animation: 150,
    handle: '.handle',
    sort: true,
    onEnd: filterShortlinks
});
new Sortable(activeLinks, {
    group: 'links',
    animation: 150,
    handle: '.handle',
    sort: true,
    onEnd: filterShortlinks
});

// Saat submit, kirim urutan dan status aktif/nonaktif
document.getElementById('profileBuilderForm').addEventListener('submit', function(e) {
    // Ambil urutan ID di masing-masing list
    const activeOrder = Array.from(activeLinks.children).map(li => li.getAttribute('data-id'));
    const inactiveOrder = Array.from(allLinks.children).map(li => li.getAttribute('data-id'));
    document.getElementById('activeOrderInput').value = activeOrder.join(',');
    document.getElementById('inactiveOrderInput').value = inactiveOrder.join(',');
});

// Fuzzy search util (Levenshtein distance, max 2 typo)
function fuzzyMatch(str, keyword) {
    if (!keyword) return true;
    str = str.toLowerCase();
    keyword = keyword.toLowerCase();
    if (str.indexOf(keyword) !== -1) return true;
    // Levenshtein distance (simple, max 2 typo allowed)
    function levenshtein(a, b) {
        var tmp, i, j, prev, val, row;
        if (a.length === 0) return b.length;
        if (b.length === 0) return a.length;
        row = Array(b.length + 1);
        for (i = 0; i <= b.length; i++) row[i] = i;
        for (i = 1; i <= a.length; i++) {
            prev = i;
            for (j = 1; j <= b.length; j++) {
                if (a[i - 1] === b[j - 1]) val = row[j - 1];
                else val = Math.min(row[j - 1] + 1, prev + 1, row[j] + 1);
                row[j - 1] = prev;
                prev = val;
            }
            row[b.length] = prev;
        }
        return row[b.length];
    }
    return levenshtein(str, keyword) <= 2;
}

function highlightText(text, keyword) {
    if (!keyword) return text;
    var re = new RegExp('(' + keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')', 'ig');
    return text.replace(re, '<span class="highlight-search">$1</span>');
}

function filterShortlinks() {
    var val = document.getElementById('searchBox').value.toLowerCase();
    var totalAll = 0, totalActive = 0;
    // Filter allLinks
    Array.from(allLinks.children).forEach(function(li) {
        if (li.id === 'allLinksEmpty') return;
        var label = li.getAttribute('data-label');
        var text = li.querySelector('span:last-child');
        if(label && fuzzyMatch(label, val)) {
            li.classList.remove('d-none');
            if (text) text.innerHTML = highlightText(label, val);
            totalAll++;
        } else {
            li.classList.add('d-none');
            if (text) text.innerHTML = label;
        }
    });
    // Filter activeLinks
    Array.from(activeLinks.children).forEach(function(li) {
        if (li.id === 'activeLinksEmpty') return;
        var label = li.getAttribute('data-label');
        var text = li.querySelector('span:last-child');
        if(label && fuzzyMatch(label, val)) {
            li.classList.remove('d-none');
            if (text) text.innerHTML = highlightText(label, val);
            totalActive++;
        } else {
            li.classList.add('d-none');
            if (text) text.innerHTML = label;
        }
    });
    // Tampilkan pesan jika kosong
    document.getElementById('allLinksEmpty').classList.toggle('d-none', totalAll > 0);
    document.getElementById('activeLinksEmpty').classList.toggle('d-none', totalActive > 0);
    document.getElementById('searchResultCount').textContent = val ? (totalAll + totalActive + ' hasil ditemukan') : '';
}
document.getElementById('searchBox').addEventListener('input', filterShortlinks);
// Clear search
document.getElementById('clearSearchBtn').addEventListener('click', function() {
    document.getElementById('searchBox').value = '';
    filterShortlinks();
    document.getElementById('searchBox').focus();
});
// Pastikan filter tetap aktif setelah drag & drop
[allLinks, activeLinks].forEach(function(list) {
    list.addEventListener('sortupdate', filterShortlinks);
});
</script>
@endpush