kit-ui/components/media/FileConverter.tsx

'use client';

import * as React from 'react';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Slider } from '@/components/ui/slider';
import { FileUpload } from './FileUpload';
import { ConversionPreview } from './ConversionPreview';
import { toast } from 'sonner';
import {
  getFormatByExtension,
  getFormatByMimeType,
  getCompatibleFormats,
} from '@/lib/media/utils/formatMappings';
import { convertWithFFmpeg } from '@/lib/media/converters/ffmpegService';
import { convertWithImageMagick } from '@/lib/media/converters/imagemagickService';
import { addToHistory } from '@/lib/media/storage/history';
import { downloadBlobsAsZip, generateOutputFilename } from '@/lib/media/utils/fileUtils';
import type { ConversionJob, ConversionFormat, ConversionOptions } from '@/types/media';
import { ShieldCheck, Download, RotateCcw, Loader2 } from 'lucide-react';
import { cn } from '@/lib/utils';

type MobileTab = 'upload' | 'convert';

const actionBtn =
  'flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs glass rounded-md border border-border/30 text-muted-foreground hover:text-primary hover:border-primary/30 hover:bg-primary/10 transition-all disabled:opacity-40 disabled:cursor-not-allowed';

export function FileConverter() {
  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>({});
  const [mobileTab, setMobileTab] = React.useState<MobileTab>('upload');
  const fileInputRef = React.useRef<HTMLInputElement>(null);

  // Detect format when files change
  React.useEffect(() => {
    if (selectedFiles.length === 0) {
      setInputFormat(undefined);
      setOutputFormat(undefined);
      setCompatibleFormats([]);
      setConversionJobs([]);
      return;
    }
    const first = selectedFiles[0];
    const ext = first.name.split('.').pop()?.toLowerCase();
    const fmt = (ext ? getFormatByExtension(ext) : undefined) ?? getFormatByMimeType(first.type);
    if (fmt) {
      setInputFormat(fmt);
      const compat = getCompatibleFormats(fmt);
      setCompatibleFormats(compat);
      if (compat.length > 0 && !outputFormat) setOutputFormat(compat[0]);
      toast.success(`Detected: ${fmt.name} · ${selectedFiles.length} file${selectedFiles.length > 1 ? 's' : ''}`);
      // Auto-advance to convert tab on mobile
      setMobileTab('convert');
    } else {
      toast.error('Could not detect file format');
      setInputFormat(undefined);
      setCompatibleFormats([]);
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selectedFiles]);

  const runConversion = async (
    jobIndex: number,
    jobs: ConversionJob[],
    outFmt: ConversionFormat
  ) => {
    const job = jobs[jobIndex];
    const updateJob = (patch: Partial<ConversionJob>) =>
      setConversionJobs((prev) => prev.map((j, i) => (i === jobIndex ? { ...j, ...patch } : j)));

    try {
      updateJob({ status: 'loading' });
      updateJob({ status: 'processing', progress: 10 });

      const onProgress = (progress: number) => updateJob({ progress });
      const result =
        outFmt.converter === 'ffmpeg'
          ? await convertWithFFmpeg(job.inputFile, outFmt.extension, conversionOptions, onProgress)
          : await convertWithImageMagick(job.inputFile, outFmt.extension, conversionOptions, onProgress);

      if (result.success && result.blob) {
        updateJob({ status: 'completed', progress: 100, result: result.blob, endTime: Date.now() });
        addToHistory({
          inputFileName: job.inputFile.name,
          inputFormat: job.inputFormat.name,
          outputFormat: outFmt.name,
          outputFileName: generateOutputFilename(job.inputFile.name, outFmt.extension),
          fileSize: result.blob.size,
          result: result.blob,
        });
        return true;
      } else {
        updateJob({ status: 'error', error: result.error || 'Unknown error', endTime: Date.now() });
        return false;
      }
    } catch (err) {
      updateJob({ status: 'error', error: err instanceof Error ? err.message : 'Unknown error', endTime: Date.now() });
      return false;
    }
  };

  const handleConvert = async () => {
    if (!selectedFiles.length || !inputFormat || !outputFormat) {
      toast.error('Please select files and an output format');
      return;
    }
    const jobs: ConversionJob[] = selectedFiles.map((file) => ({
      id: Math.random().toString(36).slice(2, 9),
      inputFile: file,
      inputFormat: inputFormat!,
      outputFormat,
      options: conversionOptions,
      status: 'pending',
      progress: 0,
      startTime: Date.now(),
    }));
    setConversionJobs(jobs);

    let ok = 0;
    for (let i = 0; i < jobs.length; i++) {
      const success = await runConversion(i, jobs, outputFormat);
      if (success) ok++;
    }

    if (ok === jobs.length) toast.success(`All ${jobs.length} file${jobs.length > 1 ? 's' : ''} converted!`);
    else if (ok > 0) toast.info(`${ok}/${jobs.length} files converted`);
    else toast.error('All conversions failed');
  };

  const handleRetry = async (jobId: string) => {
    const idx = conversionJobs.findIndex((j) => j.id === jobId);
    if (idx === -1 || !outputFormat) return;
    setConversionJobs((prev) =>
      prev.map((j, i) =>
        i === idx ? { ...j, status: 'loading', progress: 0, error: undefined, startTime: Date.now() } : j
      )
    );
    const success = await runConversion(idx, conversionJobs, outputFormat);
    if (success) toast.success('Conversion completed!');
    else toast.error('Retry failed');
  };

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

  const handleDownloadAll = async () => {
    if (!outputFormat) return;
    const done = conversionJobs.filter((j) => j.status === 'completed' && j.result);
    if (!done.length) { toast.error('No completed files'); return; }
    if (done.length === 1) {
      const url = URL.createObjectURL(done[0].result!);
      const a = document.createElement('a');
      a.href = url;
      a.download = generateOutputFilename(done[0].inputFile.name, outputFormat.extension);
      a.click();
      URL.revokeObjectURL(url);
      return;
    }
    await downloadBlobsAsZip(
      done.map((j) => ({ blob: j.result!, filename: generateOutputFilename(j.inputFile.name, outputFormat.extension) })),
      'converted-files.zip'
    );
    toast.success(`Downloaded ${done.length} files as ZIP`);
  };

  const isConverting = conversionJobs.some((j) => j.status === 'loading' || j.status === 'processing');
  const completedCount = conversionJobs.filter((j) => j.status === 'completed').length;
  const setOpt = (patch: Partial<ConversionOptions>) =>
    setConversionOptions((prev) => ({ ...prev, ...patch }));

  return (
    <div className="flex flex-col gap-4">

      {/* ── Mobile tab switcher ─────────────────────────────── */}
      <div className="flex lg:hidden glass rounded-xl p-1 gap-1">
        {(['upload', 'convert'] as MobileTab[]).map((t) => (
          <button
            key={t}
            onClick={() => setMobileTab(t)}
            className={cn(
              'flex-1 py-2.5 rounded-lg text-sm font-medium capitalize transition-all',
              mobileTab === t
                ? 'bg-primary text-primary-foreground shadow-sm'
                : 'text-muted-foreground hover:text-foreground'
            )}
          >
            {t === 'upload' ? 'Upload' : 'Convert'}
          </button>
        ))}
      </div>

      {/* ── Main layout ─────────────────────────────────────── */}
      <div
        className="grid grid-cols-1 lg:grid-cols-5 gap-4"
        style={{ height: 'calc(100svh - 220px)', minHeight: '620px' }}
      >

        {/* Left: upload zone */}
        <div
          className={cn(
            'lg:col-span-2 flex flex-col overflow-hidden',
            mobileTab !== 'upload' && 'hidden lg:flex'
          )}
        >
          <div className="glass rounded-xl p-4 flex flex-col flex-1 min-h-0 overflow-hidden">
            <div className="flex items-center justify-between mb-3 shrink-0">
              <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
                Upload
              </span>
              <span className="flex items-center gap-1 text-[10px] text-emerald-400/60 font-mono">
                <ShieldCheck className="w-3 h-3" />
                Zero uploads
              </span>
            </div>
            <FileUpload
              onFileSelect={(files) => setSelectedFiles((prev) => [...prev, ...files])}
              onFileRemove={(i) => setSelectedFiles((prev) => prev.filter((_, idx) => idx !== i))}
              selectedFiles={selectedFiles}
              disabled={isConverting}
              inputRef={fileInputRef}
              inputFormat={inputFormat}
            />
          </div>
        </div>

        {/* Right: options + results */}
        <div
          className={cn(
            'lg:col-span-3 flex flex-col gap-3 overflow-hidden',
            mobileTab !== 'convert' && 'hidden lg:flex'
          )}
        >
          {/* Options panel */}
          {inputFormat && compatibleFormats.length > 0 ? (
            <div className="glass rounded-xl p-4 shrink-0">
              {/* Detected format */}
              <div className="flex items-center justify-between mb-3">
                <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
                  Output Format
                </span>
                {inputFormat && (
                  <span className="px-2 py-0.5 rounded-md bg-primary/10 text-primary text-[10px] font-mono border border-primary/20">
                    {inputFormat.name}
                  </span>
                )}
              </div>

              {/* Format pill grid */}
              <div className="flex flex-wrap gap-1.5 mb-4">
                {compatibleFormats.map((fmt) => (
                  <button
                    key={fmt.id}
                    onClick={() => setOutputFormat(fmt)}
                    disabled={isConverting}
                    className={cn(
                      'px-2.5 py-1 rounded-lg border text-xs font-mono transition-all',
                      outputFormat?.id === fmt.id
                        ? 'bg-primary/10 border-primary/40 text-primary'
                        : 'border-border/30 text-muted-foreground hover:border-primary/30 hover:text-foreground',
                      isConverting && 'opacity-40 cursor-not-allowed'
                    )}
                  >
                    .{fmt.extension}
                  </button>
                ))}
              </div>

              {outputFormat && (
                <>
                  <div className="border-t border-border/25 pt-3 space-y-3">

                    {/* Video options */}
                    {outputFormat.category === 'video' && (
                      <>
                        <div className="space-y-1.5">
                          <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Video Codec</span>
                          <Select
                            value={conversionOptions.videoCodec || 'default'}
                            onValueChange={(v) => setOpt({ videoCodec: v === 'default' ? undefined : v })}
                            disabled={isConverting}
                          >
                            <SelectTrigger className="h-7 w-full text-xs border-border/30 bg-transparent hover:border-primary/30 transition-colors font-mono">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="default">Auto (Recommended)</SelectItem>
                              <SelectItem value="libx264">H.264</SelectItem>
                              <SelectItem value="libx265">H.265</SelectItem>
                              <SelectItem value="libvpx">VP8 (WebM)</SelectItem>
                              <SelectItem value="libvpx-vp9">VP9 (WebM)</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>

                        <div className="space-y-1.5">
                          <div className="flex items-center justify-between">
                            <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Video Bitrate</span>
                            <span className="text-[10px] text-muted-foreground/40 font-mono tabular-nums">{conversionOptions.videoBitrate || '2M'}</span>
                          </div>
                          <Slider
                            min={0.5} max={10} step={0.5}
                            value={[parseFloat(conversionOptions.videoBitrate?.replace('M', '') || '2')]}
                            onValueChange={(v) => setOpt({ videoBitrate: `${v[0]}M` })}
                            disabled={isConverting}
                          />
                        </div>

                        <div className="grid grid-cols-2 gap-2">
                          <div className="space-y-1.5">
                            <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Resolution</span>
                            <Select
                              value={conversionOptions.videoResolution || 'original'}
                              onValueChange={(v) => setOpt({ videoResolution: v === 'original' ? undefined : v })}
                              disabled={isConverting}
                            >
                              <SelectTrigger className="h-7 text-xs border-border/30 bg-transparent hover:border-primary/30 font-mono">
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="original">Original</SelectItem>
                                <SelectItem value="1920x-1">1080p</SelectItem>
                                <SelectItem value="1280x-1">720p</SelectItem>
                                <SelectItem value="854x-1">480p</SelectItem>
                                <SelectItem value="640x-1">360p</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>
                          <div className="space-y-1.5">
                            <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">FPS</span>
                            <Select
                              value={conversionOptions.videoFps?.toString() || 'original'}
                              onValueChange={(v) => setOpt({ videoFps: v === 'original' ? undefined : parseInt(v) })}
                              disabled={isConverting}
                            >
                              <SelectTrigger className="h-7 text-xs border-border/30 bg-transparent hover:border-primary/30 font-mono">
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="original">Original</SelectItem>
                                <SelectItem value="60">60 fps</SelectItem>
                                <SelectItem value="30">30 fps</SelectItem>
                                <SelectItem value="24">24 fps</SelectItem>
                                <SelectItem value="15">15 fps</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>
                        </div>

                        <div className="space-y-1.5">
                          <div className="flex items-center justify-between">
                            <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Audio Bitrate</span>
                            <span className="text-[10px] text-muted-foreground/40 font-mono tabular-nums">{conversionOptions.audioBitrate || '128k'}</span>
                          </div>
                          <Slider
                            min={64} max={320} step={32}
                            value={[parseInt(conversionOptions.audioBitrate?.replace('k', '') || '128')]}
                            onValueChange={(v) => setOpt({ audioBitrate: `${v[0]}k` })}
                            disabled={isConverting}
                          />
                        </div>
                      </>
                    )}

                    {/* Audio options */}
                    {outputFormat.category === 'audio' && (
                      <>
                        <div className="space-y-1.5">
                          <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Codec</span>
                          <Select
                            value={conversionOptions.audioCodec || 'default'}
                            onValueChange={(v) => setOpt({ audioCodec: v === 'default' ? undefined : v })}
                            disabled={isConverting}
                          >
                            <SelectTrigger className="h-7 w-full text-xs border-border/30 bg-transparent hover:border-primary/30 font-mono">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="default">Auto</SelectItem>
                              <SelectItem value="libmp3lame">MP3 (LAME)</SelectItem>
                              <SelectItem value="aac">AAC</SelectItem>
                              <SelectItem value="libvorbis">Vorbis</SelectItem>
                              <SelectItem value="libopus">Opus</SelectItem>
                              <SelectItem value="flac">FLAC</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>

                        <div className="space-y-1.5">
                          <div className="flex items-center justify-between">
                            <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Bitrate</span>
                            <span className="text-[10px] text-muted-foreground/40 font-mono tabular-nums">{conversionOptions.audioBitrate || '192k'}</span>
                          </div>
                          <Slider
                            min={64} max={320} step={32}
                            value={[parseInt(conversionOptions.audioBitrate?.replace('k', '') || '192')]}
                            onValueChange={(v) => setOpt({ audioBitrate: `${v[0]}k` })}
                            disabled={isConverting}
                          />
                        </div>

                        <div className="grid grid-cols-2 gap-2">
                          <div className="space-y-1.5">
                            <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Sample Rate</span>
                            <Select
                              value={conversionOptions.audioSampleRate?.toString() || 'original'}
                              onValueChange={(v) => setOpt({ audioSampleRate: v === 'original' ? undefined : parseInt(v) })}
                              disabled={isConverting}
                            >
                              <SelectTrigger className="h-7 text-xs border-border/30 bg-transparent hover:border-primary/30 font-mono">
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="original">Original</SelectItem>
                                <SelectItem value="48000">48 kHz</SelectItem>
                                <SelectItem value="44100">44.1 kHz</SelectItem>
                                <SelectItem value="22050">22 kHz</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>
                          <div className="space-y-1.5">
                            <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Channels</span>
                            <Select
                              value={conversionOptions.audioChannels?.toString() || 'original'}
                              onValueChange={(v) => setOpt({ audioChannels: v === 'original' ? undefined : parseInt(v) })}
                              disabled={isConverting}
                            >
                              <SelectTrigger className="h-7 text-xs border-border/30 bg-transparent hover:border-primary/30 font-mono">
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="original">Original</SelectItem>
                                <SelectItem value="2">Stereo</SelectItem>
                                <SelectItem value="1">Mono</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>
                        </div>
                      </>
                    )}

                    {/* Image options */}
                    {outputFormat.category === 'image' && (
                      <>
                        <div className="space-y-1.5">
                          <div className="flex items-center justify-between">
                            <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Quality</span>
                            <span className="text-[10px] text-muted-foreground/40 font-mono tabular-nums">{conversionOptions.imageQuality ?? 85}%</span>
                          </div>
                          <Slider
                            min={1} max={100} step={1}
                            value={[conversionOptions.imageQuality ?? 85]}
                            onValueChange={(v) => setOpt({ imageQuality: v[0] })}
                            disabled={isConverting}
                          />
                        </div>

                        <div className="grid grid-cols-2 gap-2">
                          {(['imageWidth', 'imageHeight'] as const).map((key) => (
                            <div key={key} className="space-y-1.5">
                              <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
                                {key === 'imageWidth' ? 'Width (px)' : 'Height (px)'}
                              </span>
                              <input
                                type="number"
                                value={conversionOptions[key] ?? ''}
                                onChange={(e) => setOpt({ [key]: e.target.value ? parseInt(e.target.value) : undefined })}
                                placeholder="Original"
                                disabled={isConverting}
                                className="w-full bg-transparent border border-border/40 rounded-lg px-2.5 py-1.5 text-xs font-mono outline-none focus:border-primary/50 transition-colors placeholder:text-muted-foreground/30 disabled:opacity-40"
                              />
                            </div>
                          ))}
                        </div>
                      </>
                    )}
                  </div>

                  {/* Action buttons */}
                  <div className="flex gap-2 mt-4 pt-3 border-t border-border/25">
                    <button
                      onClick={handleConvert}
                      disabled={!selectedFiles.length || !outputFormat || isConverting}
                      className={cn(actionBtn, 'flex-1 py-2',
                        !isConverting && selectedFiles.length && outputFormat
                          ? 'hover:text-primary'
                          : ''
                      )}
                    >
                      {isConverting
                        ? <><Loader2 className="w-3 h-3 animate-spin" />Converting…</>
                        : `Convert ${selectedFiles.length} file${selectedFiles.length !== 1 ? 's' : ''}`
                      }
                    </button>
                    <button onClick={handleReset} className={actionBtn} title="Reset">
                      <RotateCcw className="w-3 h-3" />
                    </button>
                  </div>
                </>
              )}
            </div>
          ) : (
            /* No files yet — right panel placeholder */
            <div className="glass rounded-xl p-4 flex flex-col items-center justify-center flex-1 min-h-0 text-center">
              <div className="w-12 h-12 rounded-full bg-primary/8 flex items-center justify-center mb-3">
                <ShieldCheck className="w-5 h-5 text-primary/30" />
              </div>
              <p className="text-xs text-muted-foreground/30 font-mono">
                Upload files to see conversion options
              </p>
            </div>
          )}

          {/* Results panel */}
          {conversionJobs.length > 0 && (
            <div className="glass rounded-xl p-3 flex flex-col flex-1 min-h-0 overflow-hidden">
              <div className="flex items-center justify-between mb-3 shrink-0">
                <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
                  Results
                </span>
                {completedCount > 0 && (
                  <button onClick={handleDownloadAll} className={actionBtn}>
                    <Download className="w-3 h-3" />
                    {completedCount > 1 ? `Download all (${completedCount}) as ZIP` : 'Download'}
                  </button>
                )}
              </div>
              <div className="flex-1 min-h-0 overflow-y-auto scrollbar-thin scrollbar-thumb-primary/20 scrollbar-track-transparent space-y-2 pr-0.5">
                {conversionJobs.map((job) => (
                  <ConversionPreview
                    key={job.id}
                    job={job}
                    onRetry={() => handleRetry(job.id)}
                  />
                ))}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}