Import/Export Components

import {
  FileUploader,
  ImportTable,
  ImportForm,
  ReviewContainer
} from "@phpcreation/frontend-crud-react-nextjs-bundle/components";
 
function BasicImport() {
  const [importStep, setImportStep] = useState<'upload' | 'configure' | 'preview' | 'import'>('upload');
  const [csvData, setCsvData] = useState<CSVDataType | null>(null);
  const [importJobId, setImportJobId] = useState<string | null>(null);
 
  const form = useForm<ImportFormDataType>({
    defaultValues: {
      file: null,
      fileName: "",
      fieldDelimiter: ",",
      textDelimiter: '"',
      validation: "validate"
    }
  });
 
  const handleFileImport = (jobId: string) => {
    setImportJobId(jobId);
    setImportStep('import');
  };
 
  return (
    <div className="max-w-4xl mx-auto p-6">
      <div className="bg-white rounded-lg shadow-md p-6">
        <h1 className="text-2xl font-bold mb-6">Import Data</h1>
        
        {/* Step Indicator */}
        <div className="mb-8">
          <div className="flex items-center justify-between">
            {['upload', 'configure', 'preview', 'import'].map((step, index) => (
              <div key={step} className="flex items-center">
                <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium ${
                  importStep === step ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-600'
                }`}>
                  {index + 1}
                </div>
                <span className="ml-2 text-sm capitalize">{step}</span>
                {index < 3 && <div className="w-16 h-0.5 bg-gray-200 mx-4" />}
              </div>
            ))}
          </div>
        </div>
 
        {/* Upload Step */}
        {importStep === 'upload' && (
          <div className="space-y-6">
            <FileUploader
              form={form}
              fqcn_bui={{Bundle: "data", Unit: "import", Interface: "upload"}}
              onImport={handleFileImport}
              locale="en"
            />
            
            {csvData && (
              <div>
                <h3 className="text-lg font-semibold mb-4">Data Preview</h3>
                <ImportTable csvData={csvData} />
                
                <div className="mt-4 text-right">
                  <Button onClick={() => setImportStep('configure')}>
                    Configure Import
                  </Button>
                </div>
              </div>
            )}
          </div>
        )}
 
        {/* Configure Step */}
        {importStep === 'configure' && (
          <div className="space-y-6">
            <ImportForm
              form={form}
              fqcn_bui={{Bundle: "data", Unit: "import", Interface: "config"}}
              csrfJwt={csrfToken}
              tenant={tenant}
              locale="en"
            />
            
            <div className="flex justify-between">
              <Button 
                variant="outline"
                onClick={() => setImportStep('upload')}
              >
                Back
              </Button>
              <Button onClick={() => setImportStep('preview')}>
                Preview Import
              </Button>
            </div>
          </div>
        )}
 
        {/* Preview Step */}
        {importStep === 'preview' && (
          <div className="space-y-6">
            <ReviewContainer
              importData={csvData}
              formConfig={form.getValues()}
              onConfirm={() => setImportStep('import')}
            />
            
            <div className="flex justify-between">
              <Button 
                variant="outline"
                onClick={() => setImportStep('configure')}
              >
                Back to Configuration
              </Button>
              <Button onClick={() => startImport()}>
                Start Import
              </Button>
            </div>
          </div>
        )}
 
        {/* Import Progress */}
        {importStep === 'import' && importJobId && (
          <ImportProgress jobId={importJobId} />
        )}
      </div>
    </div>
  );
}

// Advanced import with field mapping
function AdvancedImport() {
  const [fieldMapping, setFieldMapping] = useState<{[key: string]: string}>({});
  const [validationRules, setValidationRules] = useState<ValidationRule[]>([]);
 
  return (
    <div className="space-y-8">
      {/* Field Mapping */}
      <div className="bg-white p-6 rounded-lg shadow">
        <h3 className="text-lg font-semibold mb-4">Field Mapping</h3>
        <FieldMapper
          csvHeaders={csvData?.headers || []}
          targetFields={targetEntityFields}
          mapping={fieldMapping}
          onMappingChange={setFieldMapping}
        />
      </div>
 
      {/* Validation Rules */}
      <div className="bg-white p-6 rounded-lg shadow">
        <h3 className="text-lg font-semibold mb-4">Validation Rules</h3>
        <ValidationRuleBuilder
          rules={validationRules}
          onRulesChange={setValidationRules}
        />
      </div>
 
      {/* Data Transformation */}
      <div className="bg-white p-6 rounded-lg shadow">
        <h3 className="text-lg font-semibold mb-4">Data Transformation</h3>
        <DataTransformer
          transformations={transformations}
          onTransformationChange={setTransformations}
        />
      </div>
    </div>
  );
}

// Export functionality
function DataExporter({ resource }: { resource: string }) {
  const [exportConfig, setExportConfig] = useState({
    format: 'csv',
    fields: [],
    filters: {},
    includeHeaders: true
  });
 
  const handleExport = async () => {
    try {
      const response = await exportData(resource, exportConfig);
      const blob = new Blob([response.data], { 
        type: exportConfig.format === 'csv' ? 'text/csv' : 'application/vnd.ms-excel' 
      });
      
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = `${resource}_export.${exportConfig.format}`;
      link.click();
      
      window.URL.revokeObjectURL(url);
      toast.success('Export completed successfully!');
    } catch (error) {
      toast.error('Export failed');
    }
  };
 
  return (
    <div className="bg-white p-6 rounded-lg shadow">
      <h3 className="text-lg font-semibold mb-4">Export Configuration</h3>
      
      <div className="space-y-4">
        <div>
          <label className="block text-sm font-medium mb-2">Export Format</label>
          <select 
            value={exportConfig.format}
            onChange={(e) => setExportConfig(prev => ({...prev, format: e.target.value}))}
            className="w-full p-2 border rounded"
          >
            <option value="csv">CSV</option>
            <option value="xlsx">Excel</option>
            <option value="json">JSON</option>
          </select>
        </div>
 
        <div>
          <label className="block text-sm font-medium mb-2">Fields to Export</label>
          <FieldSelector
            availableFields={availableFields}
            selectedFields={exportConfig.fields}
            onFieldsChange={(fields) => setExportConfig(prev => ({...prev, fields}))}
          />
        </div>
 
        <div>
          <label className="flex items-center">
            <input
              type="checkbox"
              checked={exportConfig.includeHeaders}
              onChange={(e) => setExportConfig(prev => ({...prev, includeHeaders: e.target.checked}))}
              className="mr-2"
            />
            Include Headers
          </label>
        </div>
 
        <Button onClick={handleExport} className="w-full">
          Export Data
        </Button>
      </div>
    </div>
  );
}