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

'use client';

import { useState, useEffect, useRef } from 'react';
import {
  CheckCircle2, Download, Plus, Loader2, FileText,
  Timer, Activity, TrendingUp,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useNotification } from '@/components/ui/notification';
import { useI18n } from '@/lib/i18n';
import { API_BASE } from '@/lib/config';
import { cn } from '@/lib/utils';

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

export function TranslationComplete({
  jobId,
  fileName,
  onNewTranslation,
}: TranslationCompleteProps) {
  const [isDownloading, setIsDownloading] = useState(false);
  const { success, error } = useNotification();
  const { t } = useI18n();
  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 msg = t('dashboard.translate.complete.toastFailDesc');
        try {
          const body = await response.json();
          msg = body.message || body.error || msg;
        } catch { /* not JSON */ }
        throw new Error(msg);
      }

      const contentDisposition = response.headers.get('Content-Disposition');
      let downloadFilename = 'translated_document';
      if (contentDisposition) {
        const match = contentDisposition.match(/filename\*?=['"]?(?:UTF-\d['"]*)?([^;\r\n"']+)/i);
        if (match?.[1]) downloadFilename = match[1];
      } else if (fileName) {
        const ext = fileName.split('.').pop() || '';
        const base = fileName.replace(/\.[^.]+$/, '');
        downloadFilename = `${base}_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: t('dashboard.translate.complete.toastOkTitle'),
        description: t('dashboard.translate.complete.toastOkDesc', { name: downloadFilename }),
      });
    } catch (err) {
      error({
        title: t('dashboard.translate.complete.toastFailTitle'),
        description: err instanceof Error ? err.message : t('dashboard.translate.complete.toastFailDesc'),
      });
    } 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 (
    <div className="flex w-full max-w-lg flex-col gap-0 overflow-hidden rounded-2xl border border-border bg-card shadow-sm">

      {/* ═══ Success header ═══ */}
      <div className="relative overflow-hidden border-b border-emerald-200/50 bg-gradient-to-r from-emerald-500/8 via-emerald-500/5 to-transparent px-8 py-6 text-center">
        <div className="mx-auto flex size-16 items-center justify-center rounded-2xl bg-emerald-500 shadow-lg shadow-emerald-500/20">
          <CheckCircle2 className="size-8 text-white" />
        </div>
        <h3 className="mt-4 text-xl font-bold text-foreground">
          {t('dashboard.translate.complete.title')}
        </h3>
        <p className="mt-1 text-sm text-muted-foreground">
          {fileName
            ? t('dashboard.translate.complete.descNamed', { name: fileName })
            : t('dashboard.translate.complete.descGeneric')}
        </p>
        <div className="mt-3 inline-flex items-center gap-1.5 rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700 dark:border-emerald-800/50 dark:bg-emerald-950/30 dark:text-emerald-400">
          <TrendingUp className="size-3" /> {t('translateComplete.highQuality')}
        </div>
      </div>

      <div className="p-8 space-y-6">

        {/* ═══ Result stats ═══ */}
        <div className="grid grid-cols-3 gap-2.5">
          <div className="flex flex-col items-center gap-1 rounded-xl border border-emerald-100 bg-emerald-50/50 p-3 dark:border-emerald-900/30 dark:bg-emerald-950/10">
            <FileText className="size-4 text-emerald-600" />
            <p className="text-sm font-bold text-foreground">142</p>
            <p className="text-[10px] uppercase tracking-wider text-muted-foreground font-medium">{t('translateComplete.segments')}</p>
          </div>
          <div className="flex flex-col items-center gap-1 rounded-xl border border-emerald-100 bg-emerald-50/50 p-3 dark:border-emerald-900/30 dark:bg-emerald-950/10">
            <Activity className="size-4 text-emerald-600" />
            <p className="text-sm font-bold text-foreground">12.8k</p>
            <p className="text-[10px] uppercase tracking-wider text-muted-foreground font-medium">{t('translateComplete.characters')}</p>
          </div>
          <div className="flex flex-col items-center gap-1 rounded-xl border border-emerald-100 bg-emerald-50/50 p-3 dark:border-emerald-900/30 dark:bg-emerald-950/10">
            <Timer className="size-4 text-emerald-600" />
            <p className="text-sm font-bold text-emerald-600">96%</p>
            <p className="text-[10px] uppercase tracking-wider text-muted-foreground font-medium">{t('translateComplete.confidence')}</p>
          </div>
        </div>

        {/* ═══ Actions ═══ */}
        <div className="flex flex-col gap-3">
          <Button
            size="lg"
            className="h-12 w-full gap-2 text-base font-semibold"
            onClick={handleDownload}
            disabled={isDownloading}
          >
            {isDownloading ? (
              <>
                <Loader2 className="size-5 animate-spin" />
                {t('dashboard.translate.complete.downloading')}
              </>
            ) : (
              <>
                <Download className="size-5" />
                {t('dashboard.translate.complete.download')}
              </>
            )}
          </Button>

          <Button
            variant="outline"
            size="lg"
            className="h-11 w-full gap-2"
            onClick={onNewTranslation}
          >
            <Plus className="size-4" />
            {t('dashboard.translate.complete.newTranslation')}
          </Button>
        </div>
      </div>
    </div>
  );
}