@tuturuuu/ui 0.0.4 → 0.2.0

package/src/components/ui/report-problem-dialog.tsx

@@ -0,0 +1,980 @@
+'use client';
+
+import { useMutation } from '@tanstack/react-query';
+import {
+  AlertCircle,
+  AlertTriangle,
+  CheckCircle,
+  MessageSquareWarning,
+  Upload,
+  X,
+} from '@tuturuuu/icons';
+import {
+  createReportUploadUrls,
+  deleteReportUploadPaths,
+  submitReport,
+} from '@tuturuuu/internal-api/reports';
+import type { Product, SupportType } from '@tuturuuu/types';
+import { Button } from '@tuturuuu/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@tuturuuu/ui/dialog';
+import { Input } from '@tuturuuu/ui/input';
+import { Label } from '@tuturuuu/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@tuturuuu/ui/select';
+import { toast } from '@tuturuuu/ui/sonner';
+import { Textarea } from '@tuturuuu/ui/textarea';
+import { cn, isValidBlobUrl } from '@tuturuuu/utils/format';
+import imageCompression from 'browser-image-compression';
+import Image from 'next/image';
+import { useTranslations } from 'next-intl';
+import type React from 'react';
+import { useEffect, useId, useRef, useState } from 'react';
+import { z } from 'zod';
+
+interface ReportProblemFormData {
+  product: Product | '';
+  type: SupportType | '';
+  suggestion: string;
+  media: File[];
+}
+
+const MAX_MEDIA_SIZE = 5 * 1024 * 1024; // 5MB
+const MAX_FILES = 5;
+
+// Allowed media types
+const ALLOWED_IMAGE_TYPES = [
+  'image/png',
+  'image/jpeg',
+  'image/webp',
+  'image/gif',
+];
+const ALLOWED_VIDEO_TYPES = ['video/mp4', 'video/webm', 'video/quicktime'];
+
+interface SubmitReportMutationInput {
+  product: Product;
+  type: SupportType;
+  suggestion: string;
+  subject: string;
+  media: File[];
+}
+
+function useSubmitReportMutation() {
+  return useMutation({
+    mutationFn: async ({
+      product,
+      type,
+      suggestion,
+      subject,
+      media,
+    }: SubmitReportMutationInput) => {
+      const uploadedPaths: string[] = [];
+
+      const cleanupUploadedMedia = async () => {
+        if (uploadedPaths.length === 0) {
+          return;
+        }
+
+        try {
+          await deleteReportUploadPaths({ paths: uploadedPaths });
+        } catch (cleanupError) {
+          console.error(
+            'Failed to clean up uploaded support report media:',
+            cleanupError
+          );
+        }
+      };
+
+      try {
+        if (media.length > 0) {
+          const { uploads } = await createReportUploadUrls({
+            files: media.map((file) => ({
+              filename: file.name,
+              contentType: file.type,
+              size: file.size,
+            })),
+          });
+
+          if (uploads.length !== media.length) {
+            throw new Error('Failed to prepare media uploads');
+          }
+
+          for (const [index, upload] of uploads.entries()) {
+            const file = media[index];
+
+            if (!file) {
+              throw new Error('Missing media file during upload');
+            }
+
+            let uploadResponse = await fetch(upload.signedUrl, {
+              method: 'PUT',
+              cache: 'no-store',
+              headers: {
+                Authorization: `Bearer ${upload.token}`,
+                'Content-Type': file.type || 'application/octet-stream',
+              },
+              body: file,
+            });
+
+            if (!uploadResponse.ok) {
+              uploadResponse = await fetch(upload.signedUrl, {
+                method: 'PUT',
+                cache: 'no-store',
+                headers: {
+                  Authorization: `Bearer ${upload.token}`,
+                },
+                body: file,
+              });
+            }
+
+            if (!uploadResponse.ok) {
+              const text = await uploadResponse.text().catch(() => '');
+              throw new Error(
+                `Failed to upload media (${uploadResponse.status})${text ? `: ${text}` : ''}`
+              );
+            }
+
+            uploadedPaths.push(upload.path);
+          }
+        }
+
+        const result = await submitReport({
+          product,
+          type,
+          suggestion,
+          subject,
+          imagePaths: uploadedPaths,
+        });
+
+        if (!result.success) {
+          throw new Error(result.message || 'Failed to submit report');
+        }
+
+        return result;
+      } catch (error) {
+        await cleanupUploadedMedia();
+        throw error;
+      }
+    },
+  });
+}
+
+// Zod schema for form validation
+const reportProblemSchema = z.object({
+  product: z.enum(
+    [
+      'web',
+      'nova',
+      'rewise',
+      'calendar',
+      'finance',
+      'tudo',
+      'tumeet',
+      'shortener',
+      'qr',
+      'drive',
+      'mail',
+      'other',
+    ],
+    {
+      message: 'Please select a product',
+    }
+  ),
+  type: z.enum(['bug', 'feature-request'], {
+    message: 'Please select a support type',
+  }),
+  suggestion: z
+    .string()
+    .trim()
+    .min(1, 'Please describe the issue or suggestion')
+    .max(1000, 'Suggestion must be at most 1000 characters'),
+  media: z
+    .array(z.instanceof(File))
+    .max(MAX_FILES, `You can upload up to ${MAX_FILES} files`)
+    .refine(
+      (files) =>
+        files.every(
+          (f) =>
+            ALLOWED_IMAGE_TYPES.includes(f.type) ||
+            ALLOWED_VIDEO_TYPES.includes(f.type)
+        ),
+      {
+        message:
+          'Only image (PNG, JPEG, WebP, GIF) and video (MP4, WebM, MOV) files are allowed',
+      }
+    )
+    .refine((files) => files.every((f) => f.size <= MAX_MEDIA_SIZE), {
+      message: 'Each file must be 5MB or less',
+    }),
+});
+
+interface ReportProblemDialogProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  products?: Array<{ value: Product; label: string }>;
+  className?: string;
+  trigger?: React.ReactNode;
+  showTrigger?: boolean;
+}
+
+const DEFAULT_PRODUCTS: Array<{ value: Product; label: string }> = [
+  { value: 'web', label: 'Web Dashboard' },
+  { value: 'nova', label: 'Nova' },
+  { value: 'rewise', label: 'Rewise' },
+  { value: 'calendar', label: 'Calendar' },
+  { value: 'finance', label: 'Finance' },
+  { value: 'tudo', label: 'Tuturuuu Tasks' },
+  { value: 'tumeet', label: 'Tuturuuu Meet' },
+  { value: 'shortener', label: 'URL Shortener' },
+  { value: 'qr', label: 'QR Code' },
+  { value: 'drive', label: 'Drive' },
+  { value: 'mail', label: 'Mail' },
+  { value: 'other', label: 'Other' },
+];
+
+const DEFAULT_SUPPORT_TYPES: Array<{ value: SupportType; label: string }> = [
+  { value: 'bug', label: 'Bug Report' },
+  { value: 'feature-request', label: 'Feature Request' },
+];
+
+const LOCAL_STORAGE_KEY = 'report-problem-form-data';
+
+export function ReportProblemDialog({
+  open,
+  onOpenChange,
+  products = DEFAULT_PRODUCTS,
+  className,
+  trigger,
+  showTrigger = true,
+}: ReportProblemDialogProps) {
+  const t = useTranslations('common');
+  const suggestionId = useId();
+  const mediaUploadId = useId();
+
+  // Internal state for uncontrolled mode
+  const [internalOpen, setInternalOpen] = useState(false);
+
+  // Use controlled or uncontrolled mode
+  const isControlled = open !== undefined;
+  const dialogOpen = isControlled ? open : internalOpen;
+
+  const [formData, setFormData] = useState<ReportProblemFormData>({
+    product: '',
+    type: '',
+    suggestion: '',
+    media: [],
+  });
+  const [mediaPreviews, setMediaPreviews] = useState<string[]>([]);
+  const [isCompressing, setIsCompressing] = useState(false);
+  const [validationErrors, setValidationErrors] = useState<{
+    product?: string;
+    type?: string;
+    suggestion?: string;
+    media?: string;
+  }>({});
+  const [isDragOver, setIsDragOver] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const mediaPreviewsRef = useRef<string[]>([]);
+  const submitReportMutation = useSubmitReportMutation();
+  const isSubmitting = submitReportMutation.isPending;
+
+  const validateForm = () => {
+    const result = reportProblemSchema.safeParse(formData);
+    if (result.success) {
+      setValidationErrors({});
+      return true;
+    }
+
+    const fieldErrors: {
+      product?: string;
+      type?: string;
+      suggestion?: string;
+      media?: string;
+    } = {};
+    for (const issue of result.error.issues) {
+      if (issue.path[0] === 'product' && !fieldErrors.product) {
+        fieldErrors.product = issue.message;
+      }
+      if (issue.path[0] === 'type' && !fieldErrors.type) {
+        fieldErrors.type = issue.message;
+      }
+      if (issue.path[0] === 'suggestion' && !fieldErrors.suggestion) {
+        fieldErrors.suggestion = issue.message;
+      }
+      if (issue.path[0] === 'media' && !fieldErrors.media) {
+        fieldErrors.media = issue.message;
+      }
+    }
+    setValidationErrors(fieldErrors);
+    return false;
+  };
+
+  const handleProductChange = (value: string) => {
+    setFormData((prev) => ({ ...prev, product: value as Product }));
+    if (validationErrors.product) {
+      setValidationErrors((prev) => ({ ...prev, product: undefined }));
+    }
+  };
+
+  const handleTypeChange = (value: string) => {
+    setFormData((prev) => ({ ...prev, type: value as SupportType }));
+    if (validationErrors.type) {
+      setValidationErrors((prev) => ({ ...prev, type: undefined }));
+    }
+  };
+
+  const handleSuggestionChange = (
+    event: React.ChangeEvent<HTMLTextAreaElement>
+  ) => {
+    setFormData((prev) => ({ ...prev, suggestion: event.target.value }));
+    if (validationErrors.suggestion && event.target.value.trim()) {
+      setValidationErrors((prev) => ({ ...prev, suggestion: undefined }));
+    }
+  };
+
+  const handleDragOver = (event: React.DragEvent) => {
+    event.preventDefault();
+    if (event.dataTransfer) {
+      event.dataTransfer.dropEffect = 'copy';
+    }
+    setIsDragOver(true);
+  };
+  const handleDragLeave = (event: React.DragEvent) => {
+    event.preventDefault();
+    setIsDragOver(false);
+  };
+
+  const handleDrop = (event: React.DragEvent) => {
+    event.preventDefault();
+    setIsDragOver(false);
+
+    const files = Array.from(event.dataTransfer.files).filter(
+      (file) =>
+        ALLOWED_IMAGE_TYPES.includes(file.type) ||
+        ALLOWED_VIDEO_TYPES.includes(file.type)
+    );
+
+    if (files.length > 0) {
+      processMediaFiles(files);
+    }
+  };
+
+  const compressImage = async (file: File): Promise<File> => {
+    try {
+      const options = {
+        maxSizeMB: 5,
+        maxWidthOrHeight: 1920,
+        useWebWorker: true,
+        initialQuality: 0.8,
+      };
+      const compressedBlob = await imageCompression(file, options);
+
+      // Convert Blob back to File with original name and type
+      const compressedFile = new File([compressedBlob], file.name, {
+        type: compressedBlob.type || file.type,
+        lastModified: Date.now(),
+      });
+
+      return compressedFile;
+    } catch (error) {
+      console.error('Image compression failed:', error);
+      return file; // Return original if compression fails
+    }
+  };
+
+  const compressVideo = async (file: File): Promise<File> => {
+    try {
+      // Create video element to load the file
+      const video = document.createElement('video');
+      video.preload = 'metadata';
+      video.muted = true;
+
+      const videoUrl = URL.createObjectURL(file);
+      video.src = videoUrl;
+
+      // Wait for video to load metadata
+      await new Promise((resolve, reject) => {
+        video.onloadedmetadata = resolve;
+        video.onerror = reject;
+      });
+
+      // Calculate target dimensions (max 1280x720 to reduce file size)
+      let targetWidth = video.videoWidth;
+      let targetHeight = video.videoHeight;
+      const maxWidth = 1280;
+      const maxHeight = 720;
+
+      if (targetWidth > maxWidth || targetHeight > maxHeight) {
+        const aspectRatio = targetWidth / targetHeight;
+        if (aspectRatio > maxWidth / maxHeight) {
+          targetWidth = maxWidth;
+          targetHeight = Math.round(maxWidth / aspectRatio);
+        } else {
+          targetHeight = maxHeight;
+          targetWidth = Math.round(maxHeight * aspectRatio);
+        }
+      }
+
+      // Create canvas for video processing
+      const canvas = document.createElement('canvas');
+      canvas.width = targetWidth;
+      canvas.height = targetHeight;
+      const ctx = canvas.getContext('2d');
+
+      if (!ctx) {
+        throw new Error('Could not get canvas context');
+      }
+
+      // Set up MediaRecorder with compression settings
+      const stream = canvas.captureStream(30); // 30 FPS
+      const mimeType = MediaRecorder.isTypeSupported('video/webm; codecs=vp9')
+        ? 'video/webm; codecs=vp9'
+        : MediaRecorder.isTypeSupported('video/webm; codecs=vp8')
+          ? 'video/webm; codecs=vp8'
+          : 'video/webm';
+
+      const mediaRecorder = new MediaRecorder(stream, {
+        mimeType,
+        videoBitsPerSecond: 1000000, // 1 Mbps for good quality with compression
+      });
+
+      const chunks: Blob[] = [];
+      mediaRecorder.ondataavailable = (e) => {
+        if (e.data.size > 0) {
+          chunks.push(e.data);
+        }
+      };
+
+      // Start recording
+      mediaRecorder.start();
+
+      // Play video and draw frames to canvas
+      video.currentTime = 0;
+      await video.play();
+
+      const drawFrame = () => {
+        if (video.ended || video.paused) {
+          return;
+        }
+        ctx.drawImage(video, 0, 0, targetWidth, targetHeight);
+        requestAnimationFrame(drawFrame);
+      };
+
+      drawFrame();
+
+      // Wait for video to finish
+      await new Promise((resolve) => {
+        video.onended = resolve;
+      });
+
+      // Stop recording
+      mediaRecorder.stop();
+
+      // Wait for final data
+      const compressedBlob = await new Promise<Blob>((resolve) => {
+        mediaRecorder.onstop = () => {
+          resolve(new Blob(chunks, { type: mimeType }));
+        };
+      });
+
+      // Clean up
+      URL.revokeObjectURL(videoUrl);
+      video.remove();
+      canvas.remove();
+
+      // Convert to File
+      const fileExtension = mimeType.includes('webm') ? 'webm' : 'mp4';
+      const fileName = file.name.replace(/\.[^/.]+$/, `.${fileExtension}`);
+      const compressedFile = new File([compressedBlob], fileName, {
+        type: mimeType,
+        lastModified: Date.now(),
+      });
+
+      // Only return compressed version if it's actually smaller
+      return compressedFile.size < file.size ? compressedFile : file;
+    } catch (error) {
+      console.error('Video compression failed:', error);
+      return file; // Return original if compression fails
+    }
+  };
+
+  const processMediaFiles = async (files: File[]) => {
+    // First filter by type only
+    const validTypeFiles = files.filter(
+      (file) =>
+        ALLOWED_IMAGE_TYPES.includes(file.type) ||
+        ALLOWED_VIDEO_TYPES.includes(file.type)
+    );
+
+    const invalidTypeCount = files.length - validTypeFiles.length;
+    if (invalidTypeCount > 0) {
+      setValidationErrors((prev) => ({
+        ...prev,
+        media: `${invalidTypeCount} file(s) rejected: only images (PNG, JPEG, WebP, GIF) and videos (MP4, WebM, MOV) are allowed.`,
+      }));
+    }
+
+    const currentMediaCount = formData.media.length;
+    const availableSlots = MAX_FILES - currentMediaCount;
+    const filesToProcess = validTypeFiles.slice(0, availableSlots);
+    const overflow = validTypeFiles.length - filesToProcess.length;
+
+    if (overflow > 0) {
+      setValidationErrors((prev) => ({
+        ...prev,
+        media: `You can upload up to ${MAX_FILES} files. ${overflow} file(s) were rejected.`,
+      }));
+    }
+
+    if (filesToProcess.length > 0) {
+      setIsCompressing(true);
+      try {
+        // Compress images and videos first, then check size
+        const processedWithSize = await Promise.all(
+          filesToProcess.map(async (file) => {
+            let processedFile = file;
+
+            // Compress images before size check
+            if (ALLOWED_IMAGE_TYPES.includes(file.type)) {
+              processedFile = await compressImage(file);
+            }
+            // Compress videos before size check
+            else if (ALLOWED_VIDEO_TYPES.includes(file.type)) {
+              processedFile = await compressVideo(file);
+            }
+
+            return {
+              file: processedFile,
+              isValid: processedFile.size <= MAX_MEDIA_SIZE,
+              originalName: file.name,
+            };
+          })
+        );
+
+        // Filter out files that are still too large after compression
+        const validFiles = processedWithSize.filter((item) => item.isValid);
+        const rejectedBySize = processedWithSize.filter(
+          (item) => !item.isValid
+        );
+
+        if (rejectedBySize.length > 0) {
+          const rejectedNames = rejectedBySize
+            .map((item) => item.originalName)
+            .join(', ');
+          setValidationErrors((prev) => ({
+            ...prev,
+            media: `${rejectedBySize.length} file(s) rejected (exceeded 5MB even after compression): ${rejectedNames}`,
+          }));
+        } else if (validationErrors.media && invalidTypeCount === 0) {
+          setValidationErrors((prev) => ({ ...prev, media: undefined }));
+        }
+
+        if (validFiles.length > 0) {
+          const acceptedFiles = validFiles.map((item) => item.file);
+          const newMedia = [...formData.media, ...acceptedFiles];
+          setFormData((prev) => ({ ...prev, media: newMedia }));
+
+          // Create preview URLs
+          const newPreviews = acceptedFiles.map((file) =>
+            URL.createObjectURL(file)
+          );
+          setMediaPreviews((prev) => {
+            const updated = [...prev, ...newPreviews];
+            mediaPreviewsRef.current = updated;
+            return updated;
+          });
+        }
+      } finally {
+        setIsCompressing(false);
+      }
+    }
+  };
+
+  const handleMediaUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(event.target.files || []);
+    processMediaFiles(files);
+
+    // Reset file input
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const removeMedia = (index: number) => {
+    // Revoke the object URL to free memory
+    if (mediaPreviews[index]) {
+      URL.revokeObjectURL(mediaPreviews[index]);
+    }
+
+    const newMedia = formData.media.filter((_, i) => i !== index);
+    const newPreviews = mediaPreviews.filter((_, i) => i !== index);
+
+    setFormData((prev) => ({ ...prev, media: newMedia }));
+    setMediaPreviews(newPreviews);
+    mediaPreviewsRef.current = newPreviews;
+  };
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+
+    if (!validateForm()) {
+      return;
+    }
+
+    try {
+      const validatedForm = reportProblemSchema.parse(formData);
+
+      // Generate a subject based on the type and product
+      const subject = `${validatedForm.type === 'bug' ? 'Bug Report' : 'Feature Request'} - ${
+        DEFAULT_PRODUCTS.find((p) => p.value === validatedForm.product)
+          ?.label || validatedForm.product
+      }`;
+
+      await submitReportMutation.mutateAsync({
+        product: validatedForm.product,
+        type: validatedForm.type,
+        suggestion: validatedForm.suggestion,
+        subject,
+        media: validatedForm.media,
+      });
+      toast.success(t('report-submitted-success'));
+
+      // Close dialog (which will also trigger cleanup)
+      handleOpenChange(false);
+    } catch (error) {
+      console.error('Failed to submit report:', error);
+      toast.error('Failed to submit report. Please try again.');
+    }
+  };
+
+  const handleOpenChange = (newOpen: boolean) => {
+    // Update internal state for uncontrolled mode
+    if (!isControlled) {
+      setInternalOpen(newOpen);
+    }
+
+    // Notify parent if handler exists (controlled mode)
+    if (onOpenChange) {
+      onOpenChange(newOpen);
+    }
+
+    // Clean up and reset everything when dialog closes
+    if (!newOpen) {
+      // Revoke all object URLs to free memory
+      mediaPreviews.forEach((url) => {
+        URL.revokeObjectURL(url);
+      });
+
+      // Clear all form state
+      setFormData({ product: '', type: '', suggestion: '', media: [] });
+      setMediaPreviews([]);
+      mediaPreviewsRef.current = [];
+      setValidationErrors({});
+      setIsDragOver(false);
+      setIsCompressing(false);
+
+      // Clear localStorage
+      localStorage.removeItem(LOCAL_STORAGE_KEY);
+    }
+  };
+
+  // Clean up object URLs on unmount
+  useEffect(() => {
+    return () => {
+      mediaPreviewsRef.current.forEach((url) => {
+        URL.revokeObjectURL(url);
+      });
+    };
+  }, []);
+
+  return (
+    <Dialog open={dialogOpen} onOpenChange={handleOpenChange}>
+      {showTrigger && (
+        <DialogTrigger asChild>
+          {trigger || (
+            <Button variant="secondary" size="sm" className={cn(className)}>
+              <MessageSquareWarning className="mr-2 h-4 w-4" />
+              {t('report-problem')}
+            </Button>
+          )}
+        </DialogTrigger>
+      )}
+      <DialogContent className="mx-auto flex max-h-[90vh] w-[calc(100vw-1.5rem)] max-w-7xl flex-col overflow-hidden">
+        <DialogHeader className="border-b pb-4">
+          <DialogTitle className="flex items-center gap-2 text-lg sm:text-xl">
+            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-orange-100 dark:bg-orange-900">
+              <AlertTriangle className="h-4 w-4 text-orange-600 dark:text-orange-400" />
+            </div>
+            {t('report-problem')}
+          </DialogTitle>
+          <DialogDescription className="mt-2 text-muted-foreground text-sm">
+            {t('report-problem-description')}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-y-auto">
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <div className="space-y-3">
+              <Label
+                htmlFor="product"
+                className="flex items-center gap-1 font-medium text-sm"
+              >
+                {t('affected-product-required')}
+              </Label>
+              <Select
+                value={formData.product}
+                onValueChange={handleProductChange}
+              >
+                <SelectTrigger
+                  className={cn(
+                    'h-11',
+                    validationErrors.product &&
+                      'border-red-500 focus:border-red-500'
+                  )}
+                >
+                  <SelectValue placeholder={t('select-product-placeholder')} />
+                </SelectTrigger>
+                <SelectContent>
+                  {products.map((product) => (
+                    <SelectItem key={product.value} value={product.value}>
+                      {product.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              {validationErrors.product && (
+                <div className="flex items-center gap-1 text-red-600 text-sm">
+                  <AlertCircle className="h-3 w-3" />
+                  {validationErrors.product}
+                </div>
+              )}
+            </div>
+
+            <div className="space-y-3">
+              <Label
+                htmlFor="type"
+                className="flex items-center gap-1 font-medium text-sm"
+              >
+                Support Type *
+              </Label>
+              <Select value={formData.type} onValueChange={handleTypeChange}>
+                <SelectTrigger
+                  className={cn(
+                    'h-11',
+                    validationErrors.type &&
+                      'border-red-500 focus:border-red-500'
+                  )}
+                >
+                  <SelectValue placeholder="Select support type..." />
+                </SelectTrigger>
+                <SelectContent>
+                  {DEFAULT_SUPPORT_TYPES.map((type) => (
+                    <SelectItem key={type.value} value={type.value}>
+                      {type.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              {validationErrors.type && (
+                <div className="flex items-center gap-1 text-red-600 text-sm">
+                  <AlertCircle className="h-3 w-3" />
+                  {validationErrors.type}
+                </div>
+              )}
+            </div>
+
+            <div className="space-y-3">
+              <Label
+                htmlFor="suggestion"
+                className="flex items-center gap-1 font-medium text-sm"
+              >
+                {t('suggestion-improve')}
+              </Label>
+              <Textarea
+                id={suggestionId}
+                placeholder={t('suggestion-placeholder')}
+                value={formData.suggestion}
+                onChange={handleSuggestionChange}
+                className={cn(
+                  'max-h-62.5 min-h-30 resize-y',
+                  validationErrors.suggestion &&
+                    'border-red-500 focus:border-red-500'
+                )}
+              />
+              {validationErrors.suggestion && (
+                <div className="flex items-center gap-1 text-red-600 text-sm">
+                  <AlertCircle className="h-3 w-3" />
+                  {validationErrors.suggestion}
+                </div>
+              )}
+              <div className="text-muted-foreground text-xs">
+                {formData.suggestion.length}/1000 characters
+              </div>
+            </div>
+
+            <div className="space-y-4">
+              <Label className="font-medium text-sm">
+                {t('media-optional')} ({formData.media.length}/{MAX_FILES})
+              </Label>
+
+              {formData.media.length < MAX_FILES && (
+                <button
+                  type="button"
+                  className={cn(
+                    'relative mt-2 w-full rounded-lg border-2 border-dashed transition-all duration-200',
+                    isDragOver
+                      ? 'border-orange-400 bg-orange-50 dark:bg-orange-950/20'
+                      : 'border-gray-300 hover:border-gray-400 dark:border-gray-600 dark:hover:border-gray-500',
+                    isCompressing && 'pointer-events-none opacity-50'
+                  )}
+                  onDragOver={handleDragOver}
+                  onDragLeave={handleDragLeave}
+                  onDrop={handleDrop}
+                  aria-label="Click to upload or drag and drop media files"
+                  disabled={isCompressing}
+                >
+                  <Input
+                    ref={fileInputRef}
+                    type="file"
+                    accept="image/png,image/jpeg,image/webp,image/gif,video/mp4,video/webm,video/quicktime"
+                    multiple
+                    onChange={handleMediaUpload}
+                    disabled={isSubmitting || isCompressing}
+                    className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+                    id={mediaUploadId}
+                  />
+                  <div className="flex flex-col items-center justify-center px-4 py-8 text-center">
+                    <div
+                      className={cn(
+                        'mb-3 flex h-12 w-12 items-center justify-center rounded-full transition-colors',
+                        isDragOver
+                          ? 'bg-orange-100 dark:bg-orange-900'
+                          : 'bg-gray-100 dark:bg-gray-800'
+                      )}
+                    >
+                      <Upload
+                        className={cn(
+                          'h-5 w-5',
+                          isDragOver ? 'text-orange-600' : 'text-gray-400'
+                        )}
+                      />
+                    </div>
+                    <p className="mb-1 font-medium text-sm">
+                      {isCompressing
+                        ? 'Compressing...'
+                        : isDragOver
+                          ? 'Drop files here'
+                          : 'Click to upload or drag and drop'}
+                    </p>
+                    <p className="text-muted-foreground text-xs">
+                      Images (PNG, JPG, GIF, WebP) or Videos (MP4, WebM, MOV) up
+                      to 5MB each
+                    </p>
+                  </div>
+                </button>
+              )}
+
+              {validationErrors.media && (
+                <div className="text-red-600 text-sm">
+                  {validationErrors.media}
+                </div>
+              )}
+
+              {mediaPreviews.length > 0 && (
+                <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
+                  {mediaPreviews.map((preview, index) => {
+                    const file = formData.media[index];
+                    const isVideo =
+                      file && ALLOWED_VIDEO_TYPES.includes(file.type);
+
+                    return (
+                      <div key={preview} className="group relative">
+                        <div className="aspect-square overflow-hidden rounded-lg border-2 border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800">
+                          {isVideo ? (
+                            <video
+                              src={isValidBlobUrl(preview) ? preview : ''}
+                              className="h-full w-full object-cover"
+                              controls={false}
+                              muted
+                              playsInline
+                            />
+                          ) : (
+                            <Image
+                              src={
+                                isValidBlobUrl(preview)
+                                  ? preview
+                                  : '/placeholder.svg'
+                              }
+                              alt={t('media-alt', { number: index + 1 })}
+                              className="h-full w-full object-cover"
+                              width={100}
+                              height={100}
+                            />
+                          )}
+                        </div>
+                        <Button
+                          type="button"
+                          variant="destructive"
+                          size="icon"
+                          className="absolute -top-2 -right-2 h-6 w-6 rounded-full opacity-0 shadow-lg transition-opacity group-hover:opacity-100"
+                          onClick={() => removeMedia(index)}
+                        >
+                          <X className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+
+            <div className="flex w-full flex-col-reverse gap-3 border-t pt-4 sm:flex-row sm:justify-end">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => handleOpenChange(false)}
+                disabled={isSubmitting}
+                className="w-full sm:w-auto"
+              >
+                {t('cancel')}
+              </Button>
+              <Button
+                type="submit"
+                disabled={
+                  !formData.product ||
+                  !formData.type ||
+                  !formData.suggestion.trim() ||
+                  isSubmitting
+                }
+                className="w-full bg-orange-600 hover:bg-orange-700 disabled:opacity-50 sm:w-auto"
+              >
+                {isSubmitting ? (
+                  <div className="flex items-center gap-2">
+                    <div className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
+                    {t('submitting')}
+                  </div>
+                ) : (
+                  <div className="flex items-center gap-2">
+                    <CheckCircle className="h-4 w-4" />
+                    {t('submit-report')}
+                  </div>
+                )}
+              </Button>
+            </div>
+          </form>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}