'use client';

import React, { useState } from 'react';
import { useRouter } from 'next/navigation';
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

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

interface VideoFormProps {
  initialData?: VideoFormData;
  onSubmit?: (data: VideoFormData) => Promise<void>;
  isEditing?: boolean;
  menus?: { id: string; title: string }[];
}

export default function VideoForm({ initialData, onSubmit, isEditing = false, menus = [] }: VideoFormProps) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [formData, setFormData] = useState<VideoFormData>(initialData || {
    title: '',
    description: '',
    videoUrl: '',
    videoType: 'YOUTUBE',
    isPublic: true,
    menuId: '',
  });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value, type } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? (e.target as HTMLInputElement).checked : value,
    }));
  };

  const handleSelectChange = (name: string, value: string) => {
    setFormData(prev => ({
      ...prev,
      [name]: value === 'no-selection' ? '' : value,
    }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    try {
      if (onSubmit) {
        await onSubmit(formData);
      } else {
        // Default submission logic if no prop provided
        console.log('Submitting video data:', formData);
        // Simulate API call
        await new Promise(resolve => setTimeout(resolve, 1000));
        router.push('/dashboard/videos');
      }
    } catch (error) {
      console.error('Error submitting form:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
        <div className="grid gap-2">
          <Label htmlFor="title" className="text-gray-300">
            Judul Video
          </Label>
          <Input
            type="text"
            id="title"
            name="title"
            required
            value={formData.title}
            onChange={handleChange}
            placeholder="Masukkan judul video"
            className="bg-white/10 border-white/20 text-white placeholder:text-gray-400"
          />
        </div>

        <div className="grid gap-2">
          <Label htmlFor="description" className="text-gray-300">
            Deskripsi
          </Label>
          <Textarea
            id="description"
            name="description"
            rows={4}
            value={formData.description}
            onChange={handleChange}
            placeholder="Deskripsi singkat tentang video"
            className="bg-white/10 border-white/20 text-white placeholder:text-gray-400"
          />
        </div>

        <div className="grid gap-2">
          <Label htmlFor="menuId" className="text-gray-300">
            Menu (Opsional)
          </Label>
          <Select
            value={formData.menuId || 'no-selection'}
            onValueChange={(value) => handleSelectChange('menuId', value)}
          >
            <SelectTrigger className="bg-white/10 border-white/20 text-white">
              <SelectValue placeholder="Pilih menu" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="no-selection">Tidak ada menu</SelectItem>
              {menus.map((menu) => (
                <SelectItem key={menu.id} value={menu.id}>
                  {menu.title}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

        <div className="grid gap-2">
          <Label htmlFor="videoType" className="text-gray-300">
            Tipe Video
          </Label>
          <Select
            value={formData.videoType}
            onValueChange={(value) => handleSelectChange('videoType', value)}
          >
            <SelectTrigger className="bg-white/10 border-white/20 text-white">
              <SelectValue placeholder="Pilih tipe video" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="YOUTUBE">YouTube</SelectItem>
              <SelectItem value="LOCAL">Upload File (Local)</SelectItem>
            </SelectContent>
          </Select>
        </div>

        <div className="grid gap-2">
          <Label htmlFor="videoUrl" className="text-gray-300">
            {formData.videoType === 'YOUTUBE' ? 'URL YouTube' : 'File Video'}
          </Label>
          {formData.videoType === 'YOUTUBE' ? (
            <Input
              type="url"
              id="videoUrl"
              name="videoUrl"
              required
              value={formData.videoUrl}
              onChange={handleChange}
              className="bg-white/10 border-white/20 text-white placeholder:text-gray-400"
              placeholder="https://youtube.com/watch?v=..."
            />
          ) : (
            <div className="border-2 border-dashed border-white/20 rounded-lg p-6 text-center">
              <p className="text-gray-400 mb-2">Upload file video belum tersedia dalam demo ini</p>
              <Input
                type="text"
                name="videoUrl"
                value={formData.videoUrl}
                onChange={handleChange}
                className="hidden"
              />
            </div>
          )}
        </div>

        <div className="flex items-center space-x-2">
          <input
            type="checkbox"
            id="isPublic"
            name="isPublic"
            checked={formData.isPublic}
            onChange={handleChange}
            className="w-4 h-4 text-gold-400 bg-white/10 border-white/20 rounded focus:ring-gold-400 focus:ring-offset-white/20"
          />
          <Label htmlFor="isPublic" className="text-gray-300 font-medium">
            Publik (Dapat dilihat oleh semua orang)
          </Label>
        </div>

        <div className="pt-4 flex justify-end space-x-3">
          <Button
            type="button"
            variant="ghost"
            onClick={() => router.back()}
            disabled={loading}
            className="text-gray-300 hover:text-white"
          >
            Batal
          </Button>
          <Button
            type="submit"
            disabled={loading}
            className="bg-gold-500 hover:bg-gold-600 text-navy-900"
          >
            {loading ? 'Menyimpan...' : (isEditing ? 'Simpan Perubahan' : 'Upload Video')}
          </Button>
        </div>
      </form>
  );
}