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

'use client';

import React, { useState, useEffect } from 'react';
import { useRouter, useSearchParams } 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';
import { useFetch } from '@/hooks/useFetch';
import { uploadFile, isAllowedFileType, formatFileSize, UploadedFile } from '@/lib/upload';

interface ClassData {
  id: string;
  name: string;
  code: string;
}

export default function NewForumPage() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const classId = searchParams.get('classId');
  const [loading, setLoading] = useState(false);
  const [formData, setFormData] = useState({
    title: '',
    content: '',
    classId: '',
  });
  const [attachments, setAttachments] = useState<UploadedFile[]>([]);
  const { data: classes } = useFetch<ClassData[]>('/api/classes');

  useEffect(() => {
    if (classId) {
      setFormData(prev => ({ ...prev, classId }));
    }
  }, [classId, classes ]);

  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (!files) return;

    const newAttachments: UploadedFile[] = [];
    
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      
      if (!isAllowedFileType(file)) {
        alert(`File ${file.name} tidak diizinkan. Hanya PDF, Word, dan file gambar yang diperbolehkan.`);
        continue;
      }

      if (file.size > 10 * 1024 * 1024) { // 10MB limit
        alert(`File ${file.name} terlalu besar. Maksimal ukuran file adalah 10MB.`);
        continue;
      }

      try {
        const uploadedFile = await uploadFile(file, 'forum-attachments');
        newAttachments.push(uploadedFile);
      } catch (error) {
        console.error('Error uploading file:', error);
        alert(`Gagal mengupload file ${file.name}`);
      }
    }

    setAttachments(prev => [...prev, ...newAttachments]);
  };

  const removeAttachment = (index: number) => {
    setAttachments(prev => prev.filter((_, i) => i !== index));
  };

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

    try {
      const response = await fetch('/api/forums', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          title: formData.title,
          description: formData.content,
          type: formData.classId && formData.classId !== 'general' ? 'CLASS' : 'GENERAL',
          classId: formData.classId && formData.classId !== 'general' ? formData.classId : undefined,
          attachments: attachments,
        }),
      });

      const result = await response.json();

      if (result.success) {
        router.push(formData.classId && formData.classId !== 'general' ? `/dashboard/forum/${formData.classId}` : '/dashboard/forum/umum');
      } else {
        console.error('Failed to create forum:', result.message);
        // You could show an error message to the user here
      }
    } catch (error) {
      console.error('Error creating forum:', error);
      // You could show an error message to the user here
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="max-w-2xl mx-auto">
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-white">Buat Diskusi Baru</h1>
        <p className="text-gray-400">Mulai percakapan dengan komunitas</p>
      </div>

      <form onSubmit={handleSubmit} className="space-y-6">
        <div className="space-y-2">
          <Label htmlFor="title" className="text-gray-300">
            Judul Diskusi
          </Label>
          <Input
            id="title"
            value={formData.title}
            onChange={(e) => setFormData({ ...formData, title: e.target.value })}
            required
            placeholder="Apa yang ingin Anda diskusikan?"
            className="bg-white/10 border-white/20 text-white placeholder:text-gray-400"
          />
        </div>

        <div className="space-y-2">
          <Label htmlFor="class" className="text-gray-300">
            Pilih Kelas
          </Label>
          <Select
            value={formData.classId}
            onValueChange={(value) => setFormData({ ...formData, classId: value })}
          >
            <SelectTrigger className="bg-white/10 border-white/20 text-white">
              <SelectValue placeholder="Pilih kelas atau forum umum" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="general">Forum Umum</SelectItem>
              {classes?.map((classItem) => (
                <SelectItem key={classItem.id} value={classItem.id}>
                  {classItem.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

        <div className="space-y-2">
          <Label htmlFor="content" className="text-gray-300">
            Isi Diskusi
          </Label>
          <Textarea
            id="content"
            rows={6}
            value={formData.content}
            onChange={(e) => setFormData({ ...formData, content: e.target.value })}
            required
            placeholder="Tuliskan detail diskusi Anda di sini..."
            className="bg-white/10 border-white/20 text-white placeholder:text-gray-400"
          />
        </div>

        <div className="space-y-2">
          <Label htmlFor="attachments" className="text-gray-300">
            Lampiran (PDF, Word, Gambar)
          </Label>
          <Input
            id="attachments"
            type="file"
            multiple
            accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.gif"
            onChange={handleFileUpload}
            className="bg-white/10 border-white/20 text-white file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-gold-500 file:text-white hover:file:bg-gold-600"
          />
          <p className="text-xs text-gray-400">
            Maksimal 10MB per file. Format yang diizinkan: PDF, Word, JPG, PNG, GIF
          </p>
          
          {attachments.length > 0 && (
            <div className="space-y-2 mt-3">
              <p className="text-sm text-gray-300">File yang diupload:</p>
              {attachments.map((file, index) => (
                <div key={file.id} className="flex items-center justify-between bg-white/5 rounded-lg p-3 border border-white/10">
                  <div className="flex items-center space-x-3">
                    <div className="w-8 h-8 bg-gold-500/20 rounded flex items-center justify-center">
                      <svg className="w-4 h-4 text-gold-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                      </svg>
                    </div>
                    <div>
                      <p className="text-sm text-white font-medium">{file.originalName}</p>
                      <p className="text-xs text-gray-400">{formatFileSize(file.size)}</p>
                    </div>
                  </div>
                  <button
                    type="button"
                    onClick={() => removeAttachment(index)}
                    className="text-red-400 hover:text-red-300 transition-colors"
                  >
                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                    </svg>
                  </button>
                </div>
              ))}
            </div>
          )}
        </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 Diskusi'}
          </Button>
        </div>
      </form>
    </div>
  );
}