@extends('admin.layouts.base')

<style>
    .mode-card {
        border: 2px solid #e0e0e0;
        border-radius: 10px;
        padding: 20px;
        cursor: pointer;
        transition: all 0.2s;
        height: 100%;
    }

    .mode-card:hover {
        border-color: #007bff;
        box-shadow: 0 4px 10px rgba(0, 123, 255, 0.15);
    }

    .mode-card.active {
        border-color: #28a745;
        background: #f0fff4;
    }

    .mode-card .mode-icon {
        font-size: 2rem;
        color: #007bff;
        margin-bottom: 10px;
    }

    .mode-card.active .mode-icon {
        color: #28a745;
    }

    .audit-panel {
        background: #fffbea;
        border-left: 4px solid #f59e0b;
        padding: 15px;
        border-radius: 6px;
        margin-top: 15px;
    }

    .audit-score {
        font-size: 1.5rem;
        font-weight: bold;
    }

    .audit-score.good {
        color: #28a745;
    }

    .audit-score.avg {
        color: #f59e0b;
    }

    .audit-score.bad {
        color: #dc3545;
    }

    /* ── AI Provider Badges ── */
    .provider-badge {
        display: inline-block;
        padding: 2px 10px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.5px;
        margin-left: 8px;
    }

    .provider-badge.badge-openai {
        background: #d1fae5;
        color: #065f46;
    }

    .provider-badge.badge-claude {
        background: #fef3c7;
        color: #92400e;
    }

    .provider-badge.badge-both {
        background: #e0e7ff;
        color: #3730a3;
    }

    /* ── Research Results Panel ── */
    .research-results-card {
        border: 2px solid #d97706;
        border-radius: 10px;
    }

    .research-results-card .card-header {
        background: linear-gradient(135deg, #fef3c7, #fde68a);
        border-bottom: 2px solid #d97706;
    }

    .research-section {
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 16px;
    }

    .research-section h5 {
        margin-bottom: 12px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .research-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 12px;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        margin-bottom: 8px;
        background: #fff;
        transition: all 0.15s;
    }

    .research-item:hover {
        background: #f0f9ff;
        border-color: #93c5fd;
    }

    .research-item.selected {
        background: #eff6ff;
        border-color: #3b82f6;
    }

    .research-item input[type="checkbox"] {
        margin-top: 3px;
        width: 18px;
        height: 18px;
        accent-color: #3b82f6;
        cursor: pointer;
    }

    .research-item .item-content {
        flex: 1;
    }

    .research-item .item-text {
        font-size: 14px;
        line-height: 1.5;
    }

    .research-item .item-meta {
        display: flex;
        gap: 8px;
        margin-top: 4px;
        flex-wrap: wrap;
    }

    .research-item .item-meta .badge {
        font-size: 10px;
        padding: 2px 8px;
        border-radius: 3px;
        font-weight: 600;
    }

    .importance-high {
        background: #fee2e2;
        color: #991b1b;
    }

    .importance-medium {
        background: #fef3c7;
        color: #92400e;
    }

    .importance-low {
        background: #e5e7eb;
        color: #374151;
    }

    .category-badge {
        background: #dbeafe;
        color: #1e40af;
    }

    .tone-badge {
        background: #f3e8ff;
        color: #6b21a8;
    }

    /* ── Angle Radio Cards ── */
    .angle-card {
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        padding: 14px;
        cursor: pointer;
        transition: all 0.15s;
        margin-bottom: 10px;
    }

    .angle-card:hover {
        border-color: #8b5cf6;
        background: #faf5ff;
    }

    .angle-card.selected {
        border-color: #7c3aed;
        background: #f5f3ff;
    }

    .angle-card input[type="radio"] {
        accent-color: #7c3aed;
    }

    /* ── Section Toggle Controls ── */
    .select-controls {
        display: flex;
        gap: 8px;
        margin-bottom: 12px;
    }

    .select-controls .btn {
        font-size: 12px;
        padding: 4px 12px;
    }

    /* ── Generate Button (Step 2) ── */
    .btn-generate-article {
        background: linear-gradient(135deg, #10a37f, #059669);
        color: #fff;
        border: none;
        padding: 14px 36px;
        font-size: 16px;
        font-weight: 700;
        border-radius: 10px;
        box-shadow: 0 4px 14px rgba(16, 163, 127, 0.3);
        transition: all 0.2s;
    }

    .btn-generate-article:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(16, 163, 127, 0.4);
        color: #fff;
    }

    .btn-generate-article:disabled {
        opacity: 0.5;
        transform: none;
    }

    /* ── Two-step flow indicator ── */
    .flow-indicator {
        display: flex;
        align-items: center;
        gap: 0;
        margin-bottom: 20px;
    }

    .flow-step {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 600;
    }

    .flow-step.step-claude {
        background: #fef3c7;
        color: #92400e;
        border: 2px solid #d97706;
    }

    .flow-step.step-openai {
        background: #d1fae5;
        color: #065f46;
        border: 2px solid #10a37f;
    }

    .flow-step.active {
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
    }

    .flow-step.done {
        opacity: 0.6;
    }

    .flow-arrow {
        width: 40px;
        text-align: center;
        color: #9ca3af;
        font-size: 18px;
    }

    /* ── Author Style Select for Step 2 ── */
    .author-style-section {
        background: #f0fdf4;
        border: 2px solid #86efac;
        border-radius: 10px;
        padding: 20px;
        margin-top: 16px;
    }

    /* ── Prompt Window Modal ── */
    .prompt-window-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10000;
    }

    .prompt-window {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 750px;
        max-width: 95vw;
        max-height: 90vh;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .prompt-window-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        border-bottom: 1px solid #e5e7eb;
        background: #f8fafc;
    }

    .prompt-window-header h5 {
        margin: 0;
        font-weight: 700;
    }

    .prompt-window-body {
        flex: 1;
        overflow-y: auto;
        padding: 20px;
    }

    .prompt-chat-messages {
        min-height: 200px;
        max-height: 400px;
        overflow-y: auto;
        margin-bottom: 15px;
        padding: 10px;
        background: #f9fafb;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
    }

    .prompt-msg {
        margin-bottom: 12px;
        padding: 10px 14px;
        border-radius: 8px;
        font-size: 14px;
        line-height: 1.5;
    }

    .prompt-msg.user-msg {
        background: #dbeafe;
        margin-left: 40px;
        text-align: right;
    }

    .prompt-msg.ai-msg {
        background: #fff;
        border: 1px solid #e5e7eb;
        margin-right: 40px;
    }

    .prompt-msg .msg-provider {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 4px;
    }

    .prompt-msg .msg-provider.openai {
        color: #10a37f;
    }

    .prompt-msg .msg-provider.claude {
        color: #d97706;
    }

    .prompt-window-footer {
        padding: 16px 20px;
        border-top: 1px solid #e5e7eb;
        background: #f8fafc;
    }

    .prompt-input-wrap {
        display: flex;
        gap: 8px;
    }

    .prompt-input-wrap textarea {
        flex: 1;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        padding: 10px 14px;
        font-size: 14px;
        resize: none;
        height: 50px;
    }

    .prompt-input-wrap textarea:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    }

    .prompt-send-btn {
        padding: 10px 20px;
        border: none;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .prompt-send-btn.openai {
        background: #10a37f;
        color: #fff;
    }

    .prompt-send-btn.claude {
        background: #d97706;
        color: #fff;
    }

    .prompt-send-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .ai-provider-switch {
        display: inline-flex;
        align-items: center;
        background: #f1f5f9;
        border-radius: 8px;
        padding: 4px;
        gap: 4px;
    }

    .ai-provider-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 18px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 600;
        font-size: 13px;
        transition: all 0.2s;
        background: transparent;
        color: #64748b;
    }

    .ai-provider-btn:hover {
        background: #e2e8f0;
    }

    .ai-provider-btn.active-openai {
        background: #10a37f;
        color: #fff;
        box-shadow: 0 2px 6px rgba(16, 163, 127, 0.3);
    }

    .ai-provider-btn.active-claude {
        background: #d97706;
        color: #fff;
        box-shadow: 0 2px 6px rgba(217, 119, 6, 0.3);
    }

    .ai-provider-btn .provider-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
    }

    .ai-provider-btn .provider-dot.dot-openai {
        background: #10a37f;
    }

    .ai-provider-btn .provider-dot.dot-claude {
        background: #d97706;
    }

    .ai-provider-btn.active-openai .provider-dot,
    .ai-provider-btn.active-claude .provider-dot {
        background: #fff;
    }
</style>

@section('content')

@include('admin.common.froala', [
    'id_classes' => '#topic, #prompt_instructions, #author_description, #rewrite_description'
])

<div class="main-content">
    <div class="page-content">
        <div class="container-fluid">
            <div class="page-header">
                <div class="page-leftheader">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="{{ URL::to('admin/dashboard') }}">
                                <i class="fa fa-home mr-2 fs-14"></i>Dashboard
                            </a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ URL::to('admin/crypto-news') }}">Crypto News</a>
                        </li>
                        <li class="breadcrumb-item active">AI Generate</li>
                    </ol>
                </div>
                <div class="page-rightheader">
                    <div class="btn btn-list">
                        <button type="button" class="btn btn-info btn-sm mx-1" id="btnOpenPromptWindow">
                            <i class="fa fa-terminal mr-1"></i> Open AI Prompt Window
                        </button>
                        <a class="btn btn-secondary float-right btn-sm mx-1"
                            href="{{ URL::to('admin/crypto-news') }}">
                            <i class="fa fa-arrow-left mr-1"></i> Back to List
                        </a>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <form id="aiGenerateForm" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="mode" id="mode" value="topic_search">
                        <input type="hidden" name="ai_provider" id="ai_provider" value="openai">

                        {{-- ============================================================ --}}
                        {{-- MODE SELECTOR                                                 --}}
                        {{-- ============================================================ --}}
                        <div class="card">
                            <div class="card-header d-flex align-items-center justify-content-between flex-wrap">
                                <h3 class="card-title mb-0"><i class="fa fa-magic mr-2"></i> Choose AI Mode</h3>
                                <span class="provider-badge badge-both">
                                    <i class="fa fa-exchange mr-1"></i> CLAUDE → OPENAI (Two-Step)
                                </span>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="mode-card active" data-mode="topic_search">
                                            <div class="mode-icon"><i class="fa fa-search"></i></div>
                                            <h5>1. Idea to Article Plan</h5>
                                            <small class="text-muted">
                                                Enter a topic. <strong>Claude</strong> researches facts & market data.
                                                You select what to include. <strong>OpenAI</strong> writes the article.
                                            </small>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="mode-card" data-mode="topic_intent">
                                            <div class="mode-icon"><i class="fa fa-lightbulb-o"></i></div>
                                            <h5>2. Brief to Full Article</h5>
                                            <small class="text-muted">
                                                Enter your brief. <strong>Claude</strong> prepares the plan & facts.
                                                You approve selections. <strong>OpenAI</strong> generates the full draft.
                                            </small>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="mode-card" data-mode="content_audit">
                                            <div class="mode-icon"><i class="fa fa-pencil-square-o"></i></div>
                                            <h5>3. Refine My Draft</h5>
                                            <small class="text-muted">
                                                Paste your draft. AI improves language, grammar, readability, and polish.
                                            </small>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="mode-card" data-mode="rewrite">
                                            <div class="mode-icon"><i class="fa fa-check-circle"></i></div>
                                            <h5>4. SEO + Publish</h5>
                                            <small class="text-muted">
                                                Paste final content. AI generates SEO title, meta, slug, tags, FAQs.
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- ============================================================ --}}
                        {{-- AUTHOR & CONFIG                                               --}}
                        {{-- ============================================================ --}}
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title"><i class="fa fa-user-circle mr-2"></i> Author & Configuration</h3>
                            </div>
                            <div class="card-body">
                                <div class="row">

                                    <!-- News Type -->
                                    <div class="col-md-4 mb-3">
                                        <div class="form-group">
                                            <label for="is_gabbar" class="field-required">News Type :</label>
                                            <select name="is_gabbar" id="is_gabbar" class="form-control" required>
                                                <option value="">Select News Type</option>
                                                <option value="1">Gabbar News</option>
                                                <option value="2">Press Release</option>
                                                <!-- <option value="3">Sponsored</option>
                                                <option value="4">Guest News</option>
                                                <option value="5">Price Prediction</option>
                                                <option value="6">Blog</option> -->
                                            </select>
                                        </div>
                                    </div>

                                    <!-- Author -->
                                    <div class="col-md-4 mb-3">
                                        <div class="form-group">
                                            <label for="author_id" class="field-required">Author :</label>
                                            <select name="author_id" id="author_id" class="form-control" required>
                                                <option value="">-- Select Author --</option>
                                                @foreach($authors ?? [] as $author)
                                                <option value="{{ $author->id }}">
                                                    {{ $author->dispaly_name ?? $author->name }}
                                                </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <!-- Channel -->
                                    <div class="col-md-4 mb-3">
                                        <div class="form-group">
                                            <label for="channel_id">Channel :</label>
                                            <select name="channel_id" id="channel_id" class="form-control">
                                                @isset($channels)
                                                @foreach($channels as $ch)
                                                <option value="{{ $ch->id }}">
                                                    {{ $ch->display_name ?? $ch->title }}
                                                </option>
                                                @endforeach
                                                @else
                                                <option value="1" selected>Default</option>
                                                @endisset
                                            </select>
                                        </div>
                                    </div>

                                </div>

                                <div class="row">

                                    <!-- Project Name -->
                                    {{-- <div class="col-md-4 mb-3">
                                        <div class="form-group">
                                            <label for="project_name">Project Name :</label>
                                            <div class="d-flex">
                                                <select name="project_name" id="coin_select" class="form-control">
                                                    <!-- options will be loaded dynamically -->
                                                </select>

                                                <a href="#"
                                                    target="_blank"
                                                    class="btn btn-primary add-project ml-2">
                                                    Add Project
                                                </a>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Project Website -->
                                    <div class="col-md-4 mb-3">
                                        <div class="form-group">
                                            <label for="project_website">Project Website :</label>
                                            <input type="text"
                                                name="project_website"
                                                id="project_website"
                                                class="form-control"
                                                placeholder="https://...">
                                        </div>
                                    </div> --}}

                                    <!-- Focus Keyword -->
                                    <div class="col-md-4 mb-3">
                                        <div class="form-group">
                                            <label for="focus_keyword">Focus Keyword :</label>
                                            <input type="text"
                                                name="focus_keyword"
                                                id="focus_keyword"
                                                class="form-control"
                                                placeholder="e.g. Bitcoin, Ethereum">
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>

                        {{-- ============================================================ --}}
                        {{-- PANEL: Idea to Article Plan (topic_search) — STEP 1 INPUT     --}}
                        {{-- ============================================================ --}}
                        <div class="card mode-panel" id="panel-topic_search">
                            <div class="card-header">
                                <h3 class="card-title"><i class="fa fa-search mr-2"></i> Idea to Article Plan</h3>
                            </div>
                            <div class="card-body">
                                {{-- Flow Indicator --}}
                                <div class="flow-indicator">
                                    <div class="flow-step step-claude active" id="flowStep1_search">
                                        <i class="fa fa-flask"></i> Step 1: Claude Researches
                                    </div>
                                    <div class="flow-arrow"><i class="fa fa-arrow-right"></i></div>
                                    <div class="flow-step step-openai" id="flowStep2_search">
                                        <i class="fa fa-pencil"></i> Step 2: OpenAI Writes
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="topic" class="field-required">Topic :</label>

                                    <textarea
                                        name="topic"
                                        id="topic"
                                        class="form-control"
                                        placeholder="e.g. Solana ETF approval update, SEC latest ruling on XRP">{{ old('topic') }}</textarea>

                                    <small class="text-muted">
                                        Claude AI will analyze this topic, gather facts & market context, then present a plan for your review.
                                    </small>
                                </div>
                                @include('livewire.admin.partials.reference-fields')
                            </div>
                        </div>

                        {{-- ============================================================ --}}
                        {{-- PANEL: Brief to Full Article (topic_intent) — STEP 1 INPUT    --}}
                        {{-- ============================================================ --}}
                        <div class="card mode-panel" id="panel-topic_intent" style="display:none;">
                            <div class="card-header">
                                <h3 class="card-title"><i class="fa fa-lightbulb-o mr-2"></i> Brief to Full Article</h3>
                            </div>
                            <div class="card-body">
                                {{-- Flow Indicator --}}
                                <div class="flow-indicator">
                                    <div class="flow-step step-claude active" id="flowStep1_intent">
                                        <i class="fa fa-flask"></i> Step 1: Claude Plans
                                    </div>
                                    <div class="flow-arrow"><i class="fa fa-arrow-right"></i></div>
                                    <div class="flow-step step-openai" id="flowStep2_intent">
                                        <i class="fa fa-pencil"></i> Step 2: OpenAI Writes
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="prompt_instructions" class="field-required">Your Brief :</label>

                                    <textarea
                                        name="prompt_instructions"
                                        id="prompt_instructions"
                                        class="form-control"
                                        placeholder="e.g. Write a bullish news piece on Bitcoin hitting $120K, focus on ETF inflows...">{{ old('prompt_instructions') }}</textarea>

                                    <small class="text-muted">
                                        Claude will prepare facts, market data, and a plan. You select what to use, then OpenAI writes.
                                    </small>
                                </div>
                                @include('livewire.admin.partials.reference-fields')
                            </div>
                        </div>

                        {{-- ============================================================ --}}
                        {{-- PANEL: Refine My Draft (rewrite)                              --}}
                        {{-- ============================================================ --}}
                        <div class="card mode-panel" id="panel-rewrite" style="display:none;">
                            <div class="card-header">
                                <h3 class="card-title"><i class="fa fa-pencil-square-o mr-2"></i> Refine My Draft</h3>
                            </div>
                            <div class="card-body">
                                <div class="form-group">
                                    <label>Article Title (optional) :</label>
                                    <input type="text" name="rewrite_title" id="rewrite_title" class="form-control" placeholder="Article title for context">
                                </div>
                                <div class="form-group">
                                    <label class="field-required">Your Draft Content :</label>
                                    <textarea name="rewrite_description" id="rewrite_description" class="form-control"></textarea>
                                </div>
                            </div>
                        </div>

                        {{-- ============================================================ --}}
                        {{-- PANEL: SEO + Publish (content_audit)                          --}}
                        {{-- ============================================================ --}}
                        <div class="card mode-panel" id="panel-content_audit" style="display:none;">
                            <div class="card-header">
                                <h3 class="card-title"><i class="fa fa-check-circle mr-2"></i> SEO + Publish My Content</h3>
                            </div>
                            <div class="card-body">
                                <div class="form-group">
                                    <label>Article Title (optional) :</label>
                                    <input type="text" name="audit_title" id="audit_title" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label class="field-required">Your Final Content :</label>
                                    <textarea name="author_description" id="author_description" class="form-control"></textarea>
                                </div>
                            </div>
                        </div>

                        {{-- ============================================================ --}}
                        {{-- STEP 1 BUTTON: Research with Claude                           --}}
                        {{-- ============================================================ --}}
                        <div class="card" id="step1ButtonCard">
                            <div class="card-body d-flex align-items-center">
                                <button type="button" class="btn btn-warning mr-2" id="btnResearch" style="font-weight:700;">
                                    <i class="fa fa-flask mr-1"></i>
                                    <span id="btnResearchText">Step 1: Research with Claude</span>
                                </button>
                                <span class="provider-badge badge-claude">CLAUDE AI</span>
                                <small id="ai_status_msg" class="text-muted ml-2"></small>
                            </div>
                        </div>

                        {{-- For modes 3 & 4, show the original single-step button --}}
                        <div class="card" id="singleStepButtonCard" style="display:none;">
                            <div class="card-body d-flex align-items-center">
                                <button type="button" class="btn btn-success mr-2" id="btnGenerate">
                                    <i class="fa fa-rocket mr-1"></i>
                                    <span id="btnGenerateText">Generate</span>
                                </button>
                                <small id="ai_status_msg_single" class="text-muted ml-2"></small>
                            </div>
                        </div>
                    </form>

                    {{-- ============================================================ --}}
                    {{-- STEP 1 RESULTS: Claude Research Output with Checkboxes        --}}
                    {{-- ============================================================ --}}
                    <div class="card research-results-card" id="researchResultsCard" style="display:none;">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <h3 class="card-title mb-0">
                                <i class="fa fa-flask mr-2"></i> Claude Research Results
                                <span class="provider-badge badge-claude">CLAUDE AI</span>
                            </h3>
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="btnResetResearch">
                                <i class="fa fa-refresh mr-1"></i> Re-Research
                            </button>
                        </div>
                        <div class="card-body" id="researchResultsBody">
                            {{-- Dynamically populated by JS --}}
                        </div>

                        {{-- STEP 2: Author Style + Generate Button --}}
                        <div class="card-footer" id="step2Footer">
                            <div class="author-style-section">
                                <h5><i class="fa fa-user-secret mr-2"></i> Author Writing Style (for OpenAI)</h5>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Select Author Style :</label>
                                            <select id="authorStyleSelect" class="form-control">
                                                <option value="">-- Default Style --</option>
                                                @foreach($authors ?? [] as $author)
                                                <option value="{{ $author->id }}"
                                                    data-style="{{ $author->writing_style ?? '' }}">
                                                    {{ $author->dispaly_name ?? $author->name }}
                                                </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Custom Style Instructions (optional) :</label>
                                            <input type="text" id="customStyleInput" class="form-control"
                                                placeholder="e.g. Write in a conversational, bullish tone">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group mt-3">
                                <label style="font-weight:700;"><i class="fa fa-pencil mr-1"></i> Add Your Ideas / Custom Instructions (optional)</label>
                                <textarea id="userCustomIdeas" class="form-control" rows="4" placeholder="e.g. Add a paragraph about Bitcoin dominance trend, mention Binance listing, include bullish sentiment..."></textarea>
                                <small class="text-muted">These notes will be sent to OpenAI along with your selected facts & outline.</small>
                            </div>

                            <div class="text-center mt-4">
                                <div class="flow-indicator justify-content-center">
                                    <div class="flow-step step-claude done">
                                        <i class="fa fa-check-circle"></i> Claude: Done
                                    </div>
                                    <div class="flow-arrow"><i class="fa fa-arrow-right"></i></div>
                                    <div class="flow-step step-openai active">
                                        <i class="fa fa-pencil"></i> OpenAI: Ready
                                    </div>
                                </div>

                                <p class="text-muted mb-3">
                                    <strong id="selectedCountText">0 facts, 0 market updates, 0 sections selected</strong>
                                </p>

                                <button type="button" class="btn btn-generate-article" id="btnGenerateArticle">
                                    <i class="fa fa-rocket mr-2"></i>
                                    Step 2: Generate Article with OpenAI
                                </button>
                            </div>
                        </div>
                    </div>

                    {{-- Audit Results (for mode 4) --}}
                    <div class="card" id="auditResultsCard" style="display:none;">
                        <div class="card-header">
                            <h3 class="card-title"><i class="fa fa-clipboard-check mr-2"></i> SEO & Publish Results</h3>
                        </div>
                        <div class="card-body" id="auditResultsBody"></div>
                    </div>

                </div>
            </div>

            {{-- ============================================================ --}}
            {{-- DIRECT PROMPT WINDOW (Modal)                                   --}}
            {{-- ============================================================ --}}
            <div class="prompt-window-overlay" id="promptWindowOverlay">
                <div class="prompt-window">
                    <div class="prompt-window-header">
                        <h5><i class="fa fa-terminal mr-2"></i> AI Prompt Window</h5>
                        <div class="d-flex align-items-center">
                            <div class="ai-provider-switch mr-3">
                                <button type="button" class="ai-provider-btn active-openai prompt-provider-btn" data-provider="openai">
                                    <span class="provider-dot dot-openai"></span> OpenAI
                                </button>
                                <button type="button" class="ai-provider-btn prompt-provider-btn" data-provider="claude">
                                    <span class="provider-dot dot-claude"></span> Claude
                                </button>
                            </div>
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="btnClosePrompt">
                                <i class="fa fa-times"></i>
                            </button>
                        </div>
                    </div>
                    <div class="prompt-window-body">
                        <div class="form-group mb-3">
                            <label style="font-size:12px;font-weight:600;color:#64748b;">System Prompt (optional):</label>
                            <textarea id="promptSystemInput" class="form-control" rows="2" placeholder="e.g. You are a crypto expert." style="font-size:13px;"></textarea>
                        </div>
                        <div class="prompt-chat-messages" id="promptChatMessages">
                            <div class="text-center text-muted py-4" style="font-size:13px;">
                                <i class="fa fa-comments-o mr-1"></i> Send a prompt to start
                            </div>
                        </div>
                    </div>
                    <div class="prompt-window-footer">
                        <div class="prompt-input-wrap">
                            <textarea id="promptUserInput" placeholder="Type your prompt..." rows="1"></textarea>
                            <button type="button" class="prompt-send-btn openai" id="btnSendPrompt">
                                <i class="fa fa-paper-plane mr-1"></i> Send
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Loading Overlay --}}
            <div id="loadingOverlay" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:9999;">
                <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;">
                    <div class="spinner-border text-light" style="width:3rem;height:3rem;"></div>
                    <h4 class="mt-3 text-white" id="loadingTitle">AI is working...</h4>
                    <p class="text-white-50" id="loadingSubtitle">Please wait</p>
                    <span class="provider-badge" id="loadingProviderBadge" style="font-size:14px;">CLAUDE</span>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('js')
<script>
var currentMode = 'topic_search';
var researchData = null;
var promptProvider = 'openai';

$(document).ready(function () {

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': "{{ csrf_token() }}"
        }
    });

    $('.mode-card').on('click', function () {
        currentMode = $(this).data('mode');

        $('.mode-card').removeClass('active');
        $(this).addClass('active');

        $('#mode').val(currentMode);

        $('.mode-panel').hide();
        $('#panel-' + currentMode).show();

        $('#auditResultsCard').hide();
        $('#researchResultsCard').hide();

        if (currentMode === 'topic_search' || currentMode === 'topic_intent') {
            $('#step1ButtonCard').show();
            $('#singleStepButtonCard').hide();

            $('#btnResearchText').text(
                currentMode === 'topic_search'
                    ? 'Step 1: Research with Claude'
                    : 'Step 1: Plan with Claude'
            );
        } else {
            $('#step1ButtonCard').hide();
            $('#singleStepButtonCard').show();

            var labels = {
                rewrite: 'Refine My Draft',
                content_audit: 'SEO + Publish'
            };

            $('#btnGenerateText').text(labels[currentMode] || 'Generate');
        }
    });

    $('#btnOpenPromptWindow').on('click', function () {
        $('#promptWindowOverlay').fadeIn(200);

        setTimeout(function () {
            $('#promptUserInput').focus();
        }, 100);
    });

    $('#btnClosePrompt').on('click', function () {
        $('#promptWindowOverlay').fadeOut(200);
    });

    $('#promptWindowOverlay').on('click', function (e) {
        if (e.target === this) {
            $('#promptWindowOverlay').fadeOut(200);
        }
    });

    $(document).on('click', '.prompt-provider-btn', function () {
        promptProvider = $(this).data('provider');

        $('.prompt-provider-btn').removeClass('active-openai active-claude');
        $(this).addClass(promptProvider === 'openai' ? 'active-openai' : 'active-claude');

        $('#btnSendPrompt').removeClass('openai claude').addClass(promptProvider);
    });

    $(document).on('change', '.content-type-select', function () {
        var $panel = $(this).closest('.card-body').find('.dynamic-fields-wrap');
        var value = $(this).val();

        $panel.find('.ref-field').hide().removeClass('col-xl-4 col-xl-6');

        if (value === 'image') {
            $panel.show();
            $panel.find('.ref-field').show().addClass('col-xl-4');
        } else if (value === 'link') {
            $panel.show();
            $panel.find('.ref-link, .ref-desc').show().addClass('col-xl-6');
        } else {
            $panel.hide();
        }
    });

    $('#btnResearch').on('click', function () {
        if (!$('#author_id').val()) {
            alert('Please select an Author.');
            return;
        }

        if (!$('#is_gabbar').val()) {
            alert('Please select News Type.');
            return;
        }

        var formData = {
            _token: '{{ csrf_token() }}',
            mode: currentMode,
            is_gabbar: $('#is_gabbar').val() || '',
            author_id: $('#author_id').val() || '',
            project_name: $('#coin_select').val() || '',
            project_website: $('#project_website').val() || '',
            focus_keyword: $('#focus_keyword').val() || ''
        };

        if (currentMode === 'topic_search') {
            var topic = readFroala('#topic');

            if (!topic || topic.length < 5) {
                alert('Enter a topic (min 5 chars).');
                return;
            }

            formData.topic = topic;
        } else {
            var brief = readFroala('#prompt_instructions');

            if (!brief || brief.length < 10) {
                alert('Enter your brief (min 10 chars).');
                return;
            }

            formData.prompt_instructions = brief;
        }

        showLoading('Claude is researching...', 'Analyzing topic, gathering facts & market data...', 'claude');

        $('#btnResearch').prop('disabled', true);
        $('#ai_status_msg').text('Claude is researching...');

        $.ajax({
            url: "{{ url('admin/crypto-news-ai-research') }}",
            method: 'POST',
            data: formData,
            timeout: 180000,

            success: function (response) {
                if (!response.success) {
                    alert(response.message || 'Claude research failed.');
                    return;
                }

                researchData = response.research;
                renderResearchResults(researchData);
                $('#researchResultsCard').show();
                updateFlowIndicators('step2');

                $('html, body').animate({
                    scrollTop: $('#researchResultsCard').offset().top - 80
                }, 400);
            },

            error: function (xhr) {
                alert(xhr.responseJSON?.message || 'Something went wrong.');
            },

            complete: function () {
                hideLoading();
                $('#btnResearch').prop('disabled', false);
                $('#ai_status_msg').text('');
            }
        });
    });

    $('#btnResetResearch').on('click', function () {
        researchData = null;
        $('#researchResultsCard').hide();
        updateFlowIndicators('step1');
    });

    $('#btnGenerateArticle').on('click', function () {
        if (!researchData) {
            alert('No research data. Run Step 1 first.');
            return;
        }

        var selectedFacts = [];
        $('.research-checkbox[data-group="fact"]:checked').each(function () {
            var idx = parseInt($(this).data('index'));
            if (researchData.facts && researchData.facts[idx]) {
                selectedFacts.push(researchData.facts[idx]);
            }
        });

        var selectedMarket = [];
        $('.research-checkbox[data-group="market"]:checked').each(function () {
            var idx = parseInt($(this).data('index'));
            if (researchData.market_updates && researchData.market_updates[idx]) {
                selectedMarket.push(researchData.market_updates[idx]);
            }
        });

        var selectedSections = [];
        $('.research-checkbox[data-group="section"]:checked').each(function () {
            var idx = parseInt($(this).data('index'));
            if (researchData.article_outline && researchData.article_outline[idx]) {
                selectedSections.push(researchData.article_outline[idx]);
            }
        });

        var angleIdx = parseInt($('input[name="selected_angle"]:checked').val()) || 0;
        var selectedAngle = researchData.suggested_angles && researchData.suggested_angles[angleIdx]
            ? researchData.suggested_angles[angleIdx]
            : null;

        if (selectedFacts.length === 0 && selectedSections.length === 0) {
            alert('Please select at least some facts or sections to generate an article.');
            return;
        }

        var payload = {
            _token: '{{ csrf_token() }}',
            mode: currentMode,
            user_custom_ideas: $('#userCustomIdeas').val().trim() || '',
            author_id: $('#author_id').val(),
            is_gabbar: $('#is_gabbar').val(),
            channel_id: $('#channel_id').val() || 1,
            project_name: $('#coin_select').val() || '',
            project_website: $('#project_website').val() || '',
            focus_keyword: $('#focus_keyword').val() || '',
            topic: readFroala('#topic') || '',
            prompt_instructions: readFroala('#prompt_instructions') || '',
            selected_facts: selectedFacts,
            selected_market: selectedMarket,
            selected_angle: selectedAngle,
            selected_sections: selectedSections
        };

        showLoading('OpenAI is writing the article...', 'Using your selected facts & plan...', 'openai');

        $('#btnGenerateArticle').prop('disabled', true);

        $.ajax({
            url: "{{ url('admin/crypto-news-ai-generate-from-plan') }}",
            method: 'POST',
            data: JSON.stringify(payload),
            contentType: 'application/json',
            timeout: 180000,

            success: function (response) {
                if (!response.success) {
                    alert(response.message || 'OpenAI generation failed.');
                    return;
                }

                if (response.redirect) {
                    window.location.href = response.redirect;
                } else {
                    alert(response.message || 'Article generated successfully!');
                    window.location.reload();
                }
            },

            error: function (xhr) {
                alert(xhr.responseJSON?.message || 'Something went wrong.');
            },

            complete: function () {
                hideLoading();
                $('#btnGenerateArticle').prop('disabled', false);
            }
        });
    });

    $('#btnGenerate').on('click', function () {
        if (!$('#author_id').val()) {
            alert('Please select an Author.');
            return;
        }

        if (!$('#is_gabbar').val()) {
            alert('Please select News Type.');
            return;
        }

        var formData = new FormData();

        formData.append('_token', '{{ csrf_token() }}');
        formData.append('mode', currentMode);
        formData.append('ai_provider', 'openai');
        formData.append('author_id', $('#author_id').val());
        formData.append('is_gabbar', $('#is_gabbar').val());
        formData.append('channel_id', $('#channel_id').val() || 1);
        formData.append('project_name', $('#coin_select').val() || '');
        formData.append('project_website', $('#project_website').val() || '');
        formData.append('focus_keyword', $('#focus_keyword').val() || '');

        if (currentMode === 'rewrite') {
            var rewriteDesc = readFroala('#rewrite_description', true);

            if (!rewriteDesc || rewriteDesc.replace(/<[^>]*>/g, '').trim().length < 50) {
                alert('Paste your draft content to refine (min 50 chars).');
                return;
            }

            formData.append('author_description', rewriteDesc);
            formData.append('audit_title', $('#rewrite_title').val() || '');
        }

        if (currentMode === 'content_audit') {
            var desc = readFroala('#author_description', true);

            if (!desc || desc.replace(/<[^>]*>/g, '').trim().length < 50) {
                alert('Paste your final content (min 50 chars).');
                return;
            }

            formData.append('author_description', desc);
            formData.append('audit_title', $('#audit_title').val() || '');
        }

        showLoading('AI is working...', 'Please wait', 'openai');

        $('#btnGenerate').prop('disabled', true);
        $('#auditResultsCard').hide();

        $.ajax({
            url: "{{ url('admin/crypto-news-ai-generate-content') }}",
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            timeout: 180000,

            success: function (response) {
                if (!response.success) {
                    alert(response.message || 'AI failed.');
                    return;
                }

                if (response.mode === 'audit') {
                    renderAuditResults(response.content_audit, response.ai_provider);

                    $('html, body').animate({
                        scrollTop: $('#auditResultsCard').offset().top - 100
                    }, 400);
                } else {
                    if (response.redirect) {
                        window.location.href = response.redirect;
                    } else {
                        alert(response.message || 'Success!');
                        window.location.reload();
                    }
                }
            },

            error: function (xhr) {
                alert(xhr.responseJSON?.message || 'Something went wrong.');
            },

            complete: function () {
                hideLoading();
                $('#btnGenerate').prop('disabled', false);
            }
        });
    });

    $('#btnSendPrompt').on('click', function () {
        sendDirectPrompt();
    });

    $('#promptUserInput').on('keydown', function (e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendDirectPrompt();
        }
    });

    function sendDirectPrompt() {
        var userInput = $('#promptUserInput').val().trim();
        var systemInput = $('#promptSystemInput').val().trim();

        if (!userInput) return;

        var $messages = $('#promptChatMessages');

        $messages.find('.text-center').remove();
        $messages.append('<div class="prompt-msg user-msg"><div class="msg-provider" style="color:#3b82f6;">YOU</div>' + escHtml(userInput) + '</div>');
        $messages.scrollTop($messages[0].scrollHeight);

        $('#promptUserInput').val('');
        $('#btnSendPrompt').prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i>');

        $.ajax({
            url: "{{ url('admin/crypto-news-ai-direct-prompt') }}",
            method: 'POST',
            data: {
                prompt: userInput,
                ai_provider: promptProvider,
                system_prompt: systemInput || null
            },
            timeout: 120000,

            success: function (response) {
                if (response.success) {
                    var pClass = response.ai_provider || promptProvider;

                    $messages.append(
                        '<div class="prompt-msg ai-msg"><div class="msg-provider ' + pClass + '">' +
                        pClass.toUpperCase() +
                        '</div><pre style="white-space:pre-wrap;margin:0;font-family:inherit;font-size:13px;">' +
                        escHtml(response.content) +
                        '</pre></div>'
                    );
                } else {
                    $messages.append('<div class="prompt-msg ai-msg" style="border-color:#ef4444;"><div class="msg-provider" style="color:#ef4444;">ERROR</div>' + escHtml(response.message || 'Failed.') + '</div>');
                }

                $messages.scrollTop($messages[0].scrollHeight);
            },

            error: function (xhr) {
                $messages.append('<div class="prompt-msg ai-msg" style="border-color:#ef4444;"><div class="msg-provider" style="color:#ef4444;">ERROR</div>' + escHtml(xhr.responseJSON?.message || 'Failed.') + '</div>');
                $messages.scrollTop($messages[0].scrollHeight);
            },

            complete: function () {
                $('#btnSendPrompt').prop('disabled', false).html('<i class="fa fa-paper-plane mr-1"></i> Send');
            }
        });
    }

    $(document).on('change', '.research-checkbox', function () {
        $(this).closest('.research-item').toggleClass('selected', this.checked);
        updateSelectedCount();
    });

    $(document).on('click', '.btn-select-all', function () {
        var group = $(this).data('group');

        $('.research-checkbox[data-group="' + group + '"]')
            .prop('checked', true)
            .closest('.research-item')
            .addClass('selected');

        updateSelectedCount();
    });

    $(document).on('click', '.btn-deselect-all', function () {
        var group = $(this).data('group');

        $('.research-checkbox[data-group="' + group + '"]')
            .prop('checked', false)
            .closest('.research-item')
            .removeClass('selected');

        updateSelectedCount();
    });

    $(document).on('change', 'input[name="selected_angle"]', function () {
        $('.angle-card').removeClass('selected');
        $(this).closest('.angle-card').addClass('selected');
    });

    let preselectedProjects = @json($selectedProjects ?? []);

    preselectedProjects.forEach(function (project) {
        if ($('#coin_select option[value="' + project.id + '"]').length === 0) {
            let option = new Option(project.text, project.id, true, true);
            $('#coin_select').append(option);
        }
    });

});

function renderResearchResults(data) {
    var html = '';

    if (data.topic_summary) {
        html += '<div class="alert alert-info mb-4"><i class="fa fa-info-circle mr-2"></i><strong>Topic:</strong> ' + escHtml(data.topic_summary) + '</div>';
    }

    buildResearchGroup('fact', 'Facts & Data Points', 'fa-check-square text-primary', 'badge-primary', data.facts || []);
    buildResearchGroup('market', 'Market Updates', 'fa-line-chart text-success', 'badge-success', data.market_updates || []);
    buildAngles(data.suggested_angles || []);
    buildSections(data.article_outline || []);

    if (data.suggested_tags || data.suggested_category) {
        html += '<div class="research-section">';
        html += '<h5><i class="fa fa-tags text-secondary"></i> Suggestions</h5>';

        if (data.suggested_category) {
            html += '<p><strong>Category:</strong> ' + escHtml(data.suggested_category) + '</p>';
        }

        if (data.suggested_tags && data.suggested_tags.length) {
            html += '<p><strong>Tags:</strong> ';
            data.suggested_tags.forEach(function (t) {
                html += '<span class="badge badge-secondary mr-1">' + escHtml(t) + '</span>';
            });
            html += '</p>';
        }

        html += '</div>';
    }

    $('#researchResultsBody').html(html);
    updateSelectedCount();

    function buildResearchGroup(group, title, icon, badge, items) {
        if (!items.length) return;

        html += '<div class="research-section">';
        html += '<h5><i class="fa ' + icon + '"></i> ' + title + ' <span class="badge ' + badge + '">' + items.length + '</span></h5>';
        html += '<div class="select-controls">';
        html += '<button type="button" class="btn btn-sm btn-outline-primary btn-select-all" data-group="' + group + '">Select All</button>';
        html += '<button type="button" class="btn btn-sm btn-outline-secondary btn-deselect-all" data-group="' + group + '">Deselect All</button>';
        html += '</div>';

        items.forEach(function (item, i) {
            var id = item.id || (group + '_' + i);
            var imp = item.importance || 'medium';

            html += '<div class="research-item selected" data-group="' + group + '">';
            html += '<input type="checkbox" class="research-checkbox" data-group="' + group + '" data-index="' + i + '" id="cb_' + id + '" checked>';
            html += '<div class="item-content">';
            html += '<div class="item-text">' + escHtml(item.text) + '</div>';
            html += '<div class="item-meta">';
            html += '<span class="badge importance-' + imp + '">' + imp.toUpperCase() + '</span>';

            if (item.category) {
                html += '<span class="badge category-badge">' + escHtml(item.category) + '</span>';
            }

            if (item.coin_or_sector) {
                html += '<span class="badge" style="background:#dcfce7;color:#166534;">' + escHtml(item.coin_or_sector) + '</span>';
            }

            if (item.source_hint) {
                html += '<span class="badge" style="background:#f1f5f9;color:#475569;"><i class="fa fa-link mr-1"></i>' + escHtml(item.source_hint) + '</span>';
            }

            html += '</div></div></div>';
        });

        html += '</div>';
    }

    function buildAngles(angles) {
        if (!angles.length) return;

        html += '<div class="research-section">';
        html += '<h5><i class="fa fa-compass text-warning"></i> Suggested Angles <span class="text-muted" style="font-size:12px;">(pick one)</span></h5>';

        angles.forEach(function (a, i) {
            var checked = i === 0 ? 'checked' : '';
            var selectedClass = i === 0 ? 'selected' : '';

            html += '<div class="angle-card ' + selectedClass + '" data-index="' + i + '">';
            html += '<label style="cursor:pointer;display:flex;align-items:flex-start;gap:10px;margin:0;">';
            html += '<input type="radio" name="selected_angle" value="' + i + '" ' + checked + ' style="margin-top:3px;">';
            html += '<div><strong>' + escHtml(a.title) + '</strong>';

            if (a.description) {
                html += '<div class="text-muted" style="font-size:13px;">' + escHtml(a.description) + '</div>';
            }

            if (a.tone) {
                html += '<div class="item-meta mt-1"><span class="badge tone-badge">' + escHtml(a.tone) + '</span></div>';
            }

            html += '</div></label></div>';
        });

        html += '</div>';
    }

    function buildSections(sections) {
        if (!sections.length) return;

        html += '<div class="research-section">';
        html += '<h5><i class="fa fa-list-ol text-info"></i> Article Outline <span class="badge badge-info">' + sections.length + '</span></h5>';
        html += '<div class="select-controls">';
        html += '<button type="button" class="btn btn-sm btn-outline-info btn-select-all" data-group="section">Select All</button>';
        html += '<button type="button" class="btn btn-sm btn-outline-secondary btn-deselect-all" data-group="section">Deselect All</button>';
        html += '</div>';

        sections.forEach(function (s, i) {
            var id = s.id || ('section_' + i);

            html += '<div class="research-item selected" data-group="section">';
            html += '<input type="checkbox" class="research-checkbox" data-group="section" data-index="' + i + '" id="cb_' + id + '" checked>';
            html += '<div class="item-content">';
            html += '<div class="item-text"><strong>' + escHtml(s.heading) + '</strong></div>';

            if (s.key_points && s.key_points.length) {
                html += '<ul style="margin:4px 0 0; padding-left:20px; font-size:13px; color:#6b7280;">';
                s.key_points.forEach(function (p) {
                    html += '<li>' + escHtml(p) + '</li>';
                });
                html += '</ul>';
            }

            if (s.suggested_word_count) {
                html += '<small class="text-muted">~' + s.suggested_word_count + ' words</small>';
            }

            html += '</div></div>';
        });

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

function updateSelectedCount() {
    var facts = $('.research-checkbox[data-group="fact"]:checked').length;
    var markets = $('.research-checkbox[data-group="market"]:checked').length;
    var sections = $('.research-checkbox[data-group="section"]:checked').length;

    $('#selectedCountText').text(facts + ' facts, ' + markets + ' market updates, ' + sections + ' sections selected');
}

function readFroala(selector, keepHtml) {
    var $el = $(selector);
    var val = '';

    if ($el.data('froala.editor')) {
        val = $el.data('froala.editor').html.get();
    } else {
        val = $el.val() || '';
    }

    if (keepHtml) return val;

    var tmp = document.createElement('div');
    tmp.innerHTML = val;

    return (tmp.textContent || tmp.innerText || '').trim();
}

function escHtml(text) {
    if (!text) return '';

    var div = document.createElement('div');
    div.appendChild(document.createTextNode(text));

    return div.innerHTML;
}

function showLoading(title, subtitle, provider) {
    $('#loadingTitle').text(title);
    $('#loadingSubtitle').text(subtitle);

    $('#loadingProviderBadge')
        .text(provider.toUpperCase())
        .removeClass('badge-openai badge-claude')
        .addClass(provider === 'openai' ? 'badge-openai' : 'badge-claude');

    $('#loadingOverlay').show();
}

function hideLoading() {
    $('#loadingOverlay').hide();
}

function updateFlowIndicators(step) {
    if (step === 'step2') {
        $('#flowStep1_search, #flowStep1_intent')
            .removeClass('active')
            .addClass('done')
            .find('i')
            .removeClass('fa-flask')
            .addClass('fa-check-circle');

        $('#flowStep2_search, #flowStep2_intent').addClass('active');
    } else {
        $('#flowStep1_search, #flowStep1_intent')
            .addClass('active')
            .removeClass('done')
            .find('i')
            .removeClass('fa-check-circle')
            .addClass('fa-flask');

        $('#flowStep2_search, #flowStep2_intent').removeClass('active');
    }
}

function scoreClass(s) {
    return s >= 75 ? 'good' : s >= 50 ? 'avg' : 'bad';
}

function renderAuditResults(audit) {
    if (!audit) return;

    var html = '';
    var overall = audit.overall_score || 0;

    html += '<div class="row mb-4">';
    html += '<div class="col text-center"><h6 class="text-muted">Overall</h6><div class="audit-score ' + scoreClass(overall) + '">' + overall + '/100</div></div>';
    html += '</div>';

    var seoSugg = audit.seo_suggestions || [];

    if (seoSugg.length) {
        html += '<div class="audit-panel" style="background:#eff6ff;border-left-color:#3b82f6;"><h6>SEO Suggestions</h6><ul>';

        seoSugg.forEach(function (s) {
            html += '<li>' + escHtml(typeof s === 'string' ? s : (s.suggestion || JSON.stringify(s))) + '</li>';
        });

        html += '</ul></div>';
    }

    if (audit.suggested_seo_title) {
        html += '<table class="table table-bordered table-sm mt-3"><tr><th>SEO Title</th><td>' + escHtml(audit.suggested_seo_title) + '</td></tr></table>';
    }

    $('#auditResultsBody').html(html);
    $('#auditResultsCard').show();
}
</script>

{{-- Select2 for project selector --}}
<script type="text/javascript">
$(document).ready(function() {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': "{{ csrf_token() }}"
        }
    });

    let preselectedProjects = @json($selectedProjects ?? []);

    preselectedProjects.forEach(function(project) {
        if ($('#coin_select option[value="' + project.id + '"]').length === 0) {
            let option = new Option(project.text, project.id, true, true);
            $('#coin_select').append(option);
        }
    });

    $('#coin_select').select2({
        placeholder: 'Coin Select...',
        allowClear: true,
        ajax: {
            url: "{{ route('project.getCoinlist') }}",
            type: "POST",
            dataType: 'json',
            delay: 250,
            data: function(params) {
                return {
                    _token: "{{ csrf_token() }}",
                    term: params.term || '',
                    page: params.page || 1
                };
            },
            processResults: function(data, params) {
                params.page = params.page || 1;

                return {
                    results: data.results,
                    pagination: {
                        more: data.pagination.more
                    }
                };
            },
            cache: true
        },
        templateResult: function(repo) {
            if (repo.loading) return repo.text;

            var website = repo.project_website
                ? '<small style="color:#999;">' + repo.project_website + '</small>'
                : '';

            return $('<div style="line-height:1.2"><div><strong>' + repo.text + '</strong></div>' + website + '</div>');
        },
        templateSelection: function(data) {
            return data.text || data.id;
        }
    });
});
</script>
@endsection