import React, { useState, useEffect, useMemo, useRef } from 'react';
import { ExtractedField, FileData } from '../types';
import { Check, Edit2, Download, RefreshCw, FileText, AlertTriangle, XCircle, ArrowRight, PenTool, CheckCircle2, Circle, LayoutTemplate, List, Move, ExternalLink } from 'lucide-react';
import { createFilledPdf } from '../services/pdfService';
import { jsPDF } from "jspdf";

interface ReviewPanelProps {
  fields: ExtractedField[];
  formFile: FileData;
  sourceFile: FileData;
  summary: string;
  isFillablePdf: boolean;
  onReset: () => void;
}

export const ReviewPanel: React.FC<ReviewPanelProps> = ({ 
  fields: initialFields, 
  formFile, 
  sourceFile,
  summary,
  isFillablePdf,
  onReset 
}) => {
  const [fields, setFields] = useState(initialFields);
  const [activeField, setActiveField] = useState<number | null>(null);
  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
  const [filterMode, setFilterMode] = useState<'ALL' | 'ATTENTION'>('ALL');
  const [viewMode, setViewMode] = useState<'LIST' | 'FORM'>('LIST');

  // Dragging state
  const [draggingField, setDraggingField] = useState<number | null>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  // Derived state for progress
  const verifiedCount = fields.filter(f => f.isVerified).length;
  const totalCount = fields.length;
  const progressPercent = Math.round((verifiedCount / totalCount) * 100);
  
  const fieldsRequiresAttention = useMemo(() => 
    fields.filter(f => f.validation?.status !== 'VALID'), 
  [fields]);

  // Generate preview for PDF download
  useEffect(() => {
    let active = true;
    let timeoutId: any;

    const generatePreview = async () => {
      // If it's a PDF, we try to show the filled version
      if (formFile.type === 'application/pdf') {
        try {
          const filledPdfBytes = await createFilledPdf(formFile.base64, fields, isFillablePdf);
          if (!active) return;
          
          const blob = new Blob([filledPdfBytes], { type: 'application/pdf' });
          const url = URL.createObjectURL(blob);
          
          setPreviewUrl(prev => {
            if (prev && prev.startsWith('blob:')) URL.revokeObjectURL(prev);
            return url;
          });
        } catch (e) {
          console.error("Failed to generate PDF preview", e);
          // Fallback to original if generation fails
          setPreviewUrl(formFile.previewUrl);
        }
      } else {
        // For images, just show the original
        setPreviewUrl(formFile.previewUrl);
      }
    };

    // Debounce to avoid excessive PDF generation while typing
    timeoutId = setTimeout(generatePreview, 1000);

    return () => {
      active = false;
      clearTimeout(timeoutId);
    };
  }, [fields, isFillablePdf, formFile]);

  // Cleanup blob URL on unmount
  useEffect(() => {
    return () => {
      setPreviewUrl(prev => {
        if (prev && prev.startsWith('blob:') && prev !== formFile.previewUrl) {
           URL.revokeObjectURL(prev);
        }
        return null;
      });
    };
  }, []);

  const handleUpdate = (index: number, newValue: string) => {
    const newFields = [...fields];
    newFields[index] = { 
      ...newFields[index], 
      value: newValue,
      // Auto-verify when manually edited
      isVerified: true,
      validation: { ...newFields[index].validation!, status: 'VALID', message: 'Manually verified' }
    };
    setFields(newFields);
  };

  const handleCoordinateUpdate = (index: number, x: number, y: number) => {
    const newFields = [...fields];
    if (newFields[index].coordinates) {
      newFields[index] = {
        ...newFields[index],
        coordinates: { ...newFields[index].coordinates!, x, y },
        isVerified: true // Moving it implies verification
      };
      setFields(newFields);
    }
  };

  const toggleVerify = (index: number) => {
    const newFields = [...fields];
    newFields[index] = { 
      ...newFields[index], 
      isVerified: !newFields[index].isVerified 
    };
    setFields(newFields);
  };

  const applySuggestion = (index: number) => {
    const field = fields[index];
    if (field.validation?.suggestion) {
      handleUpdate(index, field.validation.suggestion);
    }
  };

  const handleDownload = async () => {
    if (formFile.type === 'application/pdf' && previewUrl) {
      const a = document.createElement('a');
      a.href = previewUrl;
      a.download = `filled_${formFile.file.name}`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    } else {
       const doc = new jsPDF();
       doc.text("Extracted Data", 20, 20);
       let y = 40;
       fields.forEach(f => {
         doc.text(`${f.label}: ${f.value}`, 20, y);
         y += 10;
       });
       doc.save("data_report.pdf");
    }
  };

  // Drag handlers
  const handleDragStart = (e: React.MouseEvent, index: number) => {
    e.stopPropagation();
    setDraggingField(index);
    setActiveField(index);
  };

  const handleMouseMove = (e: React.MouseEvent) => {
    if (draggingField !== null && containerRef.current) {
      const rect = containerRef.current.getBoundingClientRect();
      const relativeX = e.clientX - rect.left;
      const relativeY = e.clientY - rect.top;

      // Convert pixels to 0-1000 scale
      const scaleX = (relativeX / rect.width) * 1000;
      const scaleY = (relativeY / rect.height) * 1000;

      // Clamp values
      const clampedX = Math.max(0, Math.min(1000, scaleX));
      const clampedY = Math.max(0, Math.min(1000, scaleY));

      handleCoordinateUpdate(draggingField, clampedX, clampedY);
    }
  };

  const handleMouseUp = () => {
    setDraggingField(null);
  };

  // Sort: Unverified/Issues first, then verified
  const displayedFields = fields.map((f, i) => ({ ...f, originalIndex: i }))
    .sort((a, b) => {
      // Priority 1: Attention needed
      const aNeedsAttn = a.validation?.status !== 'VALID';
      const bNeedsAttn = b.validation?.status !== 'VALID';
      if (aNeedsAttn && !bNeedsAttn) return -1;
      if (!aNeedsAttn && bNeedsAttn) return 1;
      
      // Priority 2: Unverified
      if (!a.isVerified && b.isVerified) return -1;
      if (a.isVerified && !b.isVerified) return 1;
      
      return a.originalIndex - b.originalIndex;
    })
    .filter(f => filterMode === 'ALL' || (f.validation?.status !== 'VALID' && !f.isVerified));

  return (
    <div className="max-w-7xl mx-auto px-4 py-8 h-[calc(100vh-80px)] flex flex-col">
      {/* Header Section */}
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4 flex-shrink-0">
        <div>
          <h2 className="text-2xl font-bold text-slate-900">Review & Verify</h2>
          <p className="text-slate-500 text-sm mt-1">{summary}</p>
        </div>
        
        <div className="flex items-center gap-4 w-full md:w-auto">
          {/* View Toggle */}
          <div className="flex bg-slate-100 p-1 rounded-lg border border-slate-200">
            <button
              onClick={() => setViewMode('LIST')}
              className={`p-1.5 rounded-md flex items-center space-x-2 text-sm font-medium transition-all ${viewMode === 'LIST' ? 'bg-white shadow text-slate-900' : 'text-slate-500 hover:text-slate-700'}`}
              title="List View"
            >
              <List className="w-4 h-4" />
              <span className="hidden sm:inline">List</span>
            </button>
            <button
              onClick={() => setViewMode('FORM')}
              className={`p-1.5 rounded-md flex items-center space-x-2 text-sm font-medium transition-all ${viewMode === 'FORM' ? 'bg-white shadow text-slate-900' : 'text-slate-500 hover:text-slate-700'}`}
              title="Form Overlay View"
            >
              <LayoutTemplate className="w-4 h-4" />
              <span className="hidden sm:inline">Form View</span>
            </button>
          </div>

          <div className="h-6 w-px bg-slate-300 mx-2 hidden md:block"></div>

          {/* Verification Progress */}
          <div className="hidden md:flex flex-col items-end mr-2">
            <span className="text-xs font-semibold text-slate-600 mb-1">
              {verifiedCount} / {totalCount} Verified
            </span>
            <div className="w-32 h-2 bg-slate-200 rounded-full overflow-hidden">
              <div 
                className="h-full bg-emerald-500 transition-all duration-500 ease-out"
                style={{ width: `${progressPercent}%` }}
              />
            </div>
          </div>

          <button 
            onClick={onReset}
            className="flex items-center px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors"
          >
            <RefreshCw className="w-4 h-4 mr-2" />
            Start Over
          </button>
          
          <button 
            onClick={handleDownload}
            className={`flex items-center px-4 py-2 text-sm font-medium text-white rounded-lg transition-colors shadow-sm bg-indigo-600 hover:bg-indigo-700`}
          >
            <Download className="w-4 h-4 mr-2" />
            Download PDF
          </button>
        </div>
      </div>

      {viewMode === 'LIST' ? (
        /* ================= LIST VIEW ================= */
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 flex-1 min-h-0">
          {/* Left Column: Preview */}
          <div className="bg-slate-900 rounded-xl overflow-hidden shadow-lg flex flex-col">
            <div className="p-3 bg-slate-800 border-b border-slate-700 flex justify-between items-center">
               <div className="flex items-center space-x-2">
                 <span className="text-xs font-medium text-slate-300 uppercase tracking-wider">PDF Preview (Live)</span>
               </div>
               <span className="text-xs text-slate-400">{formFile.file.name}</span>
            </div>
            <div className="flex-1 bg-slate-900 relative">
               {previewUrl ? (
                  formFile.type === 'application/pdf' ? (
                    <>
                        <iframe 
                          src={previewUrl} 
                          title="Form PDF Preview"
                          className="w-full h-full border-none"
                        />
                        {/* Fallback open button */}
                        <div className="absolute bottom-4 right-4 opacity-50 hover:opacity-100 transition-opacity">
                            <a 
                                href={previewUrl} 
                                target="_blank" 
                                rel="noreferrer"
                                className="flex items-center bg-black/70 text-white text-xs px-3 py-1.5 rounded-full hover:bg-black"
                            >
                                <ExternalLink className="w-3 h-3 mr-1" />
                                Open in new tab
                            </a>
                        </div>
                    </>
                  ) : (
                    <div className="w-full h-full overflow-auto flex items-center justify-center p-4">
                      <img 
                        src={previewUrl} 
                        alt="Form Document" 
                        className="max-w-full shadow-lg border border-slate-700" 
                      />
                    </div>
                  )
               ) : (
                  <div className="flex flex-col items-center justify-center h-full text-slate-500">
                    <FileText className="w-16 h-16 mb-4 opacity-50" />
                    <p>Generating preview...</p>
                  </div>
               )}
            </div>
          </div>

          {/* Right Column: Verification List */}
          <div className="bg-white rounded-xl shadow-sm border border-slate-200 flex flex-col overflow-hidden">
            <div className="p-4 border-b border-slate-100 bg-slate-50/50">
              <div className="flex justify-between items-center mb-4">
                <h3 className="font-semibold text-slate-800">Field Verification</h3>
                <div className="flex space-x-2 text-xs">
                  <button 
                    onClick={() => setFilterMode('ALL')}
                    className={`px-3 py-1 rounded-full border transition-colors ${filterMode === 'ALL' ? 'bg-slate-800 text-white border-slate-800' : 'bg-white text-slate-600 border-slate-200 hover:bg-slate-50'}`}
                  >
                    All ({totalCount})
                  </button>
                  {fieldsRequiresAttention.length > 0 && (
                     <button 
                      onClick={() => setFilterMode('ATTENTION')}
                      className={`px-3 py-1 rounded-full border transition-colors flex items-center ${filterMode === 'ATTENTION' ? 'bg-amber-100 text-amber-800 border-amber-200' : 'bg-white text-amber-600 border-slate-200 hover:bg-amber-50'}`}
                    >
                      <AlertTriangle className="w-3 h-3 mr-1" />
                      Needs Review ({fieldsRequiresAttention.length})
                    </button>
                  )}
                </div>
              </div>
            </div>
            
            <div className="flex-1 overflow-y-auto p-4 space-y-3 bg-slate-50/30">
              {displayedFields.map((field) => {
                const idx = field.originalIndex;
                const status = field.validation?.status || 'VALID';
                const isVerified = field.isVerified;
                
                let statusBorder = isVerified ? "border-emerald-200" : "border-slate-200";
                let statusBg = isVerified ? "bg-emerald-50/30" : "bg-white";

                if (!isVerified) {
                  if (status === 'INVALID') {
                    statusBorder = "border-red-200";
                    statusBg = "bg-red-50/50";
                  } else if (status === 'WARNING') {
                    statusBorder = "border-amber-200";
                    statusBg = "bg-amber-50/50";
                  }
                }

                return (
                  <div 
                    key={idx} 
                    className={`relative group rounded-lg border transition-all duration-200 p-3 shadow-sm ${activeField === idx ? 'ring-1 ring-indigo-500 border-indigo-500 shadow-md z-10' : statusBorder} ${statusBg}`}
                    onFocus={() => setActiveField(idx)}
                    onBlur={() => setActiveField(null)}
                  >
                    <div className="flex items-start gap-3">
                      <button
                        onClick={() => toggleVerify(idx)}
                        className={`mt-1 flex-shrink-0 w-5 h-5 rounded border flex items-center justify-center transition-colors ${isVerified ? 'bg-emerald-500 border-emerald-500 text-white' : 'bg-white border-slate-300 text-transparent hover:border-emerald-400'}`}
                        title={isVerified ? "Mark as unverified" : "Mark as verified"}
                      >
                        <Check className="w-3.5 h-3.5" strokeWidth={3} />
                      </button>

                      <div className="flex-1 min-w-0">
                        <div className="flex justify-between items-center mb-1">
                          <label className={`text-xs font-semibold uppercase tracking-wider truncate ${isVerified ? 'text-emerald-700' : 'text-slate-600'}`}>
                            {field.label || field.key || "Unknown Field"}
                          </label>
                          {!isVerified && status !== 'VALID' && (
                            <span className={`flex items-center text-[10px] font-bold px-1.5 py-0.5 rounded ${status === 'INVALID' ? 'bg-red-100 text-red-700' : 'bg-amber-100 text-amber-700'}`}>
                               {status === 'INVALID' ? <XCircle className="w-3 h-3 mr-1"/> : <AlertTriangle className="w-3 h-3 mr-1"/>}
                               {status}
                            </span>
                          )}
                        </div>

                        <div className="relative">
                          <input
                            type="text"
                            value={field.value}
                            onChange={(e) => handleUpdate(idx, e.target.value)}
                            className={`block w-full rounded-md px-2.5 py-1.5 text-sm font-medium transition-colors border ${isVerified ? 'border-emerald-200 text-emerald-900 bg-emerald-50/50' : 'border-slate-300 text-slate-900 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500'}`}
                            placeholder="Empty"
                          />
                        </div>
                        {(!isVerified && field.validation?.suggestion && status !== 'VALID') && (
                          <button 
                            onClick={() => applySuggestion(idx)}
                            className="mt-2 flex items-center text-xs font-bold text-indigo-600 hover:text-indigo-800 bg-indigo-50 hover:bg-indigo-100 px-2 py-1 rounded transition-colors"
                          >
                            <ArrowRight className="w-3 h-3 mr-1" />
                            Accept: "{field.validation.suggestion}"
                          </button>
                        )}
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      ) : (
        /* ================= FORM VIEW (Overlay with Drag & Drop) ================= */
        <div className="bg-slate-200 rounded-xl overflow-auto shadow-inner flex-1 border border-slate-300 relative p-8 flex justify-center">
            
            <div 
              ref={containerRef}
              className="relative inline-block shadow-2xl transition-cursor bg-white" 
              style={{ 
                cursor: draggingField !== null ? 'grabbing' : 'default'
              }}
              onMouseMove={handleMouseMove}
              onMouseUp={handleMouseUp}
              onMouseLeave={handleMouseUp}
            > 
                {/* Background Image/PDF */}
                {formFile.type === 'application/pdf' ? (
                    <div className="flex flex-col items-center justify-center p-20 bg-slate-50 border border-slate-200 text-center" style={{ width: '794px', height: '1123px' }}>
                         <FileText className="w-20 h-20 text-slate-300 mb-4" />
                         <h3 className="text-xl font-bold text-slate-800">Visual Editing Unavailable for PDF</h3>
                         <p className="text-slate-500 max-w-sm mt-2">
                            The visual drag-and-drop editor works best with Image uploads. 
                            For this PDF, please use the List View to verify data or Download to see the final result.
                         </p>
                         <button 
                          onClick={() => setViewMode('LIST')}
                          className="mt-6 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"
                        >
                          Switch to List View
                        </button>
                    </div>
                ) : (
                  <img 
                    src={formFile.previewUrl!} 
                    className="block max-w-full h-auto pointer-events-none opacity-90 select-none"
                    style={{ maxHeight: '1200px' }}
                    alt="Form Background"
                  />
                )}
                
                {/* Fallback info if not visual mode compatible */}
                {!fields.some(f => f.coordinates) && formFile.type !== 'application/pdf' && (
                   <div className="absolute inset-0 flex items-center justify-center bg-white/80 z-20 backdrop-blur-sm">
                      <div className="text-center p-6 max-w-md">
                        <AlertTriangle className="w-12 h-12 text-amber-500 mx-auto mb-4" />
                        <h3 className="text-lg font-bold text-slate-900">Visual Mode Not Available</h3>
                        <p className="text-slate-600 mt-2">
                          Coordinates were not extracted for this document. Please use the List View to edit fields.
                        </p>
                        <button 
                          onClick={() => setViewMode('LIST')}
                          className="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"
                        >
                          Switch to List View
                        </button>
                      </div>
                   </div>
                )}

                {/* Overlay Inputs (Only show if not PDF, or if we force it but it's blank bg) */}
                {formFile.type !== 'application/pdf' && fields.map((field, idx) => {
                  if (!field.coordinates) return null;
                  
                  // Coordinate conversion (0-1000 scale to percentage)
                  const left = (field.coordinates.x / 1000) * 100;
                  const top = (field.coordinates.y / 1000) * 100;
                  
                  const status = field.validation?.status || 'VALID';
                  let borderColor = 'border-indigo-400 bg-white/60';
                  if (field.isVerified) borderColor = 'border-emerald-500 bg-emerald-50/70';
                  else if (status === 'INVALID') borderColor = 'border-red-500 bg-red-50/70';
                  else if (status === 'WARNING') borderColor = 'border-amber-500 bg-amber-50/70';

                  const isDragging = draggingField === idx;
                  const isCheckbox = field.value === 'X';

                  return (
                    <div
                      key={idx}
                      className={`absolute group hover:z-50 ${isDragging ? 'z-50 cursor-grabbing' : 'z-10'}`}
                      style={{
                        left: `${left}%`,
                        top: `${top}%`,
                        width: isCheckbox ? '20px' : '200px',
                        transform: 'translateY(-50%)', // Center vertically
                      }}
                      onMouseDown={(e) => handleDragStart(e, idx)}
                    >
                      <div className="relative">
                        {/* Drag Handle (Visible on Hover) */}
                        <div className={`absolute -top-3 -left-3 cursor-grab p-1 bg-slate-800 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity ${isDragging ? 'opacity-100' : ''}`}>
                          <Move className="w-3 h-3" />
                        </div>

                        {isCheckbox ? (
                          <div className={`w-6 h-6 border-2 flex items-center justify-center font-bold text-black ${borderColor}`}>
                             X
                          </div>
                        ) : (
                          <input
                            type="text"
                            value={field.value}
                            onChange={(e) => handleUpdate(idx, e.target.value)}
                            onFocus={() => setActiveField(idx)}
                            className={`
                              w-full px-1 py-0.5 text-xs font-medium border-2 rounded transition-all shadow-sm
                              focus:ring-2 focus:ring-offset-1 focus:z-10 focus:bg-white
                              ${borderColor}
                            `}
                            style={{
                              fontFamily: 'Courier, monospace',
                              color: 'black',
                              background: 'rgba(255, 255, 255, 0.7)'
                            }}
                          />
                        )}
                        
                        {/* Validation Icon Overlay */}
                        {!field.isVerified && status !== 'VALID' && (
                           <div className="absolute -top-2 -right-2 bg-white rounded-full shadow-md z-20 pointer-events-none">
                              {status === 'INVALID' 
                                ? <XCircle className="w-4 h-4 text-red-500" /> 
                                : <AlertTriangle className="w-4 h-4 text-amber-500" />
                              }
                           </div>
                        )}
                        
                        {/* Tooltip on Hover */}
                        <div className="absolute opacity-0 group-hover:opacity-100 bottom-full left-0 mb-1 bg-slate-800 text-white text-[10px] px-2 py-1 rounded whitespace-nowrap pointer-events-none z-30 transition-opacity">
                           {field.label}
                        </div>
                      </div>
                    </div>
                  );
                })}
            </div>
        </div>
      )}
    </div>
  );
};