@extends('layouts.app')

@section('title', 'Criar Novo Post')

@push('styles')
<link href="{{ asset('vendors/flatpickr/flatpickr.min.css') }}" rel="stylesheet">
<link href="{{ asset('vendors/dropzone/dropzone.css') }}" rel="stylesheet">
<link href="{{ asset('vendors/choices/choices.min.css') }}" rel="stylesheet">
<style>
/* TASK-029: Platform selector styles */
.form-check-card {
    position: relative;
    padding: 0.75rem;
    border: 2px solid var(--phoenix-gray-200);
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.form-check-card:hover {
    border-color: var(--phoenix-primary);
    background-color: var(--phoenix-gray-100);
}

.form-check-card.border-primary {
    border-color: var(--phoenix-primary) !important;
}

.bg-primary-subtle {
    background-color: rgba(102, 126, 234, 0.1) !important;
}

.form-check-card .form-check-input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.form-check-card .form-check-label {
    margin: 0;
    cursor: pointer;
}

/* Choices.js Phoenix theme */
.choices__inner {
    background-color: var(--phoenix-input-bg);
    border-color: var(--phoenix-input-border-color);
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: var(--phoenix-primary);
}

.choices__list--single .choices__item img {
    vertical-align: middle;
}

/* Character counter styles */
.form-text {
    font-size: 0.875rem;
    color: var(--phoenix-text-muted);
}

/* Valid/Invalid feedback animation */
.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--phoenix-success);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* Avatar in select */
.avatar-xs {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: cover;
}

/* TASK-030: Step 2 Styles */
.tipo-card {
    transition: all 0.3s ease;
    height: 100%;
}

.tipo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.tipo-card-wrapper.disabled .tipo-card {
    opacity: 0.5;
    cursor: not-allowed;
}

.tipo-card-wrapper.disabled .tipo-card:hover {
    transform: none;
    box-shadow: none;
}

/* Dimension preview */
.dimension-preview {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dimension-box {
    border: 2px dashed var(--phoenix-gray-400);
    position: relative;
    background: var(--phoenix-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dimension-box[data-tipo="feed"] {
    width: 50px;
    height: 50px;
}

.dimension-box[data-tipo="reels"],
.dimension-box[data-tipo="stories"] {
    width: 30px;
    height: 53px;
}

.dimension-box[data-tipo="carrossel"] {
    width: 50px;
    height: 50px;
    position: relative;
}

.dimension-box[data-tipo="carrossel"]::after,
.dimension-box[data-tipo="carrossel"]::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px dashed var(--phoenix-gray-400);
    background: var(--phoenix-gray-100);
}

.dimension-box[data-tipo="carrossel"]::after {
    top: 4px;
    left: 4px;
    z-index: -1;
}

.dimension-box[data-tipo="carrossel"]::before {
    top: 8px;
    left: 8px;
    z-index: -2;
}

.dimension-box[data-tipo="video"] {
    width: 60px;
    height: 34px;
}

.dimension-text {
    font-size: 0.625rem;
    color: var(--phoenix-gray-600);
    font-weight: 600;
}

/* Platform icons */
.platform-icons {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.platform-icons .platform-icon {
    font-size: 1rem;
    opacity: 0.3;
    transition: all 0.3s ease;
}

.platform-icons .platform-icon.supported {
    opacity: 1;
}

/* Tooltip styles */
.tooltip-inner {
    max-width: 300px;
    text-align: left;
}

.tipo-tooltip {
    font-size: 0.875rem;
}

.tipo-tooltip ul {
    margin-bottom: 0;
    padding-left: 1.2rem;
}

/* Selected state */
.tipo-card-wrapper.selected .tipo-card {
    border-color: var(--phoenix-primary);
    background-color: var(--phoenix-primary-bg-subtle);
}

/* Duration field */
#durationLimits {
    font-size: 0.875rem;
}

#durationLimits .duration-limit {
    display: flex;
    align-items: center;
    margin-bottom: 0.25rem;
}

#durationLimits .duration-limit i {
    width: 20px;
    margin-right: 0.5rem;
}

/* TASK-031: Step 3 Additional Styles */
.dropzone {
    min-height: 200px;
    border: 2px dashed var(--phoenix-gray-300);
    border-radius: 0.5rem;
    background: var(--phoenix-gray-100);
    padding: 1rem;
}

.dropzone:hover {
    border-color: var(--phoenix-primary);
    background: var(--phoenix-primary-bg-subtle);
}

.dz-preview {
    position: relative;
    display: inline-block;
    margin: 0.5rem;
}

.dz-image {
    border-radius: 0.375rem;
    overflow: hidden;
}

.dz-image img {
    width: 120px;
    height: 120px;
    object-fit: cover;
}

.dz-details {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 0.25rem;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.3s;
}

.dz-preview:hover .dz-details {
    opacity: 1;
}

.dz-remove {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    background: var(--phoenix-danger);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s;
}

.dz-preview:hover .dz-remove {
    opacity: 1;
}

.dz-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(0,0,0,0.3);
}

.dz-upload {
    display: block;
    height: 100%;
    background: var(--phoenix-success);
    transition: width 0.3s;
}

/* Sortable styles */
.sortable-ghost {
    opacity: 0.5;
}

.sortable-drag {
    cursor: move;
}

/* Autocomplete dropdown */
#retrancaSuggestions {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    min-width: 100%;
    padding: 0;
    margin: 0.125rem 0 0;
    font-size: 0.875rem;
    color: var(--phoenix-body-color);
    text-align: left;
    list-style: none;
    background-color: var(--phoenix-card-bg);
    background-clip: padding-box;
    border: 1px solid var(--phoenix-border-color);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

#retrancaSuggestions.show {
    display: block;
}

.retranca-suggestion {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    clear: both;
    font-weight: 400;
    color: var(--phoenix-body-color);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    cursor: pointer;
}

.retranca-suggestion:hover {
    color: var(--phoenix-body-emphasis);
    background-color: var(--phoenix-gray-200);
}

/* TinyMCE custom styles */
.tox-tinymce {
    border-color: var(--phoenix-input-border-color) !important;
}

.tox .tox-toolbar {
    background-color: var(--phoenix-gray-100) !important;
}

/* TASK-032: Step 4 - Platform Tabs and Preview */
.platform-tabs {
    border-bottom: 2px solid var(--phoenix-gray-200);
    margin-bottom: 2rem;
}

.platform-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    margin-bottom: -2px;
    border: none;
    background: none;
    color: var(--phoenix-gray-600);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.platform-tab:hover {
    color: var(--phoenix-gray-900);
}

.platform-tab.active {
    color: var(--phoenix-primary);
    border-bottom: 2px solid var(--phoenix-primary);
}

.platform-tab i {
    font-size: 1.25rem;
    margin-right: 0.5rem;
}

.platform-content {
    display: none;
}

.platform-content.active {
    display: block;
}

/* Social Preview Styles */
.social-preview {
    background: var(--phoenix-gray-100);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-top: 1rem;
}

.preview-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--phoenix-gray-200);
}

.preview-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 0.75rem;
    object-fit: cover;
}

.preview-username {
    font-weight: 600;
    color: var(--phoenix-gray-900);
}

.preview-time {
    font-size: 0.875rem;
    color: var(--phoenix-gray-500);
}

.preview-content {
    color: var(--phoenix-gray-800);
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.preview-hashtags {
    color: var(--phoenix-primary);
}

/* Character Counter Visual */
.character-counter {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.character-progress {
    width: 40px;
    height: 40px;
    position: relative;
}

.character-progress svg {
    transform: rotate(-90deg);
}

.character-progress-bg {
    fill: none;
    stroke: var(--phoenix-gray-300);
    stroke-width: 3;
}

.character-progress-bar {
    fill: none;
    stroke: var(--phoenix-success);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.3s ease, stroke 0.3s ease;
}

.character-progress-bar.warning {
    stroke: var(--phoenix-warning);
}

.character-progress-bar.danger {
    stroke: var(--phoenix-danger);
}

.character-count-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Copy Button */
.copy-caption-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    background: var(--phoenix-gray-100);
    border: 1px solid var(--phoenix-gray-300);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.copy-caption-btn:hover {
    background: var(--phoenix-primary);
    color: white;
    border-color: var(--phoenix-primary);
}

/* Hashtag Autocomplete */
.hashtag-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: var(--phoenix-card-bg);
    border: 1px solid var(--phoenix-border-color);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display: none;
}

.hashtag-suggestions.show {
    display: block;
}

.hashtag-suggestion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.hashtag-suggestion:hover {
    background: var(--phoenix-gray-100);
}

.hashtag-suggestion-tag {
    font-weight: 500;
    color: var(--phoenix-primary);
}

.hashtag-suggestion-count {
    font-size: 0.75rem;
    color: var(--phoenix-gray-500);
}

.hashtag-suggestion-trending {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    font-size: 0.625rem;
    background: var(--phoenix-danger);
    color: white;
    border-radius: 0.25rem;
    margin-left: 0.5rem;
}

/* Empty state */
.empty-platforms {
    text-align: center;
    padding: 3rem;
    color: var(--phoenix-gray-500);
}

.empty-platforms i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* TASK-033: Duplication Modal Styles */
.duplication-platform-card {
    position: relative;
    border: 2px solid var(--phoenix-gray-200);
    border-radius: 0.5rem;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.duplication-platform-card:hover {
    border-color: var(--phoenix-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.duplication-platform-card.selected {
    border-color: var(--phoenix-primary);
    background-color: var(--phoenix-primary-bg-subtle);
}

.duplication-platform-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.duplication-platform-card.disabled:hover {
    transform: none;
    box-shadow: none;
}

.platform-compatibility {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.schedule-item {
    border: 1px solid var(--phoenix-gray-200);
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 0.5rem;
}

.schedule-item.has-conflict {
    border-color: var(--phoenix-warning);
    background-color: var(--phoenix-warning-bg-subtle);
}

.conflict-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--phoenix-warning);
    margin-right: 0.5rem;
}

.duplication-preview-row {
    transition: background-color 0.2s ease;
}

.duplication-preview-row:hover {
    background-color: var(--phoenix-gray-100);
}

.schedule-time-picker {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.schedule-time-picker input[type="date"],
.schedule-time-picker input[type="time"] {
    max-width: 200px;
}

.adaptation-info {
    font-size: 0.875rem;
    color: var(--phoenix-gray-600);
    margin-top: 0.5rem;
}

.adaptation-info i {
    color: var(--phoenix-info);
    margin-right: 0.25rem;
}
/* Auto-save styles */
.auto-save-indicator {
    position: fixed;
    top: 80px;
    right: 20px;
    background: white;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 1050;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(-10px);
}

.auto-save-indicator.show {
    opacity: 1;
    transform: translateY(0);
}

.auto-save-indicator.saving {
    background: var(--phoenix-warning-bg-subtle);
    color: var(--phoenix-warning);
}

.auto-save-indicator.saved {
    background: var(--phoenix-success-bg-subtle);
    color: var(--phoenix-success);
}

.auto-save-indicator.error {
    background: var(--phoenix-danger-bg-subtle);
    color: var(--phoenix-danger);
}

.draft-recovery-banner {
    background: var(--phoenix-info-bg-subtle);
    border: 1px solid var(--phoenix-info);
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
    display: none;
}

.draft-recovery-banner.show {
    display: block;
}

.draft-selector {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: white;
    border: 1px solid var(--phoenix-gray-300);
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 300px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.draft-selector.show {
    display: block;
}

.draft-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--phoenix-gray-200);
    cursor: pointer;
    transition: background 0.2s ease;
}

.draft-item:hover {
    background: var(--phoenix-gray-100);
}

.draft-item:last-child {
    border-bottom: none;
}

.draft-item-title {
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.draft-item-meta {
    font-size: 0.75rem;
    color: var(--phoenix-gray-600);
    display: flex;
    justify-content: space-between;
}
</style>
@endpush

@section('content')
<!-- Auto-save Indicator -->
<div id="autoSaveIndicator" class="auto-save-indicator">
    <span class="spinner-border spinner-border-sm" style="display: none;"></span>
    <i class="fas fa-check-circle" style="display: none;"></i>
    <i class="fas fa-exclamation-circle" style="display: none;"></i>
    <span class="auto-save-text">Salvando...</span>
</div>
<div class="row g-3 mb-4">
    <div class="col">
        <h2 class="mb-0">Criar Novo Post</h2>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card theme-wizard mb-5" data-theme-wizard="data-theme-wizard">
            <div class="card-header bg-body-highlight pt-3 pb-2 border-bottom-0">
                <ul class="nav justify-content-between nav-wizard nav-wizard-success" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="nav-link active fw-semibold" href="#bootstrap-wizard-validation-tab1"
                           data-bs-toggle="tab" data-wizard-step="1" aria-selected="true" role="tab">
                            <div class="text-center d-inline-block">
                                <span class="nav-item-circle-parent">
                                    <span class="nav-item-circle">
                                        <svg class="svg-inline--fa fa-info" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="info" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path fill="currentColor" d="M48 80a48 48 0 1 1 96 0A48 48 0 1 1 48 80zM0 224c0-17.7 14.3-32 32-32H96c17.7 0 32 14.3 32 32V448h32c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H64V256H32c-17.7 0-32-14.3-32-32z"></path></svg>
                                    </span>
                                </span>
                                <span class="d-none d-md-block mt-1 fs-9">Informações</span>
                            </div>
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link fw-semibold" href="#bootstrap-wizard-validation-tab2"
                           data-bs-toggle="tab" data-wizard-step="2" aria-selected="false" tabindex="-1" role="tab">
                            <div class="text-center d-inline-block">
                                <span class="nav-item-circle-parent">
                                    <span class="nav-item-circle">
                                        <svg class="svg-inline--fa fa-layer-group" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="layer-group" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M264.5 5.2c14.9-6.9 32.1-6.9 47 0l218.6 101c8.5 3.9 13.9 12.4 13.9 21.8s-5.4 17.9-13.9 21.8l-218.6 101c-14.9 6.9-32.1 6.9-47 0L45.9 149.8C37.4 145.8 32 137.3 32 128s5.4-17.9 13.9-21.8L264.5 5.2zM476.9 209.6l53.2 24.6c8.5 3.9 13.9 12.4 13.9 21.8s-5.4 17.9-13.9 21.8l-218.6 101c-14.9 6.9-32.1 6.9-47 0L45.9 277.8C37.4 273.8 32 265.3 32 256s5.4-17.9 13.9-21.8l53.2-24.6 152 70.2c23.4 10.8 50.4 10.8 73.8 0l152-70.2zm-152 198.2l152-70.2 53.2 24.6c8.5 3.9 13.9 12.4 13.9 21.8s-5.4 17.9-13.9 21.8l-218.6 101c-14.9 6.9-32.1 6.9-47 0L45.9 405.8C37.4 401.8 32 393.3 32 384s5.4-17.9 13.9-21.8l53.2-24.6 152 70.2c23.4 10.8 50.4 10.8 73.8 0z"></path></svg>
                                    </span>
                                </span>
                                <span class="d-none d-md-block mt-1 fs-9">Tipo</span>
                            </div>
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link fw-semibold" href="#bootstrap-wizard-validation-tab3"
                           data-bs-toggle="tab" data-wizard-step="3" aria-selected="false" tabindex="-1" role="tab">
                            <div class="text-center d-inline-block">
                                <span class="nav-item-circle-parent">
                                    <span class="nav-item-circle">
                                        <svg class="svg-inline--fa fa-photo-video" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="photo-video" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M256 0H576c35.3 0 64 28.7 64 64V288c0 35.3-28.7 64-64 64H256c-35.3 0-64-28.7-64-64V64c0-35.3 28.7-64 64-64zM476 106.7C471.5 100 464 96 456 96s-15.5 4-20 10.7l-56 84L362.7 169c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6h80 48H552c8.9 0 17-4.9 21.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112 192H208c8.8 0 16 7.2 16 16V416c0 44.2-35.8 80-80 80H80c-44.2 0-80-35.8-80-80V192c0-17.7 14.3-32 32-32H48c8.8 0 16 7.2 16 16v80c0 8.8 7.2 16 16 16zm0 96H80c-8.8 0-16 7.2-16 16V416c0 8.8 7.2 16 16 16h64c8.8 0 16-7.2 16-16V304c0-8.8-7.2-16-16-16H112z"></path></svg>
                                    </span>
                                </span>
                                <span class="d-none d-md-block mt-1 fs-9">Conteúdo</span>
                            </div>
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link fw-semibold" href="#bootstrap-wizard-validation-tab4"
                           data-bs-toggle="tab" data-wizard-step="4" aria-selected="false" tabindex="-1" role="tab">
                            <div class="text-center d-inline-block">
                                <span class="nav-item-circle-parent">
                                    <span class="nav-item-circle">
                                        <svg class="svg-inline--fa fa-share-nodes" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="share-nodes" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M352 224c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z"></path></svg>
                                    </span>
                                </span>
                                <span class="d-none d-md-block mt-1 fs-9">Plataformas</span>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="card-body pt-4 pb-0">
                <div class="tab-content">
                    <!-- Tab 1: Informações Básicas -->
                    <div class="tab-pane active" role="tabpanel" aria-labelledby="bootstrap-wizard-validation-tab1" id="bootstrap-wizard-validation-tab1">
                        <form class="needs-validation" id="wizardValidationForm1" novalidate="novalidate" data-wizard-form="1">

                            <div class="row g-3">
                                <!-- Cliente com busca -->
                                <div class="col-md-6">
                                    <label class="form-label text-body" for="cliente_id">Cliente *</label>
                                    <select class="form-select" name="cliente_id" id="cliente_id"
                                            data-choices="data-choices"
                                            data-options='{"removeItemButton":true,"placeholder":true}'
                                            required>
                                        <option value="">Buscar cliente...</option>
                                        @foreach($clientes as $cliente)
                                            <option value="{{ $cliente->id }}"
                                                    data-custom-properties='{"avatar":"{{ $cliente->logo_url }}"}'>
                                                {{ $cliente->nome }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <div class="invalid-feedback">Por favor, selecione um cliente.</div>
                                </div>

                                <!-- Campanha (cascata) -->
                                <div class="col-md-6">
                                    <label class="form-label text-body" for="campanha_id">Campanha</label>
                                    <select class="form-select" name="campanha_id" id="campanha_id" disabled>
                                        <option value="">Selecione primeiro um cliente</option>
                                    </select>
                                    <div class="invalid-feedback">Campanha inválida.</div>
                                </div>
                            </div>

                            <div class="row g-3 mt-3">
                                <!-- Data -->
                                <div class="col-md-6">
                                    <label class="form-label" for="scheduled_date">Data de Publicação *</label>
                                    <input type="text" class="form-control datetimepicker"
                                           name="scheduled_date"
                                           id="scheduled_date"
                                           placeholder="Selecione a data"
                                           data-options='{"dateFormat":"d/m/Y","disableMobile":true,"minDate":"today"}'
                                           required>
                                    <div class="invalid-feedback">Por favor, selecione uma data.</div>
                                </div>

                                <!-- Horário -->
                                <div class="col-md-6">
                                    <label class="form-label" for="scheduled_time">Horário *</label>
                                    <select class="form-select" name="scheduled_time" id="scheduled_time"
                                            data-choices="data-choices"
                                            data-options='{"searchEnabled":true,"placeholder":true}'
                                            required>
                                        <option value="">Selecione o horário</option>
                                        @if(isset($timeSlots))
                                            @foreach($timeSlots as $slot)
                                                <option value="{{ $slot }}">{{ $slot }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                    <div class="invalid-feedback">Por favor, selecione um horário.</div>
                                </div>
                            </div>

                            <div class="mb-3 mt-3">
                                <label class="form-label" for="title">Título/Retranca *</label>
                                <input type="text" class="form-control" name="title" id="title"
                                       placeholder="Ex: Lançamento Produto X | Novembro 2024"
                                       maxlength="100"
                                       required>
                                <div class="form-text">
                                    <span id="titleCharCount">0</span>/100 caracteres
                                </div>
                                <div class="invalid-feedback">Por favor, insira um título.</div>
                            </div>

                            <!-- Multi-select de Plataformas -->
                            <div class="mb-3">
                                <label class="form-label">Plataformas *</label>
                                <div class="platform-selector">
                                    <div class="row g-2">
                                        @foreach(App\Enums\PlataformaRedeSocial::cases() as $platform)
                                        <div class="col-6 col-md-4 col-lg-3">
                                            <div class="form-check form-check-card">
                                                <input class="form-check-input platform-select"
                                                       type="checkbox"
                                                       name="initial_platforms[]"
                                                       value="{{ $platform->value }}"
                                                       id="init_platform_{{ $platform->value }}">
                                                <label class="form-check-label" for="init_platform_{{ $platform->value }}">
                                                    <span class="d-flex align-items-center">
                                                        <span class="{{ $platform->icon() }} fs-6"
                                                              style="color: {{ $platform->color() }}; width: 24px;"></span>
                                                        <span class="ms-2 fs-9">{{ $platform->label() }}</span>
                                                    </span>
                                                </label>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="invalid-feedback d-block" id="platformError" style="display: none;">
                                    Selecione pelo menos uma plataforma.
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Usar Template (Opcional)</label>
                                <div>
                                    <button type="button" class="btn btn-phoenix-primary btn-sm"
                                            data-bs-toggle="modal" data-bs-target="#templateModal">
                                        <span class="fas fa-file-alt me-2"></span>Selecionar Template
                                    </button>
                                    <span id="selectedTemplateName" class="ms-3 text-body-tertiary">Nenhum template selecionado</span>
                                </div>
                                <input type="hidden" name="template_id" id="template_id">
                            </div>

                            <div class="mb-3">
                                <label class="form-label" for="notes">Observações Internas</label>
                                <textarea class="form-control" name="notes" id="notes" rows="3"
                                          maxlength="500"
                                          placeholder="Informações importantes para a equipe..."></textarea>
                                <div class="form-text">
                                    <span id="notesCharCount">0</span>/500 caracteres
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- Tab 2: Tipo de Conteúdo -->
                    <div class="tab-pane" role="tabpanel" aria-labelledby="bootstrap-wizard-validation-tab2" id="bootstrap-wizard-validation-tab2">
                        <form class="needs-validation" id="wizardValidationForm2" novalidate="novalidate" data-wizard-form="2">
                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <h5 class="mb-0">Selecione o Tipo de Conteúdo</h5>
                                <div id="selectedPlatformsInfo" class="text-muted fs-9">
                                    <!-- Preenchido dinamicamente -->
                                </div>
                            </div>

                            <div class="row g-3">
                                @foreach(App\Enums\TipoConteudoPost::cases() as $tipo)
                                <div class="col-md-4">
                                    <div class="form-check position-relative tipo-card-wrapper" data-tipo="{{ $tipo->value }}">
                                        <input class="form-check-input tipo-radio" type="radio"
                                               name="tipo_conteudo"
                                               value="{{ $tipo->value }}"
                                               id="tipo_{{ $tipo->value }}"
                                               required>
                                        <label class="form-check-label stretched-link" for="tipo_{{ $tipo->value }}">
                                            <div class="card cursor-pointer tipo-card h-100">
                                                <div class="card-body text-center py-4">
                                                    <div class="mb-3 position-relative">
                                                        <span class="{{ $tipo->icon() }} text-{{ $tipo->color() }}" style="font-size: 3rem;"></span>
                                                        <button type="button"
                                                                class="btn btn-link btn-sm position-absolute top-0 end-0 p-0"
                                                                data-bs-toggle="tooltip"
                                                                data-bs-placement="top"
                                                                data-bs-html="true"
                                                                title="<div class='tipo-tooltip' data-tipo='{{ $tipo->value }}'></div>">
                                                            <i class="fas fa-info-circle text-info"></i>
                                                        </button>
                                                    </div>
                                                    <h6 class="mb-1">{{ $tipo->label() }}</h6>
                                                    <p class="mb-2 fs-10 text-body-tertiary">
                                                        @switch($tipo->value)
                                                            @case('feed')
                                                                Imagem ou vídeo quadrado
                                                                @break
                                                            @case('reels')
                                                                Vídeo vertical curto
                                                                @break
                                                            @case('stories')
                                                                Conteúdo temporário
                                                                @break
                                                            @case('carrossel')
                                                                Múltiplas imagens
                                                                @break
                                                            @case('video')
                                                                Vídeo longo
                                                                @break
                                                        @endswitch
                                                    </p>

                                                    <!-- Preview das dimensões -->
                                                    <div class="dimension-preview mb-2">
                                                        <div class="dimension-box mx-auto" data-tipo="{{ $tipo->value }}">
                                                            <span class="dimension-text"></span>
                                                        </div>
                                                    </div>

                                                    <!-- Plataformas suportadas -->
                                                    <div class="supported-platforms">
                                                        <small class="text-muted fs-10">Disponível em:</small>
                                                        <div class="platform-icons mt-1">
                                                            <!-- Preenchido dinamicamente -->
                                                        </div>
                                                    </div>

                                                    <!-- Badge de indisponível -->
                                                    <div class="unavailable-badge d-none">
                                                        <span class="badge bg-danger position-absolute top-0 end-0 m-2">
                                                            Indisponível
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                @endforeach
                            </div>

                            <!-- Campo de duração para vídeos -->
                            <div id="videoDurationField" class="mt-4 d-none">
                                <div class="row">
                                    <div class="col-md-6">
                                        <label class="form-label" for="video_duration">Duração do Vídeo (segundos) *</label>
                                        <input type="number"
                                               class="form-control"
                                               id="video_duration"
                                               name="video_duration"
                                               min="1"
                                               max="3600"
                                               placeholder="Ex: 30">
                                        <div class="form-text">
                                            <span id="durationInfo">Informe a duração aproximada do vídeo</span>
                                        </div>
                                        <div class="invalid-feedback">
                                            Por favor, informe uma duração válida.
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div id="durationLimits" class="alert alert-info mt-4">
                                            <!-- Preenchido dinamicamente -->
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div id="tipoEspecificacoes" class="mt-4 d-none">
                                <div class="alert alert-phoenix-info">
                                    <div class="alert-icon"><span class="fas fa-info-circle"></span></div>
                                    <div class="alert-body">
                                        <p class="mb-1 fw-semibold">Especificações Técnicas Detalhadas</p>
                                        <div id="especificacoesContent" class="fs-10"></div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- Tab 3: Conteúdo e Mídia -->
                    <div class="tab-pane" role="tabpanel" aria-labelledby="bootstrap-wizard-validation-tab3" id="bootstrap-wizard-validation-tab3">
                        <form class="needs-validation" id="wizardValidationForm3" novalidate="novalidate" data-wizard-form="3">
                            <!-- Retranca com autocomplete -->
                            <div class="mb-4">
                                <label class="form-label">Retranca</label>
                                <div class="position-relative">
                                    <input type="text" class="form-control" name="retranca" id="retranca"
                                        placeholder="Ex: Lançamento, Promoção, Evento..."
                                        maxlength="100" autocomplete="off">
                                    <div id="retrancaSuggestions" class="dropdown-menu w-100" style="max-height: 200px; overflow-y: auto;"></div>
                                </div>
                                <small class="text-body-tertiary">Categoria ou tipo do post para organização</small>
                            </div>

                            <!-- Copy Principal com TinyMCE -->
                            <div class="mb-4">
                                <label class="form-label">Copy/Legenda Principal</label>
                                <textarea class="form-control" name="content" id="content" rows="6"></textarea>
                                <div class="d-flex justify-content-between mt-1">
                                    <small class="text-body-tertiary">Use o editor para formatar o texto</small>
                                    <small class="text-body-tertiary" id="mainCharCount">0 caracteres</small>
                                </div>
                            </div>

                            <!-- Direcionamentos -->
                            <div class="mb-4">
                                <label class="form-label">Direcionamentos e Observações</label>
                                <textarea class="form-control" name="direcionamentos" id="direcionamentos" rows="3"
                                        placeholder="Instruções específicas para designer, copy ou social media..."></textarea>
                                <small class="text-body-tertiary">Informações importantes para a equipe de produção</small>
                            </div>

                            <div class="mb-4">
                                <label class="form-label">Hashtags</label>
                                <input type="text" class="form-control" name="hashtags" id="hashtags"
                                       placeholder="#exemplo #marketing #socialmedia">
                                <small class="text-body-tertiary">Separe as hashtags com espaço</small>
                            </div>

                            <div class="row g-4">
                                <div class="col-md-6">
                                    <label class="form-label">Mídia Principal</label>
                                    <div class="dropzone dropzone-single p-0" id="mediaDropzone"
                                         data-dropzone="data-dropzone"
                                         data-options='{"url":"valid/url","maxFiles":10,"dictDefaultMessage":"Escolher arquivos"}'>
                                        <div class="fallback">
                                            <input name="file" type="file" multiple="multiple" />
                                        </div>
                                        <div class="dz-preview dz-preview-single">
                                            <div class="dz-preview-cover dz-complete"></div>
                                        </div>
                                        <div class="dz-message" data-dz-message="data-dz-message">
                                            <div class="dz-message-text">
                                                <img class="me-2" src="{{ asset('assets/img/icons/cloud-upload.svg') }}" width="25" alt="" />
                                                Arraste arquivos aqui
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Referências Visuais</label>
                                    <div class="dropzone dropzone-single p-0" id="referencesDropzone"
                                         data-dropzone="data-dropzone"
                                         data-options='{"url":"valid/url","maxFiles":5,"dictDefaultMessage":"Adicionar referências"}'>
                                        <div class="fallback">
                                            <input name="file" type="file" multiple="multiple" />
                                        </div>
                                        <div class="dz-preview dz-preview-single">
                                            <div class="dz-preview-cover dz-complete"></div>
                                        </div>
                                        <div class="dz-message" data-dz-message="data-dz-message">
                                            <div class="dz-message-text">
                                                <img class="me-2" src="{{ asset('assets/img/icons/image-icon.png') }}" width="25" alt="" />
                                                Adicionar referências
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- Tab 4: Plataformas e Legendas -->
                    <div class="tab-pane" role="tabpanel" aria-labelledby="bootstrap-wizard-validation-tab4" id="bootstrap-wizard-validation-tab4">
                        <form class="mb-2 needs-validation" id="wizardValidationForm4" novalidate="novalidate" data-wizard-form="4">
                            <h5 class="mb-4">Configurar Plataformas e Legendas</h5>

                            <!-- Platform Selection -->
                            <div class="card mb-4">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <h6 class="card-title mb-0">Selecione as Plataformas</h6>
                                        <button type="button" class="btn btn-sm btn-phoenix-primary" onclick="openDuplicationModal()">
                                            <i class="fas fa-copy me-2"></i>Duplicar para Outras Plataformas
                                        </button>
                                    </div>
                                    <div class="row g-3">
                                        @foreach(App\Enums\PlataformaRedeSocial::cases() as $platform)
                                        <div class="col-md-3">
                                            <div class="form-check">
                                                <input class="form-check-input platform-checkbox" type="checkbox"
                                                    name="platforms[]" value="{{ $platform->value }}"
                                                    id="platform_{{ $platform->value }}">
                                                <label class="form-check-label" for="platform_{{ $platform->value }}">
                                                    <span class="{{ $platform->icon() }}" style="color: {{ $platform->color() }}"></span>
                                                    {{ $platform->label() }}
                                                </label>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            <!-- Platform Tabs -->
                            <div id="platformCaptionsContainer" class="d-none">
                                <div class="platform-tabs" id="platformTabs">
                                    <!-- Tabs serão adicionadas dinamicamente -->
                                </div>

                                <div id="platformContents">
                                    <!-- Conteúdo das tabs será adicionado dinamicamente -->
                                </div>
                            </div>

                            <!-- Empty State -->
                            <div id="emptyPlatforms" class="empty-platforms">
                                <i class="fas fa-share-nodes"></i>
                                <h5>Nenhuma plataforma selecionada</h5>
                                <p class="mb-0">Selecione pelo menos uma plataforma para personalizar as legendas</p>
                            </div>

                            <div class="text-center mt-5">
                                <h3 class="mb-2">Tudo pronto!</h3>
                                <p class="text-body-tertiary">Revise as configurações e clique em "Criar Post" para finalizar</p>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="card-footer border-top-0" data-wizard-footer="data-wizard-footer">
                <div class="d-flex pager wizard list-inline mb-0">
                    <button class="d-none btn btn-link ps-0" type="button" data-wizard-prev-btn="data-wizard-prev-btn">
                        <svg class="svg-inline--fa fa-chevron-left me-1" data-fa-transform="shrink-3" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-left" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg="" style="transform-origin: 0.3125em 0.5em;"><g transform="translate(160 256)"><g transform="translate(0, 0)  scale(0.8125, 0.8125)  rotate(0 0 0)"><path fill="currentColor" d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z" transform="translate(-160 -256)"></path></g></g></svg>Anterior
                    </button>
                    <div class="flex-1 text-end">
                        <div class="position-relative d-inline-block me-2">
                            <button type="button" class="btn btn-phoenix-secondary" id="saveDraftBtn" style="display: none;">
                                <span class="fas fa-save me-1"></span>Salvar Rascunho
                            </button>
                            <button type="button" class="btn btn-phoenix-secondary dropdown-toggle dropdown-toggle-split"
                                    id="draftDropdownBtn"
                                    style="display: none;"
                                    onclick="toggleDraftSelector()">
                                <span class="visually-hidden">Toggle Dropdown</span>
                            </button>
                            <div id="draftSelector" class="draft-selector">
                                <div class="p-3 border-bottom">
                                    <h6 class="mb-0">Rascunhos Salvos</h6>
                                </div>
                                <div id="draftsList">
                                    <!-- Drafts will be loaded here -->
                                </div>
                                <div class="p-2 border-top">
                                    <button type="button" class="btn btn-sm btn-phoenix-secondary w-100" onclick="loadDrafts()">
                                        <i class="fas fa-sync me-1"></i>Atualizar
                                    </button>
                                </div>
                            </div>
                        </div>
                        <button class="btn btn-primary px-6 px-sm-6" type="submit" data-wizard-next-btn="data-wizard-next-btn">
                            Próximo<svg class="svg-inline--fa fa-chevron-right ms-1" data-fa-transform="shrink-3" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg="" style="transform-origin: 0.3125em 0.5em;"><g transform="translate(160 256)"><g transform="translate(0, 0)  scale(0.8125, 0.8125)  rotate(0 0 0)"><path fill="currentColor" d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" transform="translate(-160 -256)"></path></g></g></svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Template Modal -->
<div class="modal fade" id="templateModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Selecionar Template</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <input type="text" class="form-control" id="templateSearch"
                               placeholder="Buscar template...">
                    </div>
                    <div class="col-md-6">
                        <select class="form-select" id="templateCategory">
                            <option value="all">Todas as categorias</option>
                            @foreach(App\Enums\TemplateCategory::cases() as $category)
                                <option value="{{ $category->value }}">{{ $category->label() }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="row g-3" id="templatesGrid">
                    @foreach($templates as $template)
                    <div class="col-md-6 template-item">
                        <div class="card cursor-pointer template-card h-100" data-template-id="{{ $template->id }}">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <h6 class="mb-0">{{ $template->name }}</h6>
                                    <span class="badge badge-phoenix badge-phoenix-primary">{{ $template->usage_count }}x</span>
                                </div>
                                <p class="text-body-tertiary fs-10 mb-2">{{ $template->description }}</p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="badge badge-phoenix badge-phoenix-secondary">
                                        {{ $template->category->label() }}
                                    </span>
                                    <small class="text-body-tertiary">
                                        {{ $template->cliente?->nome ?? 'Global' }}
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" id="selectTemplateBtn" disabled>
                    Usar Template
                </button>
            </div>
        </div>
    </div>
</div>

<!-- TASK-033: Duplication Modal -->
<div class="modal fade" id="duplicationModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-copy me-2"></i>Duplicar Post para Múltiplas Plataformas
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- Loading State -->
                <div id="duplicationLoading" class="text-center py-5 d-none">
                    <div class="spinner-border text-primary mb-3" role="status">
                        <span class="visually-hidden">Carregando...</span>
                    </div>
                    <p class="text-muted">Preparando opções de duplicação...</p>
                </div>

                <!-- Content -->
                <div id="duplicationContent">
                    <!-- Current Post Info -->
                    <div class="alert alert-info mb-4">
                        <div class="alert-body">
                            <h6 class="alert-heading mb-2">Post Original</h6>
                            <div class="row">
                                <div class="col-md-4">
                                    <small class="text-muted">Título:</small>
                                    <div class="fw-semibold" id="dupOriginalTitle">-</div>
                                </div>
                                <div class="col-md-4">
                                    <small class="text-muted">Tipo:</small>
                                    <div class="fw-semibold" id="dupOriginalType">-</div>
                                </div>
                                <div class="col-md-4">
                                    <small class="text-muted">Data/Hora:</small>
                                    <div class="fw-semibold" id="dupOriginalDate">-</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Platform Selection -->
                    <h6 class="mb-3">Selecione as Plataformas para Duplicação</h6>
                    <div id="duplicationPlatforms" class="row g-3 mb-4">
                        <!-- Platforms will be populated dynamically -->
                    </div>

                    <!-- Schedule Configuration -->
                    <div id="scheduleConfiguration" class="d-none">
                        <h6 class="mb-3">Configurar Agendamento por Plataforma</h6>
                        <div id="platformSchedules" class="accordion">
                            <!-- Schedule items will be populated dynamically -->
                        </div>
                    </div>

                    <!-- Preview Section -->
                    <div id="duplicationPreview" class="mt-4 d-none">
                        <h6 class="mb-3">Preview das Duplicações</h6>
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>Plataforma</th>
                                        <th>Tipo</th>
                                        <th>Data/Hora</th>
                                        <th>Status</th>
                                        <th>Ações</th>
                                    </tr>
                                </thead>
                                <tbody id="duplicationPreviewBody">
                                    <!-- Preview rows will be populated dynamically -->
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Conflict Warnings -->
                    <div id="conflictWarnings" class="alert alert-warning d-none">
                        <h6 class="alert-heading">
                            <i class="fas fa-exclamation-triangle me-2"></i>Atenção: Conflitos Detectados
                        </h6>
                        <ul id="conflictList" class="mb-0">
                            <!-- Conflicts will be listed here -->
                        </ul>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" id="confirmDuplicationBtn" disabled>
                    <i class="fas fa-copy me-2"></i>Duplicar Post
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('vendors/flatpickr/flatpickr.min.js') }}"></script>
<script src="{{ asset('vendors/choices/choices.min.js') }}"></script>
<script src="{{ asset('vendors/dropzone/dropzone-min.js') }}"></script>
<script src="{{ asset('vendors/sortablejs/Sortable.min.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Guardar dados do formulário
    const wizardData = {
        cliente_id: '',
        scheduled_at: '',
        title: '',
        template_id: '',
        notes: '',
        tipo_conteudo: '',
        retranca: '',
        content: '',
        direcionamentos: '',
        hashtags: '',
        platforms: [],
        captions: {},
        media: [],
        references: [],
        tempMediaIds: [],
        tempReferenceIds: []
    };

    // Configurar Flatpickr
    if (document.querySelector('.datetimepicker')) {
        flatpickr('.datetimepicker', {
            enableTime: true,
            dateFormat: 'd/m/Y H:i',
            time_24hr: true,
            minDate: 'today',
            locale: {
                firstDayOfWeek: 1
            }
        });
    }

    // Character count
    const contentTextarea = document.getElementById('content');
    const charCounter = document.getElementById('mainCharCount');

    if (contentTextarea && charCounter) {
        contentTextarea.addEventListener('input', function() {
            charCounter.textContent = `${this.value.length} caracteres`;
        });
    }

    // Tipo de conteúdo
    document.querySelectorAll('.tipo-radio').forEach(radio => {
        radio.addEventListener('change', function() {
            if (this.checked) {
                wizardData.tipo_conteudo = this.value;
                showTipoEspecificacoes(this.value);

                // Visual feedback
                document.querySelectorAll('.tipo-radio').forEach(r => {
                    r.closest('.card').classList.remove('border-primary');
                });
                this.closest('.card').classList.add('border-primary');
            }
        });
    });

    function showTipoEspecificacoes(tipo) {
        const container = document.getElementById('tipoEspecificacoes');
        const content = document.getElementById('especificacoesContent');

        const specs = {
            'feed': `<ul class="mb-0 ps-3">
                <li>Imagem: Proporção 1:1 (quadrado), máx 30MB</li>
                <li>Vídeo: Até 60 segundos, proporção 1:1</li>
                <li>Resolução recomendada: 1080x1080px</li>
            </ul>`,
            'reels': `<ul class="mb-0 ps-3">
                <li>Vídeo vertical: Proporção 9:16</li>
                <li>Duração: 15 a 90 segundos</li>
                <li>Resolução recomendada: 1080x1920px</li>
            </ul>`,
            'stories': `<ul class="mb-0 ps-3">
                <li>Proporção 9:16 (vertical)</li>
                <li>Imagem: Exibida por 5 segundos</li>
                <li>Vídeo: Até 60 segundos</li>
            </ul>`,
            'carrossel': `<ul class="mb-0 ps-3">
                <li>2 a 10 imagens ou vídeos</li>
                <li>Proporção 1:1 (quadrado)</li>
                <li>Vídeos: Até 60 segundos cada</li>
            </ul>`,
            'video': `<ul class="mb-0 ps-3">
                <li>Vídeo horizontal: Proporção 16:9</li>
                <li>Duração: Até 60 minutos</li>
                <li>Resolução: 1920x1080px</li>
            </ul>`
        };

        if (specs[tipo]) {
            content.innerHTML = specs[tipo];
            container.classList.remove('d-none');
        }
    }

    // Platform selection
    const platformCheckboxes = document.querySelectorAll('.platform-checkbox');
    platformCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', updateCustomCaptions);
    });

    async function loadPlatformLimits() {
        try {
            const response = await fetch('{{ route("posts.wizard.platform-limits") }}');
            return await response.json();
        } catch (error) {
            console.error('Error loading platform limits:', error);
            return {};
        }
    }

    // TASK-032: Platform Tabs Implementation
    let currentPlatformTab = null;

    async function updateCustomCaptions() {
        const container = document.getElementById('platformCaptionsContainer');
        const emptyState = document.getElementById('emptyPlatforms');
        const selectedPlatforms = Array.from(document.querySelectorAll('.platform-checkbox:checked'));

        if (selectedPlatforms.length === 0) {
            container.classList.add('d-none');
            emptyState.classList.remove('d-none');
            currentPlatformTab = null;
            return;
        }

        container.classList.remove('d-none');
        emptyState.classList.add('d-none');

        const platformLimits = await loadPlatformLimits();
        const tabsContainer = document.getElementById('platformTabs');
        const contentsContainer = document.getElementById('platformContents');

        // Clear existing
        tabsContainer.innerHTML = '';
        contentsContainer.innerHTML = '';

        // Get main content for initial value
        const mainContent = tinymce.get('content') ?
            tinymce.get('content').getContent({ format: 'text' }) :
            document.getElementById('content').value;

        // Create tabs and content for each platform
        selectedPlatforms.forEach((checkbox, index) => {
            const platform = checkbox.value;
            const limit = platformLimits[platform];

            if (!limit) return;

            // Create tab
            const tab = document.createElement('button');
            tab.className = 'platform-tab' + (index === 0 ? ' active' : '');
            tab.type = 'button';
            tab.dataset.platform = platform;
            tab.innerHTML = `
                <i class="${limit.icon}" style="color: ${limit.color}"></i>
                <span>${limit.label}</span>
            `;

            tab.addEventListener('click', function() {
                switchPlatformTab(platform);
            });

            tabsContainer.appendChild(tab);

            // Create content
            const content = document.createElement('div');
            content.className = 'platform-content' + (index === 0 ? ' active' : '');
            content.id = `platform-content-${platform}`;

            if (limit.character_limit > 0) {
                content.innerHTML = `
                    <div class="row g-4">
                        <div class="col-md-6">
                            <div class="position-relative">
                                <label class="form-label fw-semibold">
                                    Legenda para ${limit.label}
                                </label>
                                <button type="button" class="copy-caption-btn" onclick="copyFromMainContent('${platform}')">
                                    <i class="fas fa-copy"></i> Copiar do principal
                                </button>
                                <textarea class="form-control platform-caption"
                                        name="captions[${platform}]"
                                        id="caption_${platform}"
                                        rows="8"
                                        data-platform="${platform}"
                                        data-limit="${limit.character_limit}"
                                        placeholder="Digite a legenda específica para ${limit.label}...">${wizardData.captions[platform] || mainContent}</textarea>

                                <!-- Character Counter -->
                                <div class="d-flex justify-content-between align-items-center mt-2">
                                    <div class="hashtag-helper">
                                        <button type="button" class="btn btn-sm btn-phoenix-secondary"
                                                onclick="insertHashtag('${platform}')">
                                            <i class="fas fa-hashtag"></i> Adicionar hashtag
                                        </button>
                                    </div>
                                    <div class="character-counter" id="counter_${platform}">
                                        <div class="character-progress">
                                            <svg width="40" height="40">
                                                <circle class="character-progress-bg" cx="20" cy="20" r="18"></circle>
                                                <circle class="character-progress-bar" cx="20" cy="20" r="18"
                                                        stroke-dasharray="113" stroke-dashoffset="113"></circle>
                                            </svg>
                                            <span class="character-count-text">0</span>
                                        </div>
                                        <span class="character-limit">/ ${limit.character_limit}</span>
                                    </div>
                                </div>

                                <!-- Hashtag Suggestions -->
                                <div class="hashtag-suggestions" id="hashtag-suggestions-${platform}"></div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Preview</label>
                            <div class="social-preview" id="preview_${platform}">
                                <div class="preview-header">
                                    <img src="{{ $clientes->first()->logo_url ?? asset('assets/img/generic-avatar.png') }}"
                                        alt="Avatar" class="preview-avatar">
                                    <div>
                                        <div class="preview-username">{{ '@' . Str::slug($clientes->first()->nome ?? 'empresa') }}</div>
                                        <div class="preview-time">Agora</div>
                                    </div>
                                </div>
                                <div class="preview-content" id="preview-content-${platform}">
                                    ${formatPreviewContent(wizardData.captions[platform] || mainContent)}
                                </div>
                            </div>
                        </div>
                    </div>
                `;
            } else {
                content.innerHTML = `
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        ${limit.label} não suporta legendas personalizadas.
                    </div>
                `;
            }

            contentsContainer.appendChild(content);

            // Add listeners if has textarea
            if (limit.character_limit > 0) {
                setupCaptionListeners(platform, limit.character_limit);
            }

            // Set first tab as current
            if (index === 0) {
                currentPlatformTab = platform;
            }
        });
    }

    // Switch between platform tabs
    function switchPlatformTab(platform) {
        // Update tabs
        document.querySelectorAll('.platform-tab').forEach(tab => {
            tab.classList.toggle('active', tab.dataset.platform === platform);
        });

        // Update content
        document.querySelectorAll('.platform-content').forEach(content => {
            content.classList.toggle('active', content.id === `platform-content-${platform}`);
        });

        currentPlatformTab = platform;
    }

    // Setup caption listeners with advanced character counter
    function setupCaptionListeners(platform, limit) {
        const textarea = document.getElementById(`caption_${platform}`);
        const counterEl = document.getElementById(`counter_${platform}`);
        const previewEl = document.getElementById(`preview-content-${platform}`);

        if (!textarea) return;

        // Hashtag autocomplete
        let hashtagTimeout;
        textarea.addEventListener('input', function(e) {
            const value = this.value;
            const count = value.length;

            // Update character counter
            updateCharacterCounter(counterEl, count, limit);

            // Update preview
            if (previewEl) {
                previewEl.innerHTML = formatPreviewContent(value);
            }

            // Save to wizardData
            wizardData.captions[platform] = value;

            // Check for hashtag autocomplete
            const lastWord = getLastWord(value, this.selectionStart);
            if (lastWord && lastWord.startsWith('#') && lastWord.length > 1) {
                clearTimeout(hashtagTimeout);
                hashtagTimeout = setTimeout(() => {
                    showHashtagSuggestions(platform, lastWord.substring(1));
                }, 300);
            } else {
                hideHashtagSuggestions(platform);
            }
        });

        // Trigger initial update
        textarea.dispatchEvent(new Event('input'));
    }

    // Update character counter with visual progress
    function updateCharacterCounter(counterEl, count, limit) {
        const progressBar = counterEl.querySelector('.character-progress-bar');
        const countText = counterEl.querySelector('.character-count-text');
        const limitText = counterEl.querySelector('.character-limit');

        const percentage = (count / limit) * 100;
        const circumference = 2 * Math.PI * 18; // radius = 18
        const offset = circumference - (percentage / 100) * circumference;

        progressBar.style.strokeDashoffset = offset;
        countText.textContent = count;

        // Update colors based on percentage
        progressBar.classList.remove('warning', 'danger');
        if (percentage > 100) {
            progressBar.classList.add('danger');
            limitText.classList.add('text-danger');
        } else if (percentage > 80) {
            progressBar.classList.add('warning');
            limitText.classList.remove('text-danger');
        } else {
            limitText.classList.remove('text-danger');
        }
    }

    // Format content for preview
    function formatPreviewContent(text) {
        if (!text) return '<span class="text-muted">Digite sua legenda...</span>';

        // Convert hashtags to colored
        text = text.replace(/#[a-zA-Z0-9_]+/g, '<span class="preview-hashtags">$&</span>');

        // Convert line breaks
        text = text.replace(/\n/g, '<br>');

        return text;
    }

    // Copy from main content
    function copyFromMainContent(platform) {
        const mainContent = tinymce.get('content') ?
            tinymce.get('content').getContent({ format: 'text' }) :
            document.getElementById('content').value;

        const textarea = document.getElementById(`caption_${platform}`);
        if (textarea) {
            textarea.value = mainContent;
            textarea.dispatchEvent(new Event('input'));

            showAlert('success', 'Conteúdo copiado!');
        }
    }

    // Insert hashtag
    function insertHashtag(platform) {
        const textarea = document.getElementById(`caption_${platform}`);
        if (!textarea) return;

        const hashtag = prompt('Digite a hashtag (sem #):');
        if (hashtag) {
            const formattedHashtag = '#' + hashtag.replace(/\s+/g, '');
            insertAtCursor(textarea, ' ' + formattedHashtag);
            textarea.dispatchEvent(new Event('input'));
        }
    }

    // Analyze hashtags for platform
    async function analyzeHashtags(platform) {
        const textarea = document.getElementById(`caption_${platform}`);
        if (!textarea) return;

        const hashtags = textarea.value;
        if (!hashtags.includes('#')) return;

        try {
            const response = await fetch('{{ route("hashtags.analyze") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({
                    hashtags: hashtags,
                    platform: platform
                })
            });

            const analysis = await response.json();

            // Show analysis results
            if (!analysis.is_valid) {
                showAlert('warning', analysis.suggestions[0]);
            }

            // Update hashtag counter color based on limit
            const counterEl = document.getElementById(`counter_${platform}`);
            if (counterEl && analysis.count > analysis.limit) {
                counterEl.classList.add('text-danger');
            }

        } catch (error) {
            console.error('Erro ao analisar hashtags:', error);
        }
    }

    // Add analyzer to caption listeners
    document.querySelectorAll('.platform-caption').forEach(textarea => {
        textarea.addEventListener('blur', function() {
            analyzeHashtags(this.dataset.platform);
        });
    });

    // Show hashtag suggestions
    async function showHashtagSuggestions(platform, query) {
        try {
            const clienteId = document.getElementById('cliente_id').value;
            const response = await fetch(`{{ route('hashtags.suggestions') }}?query=${encodeURIComponent(query)}&cliente_id=${clienteId}&platform=${platform}`);
            const suggestions = await response.json();

            const suggestionsEl = document.getElementById(`hashtag-suggestions-${platform}`);
            if (suggestions.length > 0) {
                suggestionsEl.innerHTML = suggestions.map(item => `
                    <div class="hashtag-suggestion" onclick="selectHashtag('${platform}', '${item.hashtag}')">
                        <span class="hashtag-suggestion-tag">${item.hashtag}</span>
                        <span>
                            ${item.usage_count > 0 ? `<span class="hashtag-suggestion-count">${item.usage_count}x</span>` : ''}
                            ${item.platform_usage > 0 ? `<span class="hashtag-suggestion-count ms-1">${item.platform_usage}x ${platform}</span>` : ''}
                            ${item.is_trending ? '<span class="hashtag-suggestion-trending">EM ALTA</span>' : ''}
                        </span>
                    </div>
                `).join('');
                suggestionsEl.classList.add('show');
            } else {
                hideHashtagSuggestions(platform);
            }
        } catch (error) {
            console.error('Erro ao buscar hashtags:', error);
        }
    }

    // Hide hashtag suggestions
    function hideHashtagSuggestions(platform) {
        const suggestionsEl = document.getElementById(`hashtag-suggestions-${platform}`);
        if (suggestionsEl) {
            suggestionsEl.classList.remove('show');
        }
    }

    // Select hashtag from suggestions
    function selectHashtag(platform, hashtag) {
        const textarea = document.getElementById(`caption_${platform}`);
        if (!textarea) return;

        const value = textarea.value;
        const lastHashtagIndex = value.lastIndexOf('#');

        if (lastHashtagIndex !== -1) {
            const beforeHashtag = value.substring(0, lastHashtagIndex);
            const afterCursor = value.substring(textarea.selectionStart);

            textarea.value = beforeHashtag + hashtag + ' ' + afterCursor;
            textarea.setSelectionRange(
                beforeHashtag.length + hashtag.length + 1,
                beforeHashtag.length + hashtag.length + 1
            );
        }

        textarea.dispatchEvent(new Event('input'));
        hideHashtagSuggestions(platform);
    }

    // Helper functions
    function getLastWord(text, cursorPosition) {
        const beforeCursor = text.substring(0, cursorPosition);
        const words = beforeCursor.split(/\s/);
        return words[words.length - 1];
    }

    function insertAtCursor(textarea, text) {
        const startPos = textarea.selectionStart;
        const endPos = textarea.selectionEnd;

        textarea.value = textarea.value.substring(0, startPos) +
            text +
            textarea.value.substring(endPos, textarea.value.length);

        textarea.setSelectionRange(startPos + text.length, startPos + text.length);
        textarea.focus();
    }

    // Template selection
    document.querySelectorAll('.template-card').forEach(card => {
        card.addEventListener('click', function() {
            document.querySelectorAll('.template-card').forEach(c => c.classList.remove('border-primary'));
            this.classList.add('border-primary');
            document.getElementById('selectTemplateBtn').disabled = false;

            const templateId = this.dataset.templateId;
            const templateName = this.querySelector('h6').textContent;

            document.getElementById('selectTemplateBtn').onclick = function() {
                wizardData.template_id = templateId;
                document.getElementById('template_id').value = templateId;
                document.getElementById('selectedTemplateName').textContent = templateName;

                const modal = bootstrap.Modal.getInstance(document.getElementById('templateModal'));
                modal.hide();
            };
        });
    });

    // Template filter
    const templateSearch = document.getElementById('templateSearch');
    const templateCategory = document.getElementById('templateCategory');

    function filterTemplates() {
        const search = templateSearch.value.toLowerCase();
        const category = templateCategory.value;

        document.querySelectorAll('.template-item').forEach(item => {
            const name = item.querySelector('h6').textContent.toLowerCase();
            const itemCategory = item.querySelector('.badge-phoenix-secondary').textContent.toLowerCase();

            const matchSearch = !search || name.includes(search);
            const matchCategory = category === 'all' || itemCategory.includes(category);

            item.style.display = matchSearch && matchCategory ? 'block' : 'none';
        });
    }

    templateSearch?.addEventListener('input', filterTemplates);
    templateCategory?.addEventListener('change', filterTemplates);

    // Wizard validation and submission
    const wizard = document.querySelector('[data-theme-wizard]');
    if (wizard) {
        // O Phoenix wizard já cuida da navegação, só precisamos adicionar a lógica de submit
        const nextButtons = wizard.querySelectorAll('[data-wizard-next-btn]');
        const prevButtons = wizard.querySelectorAll('[data-wizard-prev-btn]');
        const saveDraftBtn = document.getElementById('saveDraftBtn');

        // Mostrar botão de salvar rascunho após o primeiro step
        wizard.addEventListener('shown.bs.tab', function(e) {
            const step = parseInt(e.target.getAttribute('data-wizard-step'));

            if (step > 1) {
                saveDraftBtn.style.display = 'inline-block';
            } else {
                saveDraftBtn.style.display = 'none';
            }

            // Se for o último step, mudar o texto do botão
            const nextBtn = wizard.querySelector('[data-wizard-next-btn]');
            if (step === 4) {
                nextBtn.innerHTML = 'Criar Post<svg class="svg-inline--fa fa-check ms-1" data-fa-transform="shrink-3"></svg>';
                nextBtn.classList.remove('btn-primary');
                nextBtn.classList.add('btn-success');

                // Adicionar handler de submit
                nextBtn.onclick = async function(e) {
                    e.preventDefault();
                    await submitForm();
                };
            } else {
                nextBtn.innerHTML = 'Próximo<svg class="svg-inline--fa fa-chevron-right ms-1" data-fa-transform="shrink-3"></svg>';
                nextBtn.classList.remove('btn-success');
                nextBtn.classList.add('btn-primary');
                nextBtn.onclick = null;
            }
        });

        // Coletar dados antes de mudar de step
        wizard.addEventListener('hide.bs.tab', function(e) {
            const step = parseInt(e.target.getAttribute('data-wizard-step'));
            collectStepData(step);
        });
    }

    function collectStepData(step) {
        switch(step) {
            case 1:
                wizardData.cliente_id = document.getElementById('cliente_id').value;
                wizardData.scheduled_at = document.getElementById('scheduled_at').value;
                wizardData.title = document.getElementById('title').value;
                wizardData.notes = document.getElementById('notes').value;
                break;
            case 2:
                const selectedTipo = document.querySelector('input[name="tipo_conteudo"]:checked');
                if (selectedTipo) {
                    wizardData.tipo_conteudo = selectedTipo.value;
                }
                break;
            case 3:
                wizardData.retranca = document.getElementById('retranca').value;
                wizardData.content = document.getElementById('content').value;
                wizardData.direcionamentos = document.getElementById('direcionamentos').value;
                wizardData.hashtags = document.getElementById('hashtags').value;
                break;
            case 4:
                wizardData.platforms = Array.from(document.querySelectorAll('.platform-checkbox:checked'))
                    .map(cb => cb.value);

                document.querySelectorAll('.platform-caption').forEach(textarea => {
                    wizardData.captions[textarea.dataset.platform] = textarea.value;
                });
                break;
        }
    }

    // Submit form
    async function submitForm() {
        // Coletar dados do último step
        collectStepData(4);

        // Validar dados
        if (!wizardData.cliente_id || !wizardData.scheduled_at || !wizardData.title) {
            showAlert('error', 'Por favor, preencha todos os campos obrigatórios.');
            return;
        }

        if (!wizardData.tipo_conteudo) {
            showAlert('error', 'Por favor, selecione um tipo de conteúdo.');
            return;
        }

        if (wizardData.platforms.length === 0) {
            showAlert('error', 'Por favor, selecione pelo menos uma plataforma.');
            return;
        }

        // Preparar FormData
        const formData = new FormData();

        // Adicionar IDs dos uploads temporários
        if (wizardData.tempMediaIds) {
            wizardData.tempMediaIds.forEach(id => {
                formData.append('temp_media_ids[]', id);
            });
        }

        if (wizardData.tempReferenceIds) {
            wizardData.tempReferenceIds.forEach(id => {
                formData.append('temp_reference_ids[]', id);
            });
        }

        // Adicionar dados básicos
        Object.keys(wizardData).forEach(key => {
            if (key === 'media' || key === 'references' || key === 'tempMediaIds' || key === 'tempReferenceIds') {
                // Já processados ou não necessários
                return;
            }

            if (key === 'platforms') {
                wizardData[key].forEach(platform => {
                    formData.append('platforms[]', platform);
                });
            } else if (key === 'captions') {
                Object.keys(wizardData[key]).forEach(platform => {
                    formData.append(`captions[${platform}]`, wizardData[key][platform]);
                });
            } else {
                formData.append(key, wizardData[key]);
            }
        });

        // Mostrar loading
        const submitBtn = document.querySelector('.btn-success');
        const originalText = submitBtn.innerHTML;
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Criando...';

        try {
            const response = await fetch('{{ route("posts.wizard.store") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: formData
            });

            const data = await response.json();

            if (data.success) {
                showAlert('success', data.message);
                setTimeout(() => {
                    window.location.href = data.redirect;
                }, 2000);
            } else {
                throw new Error(data.message);
            }
        } catch (error) {
            showAlert('error', error.message || 'Erro ao criar post');
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalText;
        }
    }

    // Save draft
    document.getElementById('saveDraftBtn')?.addEventListener('click', async function() {
        // Coletar dados atuais
        const currentStep = document.querySelector('.nav-link.active[data-wizard-step]').getAttribute('data-wizard-step');
        collectStepData(parseInt(currentStep));

        wizardData.save_as_draft = true;

        // Implementar salvamento de rascunho
        showAlert('info', 'Funcionalidade de rascunho em desenvolvimento');
    });

    // Alert helper
    function showAlert(type, message) {
        const alertDiv = document.createElement('div');
        alertDiv.className = `alert alert-${type === 'error' ? 'danger' : type} alert-dismissible fade show position-fixed top-0 start-50 translate-middle-x mt-3`;
        alertDiv.style.zIndex = '9999';
        alertDiv.innerHTML = `
            <span class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : 'info-circle'} me-2"></span>
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;

        document.body.appendChild(alertDiv);

        setTimeout(() => {
            alertDiv.remove();
        }, 5000);
    }

    // TASK-029: Configurações específicas do Step 1

    // Configurar Flatpickr PT-BR
    if (typeof flatpickr !== 'undefined' && document.getElementById('scheduled_date')) {
        // Locale PT-BR
        flatpickr.localize({
            weekdays: {
                shorthand: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"],
                longhand: ["Domingo", "Segunda-feira", "Terça-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sábado"]
            },
            months: {
                shorthand: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
                longhand: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"]
            },
            firstDayOfWeek: 1,
            rangeSeparator: " até ",
            time_24hr: true
        });

        const datePicker = flatpickr('#scheduled_date', {
            dateFormat: 'd/m/Y',
            minDate: 'today',
            disableMobile: true,
            onChange: function(selectedDates, dateStr) {
                wizardData.scheduled_date = dateStr;
                validateField('scheduled_date');
            }
        });
    }

    // Configurar Choices.js
    if (typeof Choices !== 'undefined') {
        // Cliente select com avatar
        const clienteSelect = new Choices('#cliente_id', {
            searchEnabled: true,
            searchPlaceholderValue: 'Digite para buscar...',
            noResultsText: 'Nenhum cliente encontrado',
            itemSelectText: 'Clique para selecionar',
            shouldSort: false,
            callbackOnCreateTemplates: function(template) {
                return {
                    item: (classNames, data) => {
                        return template(`
                            <div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}"
                                 data-item data-id="${data.id}" data-value="${data.value}"
                                 ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''}>
                                ${data.customProperties?.avatar ? `<img src="${data.customProperties.avatar}" alt="" class="avatar-xs rounded-circle me-2">` : ''}
                                ${data.label}
                            </div>
                        `);
                    },
                    choice: (classNames, data) => {
                        return template(`
                            <div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}"
                                 data-select-text="${this.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'}
                                 data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
                                ${data.customProperties?.avatar ? `<img src="${data.customProperties.avatar}" alt="" class="avatar-xs rounded-circle me-2">` : ''}
                                ${data.label}
                            </div>
                        `);
                    }
                };
            }
        });

        // Time select
        const timeSelect = new Choices('#scheduled_time', {
            searchEnabled: true,
            searchPlaceholderValue: 'Digite para buscar...',
            noResultsText: 'Horário não encontrado',
            itemSelectText: 'Clique para selecionar'
        });
    }

    // Cliente change - carregar campanhas
    document.getElementById('cliente_id').addEventListener('change', async function() {
        const clienteId = this.value;
        const campanhaSelect = document.getElementById('campanha_id');

        wizardData.cliente_id = clienteId;
        validateField('cliente_id');

        if (!clienteId) {
            campanhaSelect.innerHTML = '<option value="">Selecione primeiro um cliente</option>';
            campanhaSelect.disabled = true;
            return;
        }

        // Buscar campanhas
        try {
            campanhaSelect.innerHTML = '<option value="">Carregando...</option>';

            const response = await fetch(`{{ route('posts.wizard.campanhas') }}?cliente_id=${clienteId}`);
            const campanhas = await response.json();

            campanhaSelect.innerHTML = '<option value="">Selecione uma campanha (opcional)</option>';

            campanhas.forEach(campanha => {
                const option = document.createElement('option');
                option.value = campanha.id;
                option.textContent = campanha.nome;
                if (campanha.data_inicio && campanha.data_fim) {
                    option.textContent += ` (${formatDate(campanha.data_inicio)} - ${formatDate(campanha.data_fim)})`;
                }
                campanhaSelect.appendChild(option);
            });

            campanhaSelect.disabled = false;

            // Se tinha campanha selecionada anteriormente, limpar
            wizardData.campanha_id = '';

        } catch (error) {
            console.error('Erro ao carregar campanhas:', error);
            campanhaSelect.innerHTML = '<option value="">Erro ao carregar campanhas</option>';
        }
    });

    // Character counters
    document.getElementById('title').addEventListener('input', function() {
        const count = this.value.length;
        document.getElementById('titleCharCount').textContent = count;
        wizardData.title = this.value;
        validateField('title');
    });

    document.getElementById('notes').addEventListener('input', function() {
        const count = this.value.length;
        document.getElementById('notesCharCount').textContent = count;
        wizardData.notes = this.value;
    });

    // Platform selection visual feedback
    document.querySelectorAll('.platform-select').forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const card = this.closest('.form-check-card');
            if (this.checked) {
                card.classList.add('border-primary', 'bg-primary-subtle');
            } else {
                card.classList.remove('border-primary', 'bg-primary-subtle');
            }

            // Atualizar dados
            wizardData.initial_platforms = Array.from(document.querySelectorAll('.platform-select:checked'))
                .map(cb => cb.value);

            // Validar
            validatePlatforms();
        });
    });

    // Validações em tempo real
    function validateField(fieldName) {
        const field = document.getElementById(fieldName);
        const value = field.value;
        let isValid = true;

        switch(fieldName) {
            case 'cliente_id':
                isValid = value !== '';
                break;
            case 'scheduled_date':
                isValid = value !== '' && isValidDate(value);
                break;
            case 'scheduled_time':
                isValid = value !== '';
                break;
            case 'title':
                isValid = value.trim().length >= 5;
                break;
        }

        if (isValid) {
            field.classList.remove('is-invalid');
            field.classList.add('is-valid');
        } else {
            field.classList.remove('is-valid');
            field.classList.add('is-invalid');
        }

        return isValid;
    }

    function validatePlatforms() {
        const selectedPlatforms = document.querySelectorAll('.platform-select:checked');
        const errorDiv = document.getElementById('platformError');

        if (selectedPlatforms.length === 0) {
            errorDiv.style.display = 'block';
            return false;
        } else {
            errorDiv.style.display = 'none';
            return true;
        }
    }

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

    function isValidDate(dateString) {
        const parts = dateString.split('/');
        if (parts.length !== 3) return false;

        const day = parseInt(parts[0]);
        const month = parseInt(parts[1]) - 1;
        const year = parseInt(parts[2]);

        const date = new Date(year, month, day);
        return date.getDate() === day && date.getMonth() === month && date.getFullYear() === year;
    }

    // Override do collectStepData para Step 1 e 2
    const originalCollectStepData = collectStepData;
    window.collectStepData = function(step) {
        if (step === 1) {
            wizardData.cliente_id = document.getElementById('cliente_id').value;
            wizardData.campanha_id = document.getElementById('campanha_id').value;
            wizardData.scheduled_date = document.getElementById('scheduled_date').value;
            wizardData.scheduled_time = document.getElementById('scheduled_time').value;
            wizardData.title = document.getElementById('title').value;
            wizardData.template_id = document.getElementById('template_id').value;
            wizardData.notes = document.getElementById('notes').value;
            wizardData.initial_platforms = Array.from(document.querySelectorAll('.platform-select:checked'))
                .map(cb => cb.value);

            // Combinar data e hora
            if (wizardData.scheduled_date && wizardData.scheduled_time) {
                const [day, month, year] = wizardData.scheduled_date.split('/');
                wizardData.scheduled_at = `${year}-${month}-${day} ${wizardData.scheduled_time}:00`;
            }
        } else if (step === 2) {
            const selectedTipo = document.querySelector('input[name="tipo_conteudo"]:checked');
            if (selectedTipo) {
                wizardData.tipo_conteudo = selectedTipo.value;

                const durationInput = document.getElementById('video_duration');
                if (durationInput && durationInput.value) {
                    wizardData.video_duration = parseInt(durationInput.value);
                }
            }
        } else {
            originalCollectStepData(step);
        }
    };

    // Validação completa do Step 1
    function validateStep1() {
        let isValid = true;

        // Validar cada campo
        isValid = validateField('cliente_id') && isValid;
        isValid = validateField('scheduled_date') && isValid;
        isValid = validateField('scheduled_time') && isValid;
        isValid = validateField('title') && isValid;
        isValid = validatePlatforms() && isValid;

        return isValid;
    }

    // TASK-030: Step 2 - Tipo e Formato

    // Mapeamento de compatibilidade tipo x plataforma
    const tipoPlataformaCompat = {
        'feed': ['instagram', 'facebook', 'linkedin'],
        'reels': ['instagram', 'facebook', 'tiktok'],
        'stories': ['instagram', 'facebook', 'whatsapp'],
        'carrossel': ['instagram', 'facebook', 'linkedin'],
        'video': ['youtube', 'facebook', 'linkedin', 'twitter']
    };

    // Especificações detalhadas por tipo
    const tipoSpecs = {
        'feed': {
            dimensions: '1:1',
            maxDuration: 60,
            minDuration: 3,
            formats: ['JPG', 'PNG', 'MP4'],
            maxSize: '30MB',
            resolution: '1080x1080'
        },
        'reels': {
            dimensions: '9:16',
            maxDuration: 90,
            minDuration: 15,
            formats: ['MP4', 'MOV'],
            maxSize: '100MB',
            resolution: '1080x1920'
        },
        'stories': {
            dimensions: '9:16',
            maxDuration: 60,
            minDuration: 1,
            formats: ['JPG', 'PNG', 'MP4'],
            maxSize: '100MB',
            resolution: '1080x1920'
        },
        'carrossel': {
            dimensions: '1:1',
            maxDuration: 60,
            minDuration: 3,
            formats: ['JPG', 'PNG', 'MP4'],
            maxSize: '30MB por item',
            resolution: '1080x1080',
            maxItems: 10
        },
        'video': {
            dimensions: '16:9',
            maxDuration: 3600,
            minDuration: 3,
            formats: ['MP4', 'MOV'],
            maxSize: '4GB',
            resolution: '1920x1080'
        }
    };

    // Atualizar tipos disponíveis quando mudar de step
    wizard.addEventListener('shown.bs.tab', function(e) {
        const step = parseInt(e.target.getAttribute('data-wizard-step'));

        if (step === 2) {
            updateAvailableTypes();
            updatePlatformIcons();
        }

        // Código existente para outros steps...
    });

    // Atualizar tipos disponíveis baseado nas plataformas selecionadas
    function updateAvailableTypes() {
        const selectedPlatforms = wizardData.initial_platforms || [];
        const selectedPlatformsInfo = document.getElementById('selectedPlatformsInfo');

        if (selectedPlatforms.length === 0) {
            selectedPlatformsInfo.innerHTML = '<i class="fas fa-exclamation-triangle text-warning me-1"></i>Nenhuma plataforma selecionada';

            // Desabilitar todos os tipos
            document.querySelectorAll('.tipo-card-wrapper').forEach(wrapper => {
                wrapper.classList.add('disabled');
                wrapper.querySelector('input').disabled = true;
                wrapper.querySelector('.unavailable-badge').classList.remove('d-none');
            });

            return;
        }

        // Mostrar plataformas selecionadas
        const platformLabels = selectedPlatforms.map(p => {
            const platform = Array.from(document.querySelectorAll('#init_platform_' + p))
                .map(el => el.nextElementSibling.querySelector('.ms-2').textContent)[0];
            return platform;
        }).join(', ');

        selectedPlatformsInfo.innerHTML = `<i class="fas fa-check-circle text-success me-1"></i>Plataformas: ${platformLabels}`;

        // Verificar compatibilidade para cada tipo
        document.querySelectorAll('.tipo-card-wrapper').forEach(wrapper => {
            const tipo = wrapper.dataset.tipo;
            const compatiblePlatforms = tipoPlataformaCompat[tipo] || [];

            // Verificar se alguma plataforma selecionada é compatível
            const isCompatible = selectedPlatforms.some(platform =>
                compatiblePlatforms.includes(platform)
            );

            const input = wrapper.querySelector('input');
            const badge = wrapper.querySelector('.unavailable-badge');

            if (isCompatible) {
                wrapper.classList.remove('disabled');
                input.disabled = false;
                badge.classList.add('d-none');
            } else {
                wrapper.classList.add('disabled');
                input.disabled = true;
                badge.classList.remove('d-none');

                // Se estava selecionado, desmarcar
                if (input.checked) {
                    input.checked = false;
                    wrapper.classList.remove('selected');
                }
            }
        });
    }

    // Atualizar ícones de plataformas em cada card
    function updatePlatformIcons() {
        document.querySelectorAll('.tipo-card-wrapper').forEach(wrapper => {
            const tipo = wrapper.dataset.tipo;
            const platformIconsContainer = wrapper.querySelector('.platform-icons');
            const compatiblePlatforms = tipoPlataformaCompat[tipo] || [];

            platformIconsContainer.innerHTML = '';

            // Adicionar ícones de todas as plataformas possíveis
            compatiblePlatforms.forEach(platform => {
                const platformEnum = @json(App\Enums\PlataformaRedeSocial::cases());
                const platformData = platformEnum.find(p => p.value === platform);

                if (platformData) {
                    const icon = document.createElement('i');
                    icon.className = `${platformData.icon} platform-icon`;
                    icon.style.color = platformData.color;

                    // Verificar se está selecionada
                    if (wizardData.initial_platforms && wizardData.initial_platforms.includes(platform)) {
                        icon.classList.add('supported');
                    }

                    platformIconsContainer.appendChild(icon);
                }
            });
        });
    }

    // Configurar tooltips com especificações
    document.addEventListener('DOMContentLoaded', function() {
        const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl, {
                customClass: 'tipo-spec-tooltip',
                trigger: 'hover',
                html: true,
                sanitize: false,
                template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
            });
        });

        // Preencher conteúdo dos tooltips
        tooltipTriggerList.forEach(trigger => {
            trigger.addEventListener('inserted.bs.tooltip', function() {
                const tooltip = bootstrap.Tooltip.getInstance(trigger);
                const tooltipInner = document.querySelector('.tooltip-inner .tipo-tooltip');

                if (tooltipInner) {
                    const tipo = tooltipInner.dataset.tipo;
                    const specs = tipoSpecs[tipo];

                    tooltipInner.innerHTML = `
                        <strong>Especificações Técnicas:</strong>
                        <ul class="mb-0 mt-1">
                            <li>Proporção: ${specs.dimensions}</li>
                            <li>Resolução: ${specs.resolution}</li>
                            <li>Tamanho máx: ${specs.maxSize}</li>
                            <li>Formatos: ${specs.formats.join(', ')}</li>
                            ${specs.maxDuration ? `<li>Duração: ${specs.minDuration}s - ${specs.maxDuration}s</li>` : ''}
                            ${specs.maxItems ? `<li>Máx. itens: ${specs.maxItems}</li>` : ''}
                        </ul>
                    `;
                }
            });
        });
    });

    // Atualizar texto das dimensões
    document.querySelectorAll('.dimension-box').forEach(box => {
        const tipo = box.dataset.tipo;
        const text = box.querySelector('.dimension-text');
        const specs = tipoSpecs[tipo];

        if (text && specs) {
            text.textContent = specs.dimensions;
        }
    });

    // Seleção de tipo
    document.querySelectorAll('.tipo-radio').forEach(radio => {
        radio.addEventListener('change', function() {
            if (this.checked && !this.disabled) {
                // Remover seleção anterior
                document.querySelectorAll('.tipo-card-wrapper').forEach(w => {
                    w.classList.remove('selected');
                });

                // Adicionar seleção atual
                const wrapper = this.closest('.tipo-card-wrapper');
                wrapper.classList.add('selected');

                wizardData.tipo_conteudo = this.value;

                // Mostrar/esconder campo de duração
                updateDurationField(this.value);

                // Mostrar especificações
                showTipoEspecificacoes(this.value);
            }
        });
    });

    // Campo de duração do vídeo
    function updateDurationField(tipo) {
        const durationField = document.getElementById('videoDurationField');
        const durationInput = document.getElementById('video_duration');
        const durationLimits = document.getElementById('durationLimits');

        const videoTypes = ['reels', 'stories', 'video', 'feed', 'carrossel'];

        if (videoTypes.includes(tipo)) {
            durationField.classList.remove('d-none');

            const specs = tipoSpecs[tipo];
            durationInput.min = specs.minDuration;
            durationInput.max = specs.maxDuration;

            // Atualizar limites por plataforma
            const selectedPlatforms = wizardData.initial_platforms || [];
            let limitsHTML = '<strong>Limites por plataforma:</strong><div class="mt-2">';

            selectedPlatforms.forEach(platform => {
                const compatibleTypes = tipoPlataformaCompat[tipo] || [];
                if (compatibleTypes.includes(platform)) {
                    let limit = specs.maxDuration;

                    // Limites específicos por plataforma
                    if (tipo === 'reels' && platform === 'instagram') limit = 90;
                    if (tipo === 'reels' && platform === 'tiktok') limit = 180;
                    if (tipo === 'stories' && platform === 'instagram') limit = 60;

                    const platformData = @json(App\Enums\PlataformaRedeSocial::cases())
                        .find(p => p.value === platform);

                    limitsHTML += `
                        <div class="duration-limit">
                            <i class="${platformData.icon}" style="color: ${platformData.color}"></i>
                            <span>${platformData.label}: até ${limit}s</span>
                        </div>
                    `;
                }
            });

            limitsHTML += '</div>';
            durationLimits.innerHTML = limitsHTML;

        } else {
            durationField.classList.add('d-none');
            durationInput.value = '';
        }
    }

    // Validação do campo de duração
    document.getElementById('video_duration')?.addEventListener('input', function() {
        const value = parseInt(this.value);
        const min = parseInt(this.min);
        const max = parseInt(this.max);

        if (value && value >= min && value <= max) {
            this.classList.remove('is-invalid');
            this.classList.add('is-valid');
            wizardData.video_duration = value;
        } else {
            this.classList.remove('is-valid');
            this.classList.add('is-invalid');
        }
    });

    // Override showTipoEspecificacoes para mostrar baseado nas plataformas
    window.showTipoEspecificacoes = function(tipo) {
        const container = document.getElementById('tipoEspecificacoes');
        const content = document.getElementById('especificacoesContent');
        const selectedPlatforms = wizardData.initial_platforms || [];

        let specsHTML = '<div class="row">';

        // Especificações gerais
        const specs = tipoSpecs[tipo];
        specsHTML += `
            <div class="col-md-6">
                <strong>Especificações Gerais:</strong>
                <ul class="mb-0 mt-1">
                    <li>Proporção: ${specs.dimensions}</li>
                    <li>Resolução recomendada: ${specs.resolution}</li>
                    <li>Tamanho máximo: ${specs.maxSize}</li>
                    <li>Formatos aceitos: ${specs.formats.join(', ')}</li>
                </ul>
            </div>
        `;

        // Especificações por plataforma
        if (selectedPlatforms.length > 0) {
            specsHTML += '<div class="col-md-6"><strong>Por Plataforma:</strong><div class="mt-1">';

            selectedPlatforms.forEach(platform => {
                const compatibleTypes = tipoPlataformaCompat[tipo] || [];
                if (compatibleTypes.includes(platform)) {
                    const platformData = @json(App\Enums\PlataformaRedeSocial::cases())
                        .find(p => p.value === platform);

                    specsHTML += `
                        <div class="mb-1">
                            <i class="${platformData.icon}" style="color: ${platformData.color}"></i>
                            <span class="ms-1">${platformData.label}: ✓ Compatível</span>
                        </div>
                    `;
                }
            });

            specsHTML += '</div></div>';
        }

        specsHTML += '</div>';

        content.innerHTML = specsHTML;
        container.classList.remove('d-none');
    };

    // Validação do Step 2
    function validateStep2() {
        const selectedTipo = document.querySelector('input[name="tipo_conteudo"]:checked');

        if (!selectedTipo) {
            showAlert('error', 'Por favor, selecione um tipo de conteúdo.');
            return false;
        }

        // Validar duração se for vídeo
        const videoTypes = ['reels', 'stories', 'video', 'feed', 'carrossel'];
        if (videoTypes.includes(selectedTipo.value)) {
            const durationInput = document.getElementById('video_duration');
            const duration = parseInt(durationInput.value);

            if (!duration || duration < parseInt(durationInput.min) || duration > parseInt(durationInput.max)) {
                durationInput.classList.add('is-invalid');
                showAlert('error', 'Por favor, informe uma duração válida para o vídeo.');
                return false;
            }
        }

        return true;
    }

    // TASK-031: Step 3 - Conteúdo Implementation

    // Configurar TinyMCE
    if (typeof tinymce !== 'undefined') {
        tinymce.init({
            selector: '#content',
            height: 300,
            menubar: false,
            plugins: [
                'autolink', 'lists', 'link', 'charmap', 'preview',
                'searchreplace', 'visualblocks', 'code', 'fullscreen',
                'insertdatetime', 'table', 'wordcount', 'emoticons'
            ],
            toolbar: 'undo redo | formatselect | ' +
                'bold italic backcolor | alignleft aligncenter ' +
                'alignright alignjustify | bullist numlist outdent indent | ' +
                'link emoticons | removeformat | help',
            content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px }',
            setup: function(editor) {
                editor.on('change keyup', function() {
                    const content = editor.getContent({format: 'text'});
                    document.getElementById('mainCharCount').textContent = content.length + ' caracteres';
                    wizardData.content = editor.getContent();
                });
            },
            language: 'pt_BR',
            branding: false,
            promotion: false
        });
    }

    // Autocomplete de Retranca
    const retrancaInput = document.getElementById('retranca');
    const retrancaSuggestions = document.getElementById('retrancaSuggestions');
    let retrancaTimeout;

    retrancaInput.addEventListener('input', function() {
        clearTimeout(retrancaTimeout);
        const query = this.value;

        if (query.length < 2) {
            retrancaSuggestions.classList.remove('show');
            return;
        }

        retrancaTimeout = setTimeout(async () => {
            try {
                const clienteId = document.getElementById('cliente_id').value;
                const response = await fetch(`{{ route('retranca.suggestions') }}?query=${encodeURIComponent(query)}&cliente_id=${clienteId}`);
                const suggestions = await response.json();

                if (suggestions.length > 0) {
                    retrancaSuggestions.innerHTML = suggestions.map(s =>
                        `<a class="retranca-suggestion" href="#" data-value="${s}">${s}</a>`
                    ).join('');
                    retrancaSuggestions.classList.add('show');

                    // Adicionar eventos aos links
                    retrancaSuggestions.querySelectorAll('.retranca-suggestion').forEach(link => {
                        link.addEventListener('click', function(e) {
                            e.preventDefault();
                            retrancaInput.value = this.dataset.value;
                            retrancaSuggestions.classList.remove('show');
                            wizardData.retranca = this.dataset.value;
                        });
                    });
                } else {
                    retrancaSuggestions.classList.remove('show');
                }
            } catch (error) {
                console.error('Erro ao buscar sugestões:', error);
            }
        }, 300);
    });

    // Fechar dropdown ao clicar fora
    document.addEventListener('click', function(e) {
        if (!retrancaInput.contains(e.target) && !retrancaSuggestions.contains(e.target)) {
            retrancaSuggestions.classList.remove('show');
        }
    });

    // Configurar Dropzones melhorados
    if (window.Dropzone) {
        Dropzone.autoDiscover = false;

        // Media Dropzone
        const mediaDropzone = new Dropzone("#mediaDropzone", {
            url: "{{ route('upload.temp') }}",
            paramName: "file",
            maxFilesize: 100, // MB
            acceptedFiles: "image/*,video/*",
            addRemoveLinks: true,
            dictRemoveFile: "Remover",
            dictCancelUpload: "Cancelar",
            dictFileTooBig: "Arquivo muito grande (@{{filesize}}MB). Máximo: @{{maxFilesize}}MB.",
            dictInvalidFileType: "Tipo de arquivo não permitido.",
            dictResponseError: "Erro ao enviar arquivo: @{{statusCode}}",
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            sending: function(file, xhr, formData) {
                formData.append('type', 'media');
            },
            success: function(file, response) {
                if (response.success) {
                    file.uploadId = response.upload_id;
                    wizardData.tempMediaIds = wizardData.tempMediaIds || [];
                    wizardData.tempMediaIds.push(response.upload_id);

                    // Adicionar preview melhorado
                    if (file.type.startsWith('image/')) {
                        const imgElement = file.previewElement.querySelector('.dz-image img');
                        if (imgElement) {
                            imgElement.src = response.url;
                        }
                    }
                }
            },
            removedfile: function(file) {
                if (file.uploadId) {
                    // Remover do servidor
                    fetch("{{ route('upload.temp.remove') }}", {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                        },
                        body: JSON.stringify({ upload_id: file.uploadId })
                    });

                    // Remover do array
                    const index = wizardData.tempMediaIds.indexOf(file.uploadId);
                    if (index > -1) {
                        wizardData.tempMediaIds.splice(index, 1);
                    }
                }

                file.previewElement.remove();
            },
            init: function() {
                const dz = this;

                // Adicionar classe para drag & drop
                this.on("dragenter", function() {
                    dz.element.classList.add('dz-drag-hover');
                });
                this.on("dragleave", function() {
                    dz.element.classList.remove('dz-drag-hover');
                });
                this.on("drop", function() {
                    dz.element.classList.remove('dz-drag-hover');
                });

                // Customizar template de preview
                this.on("addedfile", function(file) {
                    if (file.type.startsWith('video/')) {
                        const videoIcon = document.createElement('i');
                        videoIcon.className = 'fas fa-video fa-3x text-primary';
                        const imgElement = file.previewElement.querySelector('.dz-image img');
                        if (imgElement) {
                            imgElement.replaceWith(videoIcon);
                        }
                    }
                });
            }
        });

        // References Dropzone (similar configuração)
        const referencesDropzone = new Dropzone("#referencesDropzone", {
            url: "{{ route('upload.temp') }}",
            paramName: "file",
            maxFilesize: 50, // MB
            acceptedFiles: "image/*,video/*,.pdf,.doc,.docx",
            addRemoveLinks: true,
            dictRemoveFile: "Remover",
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            sending: function(file, xhr, formData) {
                formData.append('type', 'reference');
            },
            success: function(file, response) {
                if (response.success) {
                    file.uploadId = response.upload_id;
                    wizardData.tempReferenceIds = wizardData.tempReferenceIds || [];
                    wizardData.tempReferenceIds.push(response.upload_id);
                }
            },
            removedfile: function(file) {
                if (file.uploadId) {
                    fetch("{{ route('upload.temp.remove') }}", {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                        },
                        body: JSON.stringify({ upload_id: file.uploadId })
                    });

                    const index = wizardData.tempReferenceIds.indexOf(file.uploadId);
                    if (index > -1) {
                        wizardData.tempReferenceIds.splice(index, 1);
                    }
                }

                file.previewElement.remove();
            }
        });

        // Tornar previews ordenáveis com SortableJS
        if (typeof Sortable !== 'undefined') {
            new Sortable(mediaDropzone.element.querySelector('.dz-preview-container'), {
                animation: 150,
                ghostClass: 'sortable-ghost',
                onEnd: function(evt) {
                    // Reordenar array de IDs
                    const items = Array.from(evt.from.children);
                    const newOrder = [];
                    items.forEach(item => {
                        const file = mediaDropzone.files.find(f => f.previewElement === item);
                        if (file && file.uploadId) {
                            newOrder.push(file.uploadId);
                        }
                    });
                    wizardData.tempMediaIds = newOrder;
                }
            });
        }
    }

    // Override collectStepData para Step 3
    const originalCollectStepData3 = window.collectStepData;
    window.collectStepData = function(step) {
        if (step === 3) {
            wizardData.retranca = document.getElementById('retranca').value;

            // Pegar conteúdo do TinyMCE
            if (tinymce.get('content')) {
                wizardData.content = tinymce.get('content').getContent();
            }

            wizardData.direcionamentos = document.getElementById('direcionamentos').value;
            wizardData.hashtags = document.getElementById('hashtags').value;

            // IDs dos uploads já estão sendo coletados em tempo real
        } else {
            originalCollectStepData3(step);
        }
    };

    // Validação do Step 3
    function validateStep3() {
        // Step 3 não tem campos obrigatórios
        return true;
    }
    // Copy caption between platforms
    function copyCaption(fromPlatform, toPlatform) {
        const fromTextarea = document.getElementById(`caption_${fromPlatform}`);
        const toTextarea = document.getElementById(`caption_${toPlatform}`);

        if (fromTextarea && toTextarea) {
            toTextarea.value = fromTextarea.value;
            toTextarea.dispatchEvent(new Event('input'));
            showAlert('success', 'Legenda copiada!');
        }
    }

    // Global click handler to close hashtag suggestions
    document.addEventListener('click', function(e) {
        if (!e.target.closest('.hashtag-suggestions') &&
            !e.target.closest('.platform-caption')) {
            document.querySelectorAll('.hashtag-suggestions').forEach(el => {
                el.classList.remove('show');
            });
        }
    });

    // TASK-033: Duplication Modal Implementation
    let duplicationData = {
        originalPost: {},
        selectedPlatforms: [],
        schedules: {},
        conflicts: []
    };

    // Open duplication modal
    function openDuplicationModal() {
        const modal = new bootstrap.Modal(document.getElementById('duplicationModal'));

        // Prepare data
        duplicationData.originalPost = {
            title: wizardData.title,
            tipo_conteudo: wizardData.tipo_conteudo,
            scheduled_at: wizardData.scheduled_at,
            platforms: wizardData.platforms,
            content: wizardData.content,
            hashtags: wizardData.hashtags
        };

        // Update original post info
        document.getElementById('dupOriginalTitle').textContent = duplicationData.originalPost.title || 'Sem título';
        document.getElementById('dupOriginalType').textContent = getTipoLabel(duplicationData.originalPost.tipo_conteudo);
        document.getElementById('dupOriginalDate').textContent = formatDateTime(duplicationData.originalPost.scheduled_at);

        // Load available platforms
        loadDuplicationPlatforms();

        modal.show();
    }

    // Load available platforms for duplication
    async function loadDuplicationPlatforms() {
        const container = document.getElementById('duplicationPlatforms');
        const loading = document.getElementById('duplicationLoading');
        const content = document.getElementById('duplicationContent');

        // Show loading
        loading.classList.remove('d-none');
        content.classList.add('d-none');

        try {
            // Get platform compatibility
            const compatibility = getTypeCompatibility(duplicationData.originalPost.tipo_conteudo);

            container.innerHTML = '';

            // Create platform cards
            const platforms = @json(App\Enums\PlataformaRedeSocial::cases());

            platforms.forEach(platform => {
                const isCompatible = compatibility.includes(platform.value);
                const isOriginal = duplicationData.originalPost.platforms.includes(platform.value);

                const col = document.createElement('div');
                col.className = 'col-md-3';

                col.innerHTML = `
                    <div class="duplication-platform-card ${!isCompatible || isOriginal ? 'disabled' : ''}"
                        data-platform="${platform.value}"
                        onclick="${isCompatible && !isOriginal ? `toggleDuplicationPlatform('${platform.value}')` : ''}">
                        <div class="text-center">
                            <i class="${platform.icon} fs-3 mb-2" style="color: ${platform.color}"></i>
                            <h6 class="mb-1">${platform.label}</h6>
                            ${isOriginal ?
                                '<span class="badge bg-secondary">Já incluído</span>' :
                                (isCompatible ?
                                    '<span class="badge bg-success">Compatível</span>' :
                                    '<span class="badge bg-danger">Incompatível</span>'
                                )
                            }
                        </div>
                        <div class="platform-compatibility">
                            ${isCompatible ?
                                '<i class="fas fa-check-circle text-success"></i>' :
                                '<i class="fas fa-times-circle text-danger"></i>'
                            }
                        </div>
                    </div>
                `;

                container.appendChild(col);
            });

        } catch (error) {
            showAlert('error', 'Erro ao carregar plataformas');
        } finally {
            loading.classList.add('d-none');
            content.classList.remove('d-none');
        }
    }

    // Toggle platform selection
    function toggleDuplicationPlatform(platform) {
        const card = document.querySelector(`.duplication-platform-card[data-platform="${platform}"]`);

        if (card.classList.contains('selected')) {
            // Remove platform
            card.classList.remove('selected');
            duplicationData.selectedPlatforms = duplicationData.selectedPlatforms.filter(p => p !== platform);
            delete duplicationData.schedules[platform];
        } else {
            // Add platform
            card.classList.add('selected');
            duplicationData.selectedPlatforms.push(platform);

            // Initialize schedule with default time (30 min after original)
            const originalDate = new Date(duplicationData.originalPost.scheduled_at);
            const newDate = new Date(originalDate.getTime() + 30 * 60000); // +30 minutes

            duplicationData.schedules[platform] = {
                date: newDate.toISOString().split('T')[0],
                time: newDate.toTimeString().slice(0, 5)
            };
        }

        updateScheduleConfiguration();
        updateDuplicationButton();
    }

    // Update schedule configuration
    function updateScheduleConfiguration() {
        const container = document.getElementById('scheduleConfiguration');
        const schedulesDiv = document.getElementById('platformSchedules');

        if (duplicationData.selectedPlatforms.length === 0) {
            container.classList.add('d-none');
            return;
        }

        container.classList.remove('d-none');
        schedulesDiv.innerHTML = '';

        duplicationData.selectedPlatforms.forEach((platform, index) => {
            const platformData = @json(App\Enums\PlataformaRedeSocial::cases())
                .find(p => p.value === platform);

            const schedule = duplicationData.schedules[platform];

            const item = document.createElement('div');
            item.className = 'accordion-item';
            item.innerHTML = `
                <h2 class="accordion-header" id="heading-${platform}">
                    <button class="accordion-button ${index > 0 ? 'collapsed' : ''}"
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#collapse-${platform}">
                        <i class="${platformData.icon} me-2" style="color: ${platformData.color}"></i>
                        ${platformData.label}
                        <span class="ms-auto me-3 text-muted" id="schedule-preview-${platform}">
                            ${formatDateTime(`${schedule.date}T${schedule.time}`)}
                        </span>
                    </button>
                </h2>
                <div id="collapse-${platform}"
                    class="accordion-collapse collapse ${index === 0 ? 'show' : ''}"
                    data-bs-parent="#platformSchedules">
                    <div class="accordion-body">
                        <div class="schedule-time-picker">
                            <div>
                                <label class="form-label">Data</label>
                                <input type="date"
                                    class="form-control"
                                    value="${schedule.date}"
                                    min="${new Date().toISOString().split('T')[0]}"
                                    onchange="updatePlatformSchedule('${platform}', 'date', this.value)">
                            </div>
                            <div>
                                <label class="form-label">Horário</label>
                                <input type="time"
                                    class="form-control"
                                    value="${schedule.time}"
                                    onchange="updatePlatformSchedule('${platform}', 'time', this.value)">
                            </div>
                        </div>

                        <div class="adaptation-info mt-3">
                            <i class="fas fa-info-circle"></i>
                            <span>O conteúdo será adaptado automaticamente para ${platformData.label}</span>
                        </div>

                        <div id="conflict-${platform}" class="mt-2"></div>
                    </div>
                </div>
            `;

            schedulesDiv.appendChild(item);
        });

        checkScheduleConflicts();
        updateDuplicationPreview();
    }

    // Update platform schedule
    function updatePlatformSchedule(platform, field, value) {
        duplicationData.schedules[platform][field] = value;

        // Update preview
        const schedule = duplicationData.schedules[platform];
        const preview = document.getElementById(`schedule-preview-${platform}`);
        if (preview) {
            preview.textContent = formatDateTime(`${schedule.date}T${schedule.time}`);
        }

        checkScheduleConflicts();
        updateDuplicationPreview();
    }

    // Check for schedule conflicts
    async function checkScheduleConflicts() {
        duplicationData.conflicts = [];
        const conflictWarnings = document.getElementById('conflictWarnings');
        const conflictList = document.getElementById('conflictList');

        // Simulate conflict checking (in real implementation, this would check against existing posts)
        for (const platform of duplicationData.selectedPlatforms) {
            const schedule = duplicationData.schedules[platform];
            const dateTime = new Date(`${schedule.date}T${schedule.time}`);

            // Check if too close to original post (less than 15 minutes)
            const originalDate = new Date(duplicationData.originalPost.scheduled_at);
            const diffMinutes = Math.abs(dateTime - originalDate) / 60000;

            if (diffMinutes < 15) {
                duplicationData.conflicts.push({
                    platform,
                    type: 'too_close',
                    message: `${getPlatformLabel(platform)}: Muito próximo ao post original (menos de 15 minutos)`
                });
            }
        }

        // Update UI
        if (duplicationData.conflicts.length > 0) {
            conflictWarnings.classList.remove('d-none');
            conflictList.innerHTML = duplicationData.conflicts
                .map(c => `<li>${c.message}</li>`)
                .join('');
        } else {
            conflictWarnings.classList.add('d-none');
        }

        updateDuplicationButton();
    }

    // Update duplication preview
    function updateDuplicationPreview() {
        const preview = document.getElementById('duplicationPreview');
        const tbody = document.getElementById('duplicationPreviewBody');

        if (duplicationData.selectedPlatforms.length === 0) {
            preview.classList.add('d-none');
            return;
        }

        preview.classList.remove('d-none');
        tbody.innerHTML = '';

        duplicationData.selectedPlatforms.forEach(platform => {
            const schedule = duplicationData.schedules[platform];
            const hasConflict = duplicationData.conflicts.some(c => c.platform === platform);

            const row = document.createElement('tr');
            row.className = 'duplication-preview-row';
            row.innerHTML = `
                <td>
                    <i class="${getPlatformIcon(platform)}" style="color: ${getPlatformColor(platform)}"></i>
                    ${getPlatformLabel(platform)}
                </td>
                <td>${getTipoLabel(duplicationData.originalPost.tipo_conteudo)}</td>
                <td>${formatDateTime(`${schedule.date}T${schedule.time}`)}</td>
                <td>
                    ${hasConflict ?
                        '<span class="badge bg-warning">Conflito</span>' :
                        '<span class="badge bg-success">OK</span>'
                    }
                </td>
                <td>
                    <button type="button"
                            class="btn btn-sm btn-phoenix-danger"
                            onclick="toggleDuplicationPlatform('${platform}')">
                        <i class="fas fa-times"></i>
                    </button>
                </td>
            `;

            tbody.appendChild(row);
        });
    }

    // Update duplication button state
    function updateDuplicationButton() {
        const btn = document.getElementById('confirmDuplicationBtn');
        const hasConflicts = duplicationData.conflicts.length > 0;
        const hasPlatforms = duplicationData.selectedPlatforms.length > 0;

        btn.disabled = !hasPlatforms || hasConflicts;

        if (hasConflicts) {
            btn.innerHTML = '<i class="fas fa-exclamation-triangle me-2"></i>Resolver Conflitos';
            btn.classList.remove('btn-primary');
            btn.classList.add('btn-warning');
        } else {
            btn.innerHTML = `<i class="fas fa-copy me-2"></i>Duplicar Post (${duplicationData.selectedPlatforms.length})`;
            btn.classList.remove('btn-warning');
            btn.classList.add('btn-primary');
        }
    }

    // Confirm duplication
    async function confirmDuplication() {
        const btn = document.getElementById('confirmDuplicationBtn');
        const originalHtml = btn.innerHTML;

        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Duplicando...';

        try {
            // Prepare duplication data
            const duplications = duplicationData.selectedPlatforms.map(platform => ({
                platform,
                scheduled_at: `${duplicationData.schedules[platform].date} ${duplicationData.schedules[platform].time}:00`,
                tipo_conteudo: duplicationData.originalPost.tipo_conteudo,
                content: duplicationData.originalPost.content,
                hashtags: duplicationData.originalPost.hashtags
            }));

            // Send to server (simulated)
            await new Promise(resolve => setTimeout(resolve, 2000));

            showAlert('success', `${duplications.length} posts duplicados com sucesso!`);

            // Close modal
            const modal = bootstrap.Modal.getInstance(document.getElementById('duplicationModal'));
            modal.hide();

        } catch (error) {
            showAlert('error', 'Erro ao duplicar posts');
        } finally {
            btn.disabled = false;
            btn.innerHTML = originalHtml;
        }
    }

    // Helper functions for duplication
    function getTypeCompatibility(tipo) {
        const compatibility = {
            'feed': ['instagram', 'facebook', 'linkedin'],
            'reels': ['instagram', 'facebook', 'tiktok'],
            'stories': ['instagram', 'facebook', 'whatsapp'],
            'carrossel': ['instagram', 'facebook', 'linkedin'],
            'video': ['youtube', 'facebook', 'linkedin', 'twitter']
        };

        return compatibility[tipo] || [];
    }

    function getTipoLabel(tipo) {
        const labels = {
            'feed': 'Feed',
            'reels': 'Reels',
            'stories': 'Stories',
            'carrossel': 'Carrossel',
            'video': 'Vídeo'
        };

        return labels[tipo] || 'Desconhecido';
    }

    function getPlatformLabel(platform) {
        const platformData = @json(App\Enums\PlataformaRedeSocial::cases())
            .find(p => p.value === platform);
        return platformData ? platformData.label : platform;
    }

    function getPlatformIcon(platform) {
        const platformData = @json(App\Enums\PlataformaRedeSocial::cases())
            .find(p => p.value === platform);
        return platformData ? platformData.icon : 'fas fa-share';
    }

    function getPlatformColor(platform) {
        const platformData = @json(App\Enums\PlataformaRedeSocial::cases())
            .find(p => p.value === platform);
        return platformData ? platformData.color : '#666';
    }

    function formatDateTime(dateTimeStr) {
        if (!dateTimeStr) return '-';

        const date = new Date(dateTimeStr);
        const options = {
            day: '2-digit',
            month: '2-digit',
            year: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        };

        return date.toLocaleDateString('pt-BR', options);
    }

    // Initialize duplication button
    document.getElementById('confirmDuplicationBtn').addEventListener('click', confirmDuplication);

    // Auto-save implementation
    const autoSave = {
        timeout: null,
        isSaving: false,
        draftKey: null,
        lastSavedData: null,
        enabled: true,

        init() {
            // Recuperar draft_key do localStorage
            this.draftKey = localStorage.getItem('post_draft_key');

            // Verificar se há rascunho para recuperar
            this.checkForDraft();

            // Adicionar listeners para auto-save
            this.attachListeners();

            // Salvar periodicamente (backup)
            setInterval(() => {
                if (this.enabled && !this.isSaving) {
                    this.save();
                }
            }, 30000); // 30 segundos
        },

        attachListeners() {
            // Inputs de texto
            document.querySelectorAll('input[type="text"], textarea, select').forEach(input => {
                input.addEventListener('input', () => this.triggerSave());
                input.addEventListener('change', () => this.triggerSave());
            });

            // Checkboxes e radios
            document.querySelectorAll('input[type="checkbox"], input[type="radio"]').forEach(input => {
                input.addEventListener('change', () => this.triggerSave());
            });

            // TinyMCE
            if (typeof tinymce !== 'undefined') {
                const checkTinyMCE = setInterval(() => {
                    if (tinymce.get('content')) {
                        tinymce.get('content').on('change keyup', () => this.triggerSave());
                        clearInterval(checkTinyMCE);
                    }
                }, 500);
            }
        },

        triggerSave() {
            if (!this.enabled) return;

            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
                this.save();
            }, 2000); // 2 segundos de debounce
        },

        async save() {
            if (this.isSaving) return;

            this.isSaving = true;
            this.showIndicator('saving');

            try {
                // Coletar todos os dados
                const currentStep = document.querySelector('.nav-link.active[data-wizard-step]')?.getAttribute('data-wizard-step') || '1';
                collectStepData(parseInt(currentStep));

                // Verificar se os dados mudaram
                const currentData = JSON.stringify(wizardData);
                if (currentData === this.lastSavedData) {
                    this.isSaving = false;
                    this.hideIndicator();
                    return;
                }

                // Salvar no servidor
                const response = await fetch('{{ route("posts.wizard.auto-save") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({
                        draft_key: this.draftKey,
                        data: wizardData,
                        current_step: currentStep
                    })
                });

                const result = await response.json();

                if (result.success) {
                    this.draftKey = result.draft_key;
                    this.lastSavedData = currentData;

                    // Salvar também no localStorage
                    localStorage.setItem('post_draft_key', this.draftKey);
                    localStorage.setItem('post_draft_data', currentData);
                    localStorage.setItem('post_draft_step', currentStep);
                    localStorage.setItem('post_draft_saved_at', new Date().toISOString());

                    this.showIndicator('saved', `Salvo às ${result.saved_at}`);
                } else {
                    throw new Error(result.message || 'Erro ao salvar');
                }

            } catch (error) {
                console.error('Erro ao salvar rascunho:', error);
                this.showIndicator('error', 'Erro ao salvar');

                // Tentar salvar apenas no localStorage
                try {
                    localStorage.setItem('post_draft_data_backup', JSON.stringify(wizardData));
                    localStorage.setItem('post_draft_backup_at', new Date().toISOString());
                } catch (e) {
                    console.error('Erro ao salvar no localStorage:', e);
                }
            } finally {
                this.isSaving = false;

                setTimeout(() => {
                    this.hideIndicator();
                }, 3000);
            }
        },

        showIndicator(status, text = null) {
            const indicator = document.getElementById('autoSaveIndicator');
            const spinner = indicator.querySelector('.spinner-border');
            const checkIcon = indicator.querySelector('.fa-check-circle');
            const errorIcon = indicator.querySelector('.fa-exclamation-circle');
            const textEl = indicator.querySelector('.auto-save-text');

            // Reset
            indicator.className = 'auto-save-indicator show';
            spinner.style.display = 'none';
            checkIcon.style.display = 'none';
            errorIcon.style.display = 'none';

            switch (status) {
                case 'saving':
                    indicator.classList.add('saving');
                    spinner.style.display = 'inline-block';
                    textEl.textContent = 'Salvando...';
                    break;
                case 'saved':
                    indicator.classList.add('saved');
                    checkIcon.style.display = 'inline-block';
                    textEl.textContent = text || 'Salvo';
                    break;
                case 'error':
                    indicator.classList.add('error');
                    errorIcon.style.display = 'inline-block';
                    textEl.textContent = text || 'Erro ao salvar';
                    break;
            }
        },

        hideIndicator() {
            const indicator = document.getElementById('autoSaveIndicator');
            indicator.classList.remove('show');
        },

        async checkForDraft() {
            try {
                // Verificar se há parâmetro de draft na URL
                const urlParams = new URLSearchParams(window.location.search);
                const draftKey = urlParams.get('draft');

                const response = await fetch(`{{ route('posts.wizard.draft') }}${draftKey ? `?draft_key=${draftKey}` : ''}`);
                const result = await response.json();

                if (result.success && result.draft) {
                    this.showRecoveryBanner(result.draft);
                }

            } catch (error) {
                console.error('Erro ao verificar rascunho:', error);

                // Tentar recuperar do localStorage
                const localData = localStorage.getItem('post_draft_data');
                if (localData) {
                    const savedAt = localStorage.getItem('post_draft_saved_at');
                    this.showRecoveryBanner({
                        data: JSON.parse(localData),
                        updated_at: new Date(savedAt).toLocaleString('pt-BR'),
                        local: true
                    });
                }
            }
        },

        showRecoveryBanner(draft) {
            // Criar banner se não existir
            let banner = document.querySelector('.draft-recovery-banner');
            if (!banner) {
                banner = document.createElement('div');
                banner.className = 'draft-recovery-banner';
                banner.innerHTML = `
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-1">
                                <i class="fas fa-info-circle me-2"></i>
                                Rascunho encontrado
                            </h6>
                            <p class="mb-0 text-muted">
                                Última modificação: <span id="draftDate"></span>
                            </p>
                        </div>
                        <div>
                            <button type="button" class="btn btn-sm btn-info me-2" onclick="autoSave.recoverDraft()">
                                <i class="fas fa-redo me-1"></i>Recuperar
                            </button>
                            <button type="button" class="btn btn-sm btn-secondary" onclick="autoSave.discardRecovery()">
                                <i class="fas fa-times me-1"></i>Descartar
                            </button>
                        </div>
                    </div>
                `;

                const container = document.querySelector('.card-body');
                container.insertBefore(banner, container.firstChild);
            }

            document.getElementById('draftDate').textContent = draft.updated_at;
            banner.classList.add('show');

            // Guardar dados para recuperação
            this.recoveryData = draft;
        },

        recoverDraft() {
            if (!this.recoveryData) return;

            const data = this.recoveryData.data;

            // Preencher dados do Step 1
            if (data.cliente_id) {
                document.getElementById('cliente_id').value = data.cliente_id;
                // Trigger change event para Choices.js
                const event = new Event('change', { bubbles: true });
                document.getElementById('cliente_id').dispatchEvent(event);
            }

            if (data.scheduled_date) {
                document.getElementById('scheduled_date').value = data.scheduled_date;
            }

            if (data.title) {
                document.getElementById('title').value = data.title;
                document.getElementById('title').dispatchEvent(new Event('input'));
            }

            // Restaurar plataformas
            if (data.initial_platforms) {
                data.initial_platforms.forEach(platform => {
                    const checkbox = document.querySelector(`#init_platform_${platform}`);
                    if (checkbox) {
                        checkbox.checked = true;
                        checkbox.dispatchEvent(new Event('change'));
                    }
                });
            }

            // Restaurar outros dados conforme navegar pelos steps
            Object.assign(wizardData, data);

            // Se tinha step salvo, ir para ele
            if (this.recoveryData.current_step) {
                const targetTab = document.querySelector(`[data-wizard-step="${this.recoveryData.current_step}"]`);
                if (targetTab) {
                    setTimeout(() => {
                        targetTab.click();
                    }, 500);
                }
            }

            // Atualizar draft key
            if (this.recoveryData.key) {
                this.draftKey = this.recoveryData.key;
            }

            showAlert('success', 'Rascunho recuperado com sucesso!');
            this.discardRecovery();
        },

        discardRecovery() {
            const banner = document.querySelector('.draft-recovery-banner');
            if (banner) {
                banner.classList.remove('show');
            }
            this.recoveryData = null;
        },

        async deleteDraft() {
            if (!this.draftKey) return;

            try {
                await fetch('{{ route("posts.wizard.draft.delete") }}', {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({
                        draft_key: this.draftKey
                    })
                });

                // Limpar localStorage
                this.clearLocalStorage();

            } catch (error) {
                console.error('Erro ao deletar rascunho:', error);
            }
        },

        clearLocalStorage() {
            localStorage.removeItem('post_draft_key');
            localStorage.removeItem('post_draft_data');
            localStorage.removeItem('post_draft_step');
            localStorage.removeItem('post_draft_saved_at');
            localStorage.removeItem('post_draft_data_backup');
            localStorage.removeItem('post_draft_backup_at');
        },

        disable() {
            this.enabled = false;
            clearTimeout(this.timeout);
        }
    };

    // Funções para o seletor de rascunhos
    async function loadDrafts() {
        try {
            const response = await fetch('{{ route("posts.wizard.drafts") }}');
            const result = await response.json();

            if (result.success) {
                const container = document.getElementById('draftsList');

                if (result.drafts.length === 0) {
                    container.innerHTML = `
                        <div class="text-center p-3 text-muted">
                            <i class="fas fa-inbox fa-2x mb-2"></i>
                            <p class="mb-0">Nenhum rascunho salvo</p>
                        </div>
                    `;
                } else {
                    container.innerHTML = result.drafts.map(draft => `
                        <div class="draft-item" onclick="loadDraft('${draft.key}')">
                            <div class="draft-item-title">${draft.title}</div>
                            <div class="draft-item-meta">
                                <span>Step ${draft.step} • v${draft.version}</span>
                                <span>${draft.updated_at}</span>
                            </div>
                        </div>
                    `).join('');
                }
            }
        } catch (error) {
            console.error('Erro ao carregar rascunhos:', error);
        }
    }

    function toggleDraftSelector() {
        const selector = document.getElementById('draftSelector');
        selector.classList.toggle('show');

        if (selector.classList.contains('show')) {
            loadDrafts();
        }
    }

    function loadDraft(draftKey) {
        if (confirm('Isso substituirá os dados atuais. Continuar?')) {
            window.location.href = `{{ route("posts.wizard.create") }}?draft=${draftKey}`;
        }
    }

    // Modificar o submitForm para desabilitar auto-save e limpar rascunho
    const originalSubmitForm = window.submitForm;
    window.submitForm = async function() {
        // Desabilitar auto-save
        autoSave.disable();

        // Adicionar draft_key aos dados
        if (autoSave.draftKey) {
            wizardData.draft_key = autoSave.draftKey;
        }

        // Chamar função original
        const result = await originalSubmitForm.call(this);

        // Se sucesso, deletar rascunho
        if (result !== false) {
            await autoSave.deleteDraft();
        } else {
            // Re-habilitar se houve erro
            autoSave.enabled = true;
        }

        return result;
    };

    // Inicializar auto-save
    autoSave.init();

    // Mostrar botões de rascunho após primeiro step
    wizard.addEventListener('shown.bs.tab', function(e) {
        const step = parseInt(e.target.getAttribute('data-wizard-step'));

        if (step > 1) {
            document.getElementById('saveDraftBtn').style.display = 'inline-block';
            document.getElementById('draftDropdownBtn').style.display = 'inline-block';
        } else {
            document.getElementById('saveDraftBtn').style.display = 'none';
            document.getElementById('draftDropdownBtn').style.display = 'none';
        }
    });

    // Salvar manualmente
    document.getElementById('saveDraftBtn').addEventListener('click', function() {
        autoSave.save();
        showAlert('info', 'Rascunho salvo manualmente');
    });

    // Fechar dropdown ao clicar fora
    document.addEventListener('click', function(e) {
        if (!e.target.closest('#draftDropdownBtn') && !e.target.closest('#draftSelector')) {
            document.getElementById('draftSelector').classList.remove('show');
        }
    });

    // Expor autoSave globalmente para os botões inline
    window.autoSave = autoSave;
    window.loadDraft = loadDraft;
    window.toggleDraftSelector = toggleDraftSelector;
    window.loadDrafts = loadDrafts;

    // INTEGRAÇÃO DO TEMPLATE - Verificar se há template_id na URL
    const urlParams = new URLSearchParams(window.location.search);
    const templateId = urlParams.get('template_id');

    if (templateId) {
        // Carregar dados do template
        fetch(`{{ route('posts.wizard.template.load') }}?template_id=${templateId}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const template = data.template;

                    // Mostrar mensagem
                    showAlert('info', `Template "${template.name}" carregado com sucesso!`);

                    // Preencher título/retranca
                    if (template.structure.retranca) {
                        document.getElementById('title').value = template.structure.retranca;
                        document.getElementById('title').dispatchEvent(new Event('input'));
                    }

                    // Marcar plataformas na Tab 1
                    if (template.structure.platforms) {
                        template.structure.platforms.forEach(platform => {
                            const checkbox = document.querySelector(`#init_platform_${platform}`);
                            if (checkbox) {
                                checkbox.checked = true;
                                checkbox.dispatchEvent(new Event('change'));
                            }
                        });
                    }

                    // Aguardar TinyMCE carregar para preencher conteúdo
                    const waitForTinyMCE = setInterval(() => {
                        if (typeof tinymce !== 'undefined' && tinymce.get('content')) {
                            if (template.structure.content) {
                                tinymce.get('content').setContent(template.structure.content);
                            }
                            clearInterval(waitForTinyMCE);
                        }
                    }, 100);

                    // Preencher outros campos quando chegar na tab apropriada
                    wizard.addEventListener('shown.bs.tab', function(e) {
                        const step = parseInt(e.target.getAttribute('data-wizard-step'));

                        if (step === 2 && template.structure.tipo_conteudo) {
                            // Selecionar tipo de conteúdo
                            const tipoRadio = document.querySelector(`#tipo_${template.structure.tipo_conteudo}`);
                            if (tipoRadio) {
                                tipoRadio.checked = true;
                                tipoRadio.dispatchEvent(new Event('change'));
                            }
                        }

                        if (step === 3) {
                            // Preencher retranca se diferente do título
                            if (template.structure.retranca && !document.getElementById('retranca').value) {
                                document.getElementById('retranca').value = template.structure.retranca;
                            }

                            // Preencher hashtags
                            if (template.structure.hashtags) {
                                document.getElementById('hashtags').value = template.structure.hashtags;
                            }
                        }

                        if (step === 4) {
                            // As plataformas já foram selecionadas na Tab 1
                            // Apenas garantir que estão marcadas na Tab 4
                            if (template.structure.platforms) {
                                template.structure.platforms.forEach(platform => {
                                    const checkbox = document.querySelector(`#platform_${platform}`);
                                    if (checkbox) {
                                        checkbox.checked = true;
                                    }
                                });

                                // Atualizar captions
                                updateCustomCaptions();
                            }
                        }
                    });

                    // Salvar template_id para enviar no submit
                    wizardData.template_id = templateId;
                    document.getElementById('template_id').value = templateId;
                }
            })
            .catch(error => {
                console.error('Erro ao carregar template:', error);
                showAlert('error', 'Erro ao carregar template');
            });
    }
});
</script>
<script src="{{ asset('vendors/tinymce/tinymce.min.js') }}"></script>
@endpush