TableGridRightSplitScreen/src/components/DocumentViewer.tsx

import React from 'react';
import { ScanSearch, FileText, CheckCircle2, ChevronRight, Zap } from 'lucide-react';
import { motion } from 'motion/react';

export default function DocumentViewer() {
  return (
    <div className="h-full bg-slate-900 rounded-xl overflow-hidden flex flex-col shadow-inner border border-slate-800 text-slate-300">
      
      {/* Header */}
      <div className="h-12 border-b border-slate-800 flex items-center justify-between px-4 bg-slate-900/50">
        <div className="flex items-center gap-2">
          <FileText size={16} className="text-slate-400" />
          <span className="text-sm font-medium text-slate-200">Q3_Invoice_7482.pdf</span>
        </div>
        <div className="flex items-center gap-3">
          <div className="flex items-center gap-1.5 text-xs text-brand-400 bg-brand-500/10 px-2.5 py-1 rounded-full border border-brand-500/20">
            <Zap size={12} className="animate-pulse" />
            AI Extraction: 98% Confidence
          </div>
        </div>
      </div>

      {/* Document Area */}
      <div className="flex-1 p-6 relative overflow-auto bg-slate-950/50 flex items-center justify-center">
        <div className="w-full max-w-lg aspect-[1/1.4] bg-white rounded shadow-2xl relative p-8">
          
          {/* Faux Document Content */}
          <div className="space-y-6">
            <div className="flex justify-between items-start border-b-2 border-slate-200 pb-4">
              <div>
                <h1 className="text-3xl font-serif text-slate-800 font-bold tracking-tight">INVOICE</h1>
                <p className="text-slate-500 text-sm mt-1">Acme Corp Ltd.</p>
              </div>
              <div className="text-right text-sm text-slate-600 space-y-1">
                <p><strong>Date:</strong> Oct 14, 2026</p>
                <p><strong>Inv #:</strong> INV-7482</p>
                <p><strong>Due:</strong> Net 30</p>
              </div>
            </div>

            {/* Simulated Table to be extracted */}
            <div className="relative mt-8">
              <table className="w-full text-sm text-left border-collapse">
                <thead>
                  <tr className="border-b border-slate-300">
                    <th className="py-2 text-slate-700">Description</th>
                    <th className="py-2 text-slate-700">Quantity</th>
                    <th className="py-2 text-slate-700">Unit Price</th>
                    <th className="py-2 text-slate-700 text-right">Total</th>
                  </tr>
                </thead>
                <tbody className="text-slate-600">
                  <tr className="border-b border-slate-100">
                    <td className="py-3">Consulting Retainer - September</td>
                    <td>1</td>
                    <td>$4,500.00</td>
                    <td className="text-right">$4,500.00</td>
                  </tr>
                  <tr className="border-b border-slate-100">
                    <td className="py-3">Server Infrastructure (Q3)</td>
                    <td>3</td>
                    <td>$850.00</td>
                    <td className="text-right">$2,550.00</td>
                  </tr>
                  <tr>
                    <td className="py-3">Priority Support Add-on</td>
                    <td>1</td>
                    <td>$999.00</td>
                    <td className="text-right">$999.00</td>
                  </tr>
                </tbody>
              </table>

              {/* AI Overlay Bounding Box */}
              <motion.div 
                initial={{ opacity: 0, scale: 0.98 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.5, delay: 0.2 }}
                className="absolute -inset-4 border-2 border-brand-500 bg-brand-500/5 rounded-lg pointer-events-none"
              >
                <div className="absolute -top-3 -right-3 bg-brand-500 text-white rounded p-1 shadow-lg">
                  <CheckCircle2 size={14} />
                </div>
                <div className="absolute top-0 right-6 -translate-y-1/2 bg-brand-500 text-white text-[10px] font-bold px-2 py-0.5 rounded tracking-wide uppercase">
                  Data Extracted
                </div>
                
                {/* Visual scanning line */}
                <motion.div 
                  initial={{ top: '0%' }}
                  animate={{ top: '100%' }}
                  transition={{ duration: 2, repeat: Infinity, ease: 'linear' }}
                  className="absolute left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-brand-400 to-transparent shadow-[0_0_8px_rgba(59,130,246,0.6)] z-10"
                />
              </motion.div>
            </div>
            
            <div className="mt-8 flex justify-end">
              <div className="w-1/3 space-y-2 text-sm">
                <div className="flex justify-between text-slate-600"><span>Subtotal:</span> <span>$8,049.00</span></div>
                <div className="flex justify-between text-slate-600 border-b border-slate-200 pb-2"><span>Tax (10%):</span> <span>$804.90</span></div>
                <div className="flex justify-between font-bold text-slate-800 text-lg"><span>Total:</span> <span>$8,853.90</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}