{include file='_head.tpl'}
{include file='_header.tpl'}

<!-- Mobile-Fullscreen Reels Wrapper (Facebook Style) -->
<div class="reels-mobile-wrapper" style="width:100%; max-width:100%; padding:0; margin:0; background:#000;">

    {* --- SINGLE REEL VIEW (Full Screen) --- *}
    {if $reel}
        <div class="reels-feed-container" style="width:100%; height:100vh; overflow:hidden; display:flex; justify-content:center; align-items:center; background:#000;">
            <div class="reel-container" data-id="{$reel['post_id']}" style="height:100%; width:100%; max-width:450px; position:relative;">
                <div class="position-relative" style="height:100%; width:100%;">
                    {include file='__feeds_reel.tpl' _iteration=1 _hidden=false}
                </div>
            </div>
        </div>

    {* --- UPLOAD VIEW (Facebook Style Modal) --- *}
    {elseif $view == 'upload'}
        <div class="container" style="padding:20px; max-width:600px; margin:0 auto; background:#f0f2f5; min-height:100vh;">
            <div class="card shadow-sm rounded-lg" style="border:none; background:#fff;">
                <div class="card-header bg-white border-0 p-3">
                    <h6 class="mb-0 fw-bold" style="font-size:1.1rem;"><i class="fa fa-video mr2" style="color:#1877f2;"></i> {__("Create Reel")}</h6>
                </div>
                <div class="card-body p-3">
                    <form id="reel-upload-form" action="" method="post" enctype="multipart/form-data">
                        <input type="hidden" name="action" value="upload_reel">
                        
                        <div class="mb-3">
                            <label class="form-label fw-bold small text-uppercase text-muted">{__("Title")}</label>
                            <input type="text" class="form-control form-control-lg bg-light border-0" name="title" placeholder="{__("What is this reel about?")}" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-bold small text-uppercase text-muted">{__("Description")}</label>
                            <textarea class="form-control bg-light border-0" name="description" rows="2" placeholder="{__("Add a description...")}"></textarea>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-bold small text-uppercase text-muted">{__("Video File")} <span class="text-danger">*</span></label>
                            <div class="custom-file bg-light rounded p-2 border-dashed" style="border:2px dashed #ddd;">
                                <input type="file" class="custom-file-input" name="video_file" id="video_file" accept="video/mp4,video/mov,video/avi,video/webm,video/mkv" required onchange="updateFileName(this)">
                                <label class="custom-file-label m-0" for="video_file" style="line-height:2.5rem;">{__("Choose video (10s - 2min)")}</label>
                            </div>
                            <small class="text-muted d-block mt1">{__("MP4, MOV, AVI, WebM, MKV. Max 2 minutes.")}</small>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-bold small text-uppercase text-muted">{__("Cover Image")}</label>
                            <div class="custom-file bg-light rounded p-2 border-dashed" style="border:2px dashed #ddd;">
                                <input type="file" class="custom-file-input" name="cover_image" id="cover_image" accept="image/jpeg,image/png,image/webp" onchange="updateFileName(this)">
                                <label class="custom-file-label m-0" for="cover_image" style="line-height:2.5rem;">{__("Choose cover")}</label>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-bold small text-uppercase text-muted">{__("Background Music")}</label>
                            <div class="custom-file bg-light rounded p-2 border-dashed" style="border:2px dashed #ddd;">
                                <input type="file" class="custom-file-input" name="background_music" id="background_music" accept="audio/mpeg,audio/mp3,audio/aac,audio/wav" onchange="updateFileName(this)">
                                <label class="custom-file-label m-0" for="background_music" style="line-height:2.5rem;">{__("Choose audio")}</label>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary w-100 rounded-pill py-2 fw-bold" style="background:#1877f2; border:none;">
                            <i class="fa fa-cloud-upload-alt mr2"></i> {__("Post Reel")}
                        </button>
                    </form>
                </div>
            </div>
        </div>

    {* --- REELS FEED (Facebook Mobile Feed Style) --- *}
    {else}
        <div class="reels-feed-container" style="width:100%; max-width:450px; margin:0 auto; background:#f0f2f5; min-height:100vh; padding-bottom:80px;">
            {if $posts}
                <div class="reels-loader text-center py-3" data-offset="1" style="color:#1877f2;">
                    <span class="spinner-border spinner-border-sm mr2"></span> {__("Loading")}
                </div>
                {foreach $posts as $post}
                    {include file='__feeds_reel.tpl' _iteration=$post@iteration}
                {/foreach}
            {else}
                <div class="mtb30 text-center p-5">
                    <div style="font-size:3rem; margin-bottom:15px;">📹</div>
                    <h5 class="text-muted">{__("No reels yet")}</h5>
                    <p class="text-muted small">{__("Be the first to share a reel!")}</p>
                    <a href="{url}reels?view=upload" class="btn btn-primary rounded-pill px-4" style="background:#1877f2; border:none;">
                        <i class="fa fa-plus mr2"></i> {__("Create Reel")}
                    </a>
                </div>
            {/if}
        </div>
    {/if}

</div>

{include file='_footer.tpl'}

<script>
    // Auto-play first reel and update URL for single view (Facebook style)
    $(document).ready(function() {
        var first_id = $('.reel-container').first().data('id');
        if (first_id) {
            var url = site_path + '/reels/' + first_id;
            window.history.pushState({ state: 'new' }, '', url);
        }
    });

    function updateFileName(input) {
        var label = input.nextElementSibling;
        if (input.files && input.files.length > 0) {
            label.innerHTML = '<i class="fa fa-check-circle text-success mr2"></i> ' + input.files[0].name;
        } else {
            label.innerHTML = "{__("Choose file")}";
        }
    }

    // Handle upload form submission (Facebook style AJAX)
    $("#reel-upload-form").submit(function(e) {
        e.preventDefault();
        var btn = $(this).find('button[type="submit"]');
        btn.html('<span class="spinner-border spinner-border-sm mr2"></span> {__("Posting...")}').prop('disabled', true);
        
        var formData = new FormData(this);
        $.ajax({
            url: site_path + "/reels?view=upload",
            type: "POST",
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                if (response.success && response.reel_id) {
                    window.location.href = site_path + "/reels/" + response.reel_id;
                } else {
                    btn.html('<i class="fa fa-cloud-upload-alt mr2"></i> {__("Post Reel")}').prop('disabled', false);
                    modal("MESSAGE", "{__("Error")}", response.message || "{__("Something went wrong")}");
                }
            },
            error: function() {
                btn.html('<i class="fa fa-cloud-upload-alt mr2"></i> {__("Post Reel")}').prop('disabled', false);
                modal("MESSAGE", "{__("Error")}", "{__("Network error. Please try again.")}");
            }
        });
    });
</script>