stack/apps/web/src/components/knowledge/ImportExportActions.tsx

"use client";

import { useState, useRef } from "react";
import { Upload, Download, Loader2, CheckCircle2, XCircle } from "lucide-react";
import { apiPostFormData } from "@/lib/api/client";

interface ImportResult {
  filename: string;
  success: boolean;
  entryId?: string;
  slug?: string;
  title?: string;
  error?: string;
}

interface ImportResponse {
  success: boolean;
  totalFiles: number;
  imported: number;
  failed: number;
  results: ImportResult[];
}

interface ImportExportActionsProps {
  selectedEntryIds?: string[];
  onImportComplete?: () => void;
}

export function ImportExportActions({
  selectedEntryIds = [],
  onImportComplete,
}: ImportExportActionsProps): React.JSX.Element {
  const [isImporting, setIsImporting] = useState(false);
  const [isExporting, setIsExporting] = useState(false);
  const [importResult, setImportResult] = useState<ImportResponse | null>(null);
  const [showImportDialog, setShowImportDialog] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  /**
   * Handle import file selection
   */
  const handleImportClick = (): void => {
    fileInputRef.current?.click();
  };

  /**
   * Handle file upload and import
   */
  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>): Promise<void> => {
    const file = e.target.files?.[0];
    if (!file) return;

    // Validate file type
    if (!file.name.endsWith(".md") && !file.name.endsWith(".zip")) {
      alert("Please upload a .md or .zip file");
      return;
    }

    setIsImporting(true);
    setShowImportDialog(true);
    setImportResult(null);

    try {
      const formData = new FormData();
      formData.append("file", file);

      // Use API client to ensure CSRF token is included
      const result = await apiPostFormData<ImportResponse>("/api/knowledge/import", formData);
      setImportResult(result);

      // Notify parent component
      if (result.imported > 0 && onImportComplete) {
        onImportComplete();
      }
    } catch (error) {
      console.error("Import error:", error);
      alert(error instanceof Error ? error.message : "Failed to import file");
      setShowImportDialog(false);
    } finally {
      setIsImporting(false);
      // Reset file input
      if (fileInputRef.current) {
        fileInputRef.current.value = "";
      }
    }
  };

  /**
   * Handle export
   */
  const handleExport = async (format: "markdown" | "json" = "markdown"): Promise<void> => {
    setIsExporting(true);

    try {
      // Build query params
      const params = new URLSearchParams({
        format,
      });

      // Add selected entry IDs if any
      if (selectedEntryIds.length > 0) {
        selectedEntryIds.forEach((id) => {
          params.append("entryIds", id);
        });
      }

      const response = await fetch(`/api/knowledge/export?${params.toString()}`, {
        method: "GET",
      });

      if (!response.ok) {
        throw new Error("Export failed");
      }

      // Get filename from Content-Disposition header
      const contentDisposition = response.headers.get("Content-Disposition");
      const filenameMatch = contentDisposition?.match(/filename="(.+)"/);
      const filename = filenameMatch?.[1] ?? `knowledge-export-${format}.zip`;

      // Download file
      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = filename;
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    } catch (error) {
      console.error("Export error:", error);
      alert("Failed to export entries");
    } finally {
      setIsExporting(false);
    }
  };

  /**
   * Close import dialog
   */
  const handleCloseImportDialog = (): void => {
    setShowImportDialog(false);
    setImportResult(null);
  };

  return (
    <>
      {/* Action Buttons */}
      <div className="flex items-center gap-2">
        {/* Import Button */}
        <button
          onClick={handleImportClick}
          disabled={isImporting}
          className="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
          title="Import entries from .md or .zip file"
        >
          {isImporting ? (
            <Loader2 className="w-5 h-5 animate-spin" />
          ) : (
            <Upload className="w-5 h-5" />
          )}
          <span>Import</span>
        </button>

        {/* Export Dropdown */}
        <div className="relative group">
          <button
            disabled={isExporting}
            className="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
            title="Export entries"
          >
            {isExporting ? (
              <Loader2 className="w-5 h-5 animate-spin" />
            ) : (
              <Download className="w-5 h-5" />
            )}
            <span>Export</span>
          </button>

          {/* Dropdown Menu */}
          <div className="absolute right-0 mt-1 w-48 bg-white rounded-lg shadow-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-10">
            <div className="py-1">
              <button
                onClick={() => handleExport("markdown")}
                className="w-full text-left px-4 py-2 hover:bg-gray-100 text-sm text-gray-700"
              >
                Export as Markdown
              </button>
              <button
                onClick={() => handleExport("json")}
                className="w-full text-left px-4 py-2 hover:bg-gray-100 text-sm text-gray-700"
              >
                Export as JSON
              </button>
              {selectedEntryIds.length > 0 && (
                <div className="border-t border-gray-200 mt-1 pt-1 px-4 py-2 text-xs text-gray-500">
                  {selectedEntryIds.length} selected
                </div>
              )}
            </div>
          </div>
        </div>
      </div>

      {/* Hidden File Input */}
      <input
        ref={fileInputRef}
        type="file"
        accept=".md,.zip"
        onChange={handleFileChange}
        className="hidden"
      />

      {/* Import Result Dialog */}
      {showImportDialog && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[80vh] flex flex-col">
            {/* Header */}
            <div className="px-6 py-4 border-b border-gray-200">
              <h2 className="text-xl font-semibold text-gray-900">
                {isImporting ? "Importing..." : "Import Results"}
              </h2>
            </div>

            {/* Content */}
            <div className="px-6 py-4 overflow-y-auto flex-1">
              {isImporting && (
                <div className="flex items-center justify-center py-8">
                  <Loader2 className="w-8 h-8 animate-spin text-blue-600" />
                  <span className="ml-3 text-gray-600">Processing file...</span>
                </div>
              )}

              {importResult && (
                <div>
                  {/* Summary */}
                  <div className="grid grid-cols-3 gap-4 mb-6">
                    <div className="bg-gray-50 rounded-lg p-4">
                      <div className="text-sm text-gray-600">Total Files</div>
                      <div className="text-2xl font-semibold text-gray-900">
                        {importResult.totalFiles}
                      </div>
                    </div>
                    <div className="bg-green-50 rounded-lg p-4">
                      <div className="text-sm text-green-600">Imported</div>
                      <div className="text-2xl font-semibold text-green-700">
                        {importResult.imported}
                      </div>
                    </div>
                    <div className="bg-red-50 rounded-lg p-4">
                      <div className="text-sm text-red-600">Failed</div>
                      <div className="text-2xl font-semibold text-red-700">
                        {importResult.failed}
                      </div>
                    </div>
                  </div>

                  {/* Results List */}
                  {importResult.results.length > 0 && (
                    <div className="space-y-2">
                      <h3 className="font-medium text-gray-900 mb-2">Details</h3>
                      {importResult.results.map((result, index) => (
                        <div
                          key={index}
                          className={`flex items-start gap-3 p-3 rounded-lg ${
                            result.success ? "bg-green-50" : "bg-red-50"
                          }`}
                        >
                          {result.success ? (
                            <CheckCircle2 className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                          ) : (
                            <XCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
                          )}
                          <div className="flex-1 min-w-0">
                            <div className="font-medium text-sm text-gray-900 truncate">
                              {result.title ?? result.filename}
                            </div>
                            {result.success ? (
                              <div className="text-xs text-gray-600">
                                {result.slug && `Slug: ${result.slug}`}
                              </div>
                            ) : (
                              <div className="text-xs text-red-600">{result.error}</div>
                            )}
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              )}
            </div>

            {/* Footer */}
            {!isImporting && (
              <div className="px-6 py-4 border-t border-gray-200 flex justify-end">
                <button
                  onClick={handleCloseImportDialog}
                  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
                >
                  Close
                </button>
              </div>
            )}
          </div>
        </div>
      )}
    </>
  );
}