<template>
  <div class="p-6 h-full overflow-auto">
    <!-- 页面标题 -->
    <div class="mb-6">
      <h1 class="text-2xl font-bold text-gray-900">SLS 日志分析</h1>
      <p class="text-gray-600 mt-1">查询和分析阿里云 SLS 日志，支持 AI 智能分析</p>
    </div>

    <!-- 状态提示 -->
    <div v-if="!config.sls_configured" class="mb-4 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
      <div class="flex items-center text-yellow-700">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
        </svg>
        <span>SLS 服务未配置，请在 .env 中设置 SLS_* 配置项</span>
      </div>
    </div>

    <div v-if="!config.ai_configured" class="mb-4 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
      <div class="flex items-center text-yellow-700">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
        </svg>
        <span>AI 服务未配置，请在下方配置 AI 提供商</span>
      </div>
    </div>

    <!-- 查询区域 -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
      <h2 class="text-lg font-semibold text-gray-700 mb-4">查询条件</h2>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
        <!-- 开始时间 -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">开始时间</label>
          <input
            v-model="queryParams.from"
            type="datetime-local"
            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
        </div>

        <!-- 结束时间 -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">结束时间</label>
          <input
            v-model="queryParams.to"
            type="datetime-local"
            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
        </div>

        <!-- 分析模式 -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">分析模式</label>
          <select
            v-model="queryParams.mode"
            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <option value="logs">仅日志分析</option>
            <option value="logs+code">日志 + 代码分析</option>
          </select>
        </div>

        <!-- 快捷时间 -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">快捷选择</label>
          <div class="flex gap-2">
            <button @click="setQuickTime('1h')" class="px-3 py-2 text-sm bg-gray-100 hover:bg-gray-200 rounded-md">1小时</button>
            <button @click="setQuickTime('6h')" class="px-3 py-2 text-sm bg-gray-100 hover:bg-gray-200 rounded-md">6小时</button>
            <button @click="setQuickTime('24h')" class="px-3 py-2 text-sm bg-gray-100 hover:bg-gray-200 rounded-md">24小时</button>
          </div>
        </div>
      </div>

      <!-- 查询语句 -->
      <div class="mb-4">
        <label class="block text-sm font-medium text-gray-700 mb-2">
          SLS 查询语句
          <span class="text-xs text-gray-500 font-normal ml-2">
            (AI 分析时留空默认查询 ERROR 和 WARNING 日志)
          </span>
        </label>
        <input
          v-model="queryParams.query"
          type="text"
          placeholder='留空默认: ERROR or WARNING，或自定义如: * | where level = "ERROR"'
          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
        >
        <div class="mt-1 text-xs text-gray-500">
          <details class="cursor-pointer">
            <summary class="text-blue-600 hover:text-blue-800">查询语法说明</summary>
            <div class="mt-2 p-3 bg-gray-50 rounded border border-gray-200 space-y-1">
              <p><strong>全文搜索：</strong></p>
              <p class="ml-2">• <code class="bg-white px-1">*</code> - 查询所有日志</p>
              <p class="ml-2">• <code class="bg-white px-1">ERROR</code> - 搜索包含 ERROR 的日志</p>
              <p class="ml-2">• <code class="bg-white px-1">ERROR and timeout</code> - 同时包含两个关键词</p>
              <p class="ml-2">• <code class="bg-white px-1">ERROR or WARNING</code> - 包含任一关键词</p>
              <p class="ml-2">• <code class="bg-white px-1">ERROR not success</code> - 包含 ERROR 但不包含 success</p>
              <p class="mt-2"><strong>SQL 分析语法（需要字段索引）：</strong></p>
              <p class="ml-2">• <code class="bg-white px-1">* | where level = "ERROR"</code> - 筛选 level 字段</p>
              <p class="ml-2">• <code class="bg-white px-1">* | where level in ("ERROR", "WARNING")</code> - 多个值</p>
              <p class="ml-2">• <code class="bg-white px-1">* | where status >= 500</code> - 数值比较</p>
            </div>
          </details>
        </div>
      </div>

      <!-- Logstore 选择 -->
      <div v-if="availableLogstores.length > 0" class="mb-4">
        <label class="block text-sm font-medium text-gray-700 mb-2">
          选择 Logstore ({{ queryParams.logstores.length }}/{{ availableLogstores.length }})
        </label>
        <div class="flex flex-wrap gap-2">
          <label
            v-for="logstore in availableLogstores"
            :key="logstore"
            class="inline-flex items-center px-3 py-2 border rounded-md cursor-pointer transition-colors"
            :class="queryParams.logstores.includes(logstore)
              ? 'bg-blue-50 border-blue-500 text-blue-700'
              : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50'"
          >
            <input
              type="checkbox"
              :value="logstore"
              v-model="queryParams.logstores"
              class="mr-2"
            >
            <span class="text-sm font-medium">{{ logstore }}</span>
          </label>
        </div>
        <div class="mt-2 flex gap-2">
          <button
            @click="queryParams.logstores = [...availableLogstores]"
            class="text-sm text-blue-600 hover:text-blue-800"
          >
            全选
          </button>
          <button
            @click="queryParams.logstores = []"
            class="text-sm text-blue-600 hover:text-blue-800"
          >
            清空
          </button>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="flex gap-3">
        <button
          @click="handleQuery"
          :disabled="loading || !config.sls_configured"
          class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center"
        >
          <svg v-if="loading" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
          </svg>
          查询日志
        </button>
        <button
          @click="handleAnalyze"
          :disabled="analyzing || !config.sls_configured || !config.ai_configured"
          class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center"
        >
          <svg v-if="analyzing" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
          </svg>
          AI 分析
        </button>
      </div>
    </div>

    <!-- Tab 切换 -->
    <div class="mb-4 border-b border-gray-200">
      <nav class="flex space-x-8">
        <button
          @click="activeTab = 'results'"
          :class="[
            'py-2 px-1 border-b-2 font-medium text-sm',
            activeTab === 'results'
              ? 'border-blue-500 text-blue-600'
              : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
          ]"
        >
          查询结果
        </button>
        <button
          @click="activeTab = 'analysis'"
          :class="[
            'py-2 px-1 border-b-2 font-medium text-sm',
            activeTab === 'analysis'
              ? 'border-blue-500 text-blue-600'
              : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
          ]"
        >
          AI 分析结果
        </button>
        <button
          @click="activeTab = 'history'"
          :class="[
            'py-2 px-1 border-b-2 font-medium text-sm',
            activeTab === 'history'
              ? 'border-blue-500 text-blue-600'
              : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
          ]"
        >
          历史报告
        </button>
        <button
          @click="activeTab = 'config'"
          :class="[
            'py-2 px-1 border-b-2 font-medium text-sm',
            activeTab === 'config'
              ? 'border-blue-500 text-blue-600'
              : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
          ]"
        >
          AI 配置
        </button>
      </nav>
    </div>

    <!-- 错误提示 -->
    <div v-if="error" class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700">
      {{ error }}
    </div>

    <!-- 查询结果 Tab -->
    <div v-if="activeTab === 'results'" class="bg-white rounded-lg shadow-sm border border-gray-200">
      <div v-if="!queryResult" class="p-8 text-center text-gray-500">
        请输入查询条件并点击"查询日志"
      </div>
      <div v-else>
        <!-- 统计信息 -->
        <div class="p-4 border-b border-gray-200 bg-gray-50">
          <div class="flex flex-col gap-3">
            <div class="flex items-center justify-between">
              <div class="flex gap-6">
                <span class="text-sm text-gray-600">总日志数: <strong>{{ queryResult.total }}</strong></span>
                <span v-for="(count, level) in queryResult.statistics?.by_level" :key="level" class="text-sm">
                  <span :class="getLevelClass(level)">{{ level }}: {{ count }}</span>
                </span>
              </div>
            </div>
            <!-- 按 Logstore 分组统计 -->
            <div v-if="queryResult.statistics?.by_logstore" class="flex flex-wrap gap-2">
              <span class="text-sm text-gray-600 font-medium">按 Logstore:</span>
              <span
                v-for="(data, logstore) in queryResult.statistics.by_logstore"
                :key="logstore"
                class="text-sm px-2 py-1 rounded"
                :class="data.success ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'"
              >
                {{ logstore }}: {{ data.count }}
                <span v-if="!data.success" class="text-xs">(失败)</span>
              </span>
            </div>
          </div>
        </div>
        <!-- 日志列表 -->
        <div class="overflow-x-auto max-h-96">
          <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50 sticky top-0">
              <tr>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">时间</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">级别</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">应用</th>
                <th v-if="queryResult.statistics?.by_logstore" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Logstore</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">消息</th>
              </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
              <tr v-for="(log, index) in queryResult.logs" :key="index" class="hover:bg-gray-50">
                <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">{{ log.time }}</td>
                <td class="px-4 py-2 whitespace-nowrap">
                  <span :class="getLevelBadgeClass(log.level)" class="px-2 py-1 rounded text-xs font-medium">
                    {{ log.level }}
                  </span>
                </td>
                <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-600">{{ log.app_name }}</td>
                <td v-if="queryResult.statistics?.by_logstore" class="px-4 py-2 whitespace-nowrap text-sm text-gray-600">
                  <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">{{ log._logstore || '-' }}</span>
                </td>
                <td class="px-4 py-2 text-sm text-gray-600 max-w-md truncate" :title="log.message">{{ log.message }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- AI 分析结果 Tab -->
    <div v-if="activeTab === 'analysis'" class="bg-white rounded-lg shadow-sm border border-gray-200">
      <div v-if="!analysisResult" class="p-8 text-center text-gray-500">
        请在历史报告中选择一个已完成的分析报告查看结果
      </div>
      <div v-else class="p-4">
        <!-- 状态提示 -->
        <div v-if="analysisResult.status === 'pending'" class="mb-4 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
          <div class="flex items-center text-yellow-700">
            <svg class="animate-spin h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            <span>分析任务正在处理中，请稍候...</span>
            <button @click="refreshReport(analysisResult.id)" class="ml-4 text-blue-600 hover:text-blue-800 text-sm">
              刷新状态
            </button>
          </div>
        </div>
        <div v-else-if="analysisResult.status === 'failed'" class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg">
          <div class="text-red-700">
            <strong>分析失败:</strong> {{ analysisResult.error_message }}
          </div>
        </div>

        <!-- 元数据 -->
        <div class="mb-4 p-3 bg-gray-50 rounded-lg text-sm text-gray-600">
          <span>分析时间: {{ analysisResult.metadata?.analyzed_at || analysisResult.created_at }}</span>
          <span class="ml-4">总日志: {{ analysisResult.metadata?.total_logs ?? analysisResult.total_logs ?? 0 }}</span>
          <span v-if="analysisResult.metadata?.execution_time_ms" class="ml-4">耗时: {{ analysisResult.metadata.execution_time_ms }}ms</span>
          <span class="ml-4">
            状态:
            <span :class="getStatusClass(analysisResult.status)" class="px-2 py-0.5 rounded text-xs font-medium">
              {{ getStatusText(analysisResult.status) }}
            </span>
          </span>
        </div>

        <!-- 按应用展示结果 -->
        <div v-if="analysisResult.status === 'completed' && analysisResult.results">
          <div v-for="(result, appName) in analysisResult.results" :key="appName" class="mb-6 border border-gray-200 rounded-lg">
            <div class="p-4 bg-gray-50 border-b border-gray-200 flex items-center justify-between">
              <h3 class="font-semibold text-gray-800">{{ appName }}</h3>
              <span :class="getImpactClass(result.impact)" class="px-3 py-1 rounded-full text-sm font-medium">
                {{ result.impact || 'N/A' }}
              </span>
            </div>
            <div class="p-4">
              <div v-if="result.error" class="text-red-600">
                分析失败: {{ result.error }}
              </div>
              <div v-else>
                <p class="text-gray-700 mb-4">{{ result.summary }}</p>

                <!-- 异常列表 -->
                <div v-if="result.core_anomalies?.length" class="space-y-3">
                  <h4 class="font-medium text-gray-700">异常列表 ({{ result.core_anomalies.length }})</h4>
                  <div v-for="(anomaly, idx) in result.core_anomalies" :key="idx"
                       class="p-3 bg-gray-50 rounded-lg border-l-4"
                       :class="getAnomalyBorderClass(anomaly.type)">
                    <div class="flex items-center gap-2 mb-2">
                      <span class="px-2 py-0.5 bg-gray-200 rounded text-xs">{{ anomaly.type }}</span>
                      <span class="px-2 py-0.5 bg-blue-100 text-blue-700 rounded text-xs">{{ anomaly.classification }}</span>
                      <span class="text-sm text-gray-500">x{{ anomaly.count }}</span>
                    </div>
                    <!-- 原始日志示例 -->
                    <div v-if="anomaly.sample" class="mb-2 p-2 bg-gray-100 rounded border border-gray-200 overflow-x-auto">
                      <p class="text-xs text-gray-500 mb-1"><strong>原始日志:</strong></p>
                      <pre class="text-xs text-gray-700 whitespace-pre-wrap break-all font-mono">{{ anomaly.sample }}</pre>
                    </div>
                    <p class="text-sm text-gray-700 mb-1"><strong>可能原因:</strong> {{ anomaly.possible_cause }}</p>
                    <p class="text-sm text-gray-600"><strong>建议:</strong> {{ anomaly.suggestion }}</p>
                  </div>
                </div>

                <!-- 代码深度排查结果 -->
                <div v-if="result.code_analysis" class="mt-6 border-t border-gray-200 pt-4">
                  <h4 class="font-medium text-purple-700 mb-3 flex items-center">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                    代码深度排查
                    <span class="ml-2 px-2 py-0.5 bg-purple-100 text-purple-700 rounded text-xs">
                      {{ result.code_analysis.tool === 'codex' ? 'Codex' : 'Claude CLI' }}
                    </span>
                  </h4>
                  <div v-if="result.code_analysis.success" class="bg-purple-50 p-4 rounded-lg border border-purple-200">
                    <div class="text-xs text-gray-500 mb-3">
                      <span class="font-medium">项目路径:</span> {{ result.code_analysis.repo_path }}
                    </div>
                    <pre class="whitespace-pre-wrap text-sm text-gray-800 font-mono leading-relaxed">{{ result.code_analysis.output }}</pre>
                  </div>
                  <div v-else class="bg-red-50 p-4 rounded-lg border border-red-200">
                    <p class="text-red-600 text-sm">
                      <strong>排查失败:</strong> {{ result.code_analysis.error }}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else-if="analysisResult.status === 'completed' && (!analysisResult.results || Object.keys(analysisResult.results).length === 0)" class="text-center text-gray-500 py-8">
          未找到匹配的日志或分析结果为空
        </div>
      </div>
    </div>

    <!-- 历史报告 Tab -->
    <div v-if="activeTab === 'history'" class="bg-white rounded-lg shadow-sm border border-gray-200">
      <div class="p-4 border-b border-gray-200 flex items-center justify-between">
        <h3 class="font-semibold text-gray-700">历史报告</h3>
        <button @click="loadHistory" :disabled="historyLoading" class="text-sm text-blue-600 hover:text-blue-800 flex items-center">
          <svg v-if="historyLoading" class="animate-spin h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
          </svg>
          刷新
        </button>
      </div>
      <div v-if="historyLoading && !historyReports.length" class="p-8 text-center text-gray-500">
        加载中...
      </div>
      <div v-else-if="!historyReports.length" class="p-8 text-center text-gray-500">
        暂无历史报告
      </div>
      <div v-else class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">ID</th>
              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">时间范围</th>
              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">模式</th>
              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">日志数</th>
              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">状态</th>
              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">创建时间</th>
              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">操作</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            <tr v-for="report in historyReports" :key="report.id" class="hover:bg-gray-50">
              <td class="px-4 py-2 text-sm text-gray-500">#{{ report.id }}</td>
              <td class="px-4 py-2 text-sm text-gray-600">{{ report.from_time }} ~ {{ report.to_time }}</td>
              <td class="px-4 py-2 text-sm text-gray-600">{{ report.mode }}</td>
              <td class="px-4 py-2 text-sm text-gray-600">{{ report.total_logs }}</td>
              <td class="px-4 py-2">
                <span :class="getStatusClass(report.status)" class="px-2 py-1 rounded text-xs font-medium">
                  {{ getStatusText(report.status) }}
                </span>
              </td>
              <td class="px-4 py-2 text-sm text-gray-500">{{ report.created_at }}</td>
              <td class="px-4 py-2">
                <button @click="viewReport(report.id)" class="text-blue-600 hover:text-blue-800 text-sm">
                  查看详情
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- AI 配置 Tab -->
    <div v-if="activeTab === 'config'" class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
      <h3 class="text-lg font-semibold text-gray-700 mb-4">AI 提供商配置</h3>

      <!-- 当前激活的提供商 -->
      <div v-if="config.active_ai_provider" class="mb-4 p-3 bg-green-50 border border-green-200 rounded-lg">
        <span class="text-green-700">当前使用: {{ config.active_ai_provider.name || config.active_ai_provider.key }}</span>
      </div>

      <!-- 提供商列表 -->
      <div class="space-y-4 mb-6">
        <div v-for="(provider, key) in config.ai_providers" :key="key"
             class="p-4 border border-gray-200 rounded-lg"
             :class="{'border-green-500 bg-green-50': config.active_ai_provider?.key === key}">
          <div class="flex items-center justify-between mb-2">
            <div class="flex items-center gap-2">
              <strong>{{ provider.name || key }}</strong>
              <span class="text-sm text-gray-500">{{ provider.model }}</span>
            </div>
            <div class="flex gap-2">
              <button
                v-if="config.active_ai_provider?.key !== key"
                @click="setActiveProvider(key)"
                class="px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded hover:bg-blue-200"
              >
                激活
              </button>
              <button
                v-if="key !== 'default'"
                @click="deleteProvider(key)"
                class="px-3 py-1 text-sm bg-red-100 text-red-700 rounded hover:bg-red-200"
              >
                删除
              </button>
            </div>
          </div>
          <div class="text-sm text-gray-600">
            <span>Endpoint: {{ provider.endpoint }}</span>
          </div>
        </div>
      </div>

      <!-- 添加新提供商 -->
      <div v-if="isAdmin" class="border-t border-gray-200 pt-4">
        <h4 class="font-medium text-gray-700 mb-3">添加新的 AI 提供商</h4>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">名称</label>
            <input v-model="newProvider.name" type="text" placeholder="例如: OpenAI" class="w-full px-3 py-2 border border-gray-300 rounded-md">
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Key (唯一标识)</label>
            <input v-model="newProvider.key" type="text" placeholder="例如: openai" class="w-full px-3 py-2 border border-gray-300 rounded-md">
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Endpoint</label>
            <input v-model="newProvider.endpoint" type="text" placeholder="https://api.openai.com/v1" class="w-full px-3 py-2 border border-gray-300 rounded-md">
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">API Key</label>
            <input v-model="newProvider.api_key" type="password" placeholder="sk-xxx" class="w-full px-3 py-2 border border-gray-300 rounded-md">
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Model</label>
            <input v-model="newProvider.model" type="text" placeholder="gpt-4o" class="w-full px-3 py-2 border border-gray-300 rounded-md">
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Temperature</label>
            <input v-model.number="newProvider.temperature" type="number" step="0.1" min="0" max="2" class="w-full px-3 py-2 border border-gray-300 rounded-md">
          </div>
        </div>
        <button
          @click="addProvider"
          :disabled="!newProvider.key || !newProvider.endpoint || !newProvider.api_key || !newProvider.model"
          class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
        >
          添加提供商
        </button>
      </div>

      <!-- 测试连接 -->
      <div class="border-t border-gray-200 pt-4 mt-4">
        <button @click="testAiConnection" :disabled="testingAi" class="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700">
          {{ testingAi ? '测试中...' : '测试 AI 连接' }}
        </button>
        <span v-if="aiTestResult" :class="aiTestResult.success ? 'text-green-600' : 'text-red-600'" class="ml-3">
          {{ aiTestResult.message }}
        </span>
      </div>

      <!-- 定时任务设置 -->
      <div v-if="isAdmin" class="border-t border-gray-200 pt-4 mt-4">
        <h4 class="font-medium text-gray-700 mb-3">定时任务设置</h4>
        <div class="p-4 bg-gray-50 rounded-lg space-y-4">
          <!-- 每日分析任务 -->
          <div class="flex items-center justify-between">
            <div>
              <span class="text-sm font-medium text-gray-700">每日自动分析</span>
              <p class="text-xs text-gray-500 mt-1">每天凌晨 2 点自动分析过去 24 小时的 ERROR 日志并推送到钉钉</p>
            </div>
            <button
              type="button"
              @click="config.settings.daily_schedule_enabled = !config.settings.daily_schedule_enabled; updateScheduleSettings()"
              :class="[
                'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
                config.settings.daily_schedule_enabled ? 'bg-blue-600' : 'bg-gray-200'
              ]"
            >
              <span
                :class="[
                  'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
                  config.settings.daily_schedule_enabled ? 'translate-x-5' : 'translate-x-0'
                ]"
              ></span>
            </button>
          </div>

          <!-- 每 4 小时分析任务 -->
          <div class="flex items-center justify-between border-t border-gray-200 pt-4">
            <div>
              <span class="text-sm font-medium text-gray-700">高频分析（每 4 小时）</span>
              <p class="text-xs text-gray-500 mt-1">每 4 小时自动分析过去 6 小时的 ERROR 日志并推送到钉钉</p>
            </div>
            <button
              type="button"
              @click="config.settings.schedule_enabled = !config.settings.schedule_enabled; updateScheduleSettings()"
              :class="[
                'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
                config.settings.schedule_enabled ? 'bg-blue-600' : 'bg-gray-200'
              ]"
            >
              <span
                :class="[
                  'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
                  config.settings.schedule_enabled ? 'translate-x-5' : 'translate-x-0'
                ]"
              ></span>
            </button>
          </div>

          <div v-if="config.settings.daily_schedule_enabled || config.settings.schedule_enabled" class="text-sm text-gray-600 border-t border-gray-200 pt-4">
            <p class="text-xs text-gray-500">
              注意：需要配置 Laravel 调度器才能生效。请确保服务器已配置 cron 任务：<br>
              <code class="bg-gray-100 px-1 rounded">* * * * * cd /path/to/project && php artisan schedule:run >> /dev/null 2>&1</code>
            </p>
            <p class="text-xs text-gray-500 mt-2">
              同时需要启动队列处理器来执行后台任务：<br>
              <code class="bg-gray-100 px-1 rounded">php artisan queue:work</code>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LogAnalysis',
  props: {
    isAdmin: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      activeTab: 'results',
      loading: false,
      analyzing: false,
      error: '',
      queryParams: {
        from: this.getDefaultFrom(),
        to: this.getDefaultTo(),
        query: '',
        mode: 'logs',
        logstores: []
      },
      availableLogstores: [],
      config: {
        sls_configured: false,
        ai_configured: false,
        ai_providers: {},
        active_ai_provider: null,
        app_env_map: {},
        settings: {
          schedule_enabled: false
        }
      },
      queryResult: null,
      analysisResult: null,
      historyReports: [],
      historyLoading: false,
      newProvider: {
        key: '',
        name: '',
        endpoint: '',
        api_key: '',
        model: 'gpt-4o',
        temperature: 0.3,
        timeout: 120,
        max_tokens: 4096,
        enabled: true
      },
      testingAi: false,
      aiTestResult: null
    };
  },
  async mounted() {
    await this.loadConfig();
    await this.loadLogstores();
  },
  watch: {
    activeTab(newTab) {
      if (newTab === 'history' && !this.historyReports.length) {
        this.loadHistory();
      }
    }
  },
  methods: {
    // 格式化日期为本地时间字符串 (YYYY-MM-DDTHH:mm)
    formatLocalDateTime(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      return `${year}-${month}-${day}T${hours}:${minutes}`;
    },
    getDefaultFrom() {
      const date = new Date();
      date.setHours(date.getHours() - 1);
      return this.formatLocalDateTime(date);
    },
    getDefaultTo() {
      return this.formatLocalDateTime(new Date());
    },
    setQuickTime(period) {
      const now = new Date();
      const from = new Date();

      if (period === '1h') from.setHours(now.getHours() - 1);
      else if (period === '6h') from.setHours(now.getHours() - 6);
      else if (period === '24h') from.setHours(now.getHours() - 24);

      this.queryParams.from = this.formatLocalDateTime(from);
      this.queryParams.to = this.formatLocalDateTime(now);
    },
    async loadConfig() {
      try {
        const response = await fetch('/api/log-analysis/config');
        const data = await response.json();
        if (data.success) {
          this.config = data.data;
        }
      } catch (error) {
        console.error('Failed to load config:', error);
      }
    },
    async loadLogstores() {
      try {
        const response = await fetch('/api/log-analysis/logstores');
        const data = await response.json();
        if (data.success) {
          this.availableLogstores = data.data.logstores;
          // 默认选中所有 logstore
          this.queryParams.logstores = [...this.availableLogstores];
        }
      } catch (error) {
        console.error('Failed to load logstores:', error);
      }
    },
    async handleQuery() {
      this.loading = true;
      this.error = '';
      this.queryResult = null;

      try {
        const response = await fetch('/api/log-analysis/query', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(this.queryParams)
        });
        const data = await response.json();

        if (data.success) {
          this.queryResult = data.data;
          this.activeTab = 'results';
        } else {
          this.error = data.message;
        }
      } catch (error) {
        this.error = error.message;
      } finally {
        this.loading = false;
      }
    },
    async handleAnalyze() {
      this.analyzing = true;
      this.error = '';

      try {
        const response = await fetch('/api/log-analysis/analyze', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(this.queryParams)
        });
        const data = await response.json();

        if (data.success) {
          // 切换到历史报告 tab 并刷新列表
          this.activeTab = 'history';
          await this.loadHistory();
          // 自动查看刚创建的报告
          if (data.data?.report_id) {
            await this.viewReport(data.data.report_id);
          }
        } else {
          this.error = data.message;
        }
      } catch (error) {
        this.error = error.message;
      } finally {
        this.analyzing = false;
      }
    },
    async loadHistory() {
      this.historyLoading = true;
      try {
        const response = await fetch('/api/log-analysis/reports');
        const data = await response.json();
        if (data.success) {
          this.historyReports = data.data.reports;
        }
      } catch (error) {
        console.error('Failed to load history:', error);
      } finally {
        this.historyLoading = false;
      }
    },
    async viewReport(id) {
      try {
        const response = await fetch(`/api/log-analysis/reports/${id}`);
        const data = await response.json();
        if (data.success) {
          this.analysisResult = data.data;
          this.activeTab = 'analysis';
        }
      } catch (error) {
        this.error = error.message;
      }
    },
    async setActiveProvider(key) {
      try {
        const response = await fetch('/api/log-analysis/config', {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ active_ai_provider: key })
        });
        const data = await response.json();
        if (data.success) {
          await this.loadConfig();
        } else {
          this.error = data.message;
        }
      } catch (error) {
        this.error = error.message;
      }
    },
    async addProvider() {
      const providers = { ...this.config.ai_providers };
      providers[this.newProvider.key] = {
        name: this.newProvider.name,
        endpoint: this.newProvider.endpoint,
        api_key: this.newProvider.api_key,
        model: this.newProvider.model,
        temperature: this.newProvider.temperature,
        timeout: this.newProvider.timeout,
        max_tokens: this.newProvider.max_tokens,
        enabled: true
      };

      try {
        const response = await fetch('/api/log-analysis/config', {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ ai_providers: providers })
        });
        const data = await response.json();
        if (data.success) {
          await this.loadConfig();
          this.newProvider = {
            key: '', name: '', endpoint: '', api_key: '',
            model: 'gpt-4o', temperature: 0.3, timeout: 120, max_tokens: 4096, enabled: true
          };
        } else {
          this.error = data.message;
        }
      } catch (error) {
        this.error = error.message;
      }
    },
    async deleteProvider(key) {
      if (!confirm(`确定删除提供商 "${key}" 吗？`)) return;

      const providers = { ...this.config.ai_providers };
      delete providers[key];

      try {
        const response = await fetch('/api/log-analysis/config', {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ ai_providers: providers })
        });
        const result = await response.json();
        if (result.success) {
          await this.loadConfig();
        }
      } catch (error) {
        this.error = error.message;
      }
    },
    async testAiConnection() {
      this.testingAi = true;
      this.aiTestResult = null;
      try {
        const response = await fetch('/api/log-analysis/test-ai');
        this.aiTestResult = await response.json();
      } catch (error) {
        this.aiTestResult = { success: false, message: error.message };
      } finally {
        this.testingAi = false;
      }
    },
    async updateScheduleSettings() {
      try {
        const settings = { ...this.config.settings };
        const response = await fetch('/api/log-analysis/config', {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ settings })
        });
        const data = await response.json();
        if (!data.success) {
          this.error = data.message;
          // Revert the toggle
          this.config.settings.schedule_enabled = !this.config.settings.schedule_enabled;
        }
      } catch (error) {
        this.error = error.message;
        // Revert the toggle
        this.config.settings.schedule_enabled = !this.config.settings.schedule_enabled;
      }
    },
    getLevelClass(level) {
      const classes = {
        'ERROR': 'text-red-600',
        'WARN': 'text-yellow-600',
        'WARNING': 'text-yellow-600',
        'INFO': 'text-blue-600',
        'DEBUG': 'text-gray-600'
      };
      return classes[level?.toUpperCase()] || 'text-gray-600';
    },
    getLevelBadgeClass(level) {
      const classes = {
        'ERROR': 'bg-red-100 text-red-700',
        'WARN': 'bg-yellow-100 text-yellow-700',
        'WARNING': 'bg-yellow-100 text-yellow-700',
        'INFO': 'bg-blue-100 text-blue-700',
        'DEBUG': 'bg-gray-100 text-gray-700'
      };
      return classes[level?.toUpperCase()] || 'bg-gray-100 text-gray-700';
    },
    getImpactClass(impact) {
      const classes = {
        'high': 'bg-red-100 text-red-700',
        'medium': 'bg-yellow-100 text-yellow-700',
        'low': 'bg-green-100 text-green-700'
      };
      return classes[impact] || 'bg-gray-100 text-gray-700';
    },
    getAnomalyBorderClass(type) {
      const classes = {
        'error': 'border-red-500',
        'warning': 'border-yellow-500',
        'performance': 'border-orange-500',
        'security': 'border-purple-500'
      };
      return classes[type] || 'border-gray-500';
    },
    getStatusClass(status) {
      const classes = {
        'pending': 'bg-yellow-100 text-yellow-700',
        'completed': 'bg-green-100 text-green-700',
        'failed': 'bg-red-100 text-red-700'
      };
      return classes[status] || 'bg-gray-100 text-gray-700';
    },
    getStatusText(status) {
      const texts = {
        'pending': '处理中',
        'completed': '已完成',
        'failed': '失败'
      };
      return texts[status] || status;
    },
    async refreshReport(id) {
      try {
        const response = await fetch(`/api/log-analysis/reports/${id}`);
        const data = await response.json();
        if (data.success) {
          this.analysisResult = data.data;
          // 如果还在处理中，5秒后自动刷新
          if (data.data.status === 'pending') {
            setTimeout(() => {
              if (this.analysisResult?.id === id && this.analysisResult?.status === 'pending') {
                this.refreshReport(id);
              }
            }, 5000);
          }
        }
      } catch (error) {
        this.error = error.message;
      }
    }
  }
};
</script>
