import React, { useState, useRef } from 'react';
import { Download, Upload, AlertTriangle, CheckCircle, Database, FileJson, Info, RefreshCw } from 'lucide-react';
import api from '../../services/api';
import { useOrganization } from '@clerk/clerk-react';

interface BackupStats {
    projects: number;
    inspections: number;
    applicationRecords: number;
    technicalDataSheets: number;
    paintingSchemes: number;
    parts: number;
    instruments: number;
    yieldStudies: number;
    geometryTypes: number;
    stockItems: number;
    stockMovements: number;
}

interface BackupValidation {
    valid: boolean;
    isValidOrganization: boolean;
    version: string;
    timestamp: string;
    organizationId: string;
    stats: BackupStats;
    message: string;
}

export const BackupRestore: React.FC = () => {
    const { organization } = useOrganization();
    const [isExporting, setIsExporting] = useState(false);
    const [isImporting, setIsImporting] = useState(false);
    const [validationResult, setValidationResult] = useState<BackupValidation | null>(null);
    const [selectedFile, setSelectedFile] = useState<File | null>(null);
    const fileInputRef = useRef<HTMLInputElement>(null);

    const handleExport = async () => {
        if (!organization) return;

        setIsExporting(true);
        try {
            const response = await api.get('/backup/export', {
                responseType: 'blob'
            });

            // Cria um link de download
            const blob = new Blob([response.data], { type: 'application/json' });
            const url = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;

            // Nome do arquivo com timestamp
            const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, -5);
            link.download = `backup_${organization.name}_${timestamp}.json`;

            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(url);

            alert('✅ Backup exportado com sucesso!');
        } catch (error) {
            console.error('Erro ao exportar backup:', error);
            alert('❌ Erro ao exportar backup. Verifique o console para mais detalhes.');
        } finally {
            setIsExporting(false);
        }
    };

    const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0];
        if (!file) return;

        setSelectedFile(file);
        setValidationResult(null);

        // Valida o arquivo
        try {
            const fileContent = await file.text();
            const backupData = JSON.parse(fileContent);

            const response = await api.post<BackupValidation>('/backup/validate', backupData);
            setValidationResult(response.data);
        } catch (error) {
            console.error('Erro ao validar backup:', error);
            alert('❌ Arquivo de backup inválido ou corrompido.');
            setSelectedFile(null);
        }
    };

    const handleImport = async () => {
        if (!selectedFile || !validationResult?.valid) return;

        const confirmed = window.confirm(
            '⚠️ ATENÇÃO: Esta ação irá SUBSTITUIR TODOS os dados atuais pelos dados do backup.\n\n' +
            'Todos os projetos, inspeções, fichas técnicas e demais informações atuais serão PERMANENTEMENTE EXCLUÍDOS.\n\n' +
            'Tem certeza que deseja continuar?'
        );

        if (!confirmed) return;

        const doubleConfirm = window.confirm(
            '🔴 ÚLTIMA CONFIRMAÇÃO\n\n' +
            'Esta é sua última chance de cancelar. Os dados atuais serão IRRECUPERÁVEIS após esta ação.\n\n' +
            'Deseja realmente restaurar o backup?'
        );

        if (!doubleConfirm) return;

        setIsImporting(true);
        try {
            const fileContent = await selectedFile.text();
            const backupData = JSON.parse(fileContent);

            await api.post('/backup/import', backupData);

            alert('✅ Backup restaurado com sucesso! A página será recarregada.');
            window.location.reload();
        } catch (error: unknown) {
            const err = error as { response?: { data?: { message?: string } }; message?: string };
            console.error('Erro ao importar backup:', error);
            alert(`❌ Erro ao restaurar backup: ${err.response?.data?.message || err.message || 'Erro desconhecido'}`);
        } finally {
            setIsImporting(false);
        }
    };

    const formatDate = (isoString: string) => {
        const date = new Date(isoString);
        return date.toLocaleString('pt-BR', {
            day: '2-digit',
            month: '2-digit',
            year: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        });
    };

    return (
        <div className="space-y-6 animate-in fade-in slide-in-from-left-4 duration-300">
            {/* Header Info */}
            <div className="bg-amber-500/10 border border-amber-500/30 rounded-2xl p-6">
                <div className="flex items-start gap-4">
                    <div className="w-12 h-12 rounded-xl bg-amber-500/20 flex items-center justify-center flex-shrink-0">
                        <AlertTriangle size={24} className="text-amber-500" />
                    </div>
                    <div className="flex-1">
                        <h3 className="text-lg font-bold text-text-main mb-2">Backup e Restauração de Dados</h3>
                        <p className="text-sm text-text-muted leading-relaxed">
                            Use esta ferramenta para criar cópias de segurança de todos os dados da organização ou restaurar dados de um backup anterior.
                            <strong className="text-amber-500"> Os backups são específicos para cada organização e não podem ser restaurados em outras organizações.</strong>
                        </p>
                    </div>
                </div>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {/* Export Section */}
                <div className="bg-surface rounded-2xl p-6 border border-border/40 space-y-6">
                    <div className="flex items-center gap-3 pb-4 border-b border-border/20">
                        <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
                            <Download size={20} className="text-primary" />
                        </div>
                        <div>
                            <h2 className="text-lg font-bold text-text-main">Exportar Backup</h2>
                            <p className="text-xs text-text-muted">Baixe todos os dados em formato JSON</p>
                        </div>
                    </div>

                    <div className="space-y-4">
                        <div className="p-4 bg-surface-soft rounded-xl border border-border/20">
                            <h3 className="text-sm font-bold text-text-main flex items-center gap-2 mb-2">
                                <Database size={16} className="text-primary" />
                                O que será exportado?
                            </h3>
                            <ul className="text-xs text-text-muted space-y-1 ml-6 list-disc">
                                <li>Todos os projetos e suas configurações</li>
                                <li>Inspeções e registros de aplicação</li>
                                <li>Fichas técnicas e esquemas de pintura</li>
                                <li>Peças, geometrias e instrumentos</li>
                                <li>Estudos de rendimento</li>
                                <li>Estoque e movimentações</li>
                            </ul>
                        </div>

                        <button
                            onClick={handleExport}
                            disabled={isExporting}
                            className="w-full flex items-center justify-center gap-2 px-6 py-4 bg-primary hover:bg-primary-dark text-white rounded-xl font-bold transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-primary/20"
                        >
                            {isExporting ? (
                                <>
                                    <RefreshCw size={20} className="animate-spin" />
                                    Gerando Backup...
                                </>
                            ) : (
                                <>
                                    <Download size={20} />
                                    Baixar Backup Agora
                                </>
                            )}
                        </button>

                        <div className="p-3 bg-blue-500/10 border border-blue-500/30 rounded-xl">
                            <p className="text-xs text-blue-400 flex items-start gap-2">
                                <Info size={14} className="flex-shrink-0 mt-0.5" />
                                <span>
                                    O arquivo será salvo no seu computador com a data e hora atual.
                                    Guarde-o em local seguro (pendrive, nuvem, etc).
                                </span>
                            </p>
                        </div>
                    </div>
                </div>

                {/* Import Section */}
                <div className="bg-surface rounded-2xl p-6 border border-border/40 space-y-6">
                    <div className="flex items-center gap-3 pb-4 border-b border-border/20">
                        <div className="w-10 h-10 rounded-xl bg-amber-500/10 flex items-center justify-center">
                            <Upload size={20} className="text-amber-500" />
                        </div>
                        <div>
                            <h2 className="text-lg font-bold text-text-main">Restaurar Backup</h2>
                            <p className="text-xs text-text-muted">Carregue um arquivo de backup JSON</p>
                        </div>
                    </div>

                    <div className="space-y-4">
                        <label className="flex flex-col items-center justify-center w-full h-40 border-2 border-dashed border-border/40 rounded-2xl cursor-pointer hover:bg-surface-hover hover:border-primary/50 transition-all group">
                            <div className="flex flex-col items-center justify-center pt-5 pb-6">
                                <FileJson className="w-12 h-12 text-text-muted group-hover:text-primary transition-colors mb-3" />
                                <p className="text-sm text-text-main font-bold">
                                    {selectedFile ? selectedFile.name : 'Clique para selecionar o arquivo'}
                                </p>
                                <p className="text-xs text-text-muted mt-1">
                                    {selectedFile ? `${(selectedFile.size / 1024).toFixed(2)} KB` : 'Arquivo JSON de backup'}
                                </p>
                            </div>
                            <input
                                ref={fileInputRef}
                                type="file"
                                className="hidden"
                                accept=".json,application/json"
                                onChange={handleFileSelect}
                                disabled={isImporting}
                            />
                        </label>

                        {validationResult && (
                            <div className={`p-4 rounded-xl border ${validationResult.valid && validationResult.isValidOrganization
                                ? 'bg-green-500/10 border-green-500/30'
                                : 'bg-red-500/10 border-red-500/30'
                                }`}>
                                <div className="flex items-start gap-3">
                                    {validationResult.valid && validationResult.isValidOrganization ? (
                                        <CheckCircle size={20} className="text-green-400 flex-shrink-0 mt-0.5" />
                                    ) : (
                                        <AlertTriangle size={20} className="text-red-400 flex-shrink-0 mt-0.5" />
                                    )}
                                    <div className="flex-1 space-y-2">
                                        <p className={`text-sm font-bold ${validationResult.valid && validationResult.isValidOrganization
                                            ? 'text-green-400'
                                            : 'text-red-400'
                                            }`}>
                                            {validationResult.message}
                                        </p>
                                        {validationResult.valid && (
                                            <div className="text-xs text-text-muted space-y-1">
                                                <p><strong>Data do backup:</strong> {formatDate(validationResult.timestamp)}</p>
                                                <p><strong>Versão:</strong> {validationResult.version}</p>
                                                <div className="mt-2 pt-2 border-t border-border/20">
                                                    <p className="font-bold mb-1">Registros no backup:</p>
                                                    <div className="grid grid-cols-2 gap-x-4 gap-y-1">
                                                        <span>• Projetos: {validationResult.stats.projects}</span>
                                                        <span>• Inspeções: {validationResult.stats.inspections}</span>
                                                        <span>• Fichas: {validationResult.stats.technicalDataSheets}</span>
                                                        <span>• Esquemas: {validationResult.stats.paintingSchemes}</span>
                                                        <span>• Peças: {validationResult.stats.parts}</span>
                                                        <span>• Instrumentos: {validationResult.stats.instruments}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        )}
                                    </div>
                                </div>
                            </div>
                        )}

                        <button
                            onClick={handleImport}
                            disabled={!validationResult?.valid || !validationResult?.isValidOrganization || isImporting}
                            className="w-full flex items-center justify-center gap-2 px-6 py-4 bg-red-500 hover:bg-red-600 text-white rounded-xl font-bold transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-red-500/20"
                        >
                            {isImporting ? (
                                <>
                                    <RefreshCw size={20} className="animate-spin" />
                                    Restaurando...
                                </>
                            ) : (
                                <>
                                    <AlertTriangle size={20} />
                                    Restaurar Backup
                                </>
                            )}
                        </button>

                        <div className="p-3 bg-red-500/10 border border-red-500/30 rounded-xl">
                            <p className="text-xs text-red-400 flex items-start gap-2">
                                <AlertTriangle size={14} className="flex-shrink-0 mt-0.5" />
                                <span>
                                    <strong>ATENÇÃO:</strong> Restaurar um backup irá SUBSTITUIR PERMANENTEMENTE todos os dados atuais.
                                    Esta ação não pode ser desfeita!
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};