"use client";

import { useMutation, useQuery } from "@tanstack/react-query";

import { api } from "@/lib/api";

export default function VideoModelsPage() {
  const form = {
    model_key: "cinema-pro",
    model_name: "影院视频",
    frontend_title: "影院视频",
    frontend_description: "偏高质量的长镜头生成。",
    default_duration_seconds: 8,
    default_ratio: "16:9",
    default_resolution: "1280x720",
    status: 1,
    sort_order: 40,
  };
  const query = useQuery({
    queryKey: ["video-models-admin"],
    queryFn: () => api.get("/api/v1/admin/video-models"),
  });
  const mutation = useMutation({
    mutationFn: () => api.post("/api/v1/admin/video-models", form),
    onSuccess: () => query.refetch(),
  });

  return (
    <div className="two-col-grid">
      <section className="panel">
        <h3>新增平台视频模型</h3>
        <pre className="code-block">{JSON.stringify(form, null, 2)}</pre>
        <button className="primary-button" style={{ marginTop: 16 }} onClick={() => mutation.mutate()}>
          创建平台模型
        </button>
      </section>
      <section className="panel">
        <h3>平台模型列表</h3>
        <pre className="code-block">{JSON.stringify(query.data ?? [], null, 2)}</pre>
      </section>
    </div>
  );
}