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

'use client';

import { useRef } from 'react';
import { Upload, FileSpreadsheet, FileText, Presentation } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useI18n } from '@/lib/i18n';
import type { UseFileUploadReturn } from './types';

interface FileDropZoneProps {
  upload: UseFileUploadReturn;
}

export function FileDropZone({ upload }: FileDropZoneProps) {
  const inputRef = useRef<HTMLInputElement>(null);
  const { t } = useI18n();

  const handleClick = () => inputRef.current?.click();

  return (
    <div
      role="button"
      tabIndex={0}
      aria-label={t('dashboard.translate.dropzone.uploadAria')}
      className={cn(
        'relative flex flex-col items-center justify-center gap-6 rounded-2xl border-2 border-dashed',
        'min-h-[320px] cursor-pointer select-none transition-all duration-200 px-8 py-12',
        upload.isDragOver
          ? 'border-primary bg-primary/8 scale-[1.01]'
          : 'border-border bg-muted/20 hover:border-primary/50 hover:bg-muted/40'
      )}
      onDragOver={upload.handleDragOver}
      onDragLeave={upload.handleDragLeave}
      onDrop={upload.handleDrop}
      onClick={handleClick}
      onKeyDown={(e) => e.key === 'Enter' || e.key === ' ' ? handleClick() : undefined}
    >
      {/* Icon */}
      <div className={cn(
        'flex size-20 items-center justify-center rounded-2xl transition-colors',
        upload.isDragOver ? 'bg-primary/15' : 'bg-secondary'
      )}>
        <Upload className={cn(
          'size-9 transition-colors',
          upload.isDragOver ? 'text-primary' : 'text-muted-foreground'
        )} />
      </div>

      {/* Text */}
      <div className="flex flex-col items-center gap-2 text-center">
        <p className="text-lg font-semibold text-foreground">
          {t('dashboard.translate.dropzone.title')}
        </p>
        <p className="text-sm text-muted-foreground">
          {t('dashboard.translate.dropzone.subtitle')}
        </p>
      </div>

      {/* Format badges */}
      <div className="flex flex-wrap items-center justify-center gap-3">
        <span className="flex items-center gap-1.5 rounded-lg border border-border/60 bg-background px-3 py-1.5 text-xs font-medium text-muted-foreground">
          <FileText className="size-3.5 text-blue-500" />
          Word (.docx)
        </span>
        <span className="flex items-center gap-1.5 rounded-lg border border-border/60 bg-background px-3 py-1.5 text-xs font-medium text-muted-foreground">
          <FileSpreadsheet className="size-3.5 text-green-500" />
          Excel (.xlsx)
        </span>
        <span className="flex items-center gap-1.5 rounded-lg border border-border/60 bg-background px-3 py-1.5 text-xs font-medium text-muted-foreground">
          <Presentation className="size-3.5 text-orange-500" />
          PowerPoint (.pptx)
        </span>
        <span className="flex items-center gap-1.5 rounded-lg border border-border/60 bg-background px-3 py-1.5 text-xs font-medium text-muted-foreground">
          <svg className="size-3.5 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/>
            <polyline points="14 2 14 8 20 8"/>
            <text x="12" y="16" textAnchor="middle" fontSize="5" fontWeight="bold" fill="currentColor" stroke="none">PDF</text>
          </svg>
          PDF (.pdf)
        </span>
      </div>

      <input
        ref={inputRef}
        type="file"
        accept=".xlsx,.docx,.pptx,.pdf"
        className="hidden"
        onChange={upload.handleFileSelect}
        aria-label={t('dashboard.translate.dropzone.uploadAria')}
      />
    </div>
  );
}