@php
    $coverTopTitleDefault = old('cover_top_title', 'ASTRO BILGE BLOG');
    $coverMainTitleDefault = old('cover_main_title', isset($blog) ? $blog->title : 'Blog Başlığınız');
    $coverSubTitleDefault = old('cover_sub_title', 'Astrolojik rehber, yorum ve pratik öneriler');
    $coverSymbolDefault = old('cover_symbol', '♀');
    $coverBgFromDefault = old('cover_bg_from', '#1f3b2d');
    $coverBgToDefault = old('cover_bg_to', '#476b4f');
    $coverGlowColorDefault = old('cover_glow_color', '#f6d486');
@endphp

<div class="card border-0 shadow-sm mt-3" id="coverGeneratorCard">
    <div class="card-body">
        <h5 class="card-title mb-2">Hazır Görsel Üretici</h5>
        <p class="text-muted small mb-3">
            Başlık, simge, alt metin ve arka plan renklerini ayarlayıp tek tıkla blog görseli üretin.
        </p>

        <div class="row g-3">
            <div class="col-md-6">
                <label for="coverTopTitle" class="form-label">Üst Başlık</label>
                <input type="text" id="coverTopTitle" class="form-control" value="{{ $coverTopTitleDefault }}" maxlength="64">
            </div>
            <div class="col-md-6">
                <label for="coverMainTitle" class="form-label">Ana Başlık</label>
                <input type="text" id="coverMainTitle" class="form-control" value="{{ $coverMainTitleDefault }}" maxlength="90">
            </div>

            <div class="col-md-6">
                <label for="coverSubTitle" class="form-label">Alt Yazı</label>
                <input type="text" id="coverSubTitle" class="form-control" value="{{ $coverSubTitleDefault }}" maxlength="120">
            </div>
            <div class="col-md-2">
                <label for="coverSymbol" class="form-label">Simge</label>
                <select id="coverSymbol" class="form-select">
                    <option value="♀" {{ $coverSymbolDefault === '♀' ? 'selected' : '' }}>Venüs ♀</option>
                    <option value="☿" {{ $coverSymbolDefault === '☿' ? 'selected' : '' }}>Merkür ☿</option>
                    <option value="♂" {{ $coverSymbolDefault === '♂' ? 'selected' : '' }}>Mars ♂</option>
                    <option value="♃" {{ $coverSymbolDefault === '♃' ? 'selected' : '' }}>Jüpiter ♃</option>
                    <option value="♄" {{ $coverSymbolDefault === '♄' ? 'selected' : '' }}>Satürn ♄</option>
                    <option value="☉" {{ $coverSymbolDefault === '☉' ? 'selected' : '' }}>Güneş ☉</option>
                    <option value="☾" {{ $coverSymbolDefault === '☾' ? 'selected' : '' }}>Ay ☾</option>
                    <option value="✶" {{ $coverSymbolDefault === '✶' ? 'selected' : '' }}>Yıldız ✶</option>
                    <option value="☊" {{ $coverSymbolDefault === '☊' ? 'selected' : '' }}>Kuzey Ay Düğümü ☊</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label d-block">Orta Işık Rengi</label>
                <div class="d-flex align-items-center gap-2">
                    <input type="color" id="coverGlowColor" class="form-control form-control-color" value="{{ $coverGlowColorDefault }}" title="Orta ışık rengi">
                </div>
            </div>
            <div class="col-md-2">
                <label class="form-label d-block">Arka Plan Renkleri</label>
                <div class="d-flex align-items-center gap-2">
                    <input type="color" id="coverBgFrom" class="form-control form-control-color" value="{{ $coverBgFromDefault }}" title="Başlangıç rengi">
                    <span class="text-muted">→</span>
                    <input type="color" id="coverBgTo" class="form-control form-control-color" value="{{ $coverBgToDefault }}" title="Bitiş rengi">
                </div>
            </div>
        </div>

        <p class="small text-muted mt-2 mb-0">Önizleme, blog kartında çıkan final görsel ile aynı PNG üretim akışından oluşturulur.</p>

        <div class="cover-preview-wrapper mt-3">
            <img id="coverPreviewImage" class="cover-preview-image" alt="Hazır görsel önizleme">
        </div>

        <div class="d-flex flex-wrap align-items-center gap-2 mt-3">
            <button type="button" class="btn btn-outline-secondary" id="coverPreviewRefreshBtn">
                <i class="bi bi-eye"></i> Önizlemeyi Yenile
            </button>
            <button type="button" class="btn btn-primary" id="coverApplyBtn">
                <i class="bi bi-magic"></i> Görseli Uygula
            </button>
            <span id="coverGeneratorMessage" class="small text-muted"></span>
        </div>
    </div>
</div>

@push('styles')
    <style>
        .cover-preview-wrapper {
            border: 1px solid #d8dee5;
            border-radius: 12px;
            overflow: hidden;
            background: #f7f8fa;
            max-width: 760px;
            margin: 0 auto;
        }

        .cover-preview-image {
            width: 100%;
            aspect-ratio: 16 / 9;
            object-fit: cover;
            display: block;
        }
    </style>
@endpush

@once
    @push('scripts')
        <script>
            (function() {
                const imageInput = document.getElementById('image');
                const titleInput = document.getElementById('title');
                const topTitleInput = document.getElementById('coverTopTitle');
                const mainTitleInput = document.getElementById('coverMainTitle');
                const subTitleInput = document.getElementById('coverSubTitle');
                const symbolInput = document.getElementById('coverSymbol');
                const bgFromInput = document.getElementById('coverBgFrom');
                const bgToInput = document.getElementById('coverBgTo');
                const glowColorInput = document.getElementById('coverGlowColor');
                const previewImage = document.getElementById('coverPreviewImage');
                const refreshBtn = document.getElementById('coverPreviewRefreshBtn');
                const applyBtn = document.getElementById('coverApplyBtn');
                const messageEl = document.getElementById('coverGeneratorMessage');

                if (!imageInput || !previewImage || !refreshBtn || !applyBtn) {
                    return;
                }

                const CANVAS_WIDTH = 1400;
                const CANVAS_HEIGHT = 788;
                let previewRenderToken = 0;

                function escapeXml(value) {
                    return String(value || '')
                        .replace(/&/g, '&amp;')
                        .replace(/</g, '&lt;')
                        .replace(/>/g, '&gt;')
                        .replace(/"/g, '&quot;')
                        .replace(/'/g, '&#39;');
                }

                function splitText(value, maxLength) {
                    const text = String(value || '').trim();
                    if (text.length <= maxLength) {
                        return [text || 'Blog Başlığınız'];
                    }

                    const words = text.split(/\s+/);
                    const lines = [];
                    let current = '';

                    words.forEach((word) => {
                        const next = current ? `${current} ${word}` : word;
                        if (next.length <= maxLength || !current) {
                            current = next;
                        } else {
                            lines.push(current);
                            current = word;
                        }
                    });

                    if (current) {
                        lines.push(current);
                    }

                    return lines.slice(0, 2);
                }

                function buildSvg() {
                    const topTitle = escapeXml(topTitleInput.value || 'ASTRO BILGE BLOG');
                    const mainTitleLines = splitText(mainTitleInput.value, 34).map(escapeXml);
                    const subTitle = escapeXml(subTitleInput.value || 'Astrolojik rehber, yorum ve pratik öneriler');
                    const symbol = escapeXml(symbolInput.value || '♀');
                    const bgFrom = bgFromInput.value || '#1f3b2d';
                    const bgTo = bgToInput.value || '#476b4f';
                    const glowColor = glowColorInput && glowColorInput.value ? glowColorInput.value : '#f6d486';

                    const mainLineOne = mainTitleLines[0] || 'Blog Başlığınız';
                    const mainLineTwo = mainTitleLines[1] || '';
                    const secondLineBlock = mainLineTwo
                        ? `<text x="700" y="344" text-anchor="middle" fill="#f7f0dc" font-size="64" font-family="Georgia, serif" font-weight="700">${mainLineTwo}</text>`
                        : '';

                    return `
<svg xmlns="http://www.w3.org/2000/svg" width="${CANVAS_WIDTH}" height="${CANVAS_HEIGHT}" viewBox="0 0 ${CANVAS_WIDTH} ${CANVAS_HEIGHT}" role="img" aria-label="Blog kapağı">
  <defs>
    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="${bgFrom}"/>
      <stop offset="100%" stop-color="${bgTo}"/>
    </linearGradient>
    <radialGradient id="orb" cx="50%" cy="42%" r="45%">
            <stop offset="0%" stop-color="${glowColor}" stop-opacity="0.95"/>
            <stop offset="100%" stop-color="${glowColor}" stop-opacity="0"/>
    </radialGradient>
  </defs>

  <rect width="${CANVAS_WIDTH}" height="${CANVAS_HEIGHT}" fill="url(#bg)"/>
  <circle cx="700" cy="332" r="280" fill="url(#orb)"/>

  <g stroke="#d7c79a" stroke-opacity="0.4" fill="none">
    <circle cx="700" cy="332" r="210" stroke-width="2"/>
    <circle cx="700" cy="332" r="250" stroke-width="1.5"/>
    <circle cx="700" cy="332" r="290" stroke-width="1"/>
  </g>

  <text x="700" y="210" text-anchor="middle" fill="#f3e9cd" font-size="34" font-family="Georgia, serif" letter-spacing="1.5">${topTitle}</text>
  <text x="700" y="280" text-anchor="middle" fill="#f7f0dc" font-size="64" font-family="Georgia, serif" font-weight="700">${mainLineOne}</text>
  ${secondLineBlock}
  <text x="700" y="${mainLineTwo ? '396' : '352'}" text-anchor="middle" fill="#e5dcbf" font-size="28" font-family="Georgia, serif">${subTitle}</text>

  <g transform="translate(700 490)">
    <circle r="88" fill="none" stroke="#f0dca1" stroke-width="6"/>
    <text x="0" y="24" text-anchor="middle" fill="#f0dca1" font-size="124" font-family="Georgia, serif">${symbol}</text>
  </g>

  <text x="700" y="700" text-anchor="middle" fill="#f3e7c3" font-size="24" font-family="Georgia, serif">Astro Bilge • Örnek İçerik</text>
</svg>`;
                }

                async function renderPngFromSvg(svgText) {
                    const svgBlob = new Blob([svgText], {
                        type: 'image/svg+xml;charset=utf-8'
                    });
                    const svgUrl = URL.createObjectURL(svgBlob);

                    try {
                        const image = await new Promise((resolve, reject) => {
                            const img = new Image();
                            img.onload = () => resolve(img);
                            img.onerror = reject;
                            img.src = svgUrl;
                        });

                        const canvas = document.createElement('canvas');
                        canvas.width = CANVAS_WIDTH;
                        canvas.height = CANVAS_HEIGHT;

                        const ctx = canvas.getContext('2d');
                        ctx.drawImage(image, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

                        const pngBlob = await new Promise((resolve) => {
                            canvas.toBlob(resolve, 'image/png', 0.95);
                        });

                        if (!pngBlob) {
                            throw new Error('PNG üretilemedi.');
                        }

                        const pngDataUrl = canvas.toDataURL('image/png', 0.95);

                        return {
                            pngBlob,
                            pngDataUrl
                        };
                    } finally {
                        URL.revokeObjectURL(svgUrl);
                    }
                }

                async function updatePreview() {
                    const localToken = ++previewRenderToken;

                    try {
                        const svg = buildSvg();
                        const {
                            pngDataUrl
                        } = await renderPngFromSvg(svg);
                        if (localToken !== previewRenderToken) {
                            return;
                        }
                        previewImage.src = pngDataUrl;
                    } catch (error) {
                        if (localToken !== previewRenderToken) {
                            return;
                        }
                        setMessage('Önizleme oluşturulamadı. Lütfen alanları kontrol edip tekrar deneyin.', true);
                    }
                }

                function setMessage(text, isError) {
                    messageEl.textContent = text;
                    messageEl.classList.toggle('text-danger', Boolean(isError));
                    messageEl.classList.toggle('text-success', !isError && text.length > 0);
                    messageEl.classList.toggle('text-muted', text.length === 0);
                }

                async function applyGeneratedCover() {
                    setMessage('Görsel hazırlanıyor...', false);

                    try {
                        const svg = buildSvg();
                        const {
                            pngBlob
                        } = await renderPngFromSvg(svg);

                        const titleSlug = (titleInput && titleInput.value ? titleInput.value : 'blog-kapak')
                            .toLowerCase()
                            .replace(/[^a-z0-9\s-]/g, '')
                            .trim()
                            .replace(/\s+/g, '-')
                            .slice(0, 48) || 'blog-kapak';

                        const file = new File([pngBlob], `${titleSlug}-${Date.now()}.png`, {
                            type: 'image/png'
                        });

                        const dt = new DataTransfer();
                        dt.items.add(file);
                        imageInput.files = dt.files;

                        setMessage('Hazır görsel eklendi. Kaydettiğinizde blog görseli olarak kullanılacak.', false);
                    } catch (error) {
                        setMessage('Görsel oluşturulurken hata oluştu. Lütfen tekrar deneyin.', true);
                    }
                }

                refreshBtn.addEventListener('click', updatePreview);
                applyBtn.addEventListener('click', applyGeneratedCover);

                [topTitleInput, mainTitleInput, subTitleInput, symbolInput, bgFromInput, bgToInput, glowColorInput].forEach((el) => {
                    if (el) {
                        el.addEventListener('input', updatePreview);
                        el.addEventListener('change', updatePreview);
                    }
                });

                if (titleInput && mainTitleInput && !mainTitleInput.value.trim()) {
                    mainTitleInput.value = titleInput.value || 'Blog Başlığınız';
                }

                if (titleInput && mainTitleInput) {
                    titleInput.addEventListener('input', () => {
                        if (!mainTitleInput.dataset.manualEdit) {
                            mainTitleInput.value = titleInput.value || 'Blog Başlığınız';
                            updatePreview();
                        }
                    });
                    mainTitleInput.addEventListener('input', () => {
                        mainTitleInput.dataset.manualEdit = '1';
                    });
                }

                updatePreview();
            })();
        </script>
    @endpush
@endonce