doc_ai_frontend/src/components/ExportSidebar.tsx

import { useState } from 'react';
import { X, Check, Copy, Download, Code2, Image as ImageIcon, FileText, ChevronRight } from 'lucide-react';
import { RecognitionResult } from '../types';
import { convertMathmlToOmml, wrapOmmlForClipboard } from '../lib/ommlConverter';

interface ExportSidebarProps {
  isOpen: boolean;
  onClose: () => void;
  result: RecognitionResult | null;
}

type ExportCategory = 'Code' | 'Image' | 'File';

interface ExportOption {
  id: string;
  label: string;
  category: ExportCategory;
  getContent: (result: RecognitionResult) => string | null;
  isDownload?: boolean; // If true, triggers file download instead of copy
  extension?: string;
}

export default function ExportSidebar({ isOpen, onClose, result }: ExportSidebarProps) {
  const [copiedId, setCopiedId] = useState<string | null>(null);

  if (!result) return null;

  const exportOptions: ExportOption[] = [
    // Code Category
    {
      id: 'markdown',
      label: 'Markdown',
      category: 'Code',
      getContent: (r) => r.markdown_content
    },
    {
      id: 'latex',
      label: 'Latex',
      category: 'Code',
      getContent: (r) => r.latex_content
    },
    {
      id: 'mathml',
      label: 'MathML',
      category: 'Code',
      getContent: (r) => r.mathml_content
    },
    {
      id: 'mathml_word',
      label: 'Word MathML',
      category: 'Code',
      getContent: (r) => r.mathml_word_content
    },
    // Image Category
    {
      id: 'rendered_image',
      label: 'Rendered Image',
      category: 'Image',
      getContent: (r) => r.rendered_image_path,
      // User requested "Copy button" for Image. 
      // Special handling might be needed for actual image data copy, 
      // but standard clipboard writeText is for text.
      // If we want to copy image data, we need to fetch it. 
      // For now, I'll stick to the pattern, but if it's a URL, copying the URL is the fallback.
      // However, usually "Copy Image" implies the binary. 
      // Let's treat it as a special case in handleAction.
    },
    // File Category
    {
      id: 'docx',
      label: 'DOCX',
      category: 'File',
      getContent: (r) => r.markdown_content, // Placeholder content for file conversion
      isDownload: true,
      extension: 'docx'
    },
    {
      id: 'pdf',
      label: 'PDF',
      category: 'File',
      getContent: (r) => r.markdown_content, // Placeholder
      isDownload: true,
      extension: 'pdf'
    }
  ];

  const handleAction = async (option: ExportOption) => {
    let content = option.getContent(result);

    // Fallback: If Word MathML is missing, try to convert from MathML
    if (option.id === 'mathml_word' && !content && result.mathml_content) {
      try {
        const omml = await convertMathmlToOmml(result.mathml_content);
        if (omml) {
          content = wrapOmmlForClipboard(omml);
        }
      } catch (err) {
        console.error('Failed to convert MathML to OMML:', err);
      }
    }

    if (!content) return;

    try {
      if (option.category === 'Image' && !option.isDownload) {
        // Handle Image Copy
        if (content.startsWith('http') || content.startsWith('blob:')) {
          try {
            const response = await fetch(content);
            const blob = await response.blob();
            await navigator.clipboard.write([
              new ClipboardItem({
                [blob.type]: blob
              })
            ]);
          } catch (err) {
            console.error('Failed to copy image:', err);
            // Fallback to copying URL
            await navigator.clipboard.writeText(content);
          }
        } else {
          await navigator.clipboard.writeText(content);
        }
      } else if (option.isDownload) {
        // Simulate download
        const blob = new Blob([content], { type: 'text/plain' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `export.${option.extension}`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
      } else {
        // Standard Text Copy
        await navigator.clipboard.writeText(content);
      }

      setCopiedId(option.id);
      setTimeout(() => {
        setCopiedId(null);
        onClose(); // Auto close after action
      }, 1000); // Small delay to show "Copied" state before closing

    } catch (err) {
      console.error('Action failed:', err);
    }
  };

  const categories: { id: ExportCategory; icon: any; label: string }[] = [
    { id: 'Code', icon: Code2, label: 'Code' },
    { id: 'Image', icon: ImageIcon, label: 'Image' },
    { id: 'File', icon: FileText, label: 'File' },
  ];

  return (
    <>
      {/* Backdrop */}
      {isOpen && (
        <div
          className="absolute inset-0 bg-black/20 backdrop-blur-[1px] z-40 transition-opacity"
          onClick={onClose}
        />
      )}

      {/* Sidebar Panel */}
      <div
        className={`
            absolute top-0 right-0 bottom-0 w-80 bg-white shadow-2xl z-50 transform transition-transform duration-300 ease-in-out border-l border-gray-100 flex flex-col
            ${isOpen ? 'translate-x-0' : 'translate-x-full'}
        `}
      >
        <div className="flex items-center justify-between px-6 py-5 border-b border-gray-100 shrink-0">
          <h2 className="text-lg font-bold text-gray-900">Export</h2>
          <button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
            <X size={20} className="text-gray-500" />
          </button>
        </div>

        <div className="flex-1 overflow-y-auto p-6 space-y-8">
          {categories.map((category) => (
            <div key={category.id} className="space-y-3">
              <div className="flex items-center gap-2 text-gray-400 px-1">
                <category.icon size={16} />
                <span className="text-xs font-semibold uppercase tracking-wider">{category.label}</span>
              </div>

              <div className="space-y-2">
                {exportOptions
                  .filter(opt => opt.category === category.id)
                  .map(option => (
                    <button
                      key={option.id}
                      onClick={() => handleAction(option)}
                      className="w-full flex items-center justify-between p-3 bg-gray-50 hover:bg-blue-50 hover:text-blue-600 border border-transparent hover:border-blue-200 rounded-lg group transition-all text-left"
                    >
                      <span className="text-sm font-medium text-gray-700 group-hover:text-blue-700">
                        {option.label}
                      </span>

                      <div className="text-gray-400 group-hover:text-blue-600">
                        {copiedId === option.id ? (
                          <Check size={16} className="text-green-500" />
                        ) : option.isDownload ? (
                          <Download size={16} />
                        ) : (
                          <Copy size={16} className="opacity-0 group-hover:opacity-100 transition-opacity" />
                        )}
                      </div>
                    </button>
                  ))
                }
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}