learning-platform/src/components/admin/UploadZone.jsx

import { useState, useRef } from 'react';
import { UploadCloud, AlertCircle, CheckCircle, X } from 'lucide-react';
import { processSourceText } from '../../lib/extractionPipeline';
import Card from '../ui/Card';
import Button from '../ui/Button';

// ── Main Component ────────────────────────────────────────────────────────────

const UploadZone = ({ onUploadComplete }) => {
  const [isDragging, setIsDragging]         = useState(false);
  const [isProcessing, setIsProcessing]     = useState(false);
  const [status, setStatus]                 = useState(null);

  const fileInputRef = useRef(null);
  const abortRef     = useRef(null);

  // ── File upload (drag & drop / browse) ────────────────────────────────────

  const processFile = async (file) => {
    setIsProcessing(true);
    setStatus(null);
    const controller = new AbortController();
    abortRef.current = controller;
    try {
      const text = await file.text();
      await processSourceText(text, file.name, { signal: controller.signal });
      setStatus({ type: 'success', msg: `Successfully processed: ${file.name}` });
      if (onUploadComplete) onUploadComplete();
    } catch (error) {
      if (error?.name === 'AbortError') {
        setStatus({ type: 'error', msg: `Cancelled: ${file.name}` });
      } else {
        setStatus({ type: 'error', msg: `Error processing file: ${error.message}` });
      }
    } finally {
      abortRef.current = null;
      setIsProcessing(false);
    }
  };

  const cancelProcessing = () => {
    abortRef.current?.abort(new DOMException('Cancelled by user', 'AbortError'));
  };

  const handleDragOver  = (e) => { e.preventDefault(); setIsDragging(true); };
  const handleDragLeave = ()  => setIsDragging(false);

  const handleDrop = (e) => {
    e.preventDefault();
    setIsDragging(false);
    if (e.dataTransfer.files?.length > 0) {
      const file = e.dataTransfer.files[0];
      if (file.type === 'text/plain' || file.name.endsWith('.md')) {
        processFile(file);
      } else {
        setStatus({ type: 'error', msg: 'Only .txt and .md files are currently supported.' });
      }
    }
  };

  const handleFileSelect = (e) => {
    if (e.target.files?.length > 0) processFile(e.target.files[0]);
  };

  // ── Render ─────────────────────────────────────────────────────────────────

  return (
    <div className="space-y-6">

      {/* ─── Drag & Drop Upload ─── */}
      <Card
        className={`border-2 border-dashed transition-colors flex flex-col items-center justify-center py-12 cursor-pointer ${
          isDragging ? 'border-teal bg-teal/5' : 'border-bg-warm bg-bg-warm/20'
        } ${isProcessing ? 'opacity-50 pointer-events-none' : ''}`}
        onDragOver={handleDragOver}
        onDragLeave={handleDragLeave}
        onDrop={handleDrop}
        onClick={() => fileInputRef.current?.click()}
      >
        <UploadCloud size={48} className="text-teal/40 mb-4" />
        <p className="font-medium text-lg">Drag files here</p>
        <p className="text-sm text-fg-muted mb-4">Supports .txt and .md (max 5MB)</p>
        <Button variant="outline" type="button" disabled={isProcessing}>
          {isProcessing ? 'AI extraction in progress...' : 'Browse files'}
        </Button>
        <input
          type="file"
          ref={fileInputRef}
          onChange={handleFileSelect}
          accept=".txt,.md"
          className="hidden"
        />
      </Card>

      {/* Cancel sits outside the upload card so pointer-events-none doesn't disable it. */}
      {isProcessing && (
        <div className="flex justify-center">
          <button
            type="button"
            onClick={cancelProcessing}
            className="flex items-center gap-1 text-sm text-red-600 hover:text-red-700 underline"
          >
            <X size={14} /> Cancel extraction
          </button>
        </div>
      )}

      {/* ─── Status messages ─── */}
      {status && (
        <div className={`p-4 rounded-[var(--r-sm)] flex items-start gap-3 ${
          status.type === 'error'
            ? 'bg-red-50 text-red-900 border border-red-200'
            : 'bg-teal-50 text-teal-900 border border-teal-200'
        }`}>
          {status.type === 'error'
            ? <AlertCircle className="text-red-500 flex-shrink-0" />
            : <CheckCircle className="text-teal-600 flex-shrink-0" />}
          <div>
            <p className="font-medium">{status.type === 'error' ? 'Error' : 'Success'}</p>
            <p className="text-sm">{status.msg}</p>
          </div>
        </div>
      )}
    </div>
  );
};

export default UploadZone;