@using Postall.Models

<!-- Views/SocialMedia/Index.cshtml -->
@{
    ViewData["Title"] = "Gerenciador de Postagens";
}

<div class="container-fluid mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>Gerenciador de Postagens</h2>
        <a href="@Url.Action("Post", "SocialMedia")" class="btn btn-primary">
            <i class="bi bi-plus-circle"></i> Nova Postagem
        </a>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover" id="postsTable">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Canal</th>
                            <th>Título</th>
                            <th>Próxima Data</th>
                            <th>Última Atualização</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Os dados serão preenchidos via JavaScript -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Template para detalhes expandidos -->
<template id="detailsTemplate">
    <div class="expanded-details p-3">
        <div class="row">
            <div class="col-md-8">
                <h5 class="mb-3">Status das Redes Sociais</h5>
                <div class="social-media-grid">
                    <!-- Facebook -->
                    <div class="social-media-item">
                        <div class="d-flex align-items-center mb-2">
                            <i class="bi bi-facebook me-2"></i>
                            <span class="platform-name">Facebook</span>
                        </div>
                        <div class="status-badge">
                            <span class="badge rounded-pill status-placeholder">Status</span>
                        </div>
                        <div class="next-date small text-muted mt-1">
                            Próxima data: <span class="date-placeholder">--/--/----</span>
                        </div>
                    </div>

                    <!-- Instagram -->
                    <div class="social-media-item">
                        <div class="d-flex align-items-center mb-2">
                            <i class="bi bi-instagram me-2"></i>
                            <span class="platform-name">Instagram</span>
                        </div>
                        <div class="status-badge">
                            <span class="badge rounded-pill status-placeholder">Status</span>
                        </div>
                        <div class="next-date small text-muted mt-1">
                            Próxima data: <span class="date-placeholder">--/--/----</span>
                        </div>
                    </div>

                    <!-- Twitter/X -->
                    <div class="social-media-item">
                        <div class="d-flex align-items-center mb-2">
                            <i class="bi bi-twitter-x me-2"></i>
                            <span class="platform-name">Twitter/X</span>
                        </div>
                        <div class="status-badge">
                            <span class="badge rounded-pill status-placeholder">Status</span>
                        </div>
                        <div class="next-date small text-muted mt-1">
                            Próxima data: <span class="date-placeholder">--/--/----</span>
                        </div>
                    </div>

                    <!-- WhatsApp -->
                    <div class="social-media-item">
                        <div class="d-flex align-items-center mb-2">
                            <i class="bi bi-whatsapp me-2"></i>
                            <span class="platform-name">WhatsApp</span>
                        </div>
                        <div class="status-badge">
                            <span class="badge rounded-pill status-placeholder">Status</span>
                        </div>
                        <div class="next-date small text-muted mt-1">
                            Próxima data: <span class="date-placeholder">--/--/----</span>
                        </div>
                    </div>

                    <!-- Telegram -->
                    <div class="social-media-item">
                        <div class="d-flex align-items-center mb-2">
                            <i class="bi bi-telegram me-2"></i>
                            <span class="platform-name">Telegram</span>
                        </div>
                        <div class="status-badge">
                            <span class="badge rounded-pill status-placeholder">Status</span>
                        </div>
                        <div class="next-date small text-muted mt-1">
                            Próxima data: <span class="date-placeholder">--/--/----</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

@section Styles {
    <style>
        .social-media-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 1rem;
        }

        .social-media-item {
            padding: 1rem;
            border: 1px solid #dee2e6;
            border-radius: 0.5rem;
            background-color: #f8f9fa;
        }

        .status-badge .badge {
            font-size: 0.875rem;
        }

        .badge.status-publicado { background-color: #198754; }
        .badge.status-nao-selecionado { background-color: #6c757d; }
        .badge.status-gerado { background-color: #0dcaf0; }
        .badge.status-agendado { background-color: #ffc107; color: #000; }
        .badge.status-automatizado { background-color: #0d6efd; }

        tr.expanded {
            background-color: #f8f9fa;
        }

        .expanded-details {
            background-color: #f8f9fa;
            border-top: 1px solid #dee2e6;
        }

        @@media (max-width: 768px) {
            .social-media-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
}

@section Scripts {
    <script>
        $(document).ready(function() {
            loadPosts();
        });

        function loadPosts() {
            $.get('@Url.Action("GetPostDetails", "SocialMedia")', function(data) {
                if (data.success) {
                    renderPosts(data.posts);
                }
            });
        }

        function renderPosts(posts) {
            const tbody = $('#postsTable tbody');
            tbody.empty();

            posts.forEach(post => {
                const row = $(`
                    <tr data-post-id="${post.id}">
                        <td>
                            <button class="btn btn-sm btn-link expand-btn">
                                <i class="bi bi-chevron-right"></i>
                            </button>
                        </td>
                        <td>${post.channel}</td>
                        <td>${post.title}</td>
                        <td>${formatDate(post.nextScheduledDate)}</td>
                        <td>${formatDate(post.lastUpdate)}</td>
                    </tr>
                `);

                tbody.append(row);
            });
        }

        function formatDate(dateString) {
            if (!dateString) return '--/--/----';
            const date = new Date(dateString);
            return date.toLocaleDateString('pt-BR');
        }

        function getStatusBadgeClass(status) {
            const statusMap = {
                'publicado': 'status-publicado',
                'não selecionado': 'status-nao-selecionado',
                'gerado': 'status-gerado',
                'agendado': 'status-agendado',
                'automatizado': 'status-automatizado'
            };
            return statusMap[status.toLowerCase()] || '';
        }

        $(document).on('click', '.expand-btn', function() {
            const row = $(this).closest('tr');
            const postId = row.data('post-id');
            const icon = $(this).find('i');

            if (row.next().hasClass('details-row')) {
                // Fechar detalhes
                row.next().remove();
                row.removeClass('expanded');
                icon.removeClass('bi-chevron-down').addClass('bi-chevron-right');
            } else {
                // Abrir detalhes
                $.get(`@Url.Action("GetSocialMediaStatus", "SocialMedia")?postId=${postId}`, function(data) {
                    if (data.success) {
                        const template = document.getElementById('detailsTemplate');
                        const detailsContent = template.content.cloneNode(true);

                        // Preencher os status
                        data.socialMediaStatus.forEach(status => {
                            const platformElement = $(detailsContent).find(`[data-platform="${status.platform}"]`);
                            platformElement.find('.status-placeholder')
                                .text(status.status)
                                .addClass(getStatusBadgeClass(status.status));
                            platformElement.find('.date-placeholder').text(formatDate(status.nextScheduledDate));
                        });

                        const detailsRow = $('<tr class="details-row">').append(
                            $('<td colspan="5">').append(detailsContent)
                        );

                        row.addClass('expanded');
                        row.after(detailsRow);
                        icon.removeClass('bi-chevron-right').addClass('bi-chevron-down');
                    }
                });
            }
        });
    </script>
}