{% extends "ewoooc_base.html" %}

{% block title %}當日業績報表匯入{% endblock %}
{% block page_attrs %}data-page-group="monitor" data-page-id="auto-import"{% endblock %}

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

{% block content %}
<div class="auto-import-page">
  <div class="container">

    {# ─────────── 頁首 ─────────── #}
    <header class="ai-head">
      <span class="ai-head__icon" aria-hidden="true"><i class="fas fa-cloud-download-alt"></i></span>
      <div class="ai-head__main">
        <h1 class="ai-head__title">當日業績報表匯入</h1>
        <p class="ai-head__subtitle">
          <i class="fas fa-info-circle" aria-hidden="true"></i>
          支援兩種匯入方式：<strong>Google Drive 自動匯入</strong>（每 30 分鐘檢查）或 <strong>手動上傳</strong>
        </p>
      </div>
    </header>

    {# ─────────── 配置區 ─────────── #}
    <section class="ai-card">
      <header class="ai-card__head">
        <h2 class="ai-card__title">
          <i class="fas fa-cog"></i>Google Drive 自動匯入配置
        </h2>
      </header>
      <div class="ai-card__body">
        <div id="configAlert"></div>

        <div class="ai-notice">
          <i class="fas fa-sync-alt ai-notice__icon" aria-hidden="true"></i>
          <p class="ai-notice__body">系統每 30 分鐘自動檢查 Google Drive → 下載檔案 → 匯入資料庫 → 刪除雲端原檔</p>
        </div>

        <div class="ai-form-grid">
          <div>
            <label class="ai-field__label" for="folderPath">Google Drive 資料夾路徑</label>
            <input type="text" class="ai-field__input form-control" id="folderPath" placeholder="例如：業績報表/當日業績">
            <small class="ai-field__hint">設定要監控的 Google Drive 資料夾路徑</small>
          </div>
          <div>
            <label class="ai-field__label" for="filePattern">檔案名稱模式（選填）</label>
            <input type="text" class="ai-field__input form-control" id="filePattern" placeholder="例如：即時業績_當日">
            <small class="ai-field__hint">用於過濾特定名稱的檔案</small>
          </div>
        </div>

        <div class="ai-toolbar">
          <button class="btn btn-primary" onclick="saveConfig()">
            <i class="fas fa-save me-1"></i>儲存配置
          </button>
          <button class="btn btn-secondary" onclick="testConnection()">
            <i class="fas fa-plug me-1"></i>測試連接
          </button>
          <button class="btn btn-secondary" onclick="listFiles()">
            <i class="fas fa-list me-1"></i>列出檔案
          </button>
          <button class="btn btn-success" onclick="manualImport()">
            <i class="fas fa-play me-1"></i>立即匯入
          </button>
        </div>
      </div>
    </section>

    {# ─────────── 手動上傳 ─────────── #}
    <section class="ai-card">
      <header class="ai-card__head">
        <h2 class="ai-card__title">
          <i class="fas fa-upload"></i>手動上傳匯入
        </h2>
      </header>
      <div class="ai-card__body">
        <div id="uploadAlert"></div>

        <div class="ai-notice ai-notice--info">
          <i class="fas fa-info-circle ai-notice__icon" aria-hidden="true"></i>
          <div>
            <p class="ai-notice__title">每日業績快照</p>
            <p class="ai-notice__body" style="margin-bottom: var(--momo-space-1);">
              匯入格式：<code>即時業績_當日_YYYYMMDD.xlsx</code>（例：即時業績_當日_20260113.xlsx）
            </p>
            <p class="ai-notice__body">
              <small>資料將會<strong>累加寫入</strong>至 <code>daily_sales_snapshot</code> 資料表，並自動去重。</small>
            </p>
          </div>
        </div>

        <div class="ai-uploadrow">
          <div>
            <label class="ai-field__label" for="manualUploadFile">選擇檔案</label>
            <input type="file" class="ai-field__input form-control" id="manualUploadFile" accept=".xlsx,.xls">
          </div>
          <div>
            <button class="btn btn-primary" onclick="uploadManualFile()" style="height: calc(var(--momo-space-2) * 2 + var(--momo-text-sm) * 1.4 + 2px);">
              <i class="fas fa-upload me-1"></i>上傳並匯入
            </button>
          </div>
        </div>
      </div>
    </section>

    {# ─────────── 任務歷史 ─────────── #}
    <section class="ai-card">
      <header class="ai-card__head">
        <h2 class="ai-card__title">
          <i class="fas fa-tasks"></i>匯入任務歷史
        </h2>
        <button class="btn btn-warning btn-sm" onclick="resetStuckJobs()">
          <i class="fas fa-redo me-1"></i>重置卡住的任務
        </button>
      </header>
      <div class="ai-card__body">

        <div id="jobsLoading" class="ai-loading" style="display: none;">
          <div class="spinner-border ai-loading__spinner" role="status">
            <span class="visually-hidden">載入中…</span>
          </div>
          <p class="ai-loading__text">載入中…</p>
        </div>

        <div id="jobsEmpty" class="ai-empty" style="display: none;">
          <i class="fas fa-inbox ai-empty__icon" aria-hidden="true"></i>
          <p class="ai-empty__text">尚無匯入記錄</p>
        </div>

        <div id="jobsTableContainer" style="display: none;">
          <div class="table-responsive">
            <table class="ai-jobtable" id="jobsTable">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>檔案名稱</th>
                  <th>狀態</th>
                  <th>進度</th>
                  <th>成功 / 總</th>
                  <th>開始時間</th>
                  <th>完成時間</th>
                  <th>錯誤訊息</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody id="jobsTableBody"></tbody>
            </table>
          </div>
        </div>

      </div>
    </section>

  </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
  // ───── 配置：載入 / 儲存 ─────
  async function loadConfig() {
    try {
      const r = await fetch('/api/import_config');
      const result = await r.json();
      if (result.success) {
        document.getElementById('folderPath').value = result.data.folder_path || '';
        document.getElementById('filePattern').value = result.data.file_pattern || '';
      }
    } catch (e) {
      console.error('載入配置失敗:', e);
    }
  }

  async function saveConfig() {
    const folderPath = document.getElementById('folderPath').value;
    const filePattern = document.getElementById('filePattern').value;
    try {
      const r = await fetch('/api/import_config', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ folder_path: folderPath, file_pattern: filePattern })
      });
      const result = await r.json();
      if (result.success) {
        showAlert('configAlert', 'success', '<i class="fas fa-check-circle me-2"></i>配置已儲存');
      } else {
        showAlert('configAlert', 'danger', '<i class="fas fa-exclamation-circle me-2"></i>' + result.message);
      }
    } catch (e) {
      showAlert('configAlert', 'danger', '<i class="fas fa-exclamation-circle me-2"></i>儲存配置失敗：' + e.message);
    }
  }

  async function testConnection() {
    showAlert('configAlert', 'info', '<i class="fas fa-spinner fa-spin me-2"></i>正在測試 Google Drive 連接…');
    try {
      const r = await fetch('/api/test_drive_connection', { method: 'POST' });
      const result = await r.json();
      showAlert('configAlert', result.success ? 'success' : 'danger',
        '<i class="fas fa-' + (result.success ? 'check' : 'exclamation') + '-circle me-2"></i>' + result.message);
    } catch (e) {
      showAlert('configAlert', 'danger', '<i class="fas fa-exclamation-circle me-2"></i>測試失敗：' + e.message);
    }
  }

  async function listFiles() {
    const folderPath = document.getElementById('folderPath').value;
    const filePattern = document.getElementById('filePattern').value;
    showAlert('configAlert', 'info', '<i class="fas fa-spinner fa-spin me-2"></i>正在列出 Google Drive 檔案…');
    try {
      const r = await fetch('/api/list_drive_files', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ folder_path: folderPath, file_pattern: filePattern })
      });
      const result = await r.json();
      if (result.success) {
        const list = result.data.map(f => `<li class="mb-1"><i class="fas fa-file-excel me-1"></i>${f.name}</li>`).join('');
        showAlert('configAlert', 'success',
          `<i class="fas fa-check-circle me-2"></i>找到 ${result.count} 個檔案：<ul class="mt-2 mb-0">${list || '<li>無</li>'}</ul>`);
      } else {
        showAlert('configAlert', 'danger', '<i class="fas fa-exclamation-circle me-2"></i>' + result.message);
      }
    } catch (e) {
      showAlert('configAlert', 'danger', '<i class="fas fa-exclamation-circle me-2"></i>列出檔案失敗：' + e.message);
    }
  }

  async function manualImport() {
    if (!confirm('確定要立即執行匯入嗎？')) return;
    showAlert('configAlert', 'info', '<i class="fas fa-spinner fa-spin me-2"></i>正在執行匯入，請稍候…');
    try {
      const r = await fetch('/api/manual_import', { method: 'POST' });
      const result = await r.json();
      if (result.success) {
        showAlert('configAlert', 'success', '<i class="fas fa-check-circle me-2"></i>' + result.message);
        setTimeout(() => loadJobs(), 1000);
      } else {
        showAlert('configAlert', 'danger', '<i class="fas fa-exclamation-circle me-2"></i>' + result.message);
      }
    } catch (e) {
      showAlert('configAlert', 'danger', '<i class="fas fa-exclamation-circle me-2"></i>匯入失敗：' + e.message);
    }
  }

  // ───── 任務列表 ─────
  async function loadJobs() {
    document.getElementById('jobsLoading').style.display = 'block';
    document.getElementById('jobsEmpty').style.display = 'none';
    document.getElementById('jobsTableContainer').style.display = 'none';

    try {
      const r = await fetch('/api/import_jobs?limit=50');
      const result = await r.json();
      document.getElementById('jobsLoading').style.display = 'none';
      if (result.success && result.data.length > 0) {
        document.getElementById('jobsTableContainer').style.display = 'block';
        renderJobs(result.data);
      } else {
        document.getElementById('jobsEmpty').style.display = 'block';
      }
    } catch (e) {
      document.getElementById('jobsLoading').style.display = 'none';
      document.getElementById('jobsEmpty').style.display = 'block';
      console.error('載入任務列表失敗:', e);
    }
  }

  function renderJobs(jobs) {
    const tbody = document.getElementById('jobsTableBody');
    tbody.innerHTML = '';
    jobs.forEach(job => {
      const tr = document.createElement('tr');
      const fileName = job.drive_file_name || 'N/A';
      const errorMsg = job.error_message || '—';
      const isRunning = job.status === 'downloading' || job.status === 'importing';

      tr.innerHTML = `
        <td><span class="ai-jobtable__id">#${job.id}</span></td>
        <td><span class="ai-jobtable__file"><i class="fas fa-file-excel"></i>${escapeHtml(fileName)}</span></td>
        <td><span class="ai-status ai-status--${job.status}">${getStatusText(job.status)}</span></td>
        <td style="min-width: 160px;">
          <div class="ai-progress">
            <div class="ai-progress__bar" style="width: ${job.progress_percent}%"
                 role="progressbar" aria-valuenow="${job.progress_percent}" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <span class="ai-progress__label">${Math.round(job.progress_percent)}% · ${escapeHtml(job.current_step || '')}</span>
        </td>
        <td class="text-center">
          <span class="ai-count ai-count--ok">${job.success_rows || 0}</span>
          <span class="text-muted mx-1">/</span>
          <span class="ai-count ai-count--total">${job.total_rows || 0}</span>
        </td>
        <td><span class="ai-jobtable__time">${formatTime(job.started_at)}</span></td>
        <td><span class="ai-jobtable__time">${formatTime(job.completed_at)}</span></td>
        <td class="ai-jobtable__error">${escapeHtml(errorMsg)}</td>
        <td class="text-center">
          ${isRunning
            ? `<button class="btn btn-sm btn-outline-danger" onclick="failJob(${job.id})" title="取消任務"><i class="fas fa-times"></i></button>`
            : '<span class="text-muted">—</span>'}
        </td>
      `;
      tbody.appendChild(tr);
    });
  }

  // ───── 工具 ─────
  function escapeHtml(text) {
    if (!text) return '';
    const d = document.createElement('div');
    d.textContent = text;
    return d.innerHTML;
  }

  function getStatusText(status) {
    return ({
      'pending': '⏳ 等待中',
      'downloading': '⬇️ 下載中',
      'importing': '📥 匯入中',
      'completed': '✅ 已完成',
      'failed': '❌ 失敗'
    })[status] || status;
  }

  function formatTime(timeStr) {
    if (!timeStr) return '—';
    return new Date(timeStr).toLocaleString('zh-TW', {
      year: 'numeric', month: '2-digit', day: '2-digit',
      hour: '2-digit', minute: '2-digit'
    });
  }

  function showAlert(elementId, type, message) {
    const el = document.getElementById(elementId);
    el.innerHTML = `
      <div class="alert alert-${type} alert-dismissible fade show" role="alert">
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>`;
    if (type === 'success' || type === 'danger') {
      setTimeout(() => {
        const a = el.querySelector('.alert');
        if (a) bootstrap.Alert.getOrCreateInstance(a).close();
      }, 5000);
    }
  }

  // ───── 手動上傳 ─────
  async function uploadManualFile() {
    const input = document.getElementById('manualUploadFile');
    const file = input.files[0];
    if (!file) {
      showAlert('uploadAlert', 'warning', '<i class="fas fa-exclamation-triangle me-2"></i>請先選擇檔案');
      return;
    }
    if (!file.name.includes('即時業績') || !file.name.includes('當日')) {
      if (!confirm('檔名似乎不符合格式（應包含「即時業績」和「當日」），確定要繼續嗎？')) return;
    }
    const formData = new FormData();
    formData.append('file', file);
    showAlert('uploadAlert', 'info', '<i class="fas fa-spinner fa-spin me-2"></i>正在上傳並匯入檔案，請稍候…');
    try {
      const r = await fetch('/api/import_excel', { method: 'POST', body: formData });
      const result = await r.json();
      if (result.status === 'success') {
        showAlert('uploadAlert', 'success',
          `<i class="fas fa-check-circle me-2"></i>${result.message}<br><small>資料表：${result.table} · 共 ${result.rows} 筆</small>`);
        input.value = '';
        setTimeout(() => loadJobs(), 1000);
      } else {
        showAlert('uploadAlert', 'danger', '<i class="fas fa-exclamation-circle me-2"></i>' + result.message);
      }
    } catch (e) {
      showAlert('uploadAlert', 'danger', '<i class="fas fa-exclamation-circle me-2"></i>上傳失敗：' + e.message);
    }
  }

  async function resetStuckJobs() {
    if (!confirm('確定要重置所有卡住超過 1 小時的任務嗎？')) return;
    try {
      const r = await fetch('/api/reset_stuck_jobs', { method: 'POST' });
      const result = await r.json();
      if (result.success) {
        alert(result.message);
        loadJobs();
      } else {
        alert('重置失敗：' + result.message);
      }
    } catch (e) {
      alert('重置失敗：' + e.message);
    }
  }

  async function failJob(jobId) {
    if (!confirm(`確定要取消任務 #${jobId} 嗎？`)) return;
    try {
      const r = await fetch(`/api/import_jobs/${jobId}/fail`, { method: 'POST' });
      const result = await r.json();
      if (result.success) { alert(result.message); loadJobs(); }
      else { alert('取消失敗：' + result.message); }
    } catch (e) {
      alert('取消失敗：' + e.message);
    }
  }

  // ───── 初始化 ─────
  loadConfig();
  loadJobs();
  setInterval(loadJobs, 10000);
</script>
{% endblock %}