office_translator/frontend/src/app/dashboard/translate/TranslationComplete.tsx

'use client';

import { useState, useEffect, useRef } from 'react';
import { CheckCircle, Download, Plus, Loader2 } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { useNotification } from '@/components/ui/notification';

interface TranslationCompleteProps {
  jobId: string;
  fileName: string | null;
  onNewTranslation: () => void;
}

const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';

export function TranslationComplete({
  jobId,
  fileName,
  onNewTranslation,
}: TranslationCompleteProps) {
  const [isDownloading, setIsDownloading] = useState(false);
  const { success, error } = useNotification();
  const blobUrlRef = useRef<string | null>(null);

  const handleDownload = async () => {
    setIsDownloading(true);

    try {
      const token = localStorage.getItem('token');
      const headers: Record<string, string> = {};
      if (token) {
        headers['Authorization'] = `Bearer ${token}`;
      }

      const response = await fetch(`${API_BASE}/api/v1/download/${jobId}`, { headers });

      if (!response.ok) {
        let errorMessage = 'Download failed';
        try {
          const errorData = await response.json();
          errorMessage = errorData.message || errorData.error || errorMessage;
        } catch {
          // Response not JSON
        }
        throw new Error(errorMessage);
      }

      const contentDisposition = response.headers.get('Content-Disposition');
      let downloadFilename = 'translated_document';
      
      if (contentDisposition) {
        const filenameMatch = contentDisposition.match(/filename\*?=['"]?(?:UTF-\d['"]*)?([^;\r\n"']+)/i);
        if (filenameMatch && filenameMatch[1]) {
          downloadFilename = filenameMatch[1];
        }
      } else if (fileName) {
        const ext = fileName.split('.').pop() || '';
        const baseName = fileName.replace(/\.[^.]+$/, '');
        downloadFilename = `${baseName}_translated.${ext}`;
      }

      const blob = await response.blob();
      const url = URL.createObjectURL(blob);
      blobUrlRef.current = url;
      
      const a = document.createElement('a');
      a.href = url;
      a.download = downloadFilename;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      
      setTimeout(() => {
        if (blobUrlRef.current) {
          URL.revokeObjectURL(blobUrlRef.current);
          blobUrlRef.current = null;
        }
      }, 1000);

      success({
        title: 'Download Complete',
        description: `${downloadFilename} has been downloaded successfully.`,
      });
    } catch (err) {
      error({
        title: 'Download Failed',
        description: err instanceof Error ? err.message : 'Failed to download the translated file.',
      });
    } finally {
      setIsDownloading(false);
      setTimeout(() => {
        if (blobUrlRef.current) {
          URL.revokeObjectURL(blobUrlRef.current);
          blobUrlRef.current = null;
        }
      }, 5000);
    }
  };

  useEffect(() => {
    return () => {
      if (blobUrlRef.current) {
        URL.revokeObjectURL(blobUrlRef.current);
        blobUrlRef.current = null;
      }
    };
  }, []);

  return (
    <Card className="border-success/40 bg-gradient-to-br from-success/10 to-success/5 overflow-hidden">
      <CardContent className="p-6 text-center">
        <div className="w-14 h-14 mx-auto mb-4 rounded-full bg-success/20 flex items-center justify-center">
          <CheckCircle className="w-8 h-8 text-success" />
        </div>
        
        <h3 className="text-lg font-semibold mb-2">Translation Complete!</h3>
        <p className="text-sm text-muted-foreground mb-5">
          {fileName ? `"${fileName}" has been translated successfully.` : 'Your document has been translated successfully.'}
        </p>
        
        <div className="flex flex-col sm:flex-row gap-3 justify-center">
          <Button
            onClick={handleDownload}
            disabled={isDownloading}
            className="gap-2"
          >
            {isDownloading ? (
              <>
                <Loader2 className="w-4 h-4 animate-spin" />
                Downloading...
              </>
            ) : (
              <>
                <Download className="w-4 h-4" />
                Download Translated File
              </>
            )}
          </Button>
          
          <Button
            variant="outline"
            onClick={onNewTranslation}
            className="gap-2"
          >
            <Plus className="w-4 h-4" />
            New Translation
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}