"use client";

import { useEffect } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { Loader2 } from "lucide-react";

export default function VideoCanvasRedirectPage() {
  const router = useRouter();
  const searchParams = useSearchParams();

  useEffect(() => {
    const shouldCreateNew = searchParams.get("new") === "1";

    const openVideoCanvas = async () => {
      if (shouldCreateNew) {
        const newId = crypto.randomUUID();
        router.replace(`/canvas/${newId}?mode=video&workspaceType=video`);
        return;
      }

      try {
        const response = await fetch("/api/canvas?workspaceType=video", {
          cache: "no-store",
        });
        if (response.ok) {
          const result = await response.json();
          const items = result?.data || [];
          if (Array.isArray(items) && items.length > 0) {
            const sorted = [...items].sort((a, b) => {
              const aTime = new Date(a.updatedAt || a.createdAt || 0).getTime();
              const bTime = new Date(b.updatedAt || b.createdAt || 0).getTime();
              return bTime - aTime;
            });
            const latest = sorted[0];
            if (latest?.id) {
              router.replace(`/canvas/${latest.id}?mode=video&workspaceType=video`);
              return;
            }
          }
        }
      } catch (_error) {
        // ignore and fallback
      }

      const newId = crypto.randomUUID();
      router.replace(`/canvas/${newId}?mode=video&workspaceType=video`);
    };

    void openVideoCanvas();
  }, [router, searchParams]);

  return (
    <div className="flex h-full items-center justify-center">
      <div className="flex flex-col items-center gap-3">
        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
        <span className="text-sm text-muted-foreground">正在打开视频画布...</span>
      </div>
    </div>
  );
}