kreativortex/components/CommentForm.tsx

/**
 * File: CommentForm.tsx
 * Created by: AI Assistant
 * Date: 2025-11-29
 * Purpose: Comment form with file upload and privacy controls for kreatiVortex platform
 * Part of: kreatiVortex - Platform Pembelajaran Tari Online
 */

'use client';

import React, { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Textarea } from '@/components/ui/textarea';
import { uploadFile, isAllowedFileType, formatFileSize, UploadedFile } from '@/lib/upload';

interface CommentFormProps {
  onSubmit: (content: string, attachments: UploadedFile[], isPrivate?: boolean) => void;
  placeholder?: string;
  buttonText?: string;
  loading?: boolean;
  showPrivacyToggle?: boolean;
  isEducator?: boolean;
}

export default function CommentForm({ 
  onSubmit, 
  placeholder = "Tulis komentar...", 
  buttonText = "Kirim Komentar",
  loading = false,
  showPrivacyToggle = false,
  isEducator = false
}: CommentFormProps) {
  const [content, setContent] = useState('');
  const [attachments, setAttachments] = useState<UploadedFile[]>([]);
  const [isPrivate, setIsPrivate] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (content.trim() || attachments.length > 0) {
      onSubmit(content.trim(), attachments, isPrivate);
      setContent('');
      setAttachments([]);
      setIsPrivate(false);
    }
  };

  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, 'comment-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));
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <Textarea
        value={content}
        onChange={(e) => setContent(e.target.value)}
        placeholder={placeholder}
        rows={3}
        className="bg-white/10 border-white/20 text-white placeholder:text-gray-400 resize-none"
      />

      <div className="space-y-2">
        <div className="flex items-center space-x-2">
          <input
            type="file"
            multiple
            accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.gif"
            onChange={handleFileUpload}
            className="hidden"
            id="file-upload"
          />
          <label
            htmlFor="file-upload"
            className="cursor-pointer inline-flex items-center px-3 py-1.5 text-sm bg-gold-500/20 hover:bg-gold-500/30 text-gold-400 rounded-lg transition-colors"
          >
            <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
            </svg>
            Lampirkan File
          </label>
          <span className="text-xs text-gray-400">
            PDF, Word, Gambar (Maks 10MB)
          </span>
        </div>

        {attachments.length > 0 && (
          <div className="space-y-2">
            {attachments.map((file, index) => (
              <div key={file.id} className="flex items-center justify-between bg-white/5 rounded-lg p-2 border border-white/10">
                <div className="flex items-center space-x-2">
                  <div className="w-6 h-6 bg-gold-500/20 rounded flex items-center justify-center">
                    <svg className="w-3 h-3 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-xs text-white font-medium truncate max-w-[150px]">{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-4 h-4" 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>
        )}

        {/* Privacy Toggle for Educators */}
        {showPrivacyToggle && isEducator && (
          <div className="flex items-center space-x-2">
            <input
              type="checkbox"
              id="private-comment"
              checked={isPrivate}
              onChange={(e) => setIsPrivate(e.target.checked)}
              className="w-4 h-4 text-amber-600 bg-gray-100 border-gray-300 rounded focus:ring-amber-500"
            />
            <label htmlFor="private-comment" className="text-sm text-gray-300">
              Private comment (hanya penulis post dan pendidik yang bisa lihat)
            </label>
          </div>
        )}
      </div>

      <div className="flex justify-end">
        <Button
          type="submit"
          disabled={loading || (!content.trim() && attachments.length === 0)}
          className="bg-gold-500 hover:bg-gold-600 text-navy-900"
        >
          {loading ? 'Mengirim...' : buttonText}
        </Button>
      </div>
    </form>
  );
}