{% extends "base.html" %}
{% block title %}New Post — {{ config.APP_NAME }}{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <h2 class="mb-4"><i class="bi bi-plus-square"></i> New Post</h2>
        <div class="card bg-dark border-secondary">
            <div class="card-body">
                <form method="post" action="{{ url_for('post.new_post') }}" enctype="multipart/form-data" id="post-form">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    {% set scopes = account.scope_list() %}
                    <p class="text-secondary mb-3"><i class="bi bi-person-circle"></i> Posting to <strong class="text-light">{{ account.display_name }}</strong></p>

                    <div class="mb-3">
                        <label class="form-label">How to publish</label>
                        <select name="mode" class="form-select" id="mode">
                            {% if 'video.upload' in scopes %}<option value="draft" selected>Send to my TikTok inbox as a draft (I finish and post it in the TikTok app)</option>{% endif %}
                            {% if 'video.publish' in scopes %}<option value="direct">Direct post</option>{% endif %}
                        </select>
                    </div>

                    <div class="alert alert-info small" id="draft-note">
                        <i class="bi bi-bell"></i> TikTok sends a notification to your TikTok app. Open the app and tap the inbox notification to edit the video, write the caption and post it.
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Video file <span class="text-secondary">(mp4, mov or webm from your device)</span></label>
                        <input type="file" name="video_file" class="form-control" accept=".mp4,.mov,.webm" id="video-file">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">or video URL <span class="text-secondary">(public https URL TikTok can pull from)</span></label>
                        <input type="url" name="video_url" class="form-control" placeholder="https://example.com/video.mp4">
                    </div>
                    <div class="mb-3 d-none" id="preview-box">
                        <label class="form-label">Preview</label>
                        <video id="preview" class="d-block rounded border border-secondary" style="max-height:360px;max-width:100%" controls muted></video>
                    </div>

                    <div id="direct-fields" class="d-none">
                        <div class="mb-3">
                            <label class="form-label">Caption <span class="text-secondary">(optional, max 2,200 characters)</span></label>
                            <textarea name="title" class="form-control" rows="3" placeholder="Caption + #hashtags"></textarea>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Privacy</label>
                            <select name="privacy_level" class="form-select">
                                <option value="SELF_ONLY">Self only (private)</option>
                                <option value="MUTUAL_FOLLOW_FRIENDS">Mutual follow friends</option>
                                <option value="PUBLIC_TO_EVERYONE">Public to everyone</option>
                            </select>
                            <span class="text-secondary small">Unaudited apps can only post SELF_ONLY.</span>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Schedule <span class="text-secondary">(optional — leave empty to send now; the scheduler container sends it at the chosen time)</span></label>
                        <input type="datetime-local" name="scheduled_at" class="form-control">
                    </div>
                    <button type="submit" class="btn text-light"
                            style="background: linear-gradient(90deg, var(--tt-pink), var(--tt-cyan));">
                        <i class="bi bi-send"></i> Send to TikTok
                    </button>
                    <a href="{{ url_for('post.posts') }}" class="btn btn-outline-secondary ms-2">Cancel</a>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
(function () {
    var mode = document.getElementById('mode');
    var direct = document.getElementById('direct-fields');
    var note = document.getElementById('draft-note');
    function sync() {
        var isDirect = mode.value === 'direct';
        direct.classList.toggle('d-none', !isDirect);
        note.classList.toggle('d-none', isDirect);
    }
    mode.addEventListener('change', sync);
    sync();
    var file = document.getElementById('video-file');
    file.addEventListener('change', function () {
        var box = document.getElementById('preview-box');
        if (!file.files.length) { box.classList.add('d-none'); return; }
        document.getElementById('preview').src = URL.createObjectURL(file.files[0]);
        box.classList.remove('d-none');
    });
})();
</script>
{% endblock %}