// ImportDialog — three-step XLSX/CSV/JSON import flow (upload → validate →
// import with per-row error report). The template, the accepted columns and
// the validation rules all come from the model's ImportSpec served by the
// kernel, so this dialog carries no per-model knowledge. Axios-like client is
// provided by <ApiProvider>.
import { useState, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogDescription,
    DialogFooter,
    Button,
    Label,
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@asteby/metacore-ui/primitives'
import { Progress } from './_primitives'
import { toast } from 'sonner'
import { FileDown, Loader2, Check, AlertCircle } from 'lucide-react'
import type { TableMetadata } from '../types'
import { useApi } from '../api-context'
import { FilePickButton } from '../file-pick-button'

interface ImportDialogProps {
    open: boolean
    onOpenChange: (open: boolean) => void
    model: string
    metadata: TableMetadata
    onImported?: () => void
}

// RowError is one problem the backend reports against one spreadsheet row.
// The kernel returns `{row, column, message}` on validate and
// `{row, column, error}` on import; older backends returned `{row, field,
// message}`. Normalising here keeps the dialog working against every one of
// them instead of rendering blank cells.
interface RowError {
    row: number
    column?: string
    field?: string
    message?: string
    error?: string
}

function errorColumn(e: RowError): string {
    return e.column ?? e.field ?? ''
}

function errorMessage(e: RowError): string {
    return e.message ?? e.error ?? ''
}

interface ValidationResult {
    valid: number
    skipped: number
    errors: RowError[]
}

interface ImportResult {
    created: number
    skipped: number
    errors: RowError[]
}

type Step = 'upload' | 'validation' | 'results'

export function ImportDialog({
    open,
    onOpenChange,
    model,
    metadata,
    onImported,
}: ImportDialogProps) {
    const api = useApi()
    const { t } = useTranslation()
    const [step, setStep] = useState<Step>('upload')
    const [file, setFile] = useState<File | null>(null)
    const [validating, setValidating] = useState(false)
    const [importing, setImporting] = useState(false)
    const [validationResult, setValidationResult] = useState<ValidationResult | null>(null)
    const [importResult, setImportResult] = useState<ImportResult | null>(null)
    const [progress, setProgress] = useState(0)

    useEffect(() => {
        if (open) {
            setStep('upload')
            setFile(null)
            setValidating(false)
            setImporting(false)
            setValidationResult(null)
            setImportResult(null)
            setProgress(0)
        }
    }, [open])

    const handleDownloadTemplate = async () => {
        try {
            const response = await api.get(`/dynamic/${model}/export/template`, {
                responseType: 'blob',
            })
            const url = window.URL.createObjectURL(response.data)
            const link = document.createElement('a')
            link.href = url
            link.download = `${model}-plantilla.xlsx`
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
            window.URL.revokeObjectURL(url)
        } catch {
            toast.error('Error al descargar la plantilla')
        }
    }

    const handleValidate = async () => {
        if (!file) {
            toast.error('Selecciona un archivo para validar')
            return
        }

        setValidating(true)
        try {
            const formData = new FormData()
            formData.append('file', file)

            const res = await api.post(`/dynamic/${model}/import/validate`, formData, {
                headers: { 'Content-Type': 'multipart/form-data' },
            })

            const data = res.data?.data ?? res.data
            setValidationResult({
                valid: data.rowCount ?? data.valid ?? 0,
                skipped: data.skipped ?? 0,
                errors: data.errors ?? [],
            })
            setStep('validation')
        } catch (err: any) {
            // Backends may answer a validation failure with a non-2xx status
            // (e.g. 422) while still carrying the real per-row report in the
            // body. Render it instead of a body-less "something went wrong"
            // toast whenever that shape is present.
            const body = err?.response?.data
            const payload = body?.data ?? body
            if (payload && (Array.isArray(payload.errors) || typeof payload.rowCount === 'number' || typeof payload.valid === 'number')) {
                setValidationResult({
                    valid: payload.rowCount ?? payload.valid ?? 0,
                    skipped: payload.skipped ?? 0,
                    errors: payload.errors ?? [],
                })
                setStep('validation')
            } else {
                toast.error(body?.message || 'Error al validar el archivo')
            }
        } finally {
            setValidating(false)
        }
    }

    const handleImport = async () => {
        if (!file) return

        setImporting(true)
        setProgress(0)

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

            const res = await api.post(`/dynamic/${model}/import`, formData, {
                headers: { 'Content-Type': 'multipart/form-data' },
                onUploadProgress: (progressEvent: { loaded: number; total?: number }) => {
                    if (progressEvent.total) {
                        setProgress(
                            Math.round((progressEvent.loaded / progressEvent.total) * 100)
                        )
                    }
                },
            })

            const data = res.data?.data ?? res.data
            setImportResult({
                created: data.created ?? 0,
                skipped: data.skipped ?? 0,
                errors: data.failures ?? data.errors ?? [],
            })
            setStep('results')

            if ((data.created ?? 0) > 0) {
                onImported?.()
            }
        } catch (err: any) {
            // A partial or total import failure is still a real, displayable
            // result — the backend computes per-row reasons in `data.failures`
            // even when it answers with a non-2xx status (e.g. 422 when zero
            // rows were created). Show that report instead of discarding it
            // behind a generic toast.
            const body = err?.response?.data
            const payload = body?.data ?? body
            if (payload && (Array.isArray(payload.failures) || Array.isArray(payload.errors) || typeof payload.created === 'number')) {
                setImportResult({
                    created: payload.created ?? 0,
                    skipped: payload.skipped ?? 0,
                    errors: payload.failures ?? payload.errors ?? [],
                })
                setStep('results')
                if ((payload.created ?? 0) > 0) {
                    onImported?.()
                }
            } else {
                toast.error(body?.message || 'Error al importar los datos')
            }
        } finally {
            setImporting(false)
            setProgress(0)
        }
    }

    const handleClose = () => {
        onOpenChange(false)
    }

    const stepTitle = {
        upload: 'Subir archivo',
        validation: 'Validacion',
        results: 'Resultados',
    }

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="sm:max-w-lg max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden">
                <DialogHeader className="p-6 pb-4 border-b shrink-0">
                    <DialogTitle>
                        Importar {metadata.title}
                    </DialogTitle>
                    <DialogDescription>
                        {stepTitle[step]}
                    </DialogDescription>
                </DialogHeader>

                <div className="flex-1 overflow-y-auto p-6">
                    {step === 'upload' && (
                        <div className="space-y-6">
                            <div>
                                <Button
                                    variant="link"
                                    className="px-0 h-auto text-sm"
                                    onClick={handleDownloadTemplate}
                                >
                                    <FileDown className="h-4 w-4 mr-1" />
                                    Descargar plantilla
                                </Button>
                                <p className="text-xs text-muted-foreground mt-1">
                                    La plantilla trae las columnas, un ejemplo y las
                                    instrucciones. Borra la fila de ejemplo antes de subir.
                                </p>
                            </div>

                            <div className="space-y-2">
                                <Label htmlFor="import-file" className="text-sm font-medium">
                                    {t('common.upload.choose', { defaultValue: 'Choose file' })}
                                </Label>
                                <FilePickButton
                                    id="import-file"
                                    accept=".xlsx,.xls,.csv,.json"
                                    hasFile={Boolean(file)}
                                    fileName={file?.name}
                                    onFile={setFile}
                                />
                                <p className="text-xs text-muted-foreground">
                                    Formatos aceptados: Excel, CSV, JSON
                                </p>
                            </div>
                        </div>
                    )}

                    {step === 'validation' && validationResult && (
                        <div className="space-y-4">
                            <div className="flex items-center gap-4">
                                <div className="flex items-center gap-2 text-sm">
                                    <Check className="h-4 w-4 text-green-600" />
                                    <span>
                                        <strong>{validationResult.valid}</strong> valido(s)
                                    </span>
                                </div>
                                {validationResult.errors.length > 0 && (
                                    <div className="flex items-center gap-2 text-sm">
                                        <AlertCircle className="h-4 w-4 text-destructive" />
                                        <span>
                                            <strong>{validationResult.errors.length}</strong> error(es)
                                        </span>
                                    </div>
                                )}
                            </div>

                            {validationResult.skipped > 0 && (
                                <p className="text-xs text-muted-foreground">
                                    Se ignoraron {validationResult.skipped} fila(s) de ejemplo
                                    de la plantilla.
                                </p>
                            )}

                            {validationResult.errors.length > 0 && (
                                <div className="border rounded-md max-h-60 overflow-auto">
                                    <Table>
                                        <TableHeader>
                                            <TableRow>
                                                <TableHead className="w-16">Fila</TableHead>
                                                <TableHead>Campo</TableHead>
                                                <TableHead>Error</TableHead>
                                            </TableRow>
                                        </TableHeader>
                                        <TableBody>
                                            {validationResult.errors.map((error, idx) => (
                                                <TableRow key={idx}>
                                                    <TableCell className="font-mono text-xs">
                                                        {error.row}
                                                    </TableCell>
                                                    <TableCell className="text-sm">
                                                        {errorColumn(error)}
                                                    </TableCell>
                                                    <TableCell className="text-sm text-destructive">
                                                        {errorMessage(error)}
                                                    </TableCell>
                                                </TableRow>
                                            ))}
                                        </TableBody>
                                    </Table>
                                </div>
                            )}

                            {importing && (
                                <div className="space-y-2">
                                    <Progress value={progress} />
                                    <p className="text-xs text-muted-foreground text-center">
                                        Importando... {progress > 0 ? `${progress}%` : ''}
                                    </p>
                                </div>
                            )}
                        </div>
                    )}

                    {step === 'results' && importResult && (
                        <div className="space-y-4">
                            <div className="flex items-center gap-4">
                                {importResult.created > 0 && (
                                    <div className="flex items-center gap-2 text-sm">
                                        <Check className="h-4 w-4 text-green-600" />
                                        <span>
                                            <strong>{importResult.created}</strong> creado(s)
                                        </span>
                                    </div>
                                )}
                                {importResult.errors.length > 0 && (
                                    <div className="flex items-center gap-2 text-sm">
                                        <AlertCircle className="h-4 w-4 text-destructive" />
                                        <span>
                                            <strong>{importResult.errors.length}</strong> error(es)
                                        </span>
                                    </div>
                                )}
                            </div>

                            {importResult.created > 0 && importResult.errors.length === 0 && (
                                <div className="flex items-center gap-2 rounded-md bg-green-50 dark:bg-green-950/20 p-3 text-sm text-green-700 dark:text-green-400">
                                    <Check className="h-4 w-4 shrink-0" />
                                    Todos los registros fueron importados correctamente.
                                </div>
                            )}

                            {importResult.errors.length > 0 && (
                                <div className="border rounded-md max-h-60 overflow-auto">
                                    <Table>
                                        <TableHeader>
                                            <TableRow>
                                                <TableHead className="w-16">Fila</TableHead>
                                                <TableHead>Campo</TableHead>
                                                <TableHead>Error</TableHead>
                                            </TableRow>
                                        </TableHeader>
                                        <TableBody>
                                            {importResult.errors.map((error, idx) => (
                                                <TableRow key={idx}>
                                                    <TableCell className="font-mono text-xs">
                                                        {error.row}
                                                    </TableCell>
                                                    <TableCell className="text-sm">
                                                        {errorColumn(error)}
                                                    </TableCell>
                                                    <TableCell className="text-sm text-destructive">
                                                        {errorMessage(error)}
                                                    </TableCell>
                                                </TableRow>
                                            ))}
                                        </TableBody>
                                    </Table>
                                </div>
                            )}
                        </div>
                    )}
                </div>

                <DialogFooter className="p-4 border-t shrink-0">
                    {step === 'upload' && (
                        <>
                            <Button variant="outline" onClick={handleClose}>
                                Cancelar
                            </Button>
                            <Button
                                onClick={handleValidate}
                                disabled={!file || validating}
                            >
                                {validating && (
                                    <Loader2 className="h-4 w-4 mr-1 animate-spin" />
                                )}
                                {validating ? 'Validando...' : 'Validar'}
                            </Button>
                        </>
                    )}

                    {step === 'validation' && (
                        <>
                            <Button
                                variant="outline"
                                onClick={() => setStep('upload')}
                                disabled={importing}
                            >
                                Atras
                            </Button>
                            <Button
                                onClick={handleImport}
                                disabled={
                                    importing ||
                                    (validationResult !== null && validationResult.valid === 0)
                                }
                            >
                                {importing && (
                                    <Loader2 className="h-4 w-4 mr-1 animate-spin" />
                                )}
                                {importing ? 'Importando...' : 'Importar'}
                            </Button>
                        </>
                    )}

                    {step === 'results' && (
                        <Button onClick={handleClose}>Cerrar</Button>
                    )}
                </DialogFooter>
            </DialogContent>
        </Dialog>
    )
}