/**
 * DataExport Page
 * 
 * Thin orchestrator for the export wizard.
 * All business logic lives in useDataExport hook.
 */
import React from 'react';
import { Download, 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 { useDataExport } from '../features/data-export/hooks/useDataExport';
import { EXPORT_STEPS } from '../features/data-export/types';


const DataExport: React.FC = () => {
    const {
        step, selectedObject, handleSelectObject,
        selectedFields, options, setOptions,
        exportedData, metadata, metaLoading,
        schemasLoading, exportableObjects, readableFields,
        toggleField, selectAllFields, deselectAllFields,
        handleReset, handleNext, handleBack, canProceed,
    } = useDataExport();

    const currentStepIndex = EXPORT_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 export records from.</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">
                                {exportableObjects.map(obj => (
                                    <button
                                        key={obj.name}
                                        onClick={() => handleSelectObject(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 'select-fields':
                return (
                    <div className="space-y-4">
                        <div className="flex justify-between items-center">
                            <div>
                                <h2 className="text-lg font-semibold text-slate-900">Select Fields</h2>
                                <p className="text-slate-600">
                                    Choose which fields to include in the export for <strong>{metadata?.label || selectedObject}</strong>.
                                </p>
                            </div>
                            <div className="flex gap-2">
                                <Button variant="secondary" size="sm" onClick={selectAllFields}>Select All</Button>
                                <Button variant="secondary" size="sm" onClick={deselectAllFields}>Deselect All</Button>
                            </div>
                        </div>

                        {metaLoading ? (
                            <div className="py-8 text-center text-slate-500">Loading fields...</div>
                        ) : (
                            <div className="grid grid-cols-2 md:grid-cols-3 gap-2 max-h-96 overflow-y-auto p-1">
                                {readableFields.map(field => (
                                    <label
                                        key={field.name}
                                        className={`flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition-all ${selectedFields.includes(field.name)
                                            ? 'border-blue-500 bg-blue-50'
                                            : 'border-slate-200 hover:border-slate-300 bg-white'
                                            }`}
                                    >
                                        <input
                                            type="checkbox"
                                            checked={selectedFields.includes(field.name)}
                                            onChange={() => toggleField(field.name)}
                                            className="w-4 h-4 text-blue-600 rounded border-slate-300 focus:ring-blue-500"
                                        />
                                        <div className="min-w-0">
                                            <div className="font-medium text-slate-900 truncate">{field.label}</div>
                                            <div className="text-xs text-slate-500 font-mono truncate">{field.name}</div>
                                        </div>
                                    </label>
                                ))}
                            </div>
                        )}

                        <div className="text-sm text-slate-600">
                            {selectedFields.length} of {readableFields.length} fields selected
                        </div>
                    </div>
                );

            case 'options':
                return (
                    <div className="space-y-6">
                        <h2 className="text-lg font-semibold text-slate-900">Export Options</h2>

                        <div className="space-y-4">
                            <div>
                                <label className="block text-sm font-medium text-slate-700 mb-2">Format</label>
                                <div className="flex gap-4">
                                    {(['csv', 'json'] as const).map(fmt => (
                                        <label key={fmt} className={`flex-1 flex items-center gap-3 p-4 rounded-lg border cursor-pointer transition-all ${options.format === fmt ? 'border-blue-500 bg-blue-50' : 'border-slate-200 bg-white'}`}>
                                            <input
                                                type="radio"
                                                name="format"
                                                checked={options.format === fmt}
                                                onChange={() => setOptions(prev => ({ ...prev, format: fmt }))}
                                                className="w-4 h-4 text-blue-600"
                                            />
                                            <div>
                                                <div className="font-medium text-slate-900">{fmt.toUpperCase()}</div>
                                                <div className="text-sm text-slate-500">{fmt === 'csv' ? 'Comma-separated values' : 'JavaScript Object Notation'}</div>
                                            </div>
                                        </label>
                                    ))}
                                </div>
                            </div>

                            <div>
                                <label className="block text-sm font-medium text-slate-700 mb-2">Record Limit</label>
                                <select
                                    value={options.limit}
                                    onChange={(e) => setOptions(prev => ({ ...prev, limit: Number(e.target.value) }))}
                                    className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                >
                                    <option value={1000}>1,000 records</option>
                                    <option value={5000}>5,000 records</option>
                                    <option value={10000}>10,000 records</option>
                                    <option value={50000}>50,000 records</option>
                                </select>
                            </div>
                        </div>

                        <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 shrink-0" />
                            <div>
                                <div className="font-medium text-blue-900">Ready to export</div>
                                <div className="text-sm text-blue-700">
                                    Exporting {selectedFields.length} fields from {metadata?.label || selectedObject} (up to {options.limit.toLocaleString()} records)
                                </div>
                            </div>
                        </div>
                    </div>
                );

            case 'exporting':
                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">Exporting Records</h2>
                        <p className="text-slate-600">Please wait while we prepare your export...</p>
                    </div>
                );

            case 'complete':
                return (
                    <div className="py-12 text-center space-y-6">
                        <div className="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mx-auto">
                            <Check className="w-8 h-8 text-green-600" />
                        </div>
                        <div>
                            <h2 className="text-xl font-semibold text-slate-900 mb-2">Export Complete</h2>
                            <p className="text-slate-600">
                                Successfully exported {exportedData?.length || 0} records from {metadata?.label || selectedObject}
                            </p>
                        </div>
                        <div className="flex justify-center gap-4">
                            <Button variant="secondary" onClick={handleReset}>Start New Export</Button>
                        </div>
                    </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-blue-500 to-cyan-600 rounded-xl shadow-lg">
                    <Download className="w-6 h-6 text-white" />
                </div>
                <div>
                    <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Data Export</h1>
                    <p className="text-sm text-gray-500 dark:text-gray-400">Export records to CSV or JSON</p>
                </div>
            </div>

            {step !== 'exporting' && step !== 'complete' && (
                <WizardStepIndicator
                    steps={EXPORT_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 !== 'exporting' && 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 === 'options' ? 'Export' : 'Next'}
                        <ChevronRight className="w-4 h-4 ml-1" />
                    </Button>
                </div>
            )}
        </div>
    );
};

export default DataExport;