memefast/resources/js/modules/editor/partials/canvas/video-download/video-download-modal.jsx

import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Progress } from '@/components/ui/progress';
import { Textarea } from '@/components/ui/textarea';
import { Clock10Icon, Download, Droplets } from 'lucide-react';
import { useState } from 'react';

const VideoDownloadModal = ({
    nonWatermarkVideosLeft = 0,
    isOpen,
    onClose,
    ffmpegCommand,
    handleDownloadButton,
    isExporting,
    exportProgress,
    exportStatus,
}) => {
    const [showDebug, setShowDebug] = useState(false);
    const [exportType, setExportType] = useState(null);

    const handleExportWithoutWatermark = () => {
        setExportType('without');
        handleDownloadButton();
    };

    const handleExportWithWatermark = () => {
        setExportType('with');
        handleDownloadButton();
    };

    const handleClose = () => {
        onClose();
        setTimeout(() => {
            setExportType(null);
        }, 300);
    };

    const isComplete = exportProgress >= 100 && !isExporting;

    const exportTimes = [
        {
            icon: '🐇',
            label: 'Modern and fast devices',
            time: '1-2 mins',
        },
        {
            icon: '🐢',
            label: 'Medium range devices',
            time: '3-5 mins',
        },
        {
            icon: '🥔',
            label: 'Older / potato devices',
            time: '>5 mins',
        },
    ];

    return (
        <Dialog open={isOpen} onOpenChange={!isExporting ? onClose : undefined}>
            <DialogContent
                className="border-2 shadow-2xl sm:max-w-lg [&>button]:hidden"
                onInteractOutside={(e) => isExporting && e.preventDefault()}
                onEscapeKeyDown={(e) => isExporting && e.preventDefault()}
            >
                <DialogHeader className="space-y-4">
                    <DialogTitle className="text-2xl font-semibold tracking-tight">Export Video</DialogTitle>
                    <DialogDescription className="hidden text-base leading-relaxed"></DialogDescription>
                </DialogHeader>

                {!isExporting && !isComplete && (
                    <div className="space-y-4">
                        <div className="bg-muted/30 rounded-xl border p-6">
                            <div className="flex items-start gap-3">
                                <div className="space-y-3">
                                    <p className="flex items-center gap-1 font-medium">
                                        <Clock10Icon className="h-4 w-4" /> Estimated export time
                                    </p>
                                    <div className="text-muted-foreground space-y-2 text-sm">
                                        {exportTimes.map((exportTime, index) => (
                                            <div className="grid items-center justify-between sm:flex sm:gap-3">
                                                <div className="grid items-center text-base sm:flex sm:gap-1">
                                                    <span className="text-2xl sm:text-base">{exportTime.icon}</span>
                                                    <span>{exportTime.label}</span>
                                                </div>
                                                <span className="font-mono text-xs sm:text-base">{exportTime.time}</span>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div className="space-y-3">
                            {nonWatermarkVideosLeft > 0 && (
                                <Button
                                    onClick={handleExportWithoutWatermark}
                                    className="h-14 w-full text-base font-medium shadow-md transition-all duration-200 hover:shadow-lg"
                                    size="lg"
                                >
                                    Export without watermark ({nonWatermarkVideosLeft} left)
                                </Button>
                            )}
                            <Button
                                onClick={handleExportWithWatermark}
                                variant="outline"
                                className="hover:bg-muted/50 h-14 w-full border-2 bg-transparent text-base font-medium transition-all duration-200"
                                size="lg"
                            >
                                Export
                            </Button>
                            <Button variant="link" onClick={handleClose} className="h-8 w-full">
                                Close
                            </Button>
                        </div>

                        {showDebug && <Textarea value={ffmpegCommand} readOnly className="mb-4" />}
                    </div>
                )}

                {isExporting && (
                    <div className="space-y-8 py-4">
                        <div className="space-y-4 text-center">
                            <div className="bg-muted mx-auto flex h-16 w-16 items-center justify-center rounded-full">
                                {exportType === 'without' ? (
                                    <Download className="h-8 w-8 animate-pulse" />
                                ) : (
                                    <Droplets className="h-8 w-8 animate-pulse" />
                                )}
                            </div>
                            <div className="space-y-2">
                                <h3 className="text-xl font-semibold">Exporting {exportType === 'without' ? 'without watermark' : 'with'}</h3>
                                {exportStatus && <p className="text-muted-foreground text-sm text-wrap">{exportStatus}</p>}
                            </div>
                        </div>

                        <div className="space-y-3">
                            <div className="flex items-center justify-between">
                                <span className="text-sm font-medium">Progress</span>
                                <span className="font-mono text-sm font-semibold">{Math.round(exportProgress)}%</span>
                            </div>
                            <Progress value={exportProgress} className="h-3" />
                        </div>
                    </div>
                )}
            </DialogContent>
        </Dialog>
    );
};

export default VideoDownloadModal;