@extends('admin.layouts.layout')
@section('title')مقاله جدید@endsection

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">

    <div class="d-flex align-items-center justify-content-between mb-4">
        <h4 class="mb-0">مقاله جدید</h4>
        <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#aiGenModal">
            <i class="ti ti-sparkles me-1"></i> تولید محتوا توسط هوش مصنوعی
        </button>
    </div>

    <form method="POST" action="{{ route('admin.blog.posts.store') }}" enctype="multipart/form-data">
        @include('admin.blog.posts._form')
    </form>
</div>

{{-- AI generation modal --}}
<div class="modal fade" id="aiGenModal" tabindex="-1" aria-labelledby="aiGenModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="aiGenModalLabel">
                    <i class="ti ti-sparkles text-info me-1"></i> تولید محتوا توسط هوش مصنوعی
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="بستن"></button>
            </div>
            <div class="modal-body">

                <ul class="nav nav-tabs mb-3" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" type="button" data-bs-toggle="tab" data-bs-target="#aiTabProduct">
                            <i class="ti ti-package me-1"></i> دربارهٔ محصول
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" type="button" data-bs-toggle="tab" data-bs-target="#aiTabTopic">
                            <i class="ti ti-bulb me-1"></i> بر اساس موضوع
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" type="button" data-bs-toggle="tab" data-bs-target="#aiTabKeyword">
                            <i class="ti ti-key me-1"></i> بر اساس واژه کلیدی
                        </button>
                    </li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane fade show active" id="aiTabProduct">
                        <label class="form-label">انتخاب محصول</label>
                        <select id="aiProductSelect" class="form-select">
                            <option value="">— یک محصول انتخاب کنید —</option>
                            @foreach($products as $p)
                                <option value="{{ $p->id }}">{{ $p->title }}</option>
                            @endforeach
                        </select>
                        <small class="text-muted">یک مقاله سئوشده دربارهٔ این محصول تولید می‌شود و در متن به صفحهٔ خرید لینک می‌خورد.</small>
                    </div>

                    <div class="tab-pane fade" id="aiTabTopic">
                        <label class="form-label">موضوع مقاله</label>
                        <input type="text" id="aiTopicInput" class="form-control" placeholder="مثلاً: آموزش برنامه‌نویسی PHP">
                    </div>

                    <div class="tab-pane fade" id="aiTabKeyword">
                        <label class="form-label">واژه کلیدی اصلی</label>
                        <input type="text" id="aiKeywordInput" class="form-control" placeholder="مثلاً: برنامه‌نویسی">
                        <small class="text-muted">این واژه در عنوان، اولین پاراگراف و چندین جای متن به‌صورت طبیعی به‌کار می‌رود.</small>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">انصراف</button>
                <button type="button" class="btn btn-info" id="aiGenStartBtn">
                    <i class="ti ti-wand me-1"></i> شروع تولید
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('customjs')
@include('admin.blog.posts._editor-js')
<style>
    .ai-progress-wrap { text-align: right; direction: rtl; }
    .ai-progress-meta { display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin-bottom:.5rem; font-size:.9rem; }
    .ai-progress-bar { height: .85rem; border-radius: 999px; overflow: hidden; background: rgba(115,103,240,.12); }
    .ai-progress-bar > span {
        display:block; height:100%; width:0%;
        background: linear-gradient(90deg, #7367f0, #00cfe8);
        transition: width .35s ease;
    }
    .ai-stage-list { list-style:none; padding:0; margin:1rem 0 0; text-align:right; }
    .ai-stage-list li {
        display:flex; align-items:center; gap:.5rem;
        padding:.35rem 0; font-size:.875rem; color:#6f6b7d;
    }
    .ai-stage-list li .ai-dot {
        width:.7rem; height:.7rem; border-radius:50%;
        background:#d9d9e3; flex:0 0 auto;
    }
    .ai-stage-list li.is-done { color:#28c76f; }
    .ai-stage-list li.is-done .ai-dot { background:#28c76f; }
    .ai-stage-list li.is-current { color:#7367f0; font-weight:600; }
    .ai-stage-list li.is-current .ai-dot {
        background:#7367f0;
        box-shadow: 0 0 0 3px rgba(115,103,240,.2);
        animation: aiPulse 1.2s ease-in-out infinite;
    }
    @keyframes aiPulse {
        0%, 100% { box-shadow: 0 0 0 3px rgba(115,103,240,.15); }
        50% { box-shadow: 0 0 0 6px rgba(115,103,240,.08); }
    }
</style>
<script>
(function () {
    var aiEndpoint = @json(route('admin.blog.posts.ai-generate'));
    var progressUrlTpl = @json(route('admin.blog.posts.ai-generate.progress', ['jobId' => '__JOB__']));
    var csrfToken  = @json(csrf_token());
    var defaultStages = @json(\App\Services\AiBlogGenerator::stages());
    var startBtn   = document.getElementById('aiGenStartBtn');
    if (!startBtn) return;

    var stageOrder = defaultStages.map(function (s) { return s.key; });

    function makeJobId() {
        if (window.crypto && crypto.randomUUID) {
            return crypto.randomUUID().replace(/-/g, '');
        }
        return 'job_' + Date.now().toString(36) + Math.random().toString(36).slice(2, 10);
    }

    function progressUrl(jobId) {
        return progressUrlTpl.replace('__JOB__', encodeURIComponent(jobId));
    }

    function stageIndex(key) {
        var i = stageOrder.indexOf(key);
        return i === -1 ? -1 : i;
    }

    function buildProgressHtml(percent, label, stage, stages) {
        stages = stages && stages.length ? stages : defaultStages;
        var currentIdx = stageIndex(stage);
        var list = stages.map(function (s, idx) {
            var cls = '';
            if (stage === 'done' || (currentIdx > idx && stage !== 'error')) cls = 'is-done';
            else if (s.key === stage) cls = 'is-current';
            return '<li class="' + cls + '"><span class="ai-dot"></span><span>' + s.label + '</span></li>';
        }).join('');

        return (
            '<div class="ai-progress-wrap">' +
                '<div class="ai-progress-meta">' +
                    '<span id="aiProgressLabel">' + (label || 'در حال تولید…') + '</span>' +
                    '<strong id="aiProgressPct">' + percent + '٪</strong>' +
                '</div>' +
                '<div class="ai-progress-bar"><span id="aiProgressFill" style="width:' + percent + '%"></span></div>' +
                '<ul class="ai-stage-list" id="aiStageList">' + list + '</ul>' +
                '<p class="text-muted small mt-3 mb-0">این فرایند ممکن است چند دقیقه طول بکشد. صفحه را نبندید.</p>' +
            '</div>'
        );
    }

    function updateProgressUi(data) {
        var percent = Math.max(0, Math.min(100, parseInt(data.percent || 0, 10) || 0));
        var label = data.label || 'در حال تولید…';
        var stage = data.stage || 'prepare';
        var stages = data.stages && data.stages.length ? data.stages : defaultStages;
        var html = buildProgressHtml(percent, label, stage, stages);

        if (typeof Swal !== 'undefined' && Swal.isVisible && Swal.isVisible()) {
            Swal.update({ html: html });
            return true;
        }

        var fill = document.getElementById('aiProgressFill');
        var pctEl = document.getElementById('aiProgressPct');
        var labelEl = document.getElementById('aiProgressLabel');
        var listEl = document.getElementById('aiStageList');
        if (!fill || !listEl) return false;

        fill.style.width = percent + '%';
        if (pctEl) pctEl.textContent = percent + '٪';
        if (labelEl) labelEl.textContent = label;
        var currentIdx = stageIndex(stage);
        listEl.innerHTML = stages.map(function (s, idx) {
            var cls = '';
            if (stage === 'done' || (currentIdx > idx && stage !== 'error')) cls = 'is-done';
            else if (s.key === stage) cls = 'is-current';
            return '<li class="' + cls + '"><span class="ai-dot"></span><span>' + s.label + '</span></li>';
        }).join('');
        return true;
    }

    startBtn.addEventListener('click', function () {
        var activeTab = document.querySelector('#aiGenModal .tab-pane.active');
        if (!activeTab) return;

        var payload = { _token: csrfToken };
        if (activeTab.id === 'aiTabProduct') {
            payload.mode = 'product';
            payload.product_id = document.getElementById('aiProductSelect').value;
            if (!payload.product_id) {
                Swal.fire({icon: 'warning', title: 'محصول انتخاب نشده', text: 'یک محصول انتخاب کنید.'});
                return;
            }
        } else if (activeTab.id === 'aiTabTopic') {
            payload.mode = 'topic';
            payload.topic = document.getElementById('aiTopicInput').value.trim();
            if (!payload.topic) {
                Swal.fire({icon: 'warning', title: 'موضوع خالی است', text: 'موضوع را وارد کنید.'});
                return;
            }
        } else if (activeTab.id === 'aiTabKeyword') {
            payload.mode = 'keyword';
            payload.keyword = document.getElementById('aiKeywordInput').value.trim();
            if (!payload.keyword) {
                Swal.fire({icon: 'warning', title: 'واژه کلیدی خالی است', text: 'یک واژه کلیدی وارد کنید.'});
                return;
            }
        }

        var jobId = makeJobId();
        payload.job_id = jobId;

        var modalEl = document.getElementById('aiGenModal');
        var modal = bootstrap.Modal.getInstance(modalEl);
        if (modal) modal.hide();

        var pollTimer = null;
        var finished = false;

        function stopPolling() {
            if (pollTimer) {
                clearInterval(pollTimer);
                pollTimer = null;
            }
        }

        function pollProgress() {
            fetch(progressUrl(jobId), {
                method: 'GET',
                credentials: 'same-origin',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                },
                cache: 'no-store',
            })
            .then(function (res) {
                if (!res.ok) throw new Error('progress ' + res.status);
                return res.json();
            })
            .then(function (data) {
                if (!data || !data.ok || finished) return;
                updateProgressUi(data);
            })
            .catch(function () { /* ignore transient poll errors */ });
        }

        Swal.fire({
            title: 'تولید محتوا توسط هوش مصنوعی',
            html: buildProgressHtml(1, 'شروع تولید محتوا…', 'prepare', defaultStages),
            width: 560,
            allowOutsideClick: false,
            allowEscapeKey: false,
            showConfirmButton: false,
            didOpen: function () {
                pollProgress();
                pollTimer = setInterval(pollProgress, 800);
            },
            willClose: function () {
                stopPolling();
            },
        });

        fetch(aiEndpoint, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
            },
            body: JSON.stringify(payload),
        })
        .then(function (res) {
            return res.json().then(function (json) { return { status: res.status, json: json }; });
        })
        .then(function (r) {
            finished = true;
            stopPolling();

            if (r.json && r.json.ok && r.json.redirect_url) {
                updateProgressUi({
                    percent: 100,
                    stage: 'done',
                    label: 'تولید با موفقیت انجام شد',
                    status: 'done',
                    stages: defaultStages,
                });
                Swal.fire({
                    icon: 'success',
                    title: 'تولید شد',
                    text: r.json.message || 'در حال انتقال به ویرایش پیش‌نویس…',
                    timer: 1400,
                    showConfirmButton: false,
                }).then(function () {
                    window.location.href = r.json.redirect_url;
                });
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'تولید ناموفق',
                    text: (r.json && r.json.message) || 'خطای ناشناخته در تولید محتوا.',
                });
            }
        })
        .catch(function (err) {
            finished = true;
            stopPolling();
            Swal.fire({
                icon: 'error',
                title: 'خطای شبکه',
                text: err.message || 'ارتباط با سرور برقرار نشد.',
            });
        });
    });
})();
</script>
@endsection
