'use client';

import { useState } from 'react';
import { useParams } from 'next/navigation';
import VideoForm from '@/components/Forms/VideoForm';
import { updateVideo } from '@/app/actions/video';
import { useFetch } from '@/hooks/useFetch';

interface Video {
  id: string;
  title: string;
  description: string;
  videoUrl: string;
  videoType: 'YOUTUBE' | 'LOCAL';
  isPublic: boolean;
  menuId?: string;
}

interface Menu {
  id: string;
  title: string;
}

export default function EditVideoPage() {
  const params = useParams();
  const id = params?.id as string;
  
  const { data: video, loading } = useFetch<Video>(`/api/videos/${id}`);
  const { data: menusData } = useFetch<Menu[]>('/api/menus');
  const handleSubmit = async (data: any) => {
    try {
      await updateVideo(id, data);
    } catch (error) {
      console.error('Error updating video:', error);
      throw error;
    }
  };

  if (loading || !video || !menusData) {
    return <div className="text-center text-gray-400 py-12">Loading...</div>;
  }

  const initialData = {
    title: video.title,
    description: video.description || '',
    videoUrl: video.videoUrl,
    videoType: video.videoType,
    isPublic: video.isPublic,
    menuId: video.menuId || '',
  };

  return (
    <div className="max-w-2xl mx-auto">
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-white">Edit Video</h1>
        <p className="text-gray-400">Perbarui informasi video pembelajaran</p>
      </div>

      <VideoForm 
        initialData={initialData} 
        onSubmit={handleSubmit} 
        isEditing={true}
        menus={menusData}
      />
    </div>
  );
}