convert-ui/components/converter/FileConverter.tsx

'use client';

import * as React from 'react';
import { ArrowRight, ArrowDown } from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/Card';
import { FileUpload } from './FileUpload';
import { FormatSelector } from './FormatSelector';
import { ConversionPreview } from './ConversionPreview';
import { ConversionOptionsPanel } from './ConversionOptions';
import { FileInfo } from './FileInfo';
import { useToast } from '@/components/ui/Toast';
import {
  SUPPORTED_FORMATS,
  getFormatByExtension,
  getFormatByMimeType,
  getCompatibleFormats,
} from '@/lib/utils/formatMappings';
import { convertWithFFmpeg } from '@/lib/converters/ffmpegService';
import { convertWithImageMagick } from '@/lib/converters/imagemagickService';
import { addToHistory } from '@/lib/storage/history';
import { downloadBlobsAsZip, generateOutputFilename } from '@/lib/utils/fileUtils';
import type { ConversionJob, ConversionFormat, ConversionOptions } from '@/types/conversion';

export function FileConverter() {
  const { addToast } = useToast();

  const [selectedFiles, setSelectedFiles] = React.useState<File[]>([]);
  const [inputFormat, setInputFormat] = React.useState<ConversionFormat | undefined>();
  const [outputFormat, setOutputFormat] = React.useState<ConversionFormat | undefined>();
  const [compatibleFormats, setCompatibleFormats] = React.useState<ConversionFormat[]>([]);
  const [conversionJobs, setConversionJobs] = React.useState<ConversionJob[]>([]);
  const [conversionOptions, setConversionOptions] = React.useState<ConversionOptions>({});

  // Detect input format when files are selected
  React.useEffect(() => {
    if (selectedFiles.length === 0) {
      setInputFormat(undefined);
      setOutputFormat(undefined);
      setCompatibleFormats([]);
      setConversionJobs([]);
      return;
    }

    // Use first file to detect format (assume all files same format for batch)
    const firstFile = selectedFiles[0];

    // Try to detect format from extension
    const ext = firstFile.name.split('.').pop()?.toLowerCase();
    let format = ext ? getFormatByExtension(ext) : undefined;

    // Fallback to MIME type
    if (!format) {
      format = getFormatByMimeType(firstFile.type);
    }

    if (format) {
      setInputFormat(format);
      const compatible = getCompatibleFormats(format);
      setCompatibleFormats(compatible);

      // Auto-select first compatible format
      if (compatible.length > 0 && !outputFormat) {
        setOutputFormat(compatible[0]);
      }

      addToast(`Detected format: ${format.name} (${selectedFiles.length} file${selectedFiles.length > 1 ? 's' : ''})`, 'success');
    } else {
      addToast('Could not detect file format', 'error');
      setInputFormat(undefined);
      setCompatibleFormats([]);
    }
  }, [selectedFiles]);

  const handleConvert = async () => {
    if (selectedFiles.length === 0 || !inputFormat || !outputFormat) {
      addToast('Please select files and output format', 'error');
      return;
    }

    // Create conversion jobs for all files
    const jobs: ConversionJob[] = selectedFiles.map((file) => ({
      id: Math.random().toString(36).substring(7),
      inputFile: file,
      inputFormat,
      outputFormat,
      options: conversionOptions,
      status: 'pending',
      progress: 0,
      startTime: Date.now(),
    }));

    setConversionJobs(jobs);

    // Convert files sequentially
    for (let i = 0; i < jobs.length; i++) {
      const job = jobs[i];

      try {
        // Update job to loading
        setConversionJobs((prev) =>
          prev.map((j, idx) => idx === i ? { ...j, status: 'loading' as const } : j)
        );

        // Update job to processing
        setConversionJobs((prev) =>
          prev.map((j, idx) => idx === i ? { ...j, status: 'processing' as const, progress: 10 } : j)
        );

        // Call appropriate converter
        let result;

        switch (outputFormat.converter) {
          case 'ffmpeg':
            result = await convertWithFFmpeg(job.inputFile, outputFormat.extension, conversionOptions, (progress) => {
              setConversionJobs((prev) =>
                prev.map((j, idx) => idx === i ? { ...j, progress } : j)
              );
            });
            break;

          case 'imagemagick':
            result = await convertWithImageMagick(
              job.inputFile,
              outputFormat.extension,
              conversionOptions,
              (progress) => {
                setConversionJobs((prev) =>
                  prev.map((j, idx) => idx === i ? { ...j, progress } : j)
                );
              }
            );
            break;

          default:
            throw new Error(`Unknown converter: ${outputFormat.converter}`);
        }

        // Update job with result
        if (result.success && result.blob) {
          setConversionJobs((prev) =>
            prev.map((j, idx) => idx === i ? {
              ...j,
              status: 'completed' as const,
              progress: 100,
              result: result.blob,
              endTime: Date.now(),
            } : j)
          );

          // Add to history
          addToHistory({
            inputFileName: job.inputFile.name,
            inputFormat: inputFormat.name,
            outputFormat: outputFormat.name,
            outputFileName: `output.${outputFormat.extension}`,
            fileSize: result.blob.size,
            result: result.blob,
          });
        } else {
          setConversionJobs((prev) =>
            prev.map((j, idx) => idx === i ? {
              ...j,
              status: 'error' as const,
              error: result.error || 'Unknown error',
              endTime: Date.now(),
            } : j)
          );
        }
      } catch (error) {
        const errorMessage = error instanceof Error ? error.message : 'Unknown error';

        setConversionJobs((prev) =>
          prev.map((j, idx) => idx === i ? {
            ...j,
            status: 'error' as const,
            error: errorMessage,
            endTime: Date.now(),
          } : j)
        );
      }
    }

    // Show completion message
    const successCount = jobs.filter(j => j.status === 'completed').length;
    if (successCount === jobs.length) {
      addToast(`All ${jobs.length} files converted successfully!`, 'success');
    } else if (successCount > 0) {
      addToast(`${successCount}/${jobs.length} files converted successfully`, 'info');
    } else {
      addToast('All conversions failed', 'error');
    }
  };

  const handleReset = () => {
    setSelectedFiles([]);
    setInputFormat(undefined);
    setOutputFormat(undefined);
    setCompatibleFormats([]);
    setConversionJobs([]);
    setConversionOptions({});
  };

  const handleFileSelect = (files: File[]) => {
    setSelectedFiles((prev) => [...prev, ...files]);
  };

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

  const handleDownloadAll = async () => {
    if (!outputFormat) return;

    const completedJobs = conversionJobs.filter(job => job.status === 'completed' && job.result);

    if (completedJobs.length === 0) {
      addToast('No files to download', 'error');
      return;
    }

    if (completedJobs.length === 1) {
      // Just download the single file
      const job = completedJobs[0];
      const filename = generateOutputFilename(job.inputFile.name, outputFormat.extension);
      const url = URL.createObjectURL(job.result!);
      const a = document.createElement('a');
      a.href = url;
      a.download = filename;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
      return;
    }

    // Download multiple files as ZIP
    const files = completedJobs.map(job => ({
      blob: job.result!,
      filename: generateOutputFilename(job.inputFile.name, outputFormat.extension),
    }));

    await downloadBlobsAsZip(files, `converted-files.zip`);
    addToast(`Downloaded ${files.length} files as ZIP`, 'success');
  };

  const isConverting = conversionJobs.some(job => job.status === 'loading' || job.status === 'processing');
  const isConvertDisabled = selectedFiles.length === 0 || !outputFormat || isConverting;
  const completedCount = conversionJobs.filter(job => job.status === 'completed').length;

  return (
    <div className="w-full max-w-4xl mx-auto space-y-6">
      {/* Header */}
      <Card>
        <CardHeader>
          <CardTitle>File Converter</CardTitle>
          <CardDescription>
            Convert videos, audio, and images directly in your browser using WebAssembly
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* File upload */}
          <FileUpload
            onFileSelect={handleFileSelect}
            onFileRemove={handleFileRemove}
            selectedFiles={selectedFiles}
            disabled={isConverting}
          />

          {/* File Info - show first file */}
          {selectedFiles.length > 0 && inputFormat && (
            <FileInfo file={selectedFiles[0]} format={inputFormat} />
          )}

          {/* Format selection */}
          {inputFormat && compatibleFormats.length > 0 && (
            <div className="grid grid-cols-1 md:grid-cols-[1fr_auto_1fr] gap-4 items-start">
              {/* Input format */}
              <div>
                <label className="text-sm font-medium text-foreground mb-2 block">Input Format</label>
                <Card className="p-4">
                  <p className="font-medium">{inputFormat.name}</p>
                  <p className="text-xs text-muted-foreground mt-1">{inputFormat.description}</p>
                </Card>
              </div>

              {/* Arrow - horizontal on desktop, vertical on mobile */}
              <div className="flex md:hidden items-center justify-center py-2">
                <ArrowDown className="h-5 w-5 text-muted-foreground" />
              </div>
              <div className="hidden md:flex items-center justify-center pt-8">
                <ArrowRight className="h-5 w-5 text-muted-foreground" />
              </div>

              {/* Output format */}
              <FormatSelector
                formats={compatibleFormats}
                selectedFormat={outputFormat}
                onFormatSelect={setOutputFormat}
                label="Output Format"
                disabled={isConverting}
              />
            </div>
          )}

          {/* Conversion Options */}
          {inputFormat && outputFormat && (
            <ConversionOptionsPanel
              inputFormat={inputFormat}
              outputFormat={outputFormat}
              options={conversionOptions}
              onOptionsChange={setConversionOptions}
              disabled={isConverting}
            />
          )}

          {/* Convert button */}
          {inputFormat && outputFormat && (
            <div className="flex gap-3">
              <Button
                onClick={handleConvert}
                disabled={isConvertDisabled}
                className="flex-1"
                size="lg"
              >
                {isConverting
                  ? 'Converting...'
                  : `Convert ${selectedFiles.length} File${selectedFiles.length > 1 ? 's' : ''}`}
              </Button>
              <Button onClick={handleReset} variant="outline" size="lg">
                Reset
              </Button>
            </div>
          )}
        </CardContent>
      </Card>

      {/* Download All Button */}
      {completedCount > 0 && (
        <Card>
          <CardContent className="pt-6">
            <Button
              onClick={handleDownloadAll}
              className="w-full"
              size="lg"
              variant="default"
            >
              Download All ({completedCount} file{completedCount > 1 ? 's' : ''})
              {completedCount > 1 && ' as ZIP'}
            </Button>
          </CardContent>
        </Card>
      )}

      {/* Conversion previews */}
      {conversionJobs.length > 0 && (
        <div className="space-y-4">
          {conversionJobs.map((job) => (
            <ConversionPreview key={job.id} job={job} />
          ))}
        </div>
      )}
    </div>
  );
}