{% extends 'ewoooc_base.html' %}
{% block title %}PChome 銷售建議 · EwoooC{% endblock %}

{% block extra_css %}
  <link rel="stylesheet" href="{{ url_for('static', filename='css/page-ai-recommend.css') }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/page-ai-recommend-bem.css') }}">
{% endblock %}

{% block ewooo_content %}
<div class="momo-app" data-page-group="ai">
  <div class="ai-recommend-page">

    <header class="ai-recommend-hero ar-hero">
      <div class="ar-hero__title">
        <h1 class="ai-recommend-title">
          <i class="fas fa-bullhorn"></i>PChome 銷售建議
        </h1>
        <small class="ar-hero__sub">把價差、商品證據與趨勢轉成主推、調價、補比價動作。</small>
      </div>
      <div class="ar-hero__actions">
        <span id="ollamaStatus" class="ar-status {{ 'ar-status--ok' if ollama_status else 'ar-status--off' }}">
          <i class="fas fa-wand-magic-sparkles"></i> 建議引擎 {{ '檢查中' if ollama_status is none else ('可用' if ollama_status else '待確認') }}
        </span>
        <span id="geminiStatus" class="ar-status {{ 'ar-status--info' if gemini_status else 'ar-status--off' }}">
          <i class="fas fa-shield-alt"></i> 備援守門 {{ '檢查中' if gemini_status is none else ('可用' if gemini_status else '待確認') }}
        </span>
        <button class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#helpModal" title="銷售決策流程">
          <i class="fas fa-question-circle"></i>
        </button>
      </div>
    </header>

    <section class="ar-command-strip" aria-label="PChome 銷售建議流程">
      <span class="ar-command-strip__label">處理順序</span>
      <strong><i class="fas fa-box-open" aria-hidden="true"></i>選商品</strong>
      <strong><i class="fas fa-chart-line" aria-hidden="true"></i>看價差與趨勢</strong>
      <strong><i class="fas fa-list-check" aria-hidden="true"></i>產生下一步</strong>
      <a href="/ai_intelligence" class="ar-command-strip__link">回今日作戰</a>
    </section>

    <div class="row">
      <div class="col-lg-6 col-xl-5 mb-3">
        <article class="card ar-card ar-card--gen">
          <header class="card-header ar-card__head ar-card__head--accent">
            <div class="d-flex justify-content-between align-items-center">
              <h6 class="mb-0"><i class="fas fa-magic me-2"></i>銷售動作生成</h6>
              <small class="ar-card__step">設定商品與目的</small>
            </div>
          </header>
          <div class="card-body py-3">

            <div class="mb-3">
              <label class="form-label fw-bold mb-1">
                <i class="fas fa-box me-1"></i>商品名稱 <span class="text-danger">*</span>
              </label>
              <div class="input-group">
                <input type="text" class="form-control form-control-lg" id="productName" placeholder="輸入商品名稱...">
                <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" title="從商品分類快速選取">
                  <i class="fas fa-list"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end ar-dropdown">
                  <li><h6 class="dropdown-header">點選分類快速填入</h6></li>
                  {% for category in product_categories %}
                  <li><a class="dropdown-item" href="#" onclick="setProduct({{ category|tojson }})">{{ category }}</a></li>
                  {% endfor %}
                </ul>
              </div>
              <div class="d-flex justify-content-between mt-1">
                <small class="text-muted"><i class="fas fa-lightbulb me-1"></i>可從右側 PChome 熱銷商品帶入</small>
                <button type="button" class="btn btn-link btn-sm p-0 text-decoration-none" onclick="document.getElementById('productName').value=''">
                  <small>清除</small>
                </button>
              </div>
            </div>

            <div class="row g-2 mb-3">
              <div class="col-12">
                <label class="form-label small fw-bold mb-1">建議目的</label>
                <select class="form-select form-select-sm" id="copyStyle">
                  <option value="主推曝光">主推曝光</option>
                  <option value="價格防守">價格防守</option>
                  <option value="活動轉換">活動轉換</option>
                  <option value="補資料確認">補資料確認</option>
                </select>
              </div>
              <div class="ar-engine-settings" aria-hidden="true">
                <select class="form-select form-select-sm" id="aiProvider" onchange="onProviderChange()">
                  <option value="ollama" {% if default_provider == 'ollama' %}selected{% endif %}>primary</option>
                  <option value="gemini" disabled>fallback</option>
                </select>
                <select class="form-select form-select-sm" id="ollamaModelSelect">
                  {% for model in available_models %}
                  <option value="{{ model }}" {% if 'gemma3:4b' in model %}selected{% endif %}>{{ model }}</option>
                  {% endfor %}
                </select>
                <select class="form-select form-select-sm" id="geminiModelSelect" style="display: none;">
                  {% for model in gemini_models %}
                  <option value="{{ model.id }}" {% if loop.first %}selected{% endif %}>{{ model.name }}</option>
                  {% endfor %}
                </select>
              </div>
            </div>

            <div id="geminiUsagePanel" class="ar-engine-settings" style="display: none;" aria-hidden="true">
              <span id="fallbackMonthlySpend">$0.0000</span>
              <span id="geminiRequestCount">0</span>
              <span id="geminiTokenUsage">0</span>
            </div>

            <div class="accordion accordion-flush" id="advancedOptions">
              <div class="accordion-item border-0">
                <h2 class="accordion-header">
                  <button class="accordion-button collapsed py-2 px-0 bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#keywordsCollapse">
                    <small class="fw-bold"><i class="fas fa-tags me-1"></i>關鍵字與節日 <span class="badge ar-selected-count ms-1" id="selectedKeywordCount">0 個已選</span></small>
                  </button>
                </h2>
                <div id="keywordsCollapse" class="accordion-collapse collapse" data-bs-parent="#advancedOptions">
                  <div class="accordion-body p-0 pt-2">
                    <div class="mb-2">
                      <small class="text-muted d-block mb-1">點選標籤加入/移除</small>
                      <div id="keywordsArea" class="ar-keywords">
                        {% for category in product_categories[:12] %}
                        <span class="badge ar-keyword-badge border me-1 mb-1 keyword-badge ar-keyword" onclick="toggleKeyword(this)">{{ category }}</span>
                        {% endfor %}
                      </div>
                    </div>
                    <div>
                      <small class="text-muted"><i class="fas fa-calendar-alt me-1"></i>近期節日（自動融入）</small>
                      <div id="upcomingHolidays" class="small mt-1"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <hr class="my-2">
            <div class="d-grid">
              <button class="btn btn-primary" onclick="generateCopy()" id="generateBtn">
                <i class="fas fa-magic me-2"></i>產生銷售建議
              </button>
            </div>
          </div>
        </article>

        <div id="resultArea" class="mt-3" style="display: none;">
          <article class="card ar-card ar-card--result">
            <header class="card-header ar-card__head ar-card__head--success d-flex justify-content-between align-items-center">
              <span><i class="fas fa-sparkles me-2"></i>可用銷售文案</span>
              <button class="btn btn-sm btn-light" onclick="copyCopyText()" title="複製全部文案到剪貼簿">
                <i class="fas fa-copy me-1"></i>複製
              </button>
            </header>
            <div class="card-body py-2 ar-result__body">
              <div id="generatedCopy" class="ar-result__text"></div>
              <hr class="my-2">
              <small class="text-muted" id="copyMeta"></small>
            </div>
          </article>
        </div>

        <article class="card ar-card mt-3 ar-card--search">
          <header class="card-header ar-card__head ar-card__head--accent-soft py-2">
            <div>
              <h6 class="mb-0"><i class="fas fa-search-dollar me-2"></i>市場訊號快查</h6>
              <small class="text-muted">輸入關鍵字，整理趨勢與可用行動</small>
            </div>
          </header>
          <div class="card-body py-2">
            <div class="input-group input-group-sm mb-2">
              <input type="text" class="form-control" id="webSearchQuery" placeholder="輸入搜尋關鍵字...">
              <select class="form-select" id="webSearchType" style="max-width: 100px;">
                <option value="general">一般</option>
                <option value="shopping">商品</option>
                <option value="trends">趨勢</option>
                <option value="news">新聞</option>
              </select>
              <button class="btn btn-primary" onclick="doWebSearch()" id="webSearchBtn">
                <i class="fas fa-brain"></i>
              </button>
            </div>
            <div class="ar-quick-tags mb-2">
              {% for category in product_categories[:4] %}
              <span class="badge bg-light text-dark border ar-quick-tag" onclick="quickWebSearch({{ category|tojson }})">{{ category }}</span>
              {% endfor %}
            </div>
            <div id="webSearchResult" style="display: none;">
              <hr class="my-2">
              <div id="webSearchContent"></div>
            </div>
          </div>
        </article>

        <article class="card ar-card mt-3 ar-card--insights">
          <header class="card-header ar-card__head ar-card__head--warn-soft d-flex justify-content-between align-items-center py-2">
            <div>
              <h6 class="mb-0"><i class="fas fa-lightbulb me-2"></i>商品洞察分析</h6>
              <small class="text-muted">把外部訊號轉成可追蹤的銷售動作</small>
            </div>
            <button class="btn btn-sm btn-warning" onclick="doProductInsights()" id="insightsBtn">
              <i class="fas fa-search-dollar me-1"></i>判斷下一步
            </button>
          </header>
          <div id="productInsightsResult" class="card-body py-3" style="display: none;"></div>
          <div id="productInsightsPlaceholder" class="card-body py-3 text-center text-muted">
            <i class="fas fa-info-circle me-1"></i>輸入商品後，判斷是否值得主推、調價或補比價。<br>
            <small>先整理外部訊號，再回到 PChome 銷售動作。</small>
          </div>
        </article>
      </div>

      <div class="col-lg-6 col-xl-7">
        <ul class="nav nav-pills nav-fill mb-3" id="marketInfoTabs" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active py-2" id="trends-tab" data-bs-toggle="pill" data-bs-target="#trends-panel" type="button" role="tab">
              <i class="fas fa-chart-line me-1"></i><span class="d-none d-md-inline">趨勢洞察</span><span class="d-md-none">趨勢</span>
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link py-2" id="bestsellers-tab" data-bs-toggle="pill" data-bs-target="#bestsellers-panel" type="button" role="tab">
              <i class="fas fa-fire-alt me-1"></i><span class="d-none d-md-inline">熱銷商品</span><span class="d-md-none">熱銷</span>
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link py-2" id="rankings-tab" data-bs-toggle="pill" data-bs-target="#rankings-panel" type="button" role="tab">
              <i class="fas fa-crown me-1"></i><span class="d-none d-md-inline">排行榜</span><span class="d-md-none">排行</span>
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link py-2" id="news-tab" data-bs-toggle="pill" data-bs-target="#news-panel" type="button" role="tab">
              <i class="fas fa-newspaper me-1"></i><span class="d-none d-md-inline">趨勢新聞</span><span class="d-md-none">新聞</span>
            </button>
          </li>
        </ul>

        <div class="tab-content" id="marketInfoTabContent">
          <div class="tab-pane fade show active" id="trends-panel" role="tabpanel">
            <article class="card ar-card ar-card--trends">
              <header class="card-header ar-card__head ar-card__head--soft d-flex justify-content-between align-items-center py-2">
                <div>
                  <h6 class="mb-0"><i class="fas fa-chart-line me-2"></i>即時趨勢洞察</h6>
                  <small class="text-muted">可用來挑主推與文案角度</small>
                </div>
                <div class="d-flex gap-1">
                  <select class="form-select form-select-sm" id="trendSource" style="width: 90px;" onchange="refreshTrends()">
                    <option value="">全部來源</option>
                    <option value="google_news">Google</option>
                    <option value="ptt">PTT</option>
                    <option value="dcard">Dcard</option>
                    <option value="youtube">YouTube</option>
                  </select>
                  <select class="form-select form-select-sm" id="trendCategory" style="width: 70px;" onchange="refreshTrends()">
                    <option value="">全部</option>
                    <option value="美妝">美妝</option>
                    <option value="3C">3C</option>
                    <option value="服飾">服飾</option>
                    <option value="居家">居家</option>
                  </select>
                  <button class="btn btn-sm btn-outline-success" onclick="refreshTrends()"><i class="fas fa-sync-alt"></i></button>
                </div>
              </header>
              <div class="card-body py-2">
                <div class="mb-2">
                  <small class="text-muted fw-bold">熱門關鍵字：</small>
                  <div id="trendKeywordCloud" class="d-flex flex-wrap gap-1 mt-1">
                    <span class="badge bg-light text-dark border">載入中...</span>
                  </div>
                </div>
                <div id="trendListArea" class="ar-scroll-280">
                  <div class="text-center py-2"><div class="spinner-border spinner-border-sm"></div></div>
                </div>
              </div>
            </article>
          </div>

          <div class="tab-pane fade" id="bestsellers-panel" role="tabpanel">
            <article class="card ar-card">
              <header class="card-header ar-card__head ar-card__head--soft d-flex justify-content-between align-items-center py-2">
                <div>
                  <h6 class="mb-0"><i class="fas fa-fire-alt me-2"></i>熱銷商品參考</h6>
                  <small class="text-muted">商品 ID、圖片與賣場連結可一眼確認</small>
                </div>
                <div class="d-flex align-items-center gap-1">
                  <div class="btn-group btn-group-sm">
                    <input type="radio" class="btn-check" name="platform" id="platformPchome" value="pchome" checked>
                    <label class="btn btn-outline-primary btn-sm px-2" for="platformPchome">PChome</label>
                    <input type="radio" class="btn-check" name="platform" id="platformMomo" value="momo">
                    <label class="btn btn-outline-primary btn-sm px-2" for="platformMomo">MOMO</label>
                  </div>
                  <select class="form-select form-select-sm" id="bestsellersCategory" style="width: 80px;" onchange="loadBestsellers()">
                    <option value="面膜">面膜</option>
                    <option value="精華液">精華液</option>
                    <option value="乳液">乳液</option>
                    <option value="保濕">保濕</option>
                    <option value="美白">美白</option>
                  </select>
                </div>
              </header>
              <div class="card-body py-2 ar-scroll-350" id="bestsellersCard">
                <div class="text-center py-3"><div class="spinner-border spinner-border-sm"></div></div>
              </div>
            </article>
          </div>

          <div class="tab-pane fade" id="rankings-panel" role="tabpanel">
            <div class="row g-3">
              <div class="col-12 col-md-6">
                <article class="card ar-card h-100">
                  <header class="card-header ar-card__head ar-card__head--soft d-flex justify-content-between align-items-center py-2">
                    <div>
                      <h6 class="mb-0"><i class="fas fa-crown me-2"></i>COSME</h6>
                      <small class="text-muted">日本美妝排行</small>
                    </div>
                    <select class="form-select form-select-sm" id="cosmeCategory" style="width: 80px;" onchange="loadCosmeRankings()">
                      <option value="mask">面膜</option>
                      <option value="serum">精華液</option>
                      <option value="lotion">乳液</option>
                      <option value="sunscreen">防曬</option>
                      <option value="lipstick">唇彩</option>
                      <option value="foundation">底妝</option>
                    </select>
                  </header>
                  <div class="card-body py-2 ar-scroll-300" id="cosmeCard">
                    <div class="text-center py-3"><div class="spinner-border spinner-border-sm"></div></div>
                  </div>
                </article>
              </div>
              <div class="col-12 col-md-6">
                <article class="card ar-card h-100">
                  <header class="card-header ar-card__head ar-card__head--soft d-flex justify-content-between align-items-center py-2">
                    <div>
                      <h6 class="mb-0"><i class="fas fa-trophy me-2"></i>mybest</h6>
                      <small class="text-muted">專業評測</small>
                    </div>
                    <select class="form-select form-select-sm" id="mybestCategory" style="width: 80px;" onchange="loadMybestArticles()">
                      <option value="skincare">保養</option>
                      <option value="makeup">彩妝</option>
                      <option value="health">健康</option>
                      <option value="baby">嬰兒</option>
                      <option value="maternity">孕婦</option>
                      <option value="kids">兒童</option>
                    </select>
                  </header>
                  <div class="card-body py-2 ar-scroll-300" id="mybestCard">
                    <div class="text-center py-3"><div class="spinner-border spinner-border-sm"></div></div>
                  </div>
                </article>
              </div>
            </div>
          </div>

          <div class="tab-pane fade" id="news-panel" role="tabpanel">
            <article class="card ar-card">
              <header class="card-header ar-card__head ar-card__head--soft py-2">
                <div class="d-flex justify-content-between align-items-center mb-2">
                  <div>
                    <h6 class="mb-0"><i class="fas fa-newspaper me-2"></i>趨勢新聞</h6>
                    <small class="text-muted">點選新聞快速填入商品</small>
                  </div>
                  <button class="btn btn-sm btn-outline-secondary" onclick="loadTrends()"><i class="fas fa-sync-alt"></i></button>
                </div>
                <ul class="nav nav-tabs card-header-tabs" id="trendTabs">
                  <li class="nav-item">
                    <a class="nav-link active py-1 px-2" href="#" data-trend-type="news" onclick="switchTrendTab(this, 'news')">
                      <i class="fas fa-newspaper me-1"></i>新聞
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link py-1 px-2" href="#" data-trend-type="social" onclick="switchTrendTab(this, 'social')">
                      <i class="fas fa-hashtag me-1"></i>社群
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link py-1 px-2" href="#" data-trend-type="search" onclick="switchTrendTab(this, 'search')">
                      <i class="fas fa-search me-1"></i>搜尋
                    </a>
                  </li>
                </ul>
              </header>
              <div id="newsCard" class="ar-scroll-350">
                <div class="text-center py-4"><div class="spinner-border"></div><p class="mt-2 text-muted small">載入中...</p></div>
              </div>
            </article>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="helpModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h6 class="modal-title"><i class="fas fa-question-circle me-2"></i>銷售決策流程</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body py-3">
        <div class="d-flex align-items-start mb-3">
          <span class="badge ar-step-badge me-2">1</span>
          <div><strong>選商品</strong><p class="text-muted small mb-0">優先挑高業績、下滑或有價差壓力的商品。</p></div>
        </div>
        <div class="d-flex align-items-start mb-3">
          <span class="badge ar-step-badge me-2">2</span>
          <div><strong>選策略語氣</strong><p class="text-muted small mb-0">依價格優勢、補貨或活動曝光選文案方向。</p></div>
        </div>
        <div class="d-flex align-items-start mb-3">
          <span class="badge ar-step-badge me-2">3</span>
          <div><strong>產生建議</strong><p class="text-muted small mb-0">把商品證據轉成可追蹤的銷售動作。</p></div>
        </div>
        <hr>
        <p class="small text-muted mb-0">
          <i class="fas fa-lightbulb me-1"></i>
          <strong>下一步：</strong>文案產出後，回到業績成長指揮台追蹤是否帶動商品處理。
        </p>
      </div>
    </div>
  </div>
</div>

<div id="loadingOverlay" class="ar-loading-overlay d-none">
  <div class="ar-loading-overlay__inner">
    <div class="spinner-border spinner-border-lg mb-3"></div>
    <h5 id="loadingText">正在整理銷售建議...</h5>
  </div>
</div>
{% endblock %}

{% block extra_js %}
  <script src="{{ url_for('static', filename='js/page-ai-recommend.js') }}"></script>
{% endblock %}