import VideoForm from '@/components/Forms/VideoForm';
import { prisma } from '@/lib/prisma';
import { getLocale } from 'next-intl/server';
import { createVideo } from '@/app/actions/video';

export default async function NewVideoPage() {
  const locale = await getLocale();

  const menus = await prisma.menu.findMany({
    where: { isActive: true },
    include: {
      parent: true,
    },
    orderBy: { createdAt: 'asc' },
  });

  const getLocalizedName = (json: any) => {
    if (!json) return '';
    return json[locale] || json['id'] || json['en'] || '';
  };

  const formattedMenus = menus.map((menu) => {
    const name = getLocalizedName(menu.name);
    const parentName = menu.parent ? getLocalizedName(menu.parent.name) : '';
    return {
      id: menu.id,
      title: parentName ? `${parentName} > ${name}` : name,
    };
  });

  // Sort by title for better UX
  formattedMenus.sort((a, b) => a.title.localeCompare(b.title));

  return (
    <div className="max-w-2xl mx-auto">
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-white">Upload Video Baru</h1>
        <p className="text-gray-400">Tambahkan video pembelajaran baru ke koleksi Anda</p>
      </div>

      <VideoForm menus={formattedMenus} onSubmit={createVideo} />
    </div>
  );
}