{% extends 'base.html' %}
{% block content %}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<style>
    /* === Global Theme Styles === */
    .daywise-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 25px;
    }

    .header-banner {
        background: linear-gradient(135deg, #0f5f7a 0%, #1a8ba8 100%);
        color: white;
        border-radius: 12px;
        padding: 25px 30px;
        margin-bottom: 30px;
        box-shadow: 0 4px 20px rgba(15, 95, 122, 0.2);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .header-title {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .header-banner h1 {
        margin: 0;
        font-size: 24px;
        font-weight: 600;
    }

    /* Table Styles */
    .table-container {
        background: white;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        border: 1px solid #e0e0e0;
    }

    .table th {
        background: #f8f9fa !important;
        color: #555;
        border: none;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 12px;
    }

    .table td {
        vertical-align: middle;
        font-size: 14px;
        border-top: 1px solid #f0f0f0;
    }

    /* Checkbox Styles */
    .custom-checkbox {
        width: 18px;
        height: 18px;
        cursor: pointer;
        accent-color: #0f5f7a;
    }

    /* Topic Link */
    .topic-link {
        color: #0f5f7a;
        font-weight: 600;
        text-decoration: none;
        transition: 0.2s;
        display: block;
        max-width: 350px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
    }

    .topic-link:hover {
        color: #1a8ba8;
        text-decoration: underline;
    }

    /* Status Badges */
    .status-posted {
        color: #10b981;
        font-weight: 600;
        background: #ecfdf5;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 12px;
        display: inline-block;
    }

    .status-pending {
        color: #f59e0b;
        font-weight: 600;
        background: #fffbeb;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 12px;
        display: inline-block;
    }

    /* Action Buttons */
    .btn-linkedin {
        background: #0077b5;
        color: white;
        border: none;
        padding: 6px 14px;
        border-radius: 6px;
        font-size: 13px;
        transition: 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-weight: 500;
    }

    .btn-linkedin:hover {
        background: #005f87;
        color: white;
        transform: translateY(-1px);
    }

    .action-btn {
        padding: 6px 10px;
        border-radius: 6px;
        font-size: 16px;
        transition: 0.2s;
        border: 1px solid #ddd;
        background: white;
    }

    .action-btn:hover {
        background: #f8f9fa;
        border-color: #0f5f7a;
        color: #0f5f7a;
    }

    /* Modal LinkedIn Styles */
    .modal-content {
        border-radius: 12px;
        border: none;
        overflow: hidden;
    }

    .linkedin-card-header {
        display: flex;
        align-items: center;
        padding: 16px 20px;
        background-color: #fff;
        border-bottom: 1px solid #f3f2ef;
    }

    .linkedin-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 12px;
        border: 1px solid #eee;
    }

    .edit-textarea {
        width: 100%;
        border: 1px dashed #ccc;
        background: #fcfcfc;
        padding: 15px;
        border-radius: 8px;
        font-size: 15px;
        min-height: 300px;
        line-height: 1.6;
    }

    /* Custom Close Button for Header */
.btn-close-custom {
    background: transparent;
    border: none;
    color: #666;             /* Muted gray text */
    font-size: 1.1rem;       /* Crisp size */
    width: 36px;             /* Fixed width for circle */
    height: 36px;            /* Fixed height for circle */
    border-radius: 50%;      /* Perfect circle */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;       /* Pushes button to the far right */
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Hover Effect (LinkedIn Style) */
.btn-close-custom:hover {
    background-color: #f3f2ef; /* Light gray background */
    color: #191919;            /* Darker icon on hover */
    transform: rotate(90deg);  /* Subtle rotation for interaction */
}

.btn-close-custom:focus {
    outline: none;             /* Removes the blue browser border */
}
</style>

<div class="daywise-container">

    <div class="header-banner">
        <div class="header-title">
            <i class="bi bi-collection-play" style="font-size: 2rem;"></i>
            <h1>Saved Posts Repository</h1>
        </div>
        <button id="bulkDeleteBtn" class="btn btn-danger btn-sm px-3 py-2 font-weight-bold"
            style="border-radius: 20px; display: none;">
            <i class="bi bi-trash-fill me-1"></i> Delete Selected (<span id="selectedCount">0</span>)
        </button>
    </div>

    <form id="bulkDeleteForm" action="{{ url_for('post_bp.bulk_delete_posts') }}" method="POST"></form>

    {% if posts %}
    <div class="table-container">
        <div class="table-responsive">
            <table class="table table-hover datatable w-100">
                <thead>
                    <tr>
                        <th style="width: 40px; text-align: center;">
                            <input type="checkbox" id="selectAll" class="custom-checkbox">
                        </th>
                        <th style="width: 50px;">S.No</th>
                        <th>Topic / Content Context</th>
                        <th style="width: 150px;">Scheduled For</th>
                        <th style="width: 120px;">Status</th>
                        <th style="width: 180px; text-align: right;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for post in posts %}
                    <tr>
                        <td style="text-align: center;">
                            <input type="checkbox" class="post-checkbox custom-checkbox" value="{{ post.id }}">
                        </td>
                        <td>{{ loop.index }}</td>
                        <td>
                            <a class="view-post topic-link" data-content="{{ post.content|escape }}"
                                data-images='{{ post.image_urls | tojson | safe }}' data-toggle="tooltip"
                                title="Click to Preview Post">
                                {% if post.topic_context %}
                                {{ post.topic_context }}
                                {% else %}
                                {{ post.content | truncate(60) }}
                                {% endif %}
                            </a>
                        </td>
                        <td class="font-weight-bold">{{ post.scheduled_at }}</td>
                        <td>
                            {% if post.status == 'posted' %}
                            <span class="status-posted"><i class="bi bi-check-circle-fill"></i> Published</span>
                            {% else %}
                            <span class="status-pending"><i class="bi bi-clock-history"></i> {{ post.status|capitalize
                                }}</span>
                            {% endif %}
                        </td>
                        <td style="text-align: right;">
                            <div class="d-flex justify-content-end align-items-center gap-2">
                                {% if post.status != 'posted' %}
                                <form action="{{ url_for('post_bp.post_to_linkedin') }}" method="POST" class="m-0">
                                    <input type="hidden" name="content" value="{{ post.content }}">
                                    <input type="hidden" name="post_id" value="{{ post.id }}">
                                    <button type="button" class="btn-linkedin post-btn-sa" data-toggle="tooltip"
                                        title="Publish to LinkedIn">
                                        <i class="bi bi-linkedin"></i> Post
                                    </button>
                                </form>

                                <button type="button" class="btn action-btn edit-post-btn" data-toggle="tooltip"
                                    title="Edit Post" data-id="{{ post.id }}" data-date="{{ post.scheduled_at }}"
                                    data-content="{{ post.content }}"
                                    data-images='{{ post.image_urls | tojson | safe }}'>
                                    <i class="bi bi-pencil-square text-info"></i>
                                </button>

                                <a href="{{ url_for('post_bp.delete_post', post_id=post.id) }}"
                                    class="btn action-btn delete-btn-sa" data-toggle="tooltip" title="Delete Post">
                                    <i class="bi bi-trash-fill text-danger"></i>
                                </a>
                                {% else %}
                                <small class="text-muted italic">No further actions</small>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% else %}
    <div class="text-center p-5 bg-white rounded shadow-sm border">
        <h4 class="mb-3 text-muted">No Saved Posts Found</h4>
        <p class="mb-4">You haven't scheduled or saved any LinkedIn posts yet.</p>
        <a href="{{ url_for('content_bp.generate_text') }}" class="btn text-white px-4 py-2"
            style="background: linear-gradient(135deg, #0f5f7a 0%, #1a8ba8 100%); border-radius: 50px; font-weight: 600;">
            🚀 Start Generating Content
        </a>
    </div>
    {% endif %}
</div>

<div class="modal fade" id="editPostModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <form id="editPostForm" method="POST" enctype="multipart/form-data">
                <div class="linkedin-card-header">
                    <img src="{{ session.get('user_pic', 'https://cdn-icons-png.flaticon.com/512/847/847969.png') }}"
                        class="linkedin-avatar">
                    <div class="linkedin-user-info" style="flex-grow: 1;">
                        <h6 style="margin:0; font-weight:600;">{{ session.get('username', 'User') }}</h6>
                        <div class="d-flex align-items-center gap-2 mt-1">
                            <small>Scheduled for:</small>
                            <input type="date" name="post_date" id="editPostDate" class="edit-date-input" required>
                        </div>
                    </div>
                </div>
                <div class="modal-body p-4">
                    <textarea name="content" id="editPostContent" class="edit-textarea"
                        placeholder="Edit your post content..."></textarea>

                    <div id="editImageCarousel" class="carousel slide bg-light rounded mt-3" data-ride="carousel">
                        <div class="carousel-inner" id="editCarouselImages"></div>
                    </div>

                    <div class="mt-3 p-3 bg-light border rounded text-center">
                        <label for="editImageUpload" style="cursor:pointer;" class="text-primary fw-bold mb-0">
                            <i class="bi bi-images me-2"></i> Replace Post Images
                        </label>
                        <input type="file" name="image" id="editImageUpload" style="display:none;" accept="image/*"
                            multiple onchange="$('#fileCount').text(this.files.length + ' files selected')">
                        <div id="fileCount" class="small text-muted mt-1">New uploads will replace existing media.</div>
                    </div>
                </div>
                <div class="modal-footer border-top-0">
                    <button type="button" class="btn btn-light rounded-pill px-4" id="forceCloseEdit">Cancel</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4" style="background:#0f5f7a;">Save
                        Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="postModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content linkedin-card">
            <div class="linkedin-card-header">
                <img src="{{ session.get('user_pic', 'https://cdn-icons-png.flaticon.com/512/847/847969.png') }}"
                    class="linkedin-avatar">

                <div class="linkedin-user-info">
                    <h6 style="margin:0; font-weight:600;">{{ session.get('username', 'You') }}</h6>
                    <small style="color:#666;">Content Creator · Now · 🌐</small>
                </div>

                <button type="button" class="btn-close-custom" id="forceClosePreview" aria-label="Close"
                    style="margin-left: auto; outline: none;">
                    <span aria-hidden="true" style="font-size: 1.5rem;">&times;</span>
                </button>
            </div>
            <div class="linkedin-card-body" style="padding:0;">
                <div class="linkedin-content-area" style="padding:20px; white-space: pre-wrap;">
                    <span id="postModalContent"></span>
                    <div id="postModalHashtags" style="color:#0a66c2; font-weight:600; margin-top:10px;"></div>
                </div>

                <div id="postImageCarousel" class="carousel slide" data-ride="carousel" style="background:#000;">
                    <div class="carousel-inner" id="carouselImages"></div>
                    <a class="carousel-control-prev" href="#postImageCarousel" role="button" data-slide="prev"><span
                            class="carousel-control-prev-icon"></span></a>
                    <a class="carousel-control-next" href="#postImageCarousel" role="button" data-slide="next"><span
                            class="carousel-control-next-icon"></span></a>
                </div>
            </div>
            <div class="linkedin-card-footer d-flex justify-content-around p-3 border-top bg-white">
                <button class="btn btn-sm text-secondary"><i class="bi bi-hand-thumbs-up"></i> Like</button>
                <button class="btn btn-sm text-secondary"><i class="bi bi-chat-text"></i> Comment</button>
                <button class="btn btn-sm text-secondary"><i class="bi bi-arrow-repeat"></i> Repost</button>
                <button class="btn btn-sm text-secondary"><i class="bi bi-send"></i> Send</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        // Enable Tooltips
        $('body').tooltip({ selector: '[data-toggle="tooltip"]' });

        // 1. DataTable Init
        $('.datatable').DataTable({
            pageLength: 10, order: [[3, 'desc']], language: { search: "Filter:" },
            columnDefs: [{ orderable: false, targets: [0, 5] }]
        });

        // 2. Bulk Delete Logic
        $('#selectAll').on('change', function () {
            $('.post-checkbox').prop('checked', this.checked);
            updateBulkButton();
        });

        $(document).on('change', '.post-checkbox', function () {
            if (!this.checked) $('#selectAll').prop('checked', false);
            if ($('.post-checkbox:checked').length === $('.post-checkbox').length) $('#selectAll').prop('checked', true);
            updateBulkButton();
        });

        function updateBulkButton() {
            const count = $('.post-checkbox:checked').length;
            $('#selectedCount').text(count);
            if (count > 0) $('#bulkDeleteBtn').fadeIn(200);
            else $('#bulkDeleteBtn').fadeOut(200);
        }

        $('#bulkDeleteBtn').on('click', function () {
            const selectedIds = [];
            $('.post-checkbox:checked').each(function () { selectedIds.push($(this).val()); });

            Swal.fire({
                title: `Delete ${selectedIds.length} posts?`,
                text: "This will permanently remove selected posts.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                confirmButtonText: 'Yes, Delete'
            }).then((result) => {
                if (result.isConfirmed) {
                    const form = $('#bulkDeleteForm');
                    form.empty();
                    selectedIds.forEach(id => {
                        form.append(`<input type="hidden" name="post_ids" value="${id}">`);
                    });
                    form.submit();
                }
            });
        });

        // 3. Single Action Confirmations
        $(document).on('click', '.delete-btn-sa', function (e) {
            e.preventDefault();
            const url = $(this).attr('href');
            Swal.fire({
                title: 'Delete post?',
                text: "This cannot be undone.",
                icon: 'error',
                showCancelButton: true,
                confirmButtonText: 'Delete'
            }).then((result) => { if (result.isConfirmed) window.location.href = url; });
        });

        $(document).on('click', '.post-btn-sa', function () {
            const form = $(this).closest('form');
            Swal.fire({
                title: 'Publish to LinkedIn?',
                text: "This content will be posted immediately.",
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#0077b5',
                confirmButtonText: 'Post Now'
            }).then((result) => { if (result.isConfirmed) form.submit(); });
        });

        // 4. Modal Helpers
        function parseImages(data) {
            if (!data) return [];
            try {
                return typeof data === 'string' ? JSON.parse(data) : data;
            } catch (e) { return []; }
        }

        function buildCarousel(containerId, carouselId, images, height) {
            const $container = $(containerId).empty();
            if (images && images.length > 0) {
                images.forEach((url, i) => {
                    $container.append(`<div class="carousel-item ${i === 0 ? 'active' : ''}"><img src="${url}" class="d-block w-100" style="max-height:${height}; object-fit:contain;"></div>`);
                });
                $(carouselId).show();
            } else {
                $(carouselId).hide();
            }
        }

        $(document).on('click', '.view-post', function () {
            const content = $(this).data('content');
            const images = parseImages($(this).attr('data-images'));
            $('#postModalContent').text(content);
            buildCarousel('#carouselImages', '#postImageCarousel', images, '500px');
            $('#postModal').modal('show');
        });

        $(document).on('click', '.edit-post-btn', function () {
            const postId = $(this).data('id');
            const postDate = $(this).data('date');
            const postContent = $(this).data('content');
            const images = parseImages($(this).attr('data-images'));

            $('#editPostForm').attr('action', '/update_post/' + postId);
            $('#editPostDate').val(postDate);
            $('#editPostContent').val(postContent);
            buildCarousel('#editCarouselImages', '#editImageCarousel', images, '250px');
            $('#editPostModal').modal('show');
        });
    });
    // Manual Modal Overrides
    $(document).ready(function () {

        // Force close Edit Modal
        $('#forceCloseEdit').on('click', function () {
            console.log("Manual Close: Edit Modal");
            $('#editPostModal').modal('hide');
            $('body').removeClass('modal-open');
            $('.modal-backdrop').remove();
        });

        // Force close Preview Modal
        $('#forceClosePreview').on('click', function () {
            console.log("Manual Close: Preview Modal");
            $('#postModal').modal('hide');
            $('body').removeClass('modal-open');
            $('.modal-backdrop').remove();
        });

        // Ensure clicking outside also cleans up
        $(document).on('hidden.bs.modal', '.modal', function () {
            $('.modal-backdrop').remove();
        });
    });
    $(document).on('click', '.edit-post-btn', function() {
    // 1. Get current date/time details
    const now = new Date();
    let minDate = new Date(now);

    // 2. STRICT RULE: Check if it's past 11:10 AM
    if (now.getHours() > 11 || (now.getHours() === 11 && now.getMinutes() > 10)) {
        // Cutoff passed: Advance minimum date to Tomorrow
        minDate.setDate(minDate.getDate() + 1);
    }

    // 3. Format to YYYY-MM-DD
    const year = minDate.getFullYear();
    const month = String(minDate.getMonth() + 1).padStart(2, '0');
    const day = String(minDate.getDate()).padStart(2, '0');
    const minDateString = `${year}-${month}-${day}`;

    // 4. Apply to Edit Input
    $('#editPostDate').attr('min', minDateString);

    // 5. Pre-fill with existing date (Handle conflict if existing date < new min)
    const currentScheduledDate = $(this).data('date');
    
    // Logic check: If the post was scheduled for "Today" but we are now past cutoff,
    // the input might show an error or reset depending on browser.
    // We force the value to be at least the new minimum if the old date is invalid.
    if (currentScheduledDate < minDateString) {
        $('#editPostDate').val(minDateString); // Auto-bump to tomorrow
    } else {
        $('#editPostDate').val(currentScheduledDate); // Keep original if valid
    }
});
</script>
{% endblock %}