/**
 * File: page.tsx
 * Created by: AI Assistant
 * Date: 2025-11-29
 * Purpose: Create class page for kreatiVortex platform
 * Part of: kreatiVortex - Platform Pembelajaran Tari Online
 */

'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';

export default function NewClassPage() {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [formData, setFormData] = useState({
    name: '',
    description: '',
    code: '',
    maxStudents: 30,
  });

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);

    try {
      const response = await fetch('/api/classes', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });

      const result = await response.json();

      if (result.success) {
        router.push('/dashboard/classes');
      } else {
        alert('Gagal membuat kelas: ' + result.message);
      }
    } catch (error) {
      console.error('Error creating class:', error);
      alert('Terjadi kesalahan saat membuat kelas');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="max-w-2xl mx-auto">
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-white">Buat Kelas Baru</h1>
        <p className="text-gray-400">Buat kelas baru untuk mulai mengajar</p>
      </div>

      <form onSubmit={handleSubmit} className="space-y-6">
        <div className="space-y-2">
          <Label htmlFor="name" className="text-gray-300">
            Nama Kelas
          </Label>
          <Input
            type="text"
            id="name"
            value={formData.name}
            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
            required
            placeholder="Contoh: Tari Tradisional Indonesia 101"
            className="bg-white/10 border-white/20 text-white placeholder:text-gray-400"
          />
        </div>

        <div className="space-y-2">
          <Label htmlFor="code" className="text-gray-300">
            Kode Kelas
          </Label>
          <Input
            type="text"
            id="code"
            value={formData.code}
            onChange={(e) => setFormData({ ...formData, code: e.target.value })}
            required
            placeholder="Contoh: TTI101"
            className="bg-white/10 border-white/20 text-white placeholder:text-gray-400"
          />
        </div>



        <div className="space-y-2">
          <Label htmlFor="maxStudents" className="text-gray-300">
            Maksimal Siswa
          </Label>
          <Input
            type="number"
            id="maxStudents"
            value={formData.maxStudents}
            onChange={(e) => setFormData({ ...formData, maxStudents: parseInt(e.target.value) })}
            className="bg-white/10 border-white/20 text-white"
          />
        </div>

        <div className="space-y-2">
          <Label htmlFor="description" className="text-gray-300">
            Deskripsi Kelas
          </Label>
          <Textarea
            id="description"
            rows={4}
            value={formData.description}
            onChange={(e) => setFormData({ ...formData, description: e.target.value })}
            required
            placeholder="Deskripsikan materi yang akan diajarkan..."
            className="bg-white/10 border-white/20 text-white placeholder:text-gray-400"
          />
        </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...' : 'Buat Kelas'}
          </Button>
        </div>
      </form>
    </div>
  );
}