"use client";
import { transformDirectorMotion } from "@/lib/video-canvas/director-extensions";
import { useEffect, useRef, useState } from "react";
import { toast } from "sonner";
import {
  presetDirectorMotion,
  sampleDirectorMotion,
  readDirectorMotion,
  resizeDirectorMotion,
  validDirectorPose,
  type DirectorMotion,
  type DirectorPose,
} from "@/lib/video-canvas/director-motion";
export function DirectorMotionPanel({
  motion,
  hasObjectMotion = false,
  externalSeek,
  compact = false,
  pose,
  disabled,
  onChange,
  onPose,
  onPreview,
  onExport,
  onSend,
  exportProgress,
  onCancel,
  onOverview,
}: {
  compact?: boolean;
  hasObjectMotion?: boolean;
  externalSeek?: { time: number; editing?: boolean };
  motion: DirectorMotion;
  pose: DirectorPose;
  disabled: boolean;
  onChange: (motion: DirectorMotion) => void;
  onPose: (pose: DirectorPose) => void;
  onPreview: (time: number | null) => void;
  onExport: () => void;
  onSend: () => void;
  exportProgress: number | null;
  onCancel: () => void;
  onOverview: () => void;
}) {
  const [autoKeyframe, setAutoKeyframe] = useState(false);
  const previousPose = useRef(JSON.stringify(pose));
  const [time, setTime] = useState(0),
    [playing, setPlaying] = useState(false),
    [preview, setPreview] = useState(false);
  const timeRef = useRef(time),
    latest = useRef({ motion, onPreview });
  latest.current = { motion, onPreview };
  timeRef.current = time;
  const input = useRef<HTMLInputElement>(null);
  const button =
    "rounded border border-white/15 px-2 py-1.5 text-xs hover:bg-white/10 disabled:opacity-40";
  const seek = (t: number) => {
    const next = Math.max(0, Math.min(motion.duration, t));
    setTime(next);
    timeRef.current = next;
    setPreview(true);
    onPreview(next);
  };
  const edit = () => {
    if (preview) {
      const sampled = sampleDirectorMotion(motion, timeRef.current);
      if (sampled) onPose(sampled);
    }
    setPlaying(false);
    setPreview(false);
    onPreview(null);
  };
  useEffect(() => {
    if (!playing) return;
    let frame = 0,
      previous = 0;
    const tick = (now: number) => {
      const m = latest.current.motion;
      const next = timeRef.current + (previous ? (now - previous) / 1000 : 0);
      previous = now;
      const t = next >= m.duration ? (m.loop ? next % m.duration : m.duration) : next;
      timeRef.current = t;
      setTime(t);
      latest.current.onPreview(t);
      if (next >= m.duration && !m.loop) {
        setPlaying(false);
        return;
      }
      frame = requestAnimationFrame(tick);
    };
    const hide = () => {
      if (document.hidden) {
        setPlaying(false);
        toast.info("页面已切换，运镜预览已暂停");
      }
    };
    frame = requestAnimationFrame(tick);
    document.addEventListener("visibilitychange", hide);
    return () => {
      cancelAnimationFrame(frame);
      document.removeEventListener("visibilitychange", hide);
    };
  }, [playing]);
  useEffect(() => {
    if (disabled) setPlaying(false);
  }, [disabled]);
  useEffect(() => {
    if (timeRef.current > motion.duration) {
      setTime(motion.duration);
      onPreview(preview ? motion.duration : null);
    }
  }, [motion.duration, onPreview, preview]);
  const add = () => {
    if (!validDirectorPose(pose)) {
      toast.error("相机不能与注视点重合");
      return;
    }
    const existing = motion.keyframes.find((k) => Math.abs(k.time - time) < 0.01);
    if (!existing && motion.keyframes.length >= 100) {
      toast.error("最多支持 100 个关键帧");
      return;
    }
    const key = {
      id: existing?.id || crypto.randomUUID(),
      time: existing?.time ?? Number(time.toFixed(2)),
      position: [...pose.position] as DirectorPose["position"],
      target: [...pose.target] as DirectorPose["target"],
      fov: pose.fov,
    };
    onChange({
      ...motion,
      keyframes: [...motion.keyframes.filter((k) => k.id !== key.id), key].sort(
        (a, b) => a.time - b.time,
      ),
    });
  };
  useEffect(() => {
    const signature = JSON.stringify(pose),
      changed = signature !== previousPose.current;
    previousPose.current = signature;
    if (autoKeyframe && changed && !preview && !disabled) add();
  }, [pose, autoKeyframe, preview, disabled]);
  useEffect(() => {
    if (!externalSeek) return;
    setPlaying(false);
    setTime(externalSeek.time);
    timeRef.current = externalSeek.time;
    setPreview(!externalSeek.editing);
  }, [externalSeek]);
  const downloadJson = () => {
    const url = URL.createObjectURL(
      new Blob([JSON.stringify({ version: 1, motion }, null, 2)], {
        type: "application/json",
      }),
    );
    const a = document.createElement("a");
    a.href = url;
    a.download = "director-motion.json";
    a.click();
    setTimeout(() => URL.revokeObjectURL(url), 1000);
  };
  return (
    <section className="space-y-3 border-t border-white/15 pt-3" aria-label="镜头轨迹">
      <div className="text-sm font-semibold">镜头轨迹</div>
      <fieldset
        disabled={disabled}
        className={
          compact
            ? "grid grid-cols-1 gap-3 sm:grid-cols-3 lg:grid-cols-4 disabled:opacity-50"
            : "space-y-3 disabled:opacity-50"
        }
      >
        <div className="grid grid-cols-2 gap-2">
          <label className="text-xs">
            时长（秒）
            <input
              aria-label="运镜时长"
              type="number"
              min={2}
              max={15}
              step={1}
              value={motion.duration}
              className="mt-1 w-full rounded bg-white/10 p-1"
              onChange={(e) => {
                const n = Number(e.target.value);
                if (n >= 2 && n <= 15) {
                  edit();
                  onChange(resizeDirectorMotion(motion, n));
                }
              }}
            />
          </label>
          <label className="text-xs">
            速度
            <select
              aria-label="运镜插值"
              value={motion.easing}
              className="mt-1 w-full rounded bg-[#303030] p-1"
              onChange={(e) =>
                onChange({
                  ...motion,
                  easing: e.target.value as DirectorMotion["easing"],
                })
              }
            >
              <option value="smooth">缓入缓出</option>
              <option value="linear">匀速</option>
            </select>
          </label>
        </div>
        <div className="flex flex-wrap gap-1">
          {(["push", "pull", "orbit", "pan"] as const).map((kind, i) => (
            <button
              type="button"
              className={button}
              key={kind}
              onClick={() => {
                const base =
                  (preview ? sampleDirectorMotion(motion, timeRef.current) : pose) || pose;
                if (!validDirectorPose(base)) {
                  toast.error("相机不能与注视点重合");
                  return;
                }
                edit();
                setTime(0);
                onChange(presetDirectorMotion(base, kind, motion.duration));
              }}
            >
              {["推进轨迹", "拉远轨迹", "环绕轨迹", "横移轨迹"][i]}
            </button>
          ))}
        </div>
        <button
          type="button"
          className={button}
          disabled={motion.keyframes.length < 2 && !hasObjectMotion}
          onClick={() => {
            edit();
            onOverview();
          }}
        >
          查看完整轨迹
        </button>
        <p className="text-xs text-white/50">
          预设会替换当前轨迹；黄色线条为相机路径。编辑机位后，在指定时间记录关键帧。
        </p>
        <label className="block text-xs">
          时间 {time.toFixed(2)} / {motion.duration.toFixed(2)} 秒
          <input
            aria-label="运镜时间轴"
            className="w-full"
            type="range"
            min={0}
            max={motion.duration}
            step={0.01}
            value={time}
            onChange={(e) => {
              setPlaying(false);
              seek(Number(e.target.value));
            }}
          />
        </label>
        <div className="flex flex-wrap gap-1">
          <button
            type="button"
            className={button}
            disabled={motion.keyframes.length < 2 && !hasObjectMotion}
            onClick={() => {
              if (playing) {
                setPlaying(false);
                return;
              }
              seek(time >= motion.duration ? 0 : time);
              setPlaying(true);
            }}
          >
            {playing ? "暂停运镜" : "播放运镜"}
          </button>
          <button
            type="button"
            className={button}
            onClick={() => {
              setPlaying(false);
              seek(0);
            }}
          >
            回到起点
          </button>
          <button type="button" className={button} onClick={edit}>
            编辑机位
          </button>
          <label className="flex items-center gap-1 text-xs">
            <input
              type="checkbox"
              aria-label="循环运镜"
              checked={motion.loop}
              onChange={(e) => onChange({ ...motion, loop: e.target.checked })}
            />
            循环
          </label>
        </div>
        <label className="flex items-center gap-2 text-xs">
          <input
            type="checkbox"
            aria-label="自动记录关键帧"
            checked={autoKeyframe}
            onChange={(e) => setAutoKeyframe(e.target.checked)}
          />
          编辑机位时自动记录当前帧
        </label>
        <div className="flex flex-wrap gap-1">
          <button
            type="button"
            className={button}
            disabled={!motion.keyframes.length}
            onClick={() => {
              edit();
              onChange(transformDirectorMotion(motion, [1, 0, 0], 0));
            }}
          >
            整条轨迹右移 1 米
          </button>
          <button
            type="button"
            className={button}
            disabled={!motion.keyframes.length}
            onClick={() => {
              edit();
              onChange(transformDirectorMotion(motion, [0, 0, 0], 90));
            }}
          >
            轨迹与朝向旋转 90°
          </button>
        </div>
        <button type="button" className={button} disabled={preview} onClick={add}>
          记录/更新当前机位
        </button>
        {preview ? (
          <p className="text-xs text-amber-200">正在预览轨迹；点击“编辑机位”后可调整并记录机位。</p>
        ) : null}
        <div className="max-h-48 space-y-1 overflow-y-auto">
          {motion.keyframes.map((k, i) => (
            <div key={k.id} className="flex items-center gap-1 rounded bg-white/5 p-1">
              <button
                type="button"
                className={button}
                aria-label={`编辑关键帧 ${i + 1}`}
                onClick={() => {
                  edit();
                  setTime(k.time);
                  onPose(k);
                }}
              >
                帧 {i + 1}
              </button>
              <input
                aria-label={`关键帧 ${i + 1} 时间`}
                type="number"
                step={0.1}
                min={0}
                max={motion.duration}
                value={Number(k.time.toFixed(3))}
                className="min-w-0 flex-1 rounded bg-white/10 p-1 text-xs"
                onChange={(e) => {
                  const n = Number(e.target.value);
                  if (n < 0 || n > motion.duration || !Number.isFinite(n)) return;
                  if (
                    motion.keyframes.some(
                      (other) => other.id !== k.id && Math.abs(other.time - n) < 0.01,
                    )
                  ) {
                    toast.error("关键帧时间不能重复");
                    return;
                  }
                  onChange({
                    ...motion,
                    keyframes: motion.keyframes
                      .map((other) => (other.id === k.id ? { ...k, time: n } : other))
                      .sort((a, b) => a.time - b.time),
                  });
                }}
              />
              <button
                type="button"
                className={button}
                aria-label={`删除关键帧 ${i + 1}`}
                onClick={() => {
                  edit();
                  onChange({
                    ...motion,
                    keyframes: motion.keyframes.filter((other) => other.id !== k.id),
                  });
                }}
              >
                删除
              </button>
            </div>
          ))}
        </div>
        <div className="flex flex-wrap gap-1">
          <button type="button" className={button} onClick={downloadJson}>
            保存轨迹文件
          </button>
          <button type="button" className={button} onClick={() => input.current?.click()}>
            导入轨迹文件
          </button>
        </div>
        <button
          type="button"
          className={`${button} w-full`}
          disabled={motion.keyframes.length < 2 && !hasObjectMotion}
          onClick={() => {
            edit();
            onExport();
          }}
        >
          导出真实运镜视频
        </button>
        <button
          type="button"
          className={`${button} w-full`}
          disabled={motion.keyframes.length < 2}
          onClick={() => {
            edit();
            onSend();
          }}
        >
          发送首帧与运镜到视频节点
        </button>
        <p className="text-xs leading-5 text-white/50">
          真实导出严格使用本场景轨迹，不含音频。AI
          生视频使用首帧与运镜描述作参考，不保证精确复现轨迹。
        </p>
      </fieldset>
      {exportProgress !== null ? (
        <div role="status" className="text-xs">
          正在导出 {exportProgress.toFixed(1)} / {motion.duration} 秒{" "}
          <button className={button} onClick={onCancel}>
            取消导出
          </button>
        </div>
      ) : null}
      <input
        ref={input}
        type="file"
        accept=".json,application/json"
        className="hidden"
        onChange={async (e) => {
          const file = e.target.files?.[0];
          e.target.value = "";
          if (!file) return;
          try {
            if (file.size > 256 * 1024) throw Error("轨迹文件不能超过 256 KiB");
            const data = JSON.parse(await file.text());
            if (data.version !== 1) throw Error("不支持的轨迹文件版本");
            const m = readDirectorMotion(data.motion);
            if (m.keyframes.length < 2 || m.keyframes.length !== data.motion?.keyframes?.length)
              throw Error("轨迹数据无效或包含重复时间");
            edit();
            onChange(m);
            setTime(0);
            toast.success("轨迹已导入");
          } catch (e) {
            toast.error(e instanceof Error ? e.message : "轨迹导入失败");
          }
        }}
      />
    </section>
  );
}