import { VideoForm } from "@/admin/components/VideoForm";
import { AdminAutoLayout } from "@/admin/layout/AdminAutoLayout";
import { requirePermission } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import Link from "next/link";

type NewShortPageProps = {
  searchParams: Promise<{ error?: string }>;
};

const errorMessages: Record<string, string> = {
  required: "Please enter a title and valid YouTube Shorts URL.",
  youtube: "Please enter a valid YouTube Shorts URL."
};

export default async function NewShortPage({ searchParams }: NewShortPageProps) {
  await requirePermission("videos");
  const params = await searchParams;
  const categories = await prisma.category.findMany({ orderBy: { name: "asc" } });

  return (
    <AdminAutoLayout
      description="Add a vertical 9:16 YouTube Short — separate from long-form videos."
      error={params.error}
      errorMessages={errorMessages}
      eyebrow="Shorts"
      title="New YouTube Short"
      width="wide"
    >
      <div className="short-upload-shell short-upload-shell--admin">
        <div className="short-upload-phone">
          <div className="short-upload-phone__notch" />
          <div className="short-upload-phone__screen">
            <span className="short-upload-phone__label">Short preview</span>
            <p className="muted">TikTok-style vertical upload</p>
            <div className="short-upload-phone__frame">
              <span>▶</span>
            </div>
          </div>
        </div>
        <div className="short-upload-admin-form">
          <Link className="btn btn-secondary" href="/admin/videos/new">
            Add long-form video instead →
          </Link>
          <VideoForm categories={categories} defaultKind="SHORT" />
        </div>
      </div>
    </AdminAutoLayout>
  );
}