// Recent Posts Table Component with enhanced SweetAlert for view and delete
const RecentPostsTableComponent = {
    props: ['posts', 'pagination'],
    methods: {
        openLink(url) {
            window.open(url, '_blank');
        },
        askView(post) {
            const html = `
        <div style="display:grid; grid-template-columns:150px auto; gap:12px; font-family:system-ui, sans-serif; color:#374151; line-height:1.6;">
          <div style="font-weight:600; color:#111827;">Title:</div><div>${post.title}</div>
          <div style="font-weight:600; color:#111827;">Status:</div><div>${post.status}</div>
          <div style="font-weight:600; color:#111827;">ID:</div><div>${post.id}</div>
          <div style="font-weight:600; color:#111827;">Category:</div><div>${post.category}</div>
          <div style="font-weight:600; color:#111827;">Language:</div><div>${post.language}</div>
          <div style="font-weight:600; color:#111827;">Publish Date:</div><div>${post.publish_date}</div>
          <div style="font-weight:600; color:#111827;">Created At:</div><div>${post.created_at}</div>
          <div style="font-weight:600; color:#111827;">Credits Used:</div><div>${post.credits}</div>
          <div style="font-weight:600; color:#111827;">Exact Title:</div><div>${post.exact_title}</div>
          <div style="font-weight:600; color:#111827;">Content Length:</div><div>${post.content_length}</div>
        </div>`;
            Swal.fire({
                titleText: 'Post Details',
                html,
                width: '700px',
                padding: '1.5rem',
                background: '#ffffff',
                showCloseButton: true,
                showConfirmButton: false,
                customClass: {
                    popup: 'shadow-xl rounded-2xl border border-gray-200',
                    title: 'text-xl font-semibold text-gray-900',
                    htmlContainer: 'p-4 bg-gray-50 rounded-lg',
                }
            });
        },
        askDelete(postId) {
            // Find the post with the given ID
            const post = this.posts.find(p => p.id === postId);
            const penaltyCredit = post && post.penalty_credit_for_delete ? post.penalty_credit_for_delete : 0;

            Swal.fire({
                title: '<span style="font-size:1.25em;">Confirm Deletion</span>',
                html: `<p style="color:#374151;">Deleting this post will refund your credits. Penalty credit for cancelation: ${penaltyCredit}</p>`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Delete',
                cancelButtonText: 'Cancel',
                confirmButtonColor: '#dc2626',
                customClass: {
                    popup: 'shadow-lg rounded-lg border border-gray-300',
                    title: 'text-lg font-medium text-gray-800',
                    htmlContainer: 'text-gray-700',
                }
            }).then(result => {
                if (result.isConfirmed) {
                    this.$emit('delete-post', postId);
                }
            });
        }
    },
    template: `
    <div class="scheduled-posts-container">
      <h2 class="section-title">Recent Posts</h2>
      <div class="posts-table-wrapper">
        <table class="posts-table">
          <thead>
            <tr>
              <th>Title</th>
              <th>Status</th>
              <th>Scheduled Date / Publish Status</th>
              <th>Created At</th>
              <th>Credits</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="post in posts" :key="post.id">
              <td>{{ post.title }}</td>
              <td>
                <span class="status-badge" :class="post.status.toLowerCase()" :title="post.status">
                  {{ post.status }}
                </span>
              </td>
              <td>{{ post.publish_date }}</td>
              <td>{{ post.created_at }}</td>
              <td>{{ post.credits }}</td>
              <td>
                <button class="action-btn link-btn post-link" :class="{ hide: !post.post_link }" @click.prevent="openLink(post.post_link)">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M10 13a5 5 0 0 1 7 0l4-4a5 5 0 0 0-7-7l-4 4"></path>
                    <path d="M14 11a5 5 0 0 0-7 0l-4 4a5 5 0 0 0 7 7l4-4"></path>
                  </svg>
                </button>
                <button class="action-btn view-btn" @click.prevent="askView(post)">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                    <circle cx="12" cy="12" r="3"></circle>
                  </svg>
                </button>
                <button class="action-btn delete-btn" v-if="post.status.toLowerCase()==='pending'" @click.prevent="askDelete(post.id)">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                  </svg>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="pagination">
          <button @click.prevent="$emit('prev')" :disabled="!pagination.prev">Previous</button>
          <span>Page {{ pagination.current_page }} of {{ pagination.last_page }}</span>
          <button @click.prevent="$emit('next')" :disabled="!pagination.next">Next</button>
        </div>
      </div>
    </div>
  `
};

// Check if we're in a Vue 2 or Vue 3 environment
if (typeof Vue !== 'undefined') {
    if (Vue.createApp) {
        // Vue 3
        if (typeof app !== 'undefined') {
            // If app is already defined, register the component
            app.component('recent-posts-table', RecentPostsTableComponent);
        } else {
            // Otherwise, create a new app and register the component
            const app = Vue.createApp({});
            app.component('recent-posts-table', RecentPostsTableComponent);
            // Note: You'll need to mount this app to an element
        }
    } else if (Vue.component) {
        // Vue 2
        Vue.component('recent-posts-table', RecentPostsTableComponent);
    }
}
