/**
 * DataImport Page
 * 
 * Thin orchestrator that composes the import wizard steps.
 * All business logic lives in useDataImport hook.
 */
import React from 'react';
import { Upload, FileUp, ChevronRight, ChevronLeft, Check, AlertCircle } from 'lucide-react';
import { Button } from '@nexuscrm/salesforce-crm-standard-frontend/platform/components/ui';
import { WizardStepIndicator } from '@nexuscrm/salesforce-crm-standard-frontend/platform/components/ui';
import { useDataImport } from '../features/data-import/hooks/useDataImport';
import { IMPORT_STEPS } from '../features/data-import/types';
import { SearchableSelect } from '@nexuscrm/salesforce-crm-standard-frontend/platform/components/ui';


const DataImport: React.FC = () => {
    const {
        step, selectedObject, setSelectedObject,
        csvData, fieldMapping, setFieldMapping,
        result, fileName, metadata, metaLoading,
        schemasLoading, importableObjects, creatableFields,
        handleFileChange, handleDrop, handleReset,
        handleNext, handleBack, canProceed,
    } = useDataImport();

    const currentStepIndex = IMPORT_STEPS.findIndex(s => s.key === step);

    const renderStepContent = () => {
        switch (step) {
            case 'select-object':
                return (
                    <div className="space-y-4">
                        <h2 className="text-lg font-semibold text-slate-900">Select Object</h2>
                        <p className="text-slate-600">Choose the object type you want to import records into.</p>

                        {schemasLoading ? (
                            <div className="py-8 text-center text-slate-500">Loading objects...</div>
                        ) : (
                            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 max-h-96 overflow-y-auto">
                                {importableObjects.map(obj => (
                                    <button
                                        key={obj.name}
                                        onClick={() => setSelectedObject(obj.name)}
                                        className={`p-4 rounded-lg border text-left transition-all ${selectedObject === obj.name
                                            ? 'border-blue-500 bg-blue-50 ring-2 ring-blue-500/20'
                                            : 'border-slate-200 hover:border-slate-300 bg-white'
                                            }`}
                                    >
                                        <div className="font-medium text-slate-900">{obj.label}</div>
                                        <div className="text-xs text-slate-500 font-mono">{obj.name}</div>
                                    </button>
                                ))}
                            </div>
                        )}
                    </div>
                );

            case 'upload':
                return (
                    <div className="space-y-4">
                        <h2 className="text-lg font-semibold text-slate-900">Upload CSV File</h2>
                        <p className="text-slate-600">
                            Upload a CSV file containing records for <strong>{metadata?.label || selectedObject}</strong>.
                        </p>

                        <div
                            onDrop={handleDrop}
                            onDragOver={(e) => e.preventDefault()}
                            className="border-2 border-dashed border-slate-300 rounded-xl p-12 text-center hover:border-blue-400 transition-colors bg-slate-50"
                        >
                            <input type="file" accept=".csv" onChange={handleFileChange} className="hidden" id="csv-upload" />
                            <label htmlFor="csv-upload" className="cursor-pointer">
                                <FileUp className="w-12 h-12 text-slate-400 mx-auto mb-4" />
                                <p className="text-slate-700 font-medium mb-1">
                                    Drop your CSV file here or <span className="text-blue-600">browse</span>
                                </p>
                                <p className="text-sm text-slate-500">Maximum file size: 10MB</p>
                            </label>
                        </div>

                        {fileName && (
                            <div className="flex items-center gap-2 p-3 bg-green-50 rounded-lg border border-green-200">
                                <Check className="w-5 h-5 text-green-600" />
                                <span className="text-green-800">{fileName} loaded successfully</span>
                            </div>
                        )}
                    </div>
                );

            case 'mapping':
                return (
                    <div className="space-y-4">
                        <h2 className="text-lg font-semibold text-slate-900">Map Fields</h2>
                        <p className="text-slate-600">Map CSV columns to {metadata?.label} fields.</p>

                        {metaLoading ? (
                            <div className="py-8 text-center text-slate-500">Loading fields...</div>
                        ) : (
                            <div className="border rounded-lg overflow-hidden">
                                <table className="w-full">
                                    <thead className="bg-slate-100">
                                        <tr>
                                            <th className="px-4 py-3 text-left text-sm font-semibold text-slate-700">CSV Column</th>
                                            <th className="px-4 py-3 text-left text-sm font-semibold text-slate-700">Maps To Field</th>
                                        </tr>
                                    </thead>
                                    <tbody className="divide-y divide-slate-200">
                                        {csvData?.headers.map(header => (
                                            <tr key={header} className="bg-white">
                                                <td className="px-4 py-3 font-mono text-sm text-slate-700">{header}</td>
                                                <td className="px-4 py-3">
                                                    <SearchableSelect
                                                        options={creatableFields.map(f => ({ value: f.name, label: f.label, detail: f.name }))}
                                                        value={fieldMapping[header] || ''}
                                                        onChange={(v) => setFieldMapping(prev => ({ ...prev, [header]: v }))}
                                                        placeholder="-- Skip this column --"
                                                    />
                                                </td>
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
                            </div>
                        )}
                    </div>
                );

            case 'preview': {
                const mappedHeaders = Object.entries(fieldMapping).filter(([, v]) => v);
                return (
                    <div className="space-y-4">
                        <h2 className="text-lg font-semibold text-slate-900">Preview Import</h2>
                        <p className="text-slate-600">
                            Review the first 5 records before importing into {metadata?.label}.
                        </p>

                        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-center gap-3">
                            <AlertCircle className="w-5 h-5 text-blue-600" />
                            <div>
                                <div className="font-medium text-blue-900">Ready to import {csvData?.rows.length} records</div>
                                <div className="text-sm text-blue-700">Mapped {mappedHeaders.length} fields</div>
                            </div>
                        </div>

                        <div className="border rounded-lg overflow-x-auto">
                            <table className="w-full text-sm">
                                <thead className="bg-slate-100">
                                    <tr>
                                        {mappedHeaders.map(([csvHeader, fieldName]) => (
                                            <th key={csvHeader} className="px-4 py-2 text-left font-semibold text-slate-700 whitespace-nowrap">
                                                {creatableFields.find(f => f.name === fieldName)?.label || fieldName}
                                            </th>
                                        ))}
                                    </tr>
                                </thead>
                                <tbody className="divide-y divide-slate-200">
                                    {csvData?.rows.slice(0, 5).map((row, i) => (
                                        <tr key={i} className="bg-white">
                                            {mappedHeaders.map(([csvHeader]) => {
                                                const headerIndex = csvData.headers.indexOf(csvHeader);
                                                return (
                                                    <td key={csvHeader} className="px-4 py-2 text-slate-700 whitespace-nowrap">
                                                        {row[headerIndex] || <span className="text-slate-400 italic">empty</span>}
                                                    </td>
                                                );
                                            })}
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </div>
                    </div>
                );
            }

            case 'importing':
                return (
                    <div className="py-12 text-center">
                        <div className="w-12 h-12 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4" />
                        <h2 className="text-lg font-semibold text-slate-900 mb-2">Importing Records</h2>
                        <p className="text-slate-600">Please wait while we import your data...</p>
                    </div>
                );

            case 'complete':
                return (
                    <div className="py-12 text-center space-y-6">
                        <div className={`w-16 h-16 rounded-full flex items-center justify-center mx-auto ${result?.failed === 0 ? 'bg-green-100' : 'bg-yellow-100'}`}>
                            {result?.failed === 0 ? (
                                <Check className="w-8 h-8 text-green-600" />
                            ) : (
                                <AlertCircle className="w-8 h-8 text-yellow-600" />
                            )}
                        </div>

                        <div>
                            <h2 className="text-xl font-semibold text-slate-900 mb-2">Import Complete</h2>
                            <div className="flex justify-center gap-8 text-sm">
                                <div>
                                    <div className="text-2xl font-bold text-green-600">{result?.success}</div>
                                    <div className="text-slate-500">Imported</div>
                                </div>
                                {(result?.failed || 0) > 0 && (
                                    <div>
                                        <div className="text-2xl font-bold text-red-600">{result?.failed}</div>
                                        <div className="text-slate-500">Failed</div>
                                    </div>
                                )}
                            </div>
                        </div>

                        {result?.errors && result.errors.length > 0 && (
                            <div className="mt-4 text-left max-w-md mx-auto">
                                <div className="font-medium text-red-700 mb-2">Errors:</div>
                                <div className="bg-red-50 border border-red-200 rounded-lg p-3 max-h-40 overflow-y-auto text-sm text-red-700">
                                    {result.errors.slice(0, 10).map((err, i) => (
                                        <div key={i}>{err}</div>
                                    ))}
                                    {result.errors.length > 10 && (
                                        <div className="text-slate-500 mt-2">...and {result.errors.length - 10} more</div>
                                    )}
                                </div>
                            </div>
                        )}

                        <Button variant="primary" onClick={handleReset}>
                            Start New Import
                        </Button>
                    </div>
                );
        }
    };

    return (
        <div className="p-6 max-w-5xl mx-auto">
            <div className="flex items-center gap-3 mb-6">
                <div className="p-2 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl shadow-lg">
                    <Upload className="w-6 h-6 text-white" />
                </div>
                <div>
                    <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Data Import</h1>
                    <p className="text-sm text-gray-500 dark:text-gray-400">Import records from CSV files</p>
                </div>
            </div>

            {step !== 'importing' && step !== 'complete' && (
                <WizardStepIndicator
                    steps={IMPORT_STEPS.map(s => s.label)}
                    currentStep={currentStepIndex}
                />
            )}

            <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                {renderStepContent()}
            </div>

            {step !== 'importing' && step !== 'complete' && (
                <div className="flex justify-between mt-6">
                    <Button variant="secondary" onClick={handleBack} disabled={step === 'select-object'}>
                        <ChevronLeft className="w-4 h-4 mr-1" />
                        Back
                    </Button>
                    <Button variant="primary" onClick={handleNext} disabled={!canProceed()}>
                        {step === 'preview' ? 'Start Import' : 'Next'}
                        <ChevronRight className="w-4 h-4 ml-1" />
                    </Button>
                </div>
            )}
        </div>
    );
};

export default DataImport;