/**
 * Remotion Root 组件模板 - 支持 Studio 可视化编辑
 *
 * 使用说明：
 * 1. 将此文件复制到项目的 src/ 目录
 * 2. 确保 Video.tsx 和 Thumbnail.tsx 已创建
 * 3. 确保 timing.json 已放在 --public-dir 指定的目录中
 * 4. 运行 npx remotion studio --public-dir videos/{name}/ 即可在右侧面板编辑样式
 */

import { Composition, Still, staticFile } from "remotion";
import type { CalculateMetadataFunction } from "remotion";
import { z } from "zod";
import { Video } from "./Video";
import { ShortVideo } from "./ShortVideo";
import { Thumbnail } from "./Thumbnail";
import { fetchTimingData } from "./components";

// 【可视化编辑】: Zod Schema 定义可编辑属性
// Remotion Studio 会自动根据类型生成对应的编辑 UI
export const videoSchema = z.object({
  // 颜色设置
  primaryColor: z.string().describe("主色调（标题、强调元素）"),
  backgroundColor: z.string().describe("背景色"),
  textColor: z.string().describe("正文文字颜色"),
  accentColor: z.string().describe("强调色（CTA、高亮）"),

  // 字体大小 (1080p design space, auto scale(2) to 4K)
  titleSize: z.number().min(72).max(120).describe("标题字号 (hero/section title)"),
  subtitleSize: z.number().min(30).max(68).describe("副标题字号"),
  bodySize: z.number().min(24).max(40).describe("正文字号"),

  // 进度条设置 (native 4K, outside scale(2))
  showProgressBar: z.boolean().describe("显示底部进度条"),
  progressBarHeight: z.number().min(80).max(150).describe("进度条高度"),
  progressFontSize: z.number().min(28).max(60).describe("进度条文字大小"),
  progressActiveColor: z.string().describe("进度条激活颜色"),

  // 音频设置
  bgmVolume: z.number().min(0).max(0.3).step(0.01).describe("BGM 音量"),

  // 动画设置
  enableAnimations: z.boolean().describe("启用入场动画"),

  // 转场设置
  transitionType: z.enum(["fade", "slide", "wipe", "none"]).describe("章节转场效果"),
  transitionDuration: z.number().min(0).max(30).describe("转场时长(帧数, 30帧=1秒)"),

  // 方向设置
  orientation: z.enum(["horizontal", "vertical"]).describe("视频方向: horizontal(16:9) / vertical(9:16)"),

  // 图标设置
  iconStyle: z.enum(["lucide", "emoji", "mixed"]).describe("图标风格: lucide(SVG) / emoji / mixed"),
  iconAnimation: z.enum(["entrance", "none"]).describe("图标动画: entrance / none"),
});

// 类型导出，供 Video.tsx 使用
export type VideoProps = z.infer<typeof videoSchema>;

// 【可视化编辑】: 默认值 - Studio 会显示这些作为初始值
export const defaultVideoProps: VideoProps = {
  // 颜色 - DeepSeek 蓝色系
  primaryColor: "#4f6ef7",
  backgroundColor: "#ffffff",
  textColor: "#1a1a1a",
  accentColor: "#FF6B6B",

  // 字体大小 (1080p design space, auto scale(2) to 4K)
  // Reference: PluginComparison hero=72, Superpowers hero=120, section=80
  titleSize: 80,
  subtitleSize: 40,
  bodySize: 28,

  // 进度条 (native 4K, matches Superpowers reference)
  showProgressBar: true,
  progressBarHeight: 130,
  progressFontSize: 38,
  progressActiveColor: "#4f6ef7",

  // 音频
  bgmVolume: 0.05,

  // 动画
  enableAnimations: true,

  // 转场
  transitionType: "fade",
  transitionDuration: 15,

  // 方向
  orientation: "horizontal",

  // 图标
  iconStyle: "lucide",
  iconAnimation: "entrance",
};

// 视频 ID
const VIDEO_ID = "MyVideo";

// Dynamic duration from timing.json (loaded at render time via --public-dir)
const calculateVideoMetadata: CalculateMetadataFunction<VideoProps> = async ({
  props,
}) => {
  const timing = await fetchTimingData();
  return { durationInFrames: timing.total_frames, props };
};

export const RemotionRoot = () => {
  return (
    <>
      {/* 主视频 - 4K 分辨率，支持可视化编辑 */}
      <Composition
        id={VIDEO_ID}
        component={Video}
        durationInFrames={300}
        calculateMetadata={calculateVideoMetadata}
        fps={30}
        width={3840}
        height={2160}
        schema={videoSchema}
        defaultProps={defaultVideoProps}
      />

      {/* Vertical video - 9:16 for B站竖屏/短视频 */}
      <Composition
        id="MyVideoVertical"
        component={Video}
        durationInFrames={300}
        calculateMetadata={calculateVideoMetadata}
        fps={30}
        width={2160}
        height={3840}
        schema={videoSchema}
        defaultProps={{
          ...defaultVideoProps,
          orientation: "vertical",
          showProgressBar: false,
          titleSize: 96,
          subtitleSize: 48,
          bodySize: 36,
        }}
      />

      {/* V4 fix: ShortVideo composition — uses short_config.json for frame data.
          Render with: npx remotion render index.tsx ShortVideoComp --public-dir <shorts-dir>
          generate_shorts.py produces short_config.json with contentFrames, introFrames, etc. */}
      <Composition
        id="ShortVideoComp"
        component={ShortVideo}
        durationInFrames={300}
        calculateMetadata={async () => {
          try {
            const res = await fetch(staticFile("short_config.json"));
            const config = await res.json();
            return { durationInFrames: config.totalFrames || 300 };
          } catch {
            return { durationInFrames: 300 };
          }
        }}
        fps={30}
        width={2160}
        height={3840}
      />

      {/* 16:9 缩略图 - B站/YouTube 封面 */}
      <Still
        id="Thumbnail16x9"
        component={Thumbnail}
        width={1920}
        height={1080}
        defaultProps={{ aspectRatio: "16:9" }}
      />

      {/* 4:3 缩略图 - B站推荐流/动态 */}
      <Still
        id="Thumbnail4x3"
        component={Thumbnail}
        width={1200}
        height={900}
        defaultProps={{ aspectRatio: "4:3" }}
      />

      {/* 3:4 缩略图 - 小红书封面 */}
      <Still
        id="Thumbnail3x4"
        component={Thumbnail}
        width={1080}
        height={1440}
        defaultProps={{ aspectRatio: "3:4" }}
      />

      {/* 9:16 缩略图 - 竖屏封面 */}
      <Still
        id="Thumbnail9x16"
        component={Thumbnail}
        width={1080}
        height={1920}
        defaultProps={{ aspectRatio: "9:16" }}
      />
    </>
  );
};