<div class="fade-in">
    <div class="card" style="max-width: 800px; margin: 0 auto; padding: 0; overflow: hidden;">
        <div style="padding: 2rem; border-bottom: 1px solid var(--border);">
            <h1 style="margin: 0; font-size: 1.5rem;"><?= \App\Helpers\Lang::t('customize_profile') ?></h1>
        </div>

        <form action="/profile/update" method="POST" enctype="multipart/form-data">
            <?= \App\Core\CSRF::field() ?>
            
            <?php $cover = \App\Helpers\Asset::cover($profile['cover_image'] ?? null); ?>
            <div style="position: relative;">
                <div id="cover-preview" style="height: 200px; background: <?= (strpos($cover, 'gradient') !== false) ? $cover : "url('$cover')" ?>; background-size: cover; background-position: center <?= $profile['cover_offset'] ?? 0 ?>%; cursor: ns-resize;" title="Drag to adjust position"></div>
                <input type="hidden" name="cover_offset" id="cover_offset" value="<?= $profile['cover_offset'] ?? 0 ?>">
                
                <div style="position: absolute; bottom: 1rem; right: 1rem; display: flex; gap: 0.75rem; background: rgba(0,0,0,0.7); padding: 0.75rem; border-radius: 1rem; backdrop-filter: blur(10px); align-items: center; z-index: 20; border: 1px solid rgba(255,255,255,0.1);">
                    <label class="btn" style="background: var(--primary); color: white; font-size: 0.75rem; padding: 0.5rem 1rem; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; font-weight: 700;">
                        <i class="fas fa-camera"></i> <?= \App\Helpers\Lang::t('upload') ?>
                        <input type="file" name="cover_file" style="display: none;" onchange="previewFile(this, 'cover-preview')">
                    </label>
                    <div style="width: 1px; height: 24px; background: rgba(255,255,255,0.2); margin: 0 0.5rem;"></div>
                    <?php 
                    $cover_presets = [
                        'cover1.jpg' => 'https://images.unsplash.com/photo-1557683316-973673baf926?w=100&h=70&fit=crop',
                        'cover2.jpg' => 'https://images.unsplash.com/photo-1550684848-fac1c5b4e853?w=100&h=70&fit=crop',
                        'cover3.jpg' => 'https://images.unsplash.com/photo-1579546128127-b456567f11cf?w=100&h=70&fit=crop',
                        'cover_default.jpg' => 'https://images.unsplash.com/photo-1557682250-33bd709cbe85?w=100&h=70&fit=crop'
                    ];
                    foreach($cover_presets as $val => $thumb): 
                    ?>
                        <label style="cursor: pointer;">
                            <input type="radio" name="cover_image" value="<?= $val ?>" <?= (($profile['cover_image'] ?? 'cover_default.jpg') == $val) ? 'checked' : '' ?> style="display: none;" onchange="updateCoverPreset('<?= $thumb ?>', '<?= $val ?>')">
                            <div style="width: 45px; height: 32px; background: url('<?= $thumb ?>'); background-size: cover; border-radius: 6px; border: 2px solid transparent; transition: var(--transition);" class="cover-opt"></div>
                        </label>
                    <?php endforeach; ?>
                </div>
                <div style="position: absolute; top: 1rem; left: 1rem; background: rgba(0,0,0,0.6); color: white; padding: 0.3rem 0.8rem; border-radius: 2rem; font-size: 0.75rem;">
                    <i class="fas fa-arrows-alt-v"></i> <?= \App\Helpers\Lang::t('drag_to_reposition') ?>
                </div>
            </div>

            <div style="padding: 3rem; margin-top: -80px; position: relative; z-index: 10;">
                <div style="text-align: center; margin-bottom: 3rem;">
                    <div style="position: relative; display: inline-block;">
                        <img src="<?= \App\Helpers\Asset::avatar($profile['avatar'] ?? null, $profile['username'], 140) ?>" id="avatar-preview" style="width: 140px; height: 140px; border-radius: 50%; border: 5px solid var(--card); object-fit: cover; box-shadow: var(--shadow);">
                        <label style="position: absolute; bottom: 5px; right: 5px; background: var(--primary); color: white; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid var(--card); cursor: pointer; transition: var(--transition);">
                            <i class="fas fa-camera"></i>
                            <input type="file" name="avatar_file" id="avatar_file" style="display: none;" onchange="previewFile(this, 'avatar-preview')">
                        </label>
                    </div>
                    
                    <div style="display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem;">
                        <?php 
                        $avatars = ['default.png', 'avatar1.png', 'avatar2.png', 'avatar3.png', 'avatar4.png'];
                        foreach($avatars as $av): 
                        ?>
                            <label style="cursor: pointer;">
                                <input type="radio" name="avatar" value="<?= $av ?>" <?= (($profile['avatar'] ?? 'default.png') == $av) ? 'checked' : '' ?> style="display: none;" onchange="updateAvatarPreview(this.value)">
                                <img src="<?= \App\Helpers\Asset::avatar($av, $profile['username'] ?? 'User', 45) ?>" style="width: 45px; height: 45px; border-radius: 50%; border: 2px solid var(--border); transition: var(--transition);" class="avatar-option">
                            </label>
                        <?php endforeach; ?>
                    </div>
                </div>

                <div class="form-group" style="margin-bottom: 2rem;">
                    <label style="display: block; margin-bottom: 0.75rem; font-weight: 700; color: var(--text);"><?= \App\Helpers\Lang::t('about_me') ?></label>
                    <textarea name="bio" class="form-control" rows="6" placeholder="<?= \App\Helpers\Lang::t('placeholder_bio') ?>" style="border-radius: 1rem; padding: 1.25rem;"><?= htmlspecialchars($profile['bio']) ?></textarea>
                </div>

                <div style="display: flex; gap: 1rem; justify-content: flex-end; border-top: 1px solid var(--border); padding-top: 2rem;">
                    <a href="/u/current" class="btn" style="background: var(--bg); border: 1px solid var(--border);"><?= \App\Helpers\Lang::t('cancel') ?></a>
                    <button type="submit" class="btn btn-primary" style="padding: 0.8rem 2rem;"><?= \App\Helpers\Lang::t('save_profile') ?></button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
function updateCoverPreset(thumb, val) {
    const fullUrl = thumb.replace('w=100&h=70', 'w=1200&h=400');
    document.getElementById('cover-preview').style.backgroundImage = "url('" + fullUrl + "')";
}

function updateCover(val) {
    document.getElementById('cover-preview').style.backgroundImage = "url('/assets/img/"+val+"')";
}

function updateAvatarPreview(val) {
    document.getElementById('avatar-preview').src = "/assets/img/" + val;
}

function previewFile(input, targetId) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const target = document.getElementById(targetId);
            if (target.tagName === 'IMG') {
                target.src = e.target.result;
            } else {
                target.style.backgroundImage = "url('" + e.target.result + "')";
            }
        }
        reader.readAsDataURL(input.files[0]);
    }
}

let isDragging = false;
let startY;
let startOffset;
const preview = document.getElementById('cover-preview');
const offsetInput = document.getElementById('cover_offset');

preview.addEventListener('mousedown', e => {
    isDragging = true;
    startY = e.pageY;
    startOffset = parseInt(offsetInput.value);
    preview.style.cursor = 'grabbing';
});

window.addEventListener('mousemove', e => {
    if (!isDragging) return;
    const delta = (e.pageY - startY) / 2; // Sensitivity
    let newOffset = startOffset + delta;
    newOffset = Math.max(0, Math.min(100, newOffset));
    
    offsetInput.value = Math.round(newOffset);
    preview.style.backgroundPosition = `center ${newOffset}%`;
});

window.addEventListener('mouseup', () => {
    isDragging = false;
    preview.style.cursor = 'ns-resize';
});
</script>

<style>
input[type="radio"]:checked + .avatar-option { border-color: var(--primary); transform: scale(1.1); box-shadow: 0 0 15px var(--primary-light); }
input[type="radio"]:checked + .cover-opt { border-color: var(--primary); }
</style>
