@php
    $regions = \App\Models\News::REGIONS;
    $secondaryCategories = \App\Models\News::secondaryCategoryLabels();
    $monitoredPrefill = $monitoredPrefill ?? null;
    $monitoredArticleId = old('monitored_article_id', $monitoredPrefill?->id);
    $rewritePresets = [
        [
            'key' => 'balanced',
            'label' => 'Balanced newsroom tone',
            'prompt' => 'Rewrite the following article in a balanced newsroom tone. Preserve factual accuracy, improve clarity, and ensure the structure flows logically with engaging yet objective language.',
        ],
        [
            'key' => 'concise',
            'label' => 'Concise summary',
            'prompt' => 'Rewrite the article into a concise summary that keeps essential facts, uses short paragraphs, and removes repetitive information while remaining accurate.',
        ],
        [
            'key' => 'engaging',
            'label' => 'Engaging feature style',
            'prompt' => 'Rewrite the article in an engaging feature style. Use active voice, compelling transitions, and vivid but factual language suitable for a digital audience.',
        ],
    ];
@endphp

@if($errors->has('monitored_article_id'))
    @php $monitoredArticleId = null; @endphp
    <div class="alert alert-danger" role="alert">The linked monitored article is no longer available. Please re-import it from the monitor.</div>
@endif

@if($monitoredPrefill && filled($monitoredPrefill->content))
    <details class="mb-3 monitor-import-preview">
        <summary class="fw-semibold">View scraped body preview</summary>
        <div class="monitor-import-preview__body">{!! nl2br(e($monitoredPrefill->content)) !!}</div>
    </details>
@endif

@if($monitoredArticleId)
    <input type="hidden" name="monitored_article_id" value="{{ $monitoredArticleId }}">
@endif
<div class="mb-3">
    <label class="form-label" for="title">Title</label>
    <input id="title" type="text" name="title" class="form-control" value="{{ old('title', $news->title) }}" required>
</div>

@push('styles')
<style>
    .monitor-import-preview {
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        padding: 0.75rem 1rem;
        background-color: #f8fafc;
    }

    .monitor-import-preview__body {
        margin-top: 0.75rem;
        max-height: 320px;
        overflow-y: auto;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 0.875rem;
        line-height: 1.4;
        white-space: pre-wrap;
    }

    .content-blocks {
        border: 1px dashed #e5e7eb;
        border-radius: 0.75rem;
        padding: 0.5rem;
        background-color: #f9fafb;
    }

    .content-block__fields[data-block-fields="image"] {
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        padding: 0.75rem;
        background-color: #fff;
    }
</style>
@endpush
<div class="mb-3">
    <label class="form-label" for="slug">Slug</label>
    <input id="slug" type="text" name="slug" class="form-control" value="{{ old('slug', $news->slug) }}" required>
</div>
<div class="mb-3">
    <label class="form-label" for="region">Region</label>
    <select id="region" name="region" class="form-control" required>
        @foreach($regions as $value => $label)
            <option value="{{ $value }}" @selected(old('region', $news->region ?? 'all') === $value)>{{ $label }}</option>
        @endforeach
    </select>
</div>
<div class="mb-3">
    <label class="form-label" for="secondary_category">Secondary category <small class="text-muted">(optional)</small></label>
    <select id="secondary_category" name="secondary_category" class="form-control">
        <option value="">None</option>
        @foreach($secondaryCategories as $value => $label)
            <option value="{{ $value }}" @selected(old('secondary_category', $news->secondary_category) === $value)>{{ $label }}</option>
        @endforeach
    </select>
</div>
<div class="mb-3">
    <label class="form-label">Excerpt</label>
    <textarea name="excerpt" class="form-control">{{ old('excerpt', $news->excerpt) }}</textarea>
</div>
<div
    class="mb-4"
    data-news-rewrite="container"
    data-endpoint="{{ route('admin.news.rewrite') }}"
    data-key-endpoint="{{ route('admin.news.rewrite-key') }}"
>
    <label class="form-label" for="rewrite-preset">Rewrite preset</label>
    <select id="rewrite-preset" class="form-control" data-news-rewrite="preset">
        @foreach($rewritePresets as $preset)
            <option value="{{ $preset['key'] }}" data-prompt="{{ $preset['prompt'] }}" @selected($loop->first)>{{ $preset['label'] }}</option>
        @endforeach
    </select>
    <div class="form-text text-muted mt-1">
        Adjust the prompt to fine-tune the rewrite before sending it to ChatGPT.
    </div>
    <label class="form-label mt-3" for="rewrite-prompt">Prompt adjustments</label>
    <textarea id="rewrite-prompt" class="form-control" rows="3" data-news-rewrite="prompt">{{ $rewritePresets[0]['prompt'] }}</textarea>
    <label class="form-label mt-3" for="rewrite-block-count">How many content blocks?</label>
    <input
        id="rewrite-block-count"
        type="number"
        class="form-control"
        min="1"
        max="12"
        value="{{ old('rewrite_block_count', 3) }}"
        data-news-rewrite="block-count"
    >
    <div class="form-text text-muted">Choose how many text blocks to split the rewritten article into.</div>
    <div class="d-flex align-items-center gap-2 mt-3">
        <button type="button" class="button button-outline" data-news-rewrite="submit">Rewrite with ChatGPT</button>
        <span class="form-text text-muted" data-news-rewrite="status" role="status"></span>
    </div>
</div>
@php
    $oldBlocks = old('content_blocks');
    $initialBlocks = [];

    if (is_array($oldBlocks)) {
        $initialBlocks = array_values($oldBlocks);
    } else {
        $initialBlocks = $news->renderable_content_blocks ?? [];
    }

    if ($initialBlocks === [] && old('body')) {
        $initialBlocks[] = ['type' => 'text', 'body' => old('body')];
    }

    if ($initialBlocks === [] && old('image_path')) {
        $initialBlocks[] = ['type' => 'image', 'image_path' => old('image_path')];
    }
@endphp

<div class="mb-4" data-content-blocks data-initial-blocks='@json($initialBlocks)'>
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-2">
        <div>
            <label class="form-label d-block mb-0">Content blocks</label>
            <small class="text-muted">Add and reorder text, image, or social embed blocks. Captions are optional for images.</small>
        </div>
        <div class="d-flex flex-wrap gap-2">
            <button type="button" class="button button-secondary button-sm" data-add-text-block>Add text block</button>
            <button type="button" class="button button-outline button-sm" data-add-image-block>Add image block</button>
            <button type="button" class="button button-outline button-sm" data-add-youtube-block>Add YouTube</button>
            <button type="button" class="button button-outline button-sm" data-add-facebook-block>Add Facebook</button>
            <button type="button" class="button button-outline button-sm" data-add-tiktok-block>Add TikTok</button>
            <button type="button" class="button button-outline button-sm" data-add-twitter-block>Add Twitter</button>
        </div>
    </div>

    @if($errors->has('content_blocks.*') || $errors->has('body'))
        <div class="alert alert-danger" role="alert">Please resolve the highlighted content block issues.</div>
    @endif

    <div class="content-blocks" data-content-blocks-list></div>

    <template data-content-block-template>
        <div class="card mb-3" data-content-block-item>
            <div class="card-body">
                <div class="d-flex flex-wrap align-items-start justify-content-between gap-2 mb-3">
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge bg-secondary" data-content-block-label>Block</span>
                        <span class="text-muted small" data-content-block-type-label></span>
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        <div class="btn-group btn-group-sm" role="group" aria-label="Reorder">
                            <button type="button" class="btn btn-outline-secondary" data-move-block="up">▲</button>
                            <button type="button" class="btn btn-outline-secondary" data-move-block="down">▼</button>
                        </div>
                        <button type="button" class="btn btn-outline-danger btn-sm" data-remove-block>Remove</button>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Block type</label>
                    <select class="form-select" data-content-block-name="type" data-block-type-select>
                        <option value="text">Text</option>
                        <option value="image">Image</option>
                        <option value="youtube">YouTube</option>
                        <option value="facebook">Facebook</option>
                        <option value="tiktok">TikTok</option>
                        <option value="twitter">Twitter</option>
                    </select>
                </div>

                <div class="content-block__fields" data-block-fields="text">
                    <label class="form-label">Body</label>
                    <textarea class="form-control" rows="6" data-content-block-name="body"></textarea>
                </div>

                <div class="content-block__fields" data-block-fields="image">
                    <label class="form-label">Image Path</label>
                    <input type="text" class="form-control" data-content-block-name="image_path">
                    <label class="form-label mt-3">Caption <small class="text-muted">(optional)</small></label>
                    <input type="text" class="form-control" data-content-block-name="caption">
                </div>

                <div class="content-block__fields" data-block-fields="youtube">
                    <label class="form-label">YouTube URL</label>
                    <input type="text" class="form-control" placeholder="https://www.youtube.com/watch?v=..." data-content-block-name="embed_url">
                    <div class="form-text text-muted">Use a full YouTube watch or share link.</div>
                </div>

                <div class="content-block__fields" data-block-fields="facebook">
                    <label class="form-label">Facebook Post URL</label>
                    <input type="text" class="form-control" placeholder="https://www.facebook.com/..." data-content-block-name="embed_url">
                    <div class="form-text text-muted">Provide the public post URL for embedding.</div>
                </div>

                <div class="content-block__fields" data-block-fields="tiktok">
                    <label class="form-label">TikTok URL</label>
                    <input type="text" class="form-control" placeholder="https://www.tiktok.com/@user/video/..." data-content-block-name="embed_url">
                    <div class="form-text text-muted">Provide the full TikTok video link.</div>
                </div>

                <div class="content-block__fields" data-block-fields="twitter">
                    <label class="form-label">Twitter URL</label>
                    <input type="text" class="form-control" placeholder="https://twitter.com/.../status/..." data-content-block-name="embed_url">
                    <div class="form-text text-muted">Use the tweet or X post URL.</div>
                </div>
            </div>
        </div>
    </template>
</div>

@php $currentStatus = old('status', $news->status ?? \App\Models\News::STATUS_DRAFT); @endphp
<fieldset class="mb-3">
    <legend class="form-label">Status</legend>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="status" id="status-draft" value="{{ \App\Models\News::STATUS_DRAFT }}" @checked($currentStatus === \App\Models\News::STATUS_DRAFT)>
        <label class="form-check-label" for="status-draft">Draft</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="status" id="status-published" value="{{ \App\Models\News::STATUS_PUBLISHED }}" @checked($currentStatus === \App\Models\News::STATUS_PUBLISHED)>
        <label class="form-check-label" for="status-published">Published</label>
    </div>
</fieldset>

<div class="mb-3">
    <label class="form-label">Published At <small class="text-muted">(required for published articles)</small></label>
    <input type="datetime-local" name="published_at" class="form-control" value="{{ old('published_at', optional($news->published_at)->format('Y-m-d\\TH:i')) }}">
</div>