/**
 * 录制、截图与录下来的东西。
 *
 * # 回放为什么可能失败
 *
 * 界面内回放走 Tauri 的资源协议，而那条协议只对 `tauri.conf.json` 里
 * `assetProtocol.scope` 白名单的目录生效。默认录制目录在白名单里；如果现场把输出目录
 * 改到别处，`<video>` 会加载失败——那时退回到"用系统播放器打开"，而不是让人以为文件坏了。
 *
 * # 为什么录制中是"条"而不是一行字
 *
 * 录制这件事最贵的错误是"以为在录，其实没在录"。所以正在录的每一路都占一条醒目的横条：
 * 跳动的红点、已写帧数、已经录了多久、写盘跟不上时丢了几帧。这些数字在录完之后就再也
 * 拿不到了，只能在当下看。
 */

import { useCallback, useEffect, useState } from "react";
import { convertFileSrc } from "@tauri-apps/api/core";

import { api } from "../lib/ipc";
import { bytes, since } from "../lib/format";
import type { MediaFileDto, Snapshot } from "../lib/types";

interface Props {
  snapshot: Snapshot;
  onError: (message: string) => void;
  onInfo: (message: string) => void;
}

export function MediaPanel({ snapshot, onError, onInfo }: Props) {
  const [files, setFiles] = useState<MediaFileDto[]>([]);
  const [playing, setPlaying] = useState<MediaFileDto | null>(null);
  const [playbackFailed, setPlaybackFailed] = useState(false);
  const [busy, setBusy] = useState(false);

  const refresh = useCallback(() => {
    void api.mediaFiles().then(setFiles, () => undefined);
  }, []);

  useEffect(() => {
    refresh();
    // 录制中每 2 秒刷一次列表：刚录完的那一段应该自己出现。
    const timer = window.setInterval(refresh, 2000);
    return () => window.clearInterval(timer);
  }, [refresh]);

  const active = snapshot.recordings.filter((recording) => recording.active);
  const cameras = snapshot.cameras.filter((camera) => camera.online).map((camera) => camera.id);

  const guard = (action: Promise<unknown>, onSuccess?: () => void) => {
    setBusy(true);
    void action
      .then(() => {
        onSuccess?.();
        refresh();
        return api.refresh();
      })
      .catch((err) => onError(err instanceof Error ? err.message : String(err)))
      .finally(() => setBusy(false));
  };

  const shotTargets = [snapshot.slots.cameraA, snapshot.slots.cameraB].filter(
    (id): id is number => id !== null,
  );

  return (
    <div className="media">
      <div className="media__actions">
        <button
          type="button"
          className="btn btn--primary"
          disabled={busy || cameras.length === 0}
          title={cameras.length === 0 ? "暂无在线图传板" : undefined}
          onClick={() => {
            guard(api.startRecording(cameras), () =>
              onInfo("已开始录制。退出程序时会先结束录制并保存文件。"),
            );
          }}
        >
          <span className="media__rec-glyph" aria-hidden="true" />
          录制全部在线画面
        </button>

        <button
          type="button"
          className="btn"
          disabled={busy || active.length === 0}
          onClick={() => {
            guard(api.stopRecording([]));
          }}
        >
          停止全部录制
        </button>

        <span className="media__divider" aria-hidden="true" />

        {shotTargets.map((camera) => (
          <button
            key={camera}
            type="button"
            className="btn btn--ghost"
            disabled={busy}
            onClick={() => {
              guard(api.screenshot(camera), () =>
                onInfo(
                  `已截图 0x${camera.toString(16).toUpperCase().padStart(8, "0")}（已保存到录制目录的 shots/）。`,
                ),
              );
            }}
          >
            截图
            <span className="num media__cam">0x{camera.toString(16).toUpperCase().padStart(8, "0")}</span>
          </button>
        ))}

        <span className="media__spacer" />

        <button
          type="button"
          className="btn btn--quiet"
          onClick={() => {
            void api
              .reveal(snapshot.config.recordingDir)
              .catch((err) => onError(err instanceof Error ? err.message : String(err)));
          }}
        >
          打开录制目录
        </button>
      </div>

      {active.length > 0 && (
        <div className="media__strips">
          {active.map((recording) => (
            <div key={recording.camera} className="strip">
              <span className="strip__pulse" aria-hidden="true" />
              <span className="strip__label label">REC</span>
              <span className="strip__cam num">{recording.cameraText}</span>
              <span className="strip__stats num">
                {recording.framesWritten} 帧
                <span className="strip__dot" />
                {since(recording.startedMs)}
                <span className="strip__dot" />
                {recording.inputFps.toFixed(1)} fps 输入
              </span>
              {recording.framesDropped > 0 && (
                <span
                  className="strip__warn"
                  title="写入速度不足时丢弃的帧数，可能影响回放速度。"
                >
                  丢 {recording.framesDropped} 帧
                </span>
              )}
              {recording.error && <span className="strip__error">ffmpeg：{recording.error}</span>}
              <button
                type="button"
                className="btn btn--ghost"
                onClick={() => {
                  guard(api.stopRecording([recording.camera]));
                }}
              >
                停止
              </button>
            </div>
          ))}
        </div>
      )}

      <div className="media__list">
        <div className="media__head">
          <span className="media__col media__col--kind">类型</span>
          <span className="media__col">文件</span>
          <span className="media__col media__col--size">大小</span>
          <span className="media__col media__col--acts">操作</span>
        </div>

        {files.length === 0 ? (
          <div className="media__empty">录制目录里还没有文件。</div>
        ) : (
          files.map((file) => (
            <div key={file.path} className="media__row">
              <span className="media__col media__col--kind">
                <span className={`media__kind media__kind--${file.kind}`}>
                  {file.kind === "video" ? "MP4" : "PNG"}
                </span>
              </span>

              <span className="media__col media__name" title={file.path}>
                {file.name}
              </span>

              <span className="media__col media__col--size num">{bytes(file.bytes)}</span>

              <span className="media__col media__col--acts">
                <button
                  type="button"
                  className="btn btn--quiet"
                  onClick={() => {
                    setPlaybackFailed(false);
                    setPlaying(file.kind === "video" ? file : null);
                    if (file.kind === "image") {
                      void api.openFile(file.path).catch(() => undefined);
                    }
                  }}
                >
                  {file.kind === "video" ? "播放" : "打开"}
                </button>
                <button
                  type="button"
                  className="btn btn--quiet"
                  onClick={() => {
                    void api
                      .reveal(file.path)
                      .catch((err) => onError(err instanceof Error ? err.message : String(err)));
                  }}
                >
                  定位
                </button>
              </span>
            </div>
          ))
        )}
      </div>

      {playing && (
        <div className="playback">
          <div className="playback__head">
            <span className="playback__label label">PLAYBACK</span>
            <span className="playback__name num">{playing.name}</span>
            <span className="playback__spacer" />
            <button type="button" className="btn btn--quiet" onClick={() => setPlaying(null)}>
              关闭
            </button>
          </div>

          {playbackFailed ? (
            <div className="playback__fallback">
              <p className="playback__warn">
                无法在界面内回放，可能是录制目录不在允许访问的范围内。可改用默认录制目录，
                或用系统播放器打开。
              </p>
              <button
                type="button"
                className="btn btn--primary"
                onClick={() => void api.openFile(playing.path).catch(() => undefined)}
              >
                用系统播放器打开
              </button>
            </div>
          ) : (
            <video
              className="playback__video"
              src={convertFileSrc(playing.path)}
              controls
              autoPlay
              onError={() => setPlaybackFailed(true)}
            />
          )}
        </div>
      )}
    </div>
  );
}