// src/components/pdf/PARPDFViewer.jsx
import React, { useState, useEffect } from 'react';
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  Inject,
} from '@syncfusion/ej2-react-pdfviewer';
import { Button } from '../ui/button';
import { Loader2, Download } from 'lucide-react';
import { toast } from '@/hooks/use-toast';
import '@/config/syncfusion'; // Import the license configuration

const PARPDFViewer = ({
  pdfData,
  onSave,
  patientData,
  scopeResult,
  onClose
}) => {
  const [isSaving, setIsSaving] = useState(false);
  const pdfViewerRef = React.useRef(null);

  useEffect(() => {
    if (pdfViewerRef.current && pdfViewerRef.current.viewer) {
      pdfViewerRef.current.viewer.formFieldSettings = {
        fontSize:10 // Smallest possible
      };
    }
  }, [pdfData]);

  // Configure the PDF viewer settings
  const toolbarSettings = {
    showTooltip: true,
    toolbarItems: [
      'OpenOption',
      'PanTool',
      'AnnotationEditTool',
      'FormDesignerEditTool',
      'UndoRedoTool',
      'StrikethroughTool',
      'UnderlineTool',
      'HighlightTool',
      'StickyNoteTool',
      'InkTool',
      'ShapeTool',
      'SignatureTool',
      'FreeTextTool',
      'StampTool',
      'HandWrittenSignatureTool',
      'SearchOption',
      'PrintOption',
      'DownloadOption',
    ],
    annotationToolbarItems: [
      'HandWrittenSignatureTool',
      'InkTool',
      'ShapeTool',
      'StampTool',
      'StickyNoteTool',
      'FreeTextTool',
    ],
    formDesignerToolbarItems: [
      'TextboxTool',
      'PasswordTool',
      'CheckBoxTool',
      'RadioButtonTool',
      'DropdownTool',
      'ListBoxTool',
      'SignatureTool',
    ],
  };

  const handleSave = async () => {
    try {
      setIsSaving(true);
  
      // Get the modified PDF data from the viewer
      const modifiedPdf = await pdfViewerRef.current.saveAsBlob();
  
      // Create a File object from the blob
      const pdfFile = new File(
        [modifiedPdf],
        `PAR-Assessment_${scopeResult?.condition}_${patientData?.firstName
        }_${patientData?.lastName}_${new Date().toISOString().split("T")[0]
        }.pdf`,
        { type: "application/pdf" }
      );
  
      // --- Extract form field data as JSON ---
      let formFieldsData = {};
      let viewerInstance = pdfViewerRef.current?.viewer;
      if (!viewerInstance) {
        const domInstance = document.getElementById('container');
        if (domInstance && domInstance.ej2_instances && domInstance.ej2_instances[0]) {
          viewerInstance = domInstance.ej2_instances[0];
        }
      }
      if (viewerInstance) {
        const formFieldCollection = viewerInstance.formFieldCollection;
        Array.from(formFieldCollection).forEach(field => {
          const props = field.properties;
          if (!props || !props.name) return;
          if (props.formFieldAnnotationType === "Checkbox") {
            formFieldsData[props.name] = props.isChecked ? "Yes" : "Off";
          } else {
            formFieldsData[props.name] = props.value;
          }
        });
      }
  
      // Call the save function passed from parent, now with both PDF and JSON
      await onSave(pdfFile, formFieldsData);
  
      toast({
        title: "Success",
        description: "PAR PDF saved successfully",
        variant: "success",
      });
    } catch (error) {
      console.error("Error saving PDF:", error);
      toast({
        title: "Error",
        description: "Failed to save PDF. Please try again.",
        variant: "destructive",
      });
    } finally {
      setIsSaving(false);
    }
  };

  const handleExportAnnotations = async () => {
    try {
      let viewerInstance = null;
      if (pdfViewerRef.current?.viewer) {
        viewerInstance = pdfViewerRef.current.viewer;
      } else {
        const domInstance = document.getElementById('container');
        if (domInstance && domInstance.ej2_instances && domInstance.ej2_instances[0]) {
          viewerInstance = domInstance.ej2_instances[0];
        }
      }

      if (!viewerInstance) {
        toast({
          title: "Error",
          description: "PDF viewer not initialized.",
          variant: "destructive",
        });
        return;
      }

      // Get the form field collection
      const formFieldCollection = viewerInstance.formFieldCollection;
      console.log('Form Field Collection:', formFieldCollection);

      const formFieldsData = {};
      Array.from(formFieldCollection).forEach(field => {
        const props = field.properties;
        if (!props || !props.name) return; // skip if no name

        if (props.formFieldAnnotationType === "Checkbox") {
          formFieldsData[props.name] = props.isChecked ? "Yes" : "Off";
        } else {
          formFieldsData[props.name] = props.value;
        }
      });
      console.log(formFieldsData);
      const jsonString = JSON.stringify(formFieldsData, null, 2);
      console.log(jsonString);
    } catch (error) {
      console.error("Error exporting form fields:", error);
      toast({
        title: "Error",
        description: "Failed to export form fields data.",
        variant: "destructive",
      });
    }
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-white rounded-lg w-[90vw] h-[90vh] flex flex-col">
        <div className="p-4 border-b flex justify-between items-center">
          <h2 className="text-xl font-semibold">PAR PDF Editor</h2>
          <div className="flex gap-2">
            {/* <Button
              onClick={handleExportAnnotations}
              variant="outline"
              className="bg-green-600 hover:bg-green-700 text-white"
            >
              Export Annotations
            </Button> */}
            <Button
              onClick={handleSave}
              disabled={isSaving}
              className="bg-blue-600 hover:bg-blue-700 text-white"
            >
              {isSaving ? (
                <>
                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                  Saving...
                </>
              ) : (
                <>
                  <Download className="w-4 h-4 mr-2" />
                  Save Changes
                </>
              )}
            </Button>
            <Button
              onClick={onClose}
              variant="outline"
            >
              Close
            </Button>
          </div>
        </div>


        <div className="flex-1">
          <PdfViewerComponent
            ref={pdfViewerRef}
            id="container"
            documentPath={pdfData}
            resourceUrl={window.location.origin + "/ej2-pdfviewer-lib"}
            style={{ height: '100%', width: '100%' }}
            initialRenderPages={6}
            enableNavigation={true}
            enableAnnotations={true}
            enableSignature={true}
            enablePrint={true}
            enableDownload={true}
            enableFormFields={true}
            enableTextSelection={true}
            enableTextSearch={true}
            enableMagnification={true}
            enableThumbnail={true}
            enableBookmark={true}
            enableHyperlink={true}
          >
            <Inject services={[
              Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
              ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner
            ]} />
          </PdfViewerComponent>
        </div>
      </div>
    </div>
  );
};

export default PARPDFViewer;