<template>
  <div class="bg-base-100 flex flex-col gap-7">
    <!-- 控制面板 -->
    <div class="card bg-base-200 shadow-xl mx-5">
      <div class="card-body">
        <h2 class="card-title text-primary">
          <Settings class="w-6 h-6" />
          HDMI视频流控制面板
        </h2>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <!-- 板卡信息 -->
          <div class="stats shadow">
            <div class="stat bg-base-100">
              <div class="stat-figure text-primary">
                <div
                  class="badge"
                  :class="endpoint ? 'badge-success' : 'badge-warning'"
                >
                  {{ endpoint ? "已连接" : "未配置" }}
                </div>
              </div>
              <div class="stat-title">板卡状态</div>
              <div class="stat-value text-primary">HDMI</div>
              <div class="stat-desc">
                {{
                  endpoint
                    ? `板卡: ${endpoint.boardId.substring(0, 8)}...`
                    : "请先连接板卡"
                }}
              </div>
            </div>
          </div>

          <!-- 连接状态 -->
          <div class="stats shadow">
            <div class="stat bg-base-100">
              <div class="stat-figure text-secondary">
                <Video class="w-8 h-8" />
              </div>
              <div class="stat-title">视频状态</div>
              <div class="stat-value text-secondary">
                {{ isPlaying ? "播放中" : "未播放" }}
              </div>
              <div class="stat-desc">{{ videoStatus }}</div>
            </div>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="card-actions justify-end mt-4">
          <button
            class="btn btn-outline btn-primary"
            @click="refreshEndpoint"
            :disabled="loading"
          >
            <RefreshCw v-if="loading" class="animate-spin h-4 w-4 mr-2" />
            <RefreshCw v-else class="h-4 w-4 mr-2" />
            {{ loading ? "刷新中..." : "刷新连接" }}
          </button>
          <button
            class="btn btn-primary"
            @click="testConnection"
            :disabled="testing || !endpoint"
          >
            <RefreshCw v-if="testing" class="animate-spin h-4 w-4 mr-2" />
            <TestTube v-else class="h-4 w-4 mr-2" />
            {{ testing ? "测试中..." : "测试连接" }}
          </button>
        </div>
      </div>
    </div>

    <!-- 视频预览区域 -->
    <div class="card bg-base-200 shadow-xl mx-5">
      <div class="card-body">
        <h2 class="card-title text-primary">
          <Video class="w-6 h-6" />
          HDMI视频预览
        </h2>

        <div
          class="relative bg-black rounded-lg overflow-hidden cursor-pointer"
          :class="[
            { 'cursor-not-allowed': !isPlaying || hasVideoError || !endpoint },
          ]"
          style="aspect-ratio: 16/9"
          @click="handleVideoClick"
        >
          <!-- 视频播放器 - 使用img标签直接显示MJPEG流 -->
          <div
            v-show="isPlaying && endpoint"
            class="w-full h-full flex items-center justify-center"
          >
            <img
              :src="currentVideoSource"
              alt="HDMI视频流"
              class="max-w-full max-h-full object-contain"
              @error="handleVideoError"
              @load="handleVideoLoad"
            />
          </div>

          <!-- 错误信息显示 -->
          <div
            v-if="hasVideoError"
            class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-70"
          >
            <div class="card bg-error text-white shadow-lg w-full max-w-lg">
              <div class="card-body">
                <h3 class="card-title flex items-center gap-2">
                  <AlertTriangle class="h-6 w-6" />
                  HDMI视频流加载失败
                </h3>
                <p>无法连接到HDMI视频服务器，请检查以下内容：</p>
                <ul class="list-disc list-inside">
                  <li>HDMI输入设备是否已连接</li>
                  <li>板卡是否正常工作</li>
                  <li>网络连接是否正常</li>
                  <li>HDMI视频流服务是否已启动</li>
                </ul>
                <div class="card-actions justify-end mt-2">
                  <button
                    class="btn btn-sm btn-outline btn-primary"
                    @click="tryReconnect"
                  >
                    重试连接
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- 占位符 -->
          <div
            v-show="(!isPlaying && !hasVideoError) || !endpoint"
            class="absolute inset-0 flex items-center justify-center text-white"
          >
            <div class="text-center">
              <Video class="w-16 h-16 mx-auto mb-4 opacity-50" />
              <p class="text-lg opacity-75">{{ videoStatus }}</p>
              <p class="text-sm opacity-60 mt-2">
                {{
                  endpoint
                    ? '点击"播放HDMI视频流"按钮开始查看实时视频'
                    : "请先刷新连接以获取板卡信息"
                }}
              </p>
            </div>
          </div>
        </div>

        <!-- 视频控制 -->
        <div class="flex justify-between items-center mt-4" v-if="endpoint">
          <div class="text-sm text-base-content/70">
            MJPEG地址:
            <code class="bg-base-300 px-2 py-1 rounded text-xs">{{
              endpoint.mjpegUrl
            }}</code>
          </div>
          <div class="space-x-2">
            <div class="dropdown dropdown-hover dropdown-top dropdown-end">
              <div
                tabindex="0"
                role="button"
                class="btn btn-sm btn-outline btn-accent"
              >
                <MoreHorizontal class="w-4 h-4 mr-1" />
                更多功能
              </div>
              <ul
                tabindex="0"
                class="dropdown-content z-[1] menu p-2 shadow bg-base-200 rounded-box w-52"
              >
                <li>
                  <a @click="openInNewTab(endpoint.videoUrl)">
                    <ExternalLink class="w-4 h-4" />
                    在新标签打开视频页面
                  </a>
                </li>
                <li>
                  <a @click="takeSnapshot">
                    <Camera class="w-4 h-4" />
                    获取并下载快照
                  </a>
                </li>
                <li>
                  <a @click="copyToClipboard(endpoint.mjpegUrl)">
                    <Copy class="w-4 h-4" />
                    复制MJPEG地址
                  </a>
                </li>
              </ul>
            </div>
            <button
              class="btn btn-success btn-sm"
              @click="startStream"
              :disabled="isPlaying || !endpoint"
            >
              <Play class="w-4 h-4 mr-1" />
              播放HDMI视频流
            </button>
            <button
              class="btn btn-error btn-sm"
              @click="stopStream"
              :disabled="!isPlaying"
            >
              <Square class="w-4 h-4 mr-1" />
              停止视频流
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 日志区域 -->
    <div class="card bg-base-200 shadow-xl mx-5">
      <div class="card-body">
        <h2 class="card-title text-primary">
          <FileText class="w-6 h-6" />
          操作日志
        </h2>

        <div class="bg-base-300 rounded-lg p-4 h-48 overflow-y-auto">
          <div
            v-for="(log, index) in logs"
            :key="index"
            class="text-sm font-mono mb-1"
          >
            <span class="text-base-content/50"
              >[{{ formatTime(log.time) }}]</span
            >
            <span :class="getLogClass(log.level)">{{ log.message }}</span>
          </div>
          <div
            v-if="logs.length === 0"
            class="text-base-content/50 text-center py-8"
          >
            暂无日志记录
          </div>
        </div>

        <div class="card-actions justify-end mt-2">
          <button class="btn btn-outline btn-sm" @click="clearLogs">
            清空日志
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import {
  Settings,
  Video,
  RefreshCw,
  TestTube,
  Play,
  Square,
  ExternalLink,
  Camera,
  Copy,
  FileText,
  AlertTriangle,
  MoreHorizontal,
} from "lucide-vue-next";
import {
  HdmiVideoStreamClient,
  type HdmiVideoStreamEndpoint,
} from "@/APIClient";
import { AuthManager } from "@/utils/AuthManager";
import { useAlertStore } from "@/components/Alert";

// Alert系统
const alert = useAlertStore();

// 状态管理
const loading = ref(false);
const testing = ref(false);
const isPlaying = ref(false);
const hasVideoError = ref(false);
const videoStatus = ref("未连接");

// HDMI视频流数据
const endpoint = ref<HdmiVideoStreamEndpoint | null>(null);
const currentVideoSource = ref("");

// 日志系统
interface LogEntry {
  time: Date;
  level: "info" | "success" | "warning" | "error";
  message: string;
}

const logs = ref<LogEntry[]>([]);

// 添加日志
function addLog(level: LogEntry["level"], message: string) {
  logs.value.unshift({
    time: new Date(),
    level,
    message,
  });

  // 保持最近100条日志
  if (logs.value.length > 100) {
    logs.value = logs.value.slice(0, 100);
  }
}

// 格式化时间
function formatTime(date: Date): string {
  return date.toLocaleTimeString();
}

// 获取日志样式类
function getLogClass(level: LogEntry["level"]): string {
  switch (level) {
    case "success":
      return "text-success";
    case "warning":
      return "text-warning";
    case "error":
      return "text-error";
    default:
      return "text-base-content";
  }
}

// 清空日志
function clearLogs() {
  logs.value = [];
  addLog("info", "日志已清空");
}

// 刷新HDMI视频流端点
async function refreshEndpoint() {
  loading.value = true;
  try {
    addLog("info", "正在获取HDMI视频流端点...");

    const client = AuthManager.createClient(HdmiVideoStreamClient);
    const result = await client.getMyEndpoint();

    if (result) {
      endpoint.value = result;
      videoStatus.value = "已连接板卡，可以播放视频流";
      addLog(
        "success",
        `成功获取HDMI视频流端点，板卡ID: ${result.boardId.substring(0, 8)}...`,
      );
      alert?.success("HDMI视频流连接成功");
    } else {
      endpoint.value = null;
      videoStatus.value = "无法获取板卡信息";
      addLog("error", "未找到绑定的板卡或板卡未配置HDMI输入");
      alert?.error("未找到绑定的板卡");
    }
  } catch (error) {
    console.error("获取HDMI视频流端点失败:", error);
    endpoint.value = null;
    videoStatus.value = "连接失败";
    addLog("error", `获取HDMI视频流端点失败: ${error}`);
    alert?.error("获取HDMI视频流信息失败");
  } finally {
    loading.value = false;
  }
}

// 测试连接
async function testConnection() {
  if (!endpoint.value) {
    alert?.warn("请先刷新连接获取板卡信息");
    return;
  }

  testing.value = true;
  try {
    addLog("info", "正在测试HDMI视频流连接...");

    // 尝试获取快照来测试连接
    const response = await fetch(endpoint.value.snapshotUrl, {
      method: "GET",
      headers: {
        "Cache-Control": "no-cache",
      },
    });

    if (response.ok) {
      addLog("success", "HDMI视频流连接测试成功");
      alert?.success("HDMI连接测试成功");
      videoStatus.value = "连接正常，可以播放视频流";
    } else {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }
  } catch (error) {
    console.error("HDMI视频流连接测试失败:", error);
    addLog("error", `连接测试失败: ${error}`);
    alert?.error("HDMI连接测试失败");
    videoStatus.value = "连接测试失败";
  } finally {
    testing.value = false;
  }
}

// 开始播放视频流
function startStream() {
  if (!endpoint.value) {
    alert?.warn("请先刷新连接获取板卡信息");
    return;
  }

  try {
    // 添加时间戳防止缓存
    const timestamp = new Date().getTime();
    currentVideoSource.value = `${endpoint.value.mjpegUrl}&t=${timestamp}`;
    isPlaying.value = true;
    hasVideoError.value = false;
    videoStatus.value = "正在加载视频流...";

    addLog("info", "开始播放HDMI视频流");
    alert?.success("开始播放HDMI视频流");
  } catch (error) {
    console.error("启动HDMI视频流失败:", error);
    addLog("error", `启动视频流失败: ${error}`);
    alert?.error("启动HDMI视频流失败");
  }
}

// 停止播放视频流
function stopStream() {
  isPlaying.value = false;
  currentVideoSource.value = "";
  videoStatus.value = "已停止播放";

  const client = AuthManager.createClient(HdmiVideoStreamClient);
  client.disableHdmiTransmission();

  addLog("info", "停止播放HDMI视频流");
  alert?.info("已停止播放HDMI视频流");
}

// 处理视频加载错误
function handleVideoError() {
  hasVideoError.value = true;
  videoStatus.value = "视频流加载失败";
  addLog("error", "HDMI视频流加载失败");
}

// 处理视频加载成功
function handleVideoLoad() {
  hasVideoError.value = false;
  videoStatus.value = "视频流播放中";
  addLog("success", "HDMI视频流加载成功");
}

// 处理视频点击
function handleVideoClick() {
  if (!isPlaying.value || hasVideoError.value || !endpoint.value) {
    return;
  }

  // 可以在这里添加点击视频的交互逻辑
  addLog("info", "视频画面被点击");
}

// 重试连接
function tryReconnect() {
  hasVideoError.value = false;
  if (endpoint.value) {
    startStream();
  }
}

// 在新标签页打开视频
function openInNewTab(url: string) {
  window.open(url, "_blank");
  addLog("info", "在新标签页打开HDMI视频页面");
}

// 获取快照
async function takeSnapshot() {
  if (!endpoint.value) {
    alert?.warn("请先刷新连接获取板卡信息");
    return;
  }

  try {
    addLog("info", "正在获取HDMI视频快照...");

    const response = await fetch(endpoint.value.snapshotUrl, {
      method: "GET",
      headers: {
        "Cache-Control": "no-cache",
      },
    });

    if (response.ok) {
      const blob = await response.blob();
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = `hdmi_snapshot_${new Date().toISOString().replace(/:/g, "-")}.jpg`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);

      addLog("success", "快照下载成功");
      alert?.success("HDMI快照下载成功");
    } else {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }
  } catch (error) {
    console.error("获取HDMI快照失败:", error);
    addLog("error", `获取快照失败: ${error}`);
    alert?.error("获取HDMI快照失败");
  }
}

// 复制到剪贴板
async function copyToClipboard(text: string) {
  try {
    await navigator.clipboard.writeText(text);
    addLog("success", "地址已复制到剪贴板");
    alert?.success("地址已复制到剪贴板");
  } catch (error) {
    console.error("复制到剪贴板失败:", error);
    addLog("error", "复制到剪贴板失败");
    alert?.error("复制到剪贴板失败");
  }
}

// 组件挂载时初始化
onMounted(() => {
  addLog("info", "HDMI视频流界面已初始化");
  refreshEndpoint();
});

// 组件卸载时清理
onUnmounted(() => {
  stopStream();
});
</script>

<style scoped>
/* 对焦动画效果 */
@keyframes focus-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
  }
}

.focus-animation {
  animation: focus-pulse 1s ease-out;
}
</style>
