import React, { useState, useEffect } from 'react';
import { Modal } from '../Modal';
import { stockService, type StockMovement, type StockItem } from '../../services/stockService';
import { format } from 'date-fns';
import { ArrowUp, ArrowDown, RefreshCw, Trash2, Edit2, Save, X, FileText, Activity } from 'lucide-react';

import { useAuth } from '../../context/useAuth';

interface StockHistoryModalProps {
    isOpen: boolean;
    onClose: () => void;
    item: StockItem;
    onUpdate?: () => void;
}

interface AuditLog {
    _id: string;
    action: 'CREATE' | 'UPDATE' | 'DELETE';
    userName: string;
    details: string;
    timestamp: string;
    movementNumber?: number;
}

export const StockHistoryModal: React.FC<StockHistoryModalProps> = ({ isOpen, onClose, item, onUpdate }) => {
    const { isAdmin } = useAuth();
    const [activeTab, setActiveTab] = useState<'movements' | 'logs'>('movements');
    const [movements, setMovements] = useState<StockMovement[]>([]);
    const [logs, setLogs] = useState<AuditLog[]>([]);
    const [currentItem, setCurrentItem] = useState<StockItem>(item);
    const [loading, setLoading] = useState(true);
    const [editingId, setEditingId] = useState<string | null>(null);
    const [searchTerm, setSearchTerm] = useState('');
    const [editValues, setEditValues] = useState<{ date: string; quantity: string; notes: string }>({
        date: '',
        quantity: '',
        notes: ''
    });

    const fetchData = async () => {
        if (item._id) {
            setLoading(true);
            try {
                // Always fetch item to keep balance fresh
                const itemData = await stockService.getById(item._id);
                setCurrentItem(itemData);

                if (activeTab === 'movements') {
                    const data = await stockService.getMovements(item._id);
                    setMovements(data);
                } else {
                    const data = await stockService.getAuditLogs(item._id);
                    setLogs(data);
                }
            } catch (error) {
                console.error('Error fetching data:', error);
            } finally {
                setLoading(false);
            }
        }
    };

    useEffect(() => {
        if (isOpen) {
            fetchData();
        }
    }, [isOpen, item, activeTab]);

    const formatMovementId = (num?: number) => {
        if (!num) return '-';
        return `${item.rrNumber}/${String(num).padStart(2, '0')}`;
    };

    const filteredLogs = logs.filter(log => {
        const term = searchTerm.toLowerCase();
        const formattedId = formatMovementId(log.movementNumber);
        return (
            log.details.toLowerCase().includes(term) ||
            log.userName.toLowerCase().includes(term) ||
            formattedId.toLowerCase().includes(term)
        );
    });

    const handleEditClick = (move: StockMovement) => {
        setEditingId(move._id!);
        const dateStr = new Date(move.date).toISOString().slice(0, 16);
        setEditValues({
            date: dateStr,
            quantity: String(move.quantity),
            notes: move.notes || ''
        });
    };

    const handleCancelEdit = () => {
        setEditingId(null);
        setEditValues({ date: '', quantity: '', notes: '' });
    };

    const handleSave = async (id: string) => {
        try {
            await stockService.updateMovement(id, {
                date: new Date(editValues.date).toISOString(),
                quantity: Number(editValues.quantity),
                notes: editValues.notes
            });
            setEditingId(null);
            fetchData();
            if (onUpdate) onUpdate();
        } catch (error) {
            console.error('Error updating movement:', error);
            alert('Erro ao atualizar movimentação.');
        }
    };

    const handleDelete = async (id: string, qty: number) => {
        if (confirm(`Tem certeza que deseja excluir esta movimentação de ${qty}? O saldo do lote será revertido.`)) {
            try {
                await stockService.deleteMovement(id);
                fetchData();
                if (onUpdate) onUpdate();
            } catch (error) {
                console.error('Error deleting movement:', error);
                alert('Erro ao excluir movimentação.');
            }
        }
    };

    const getMovementIcon = (type: string) => {
        switch (type) {
            case 'ENTRY': return <ArrowUp size={16} className="text-green-500" />;
            case 'CONSUMPTION': return <ArrowDown size={16} className="text-blue-500" />;
            case 'ADJUSTMENT': return <RefreshCw size={16} className="text-amber-500" />;
            default: return null;
        }
    };

    const getMovementLabel = (type: string) => {
        switch (type) {
            case 'ENTRY': return 'Entrada';
            case 'CONSUMPTION': return 'Consumo';
            case 'ADJUSTMENT': return 'Ajuste';
            default: return type;
        }
    };

    return (
        <Modal
            isOpen={isOpen}
            onClose={onClose}
            title={`Histórico - ${item.rrNumber}`}
            maxWidth="max-w-4xl"
        >
            <div className="space-y-4">
                <div className="bg-surface-soft p-4 rounded-xl border border-border/40 mb-4 flex justify-between items-center">
                    <div>
                        <p className="text-sm text-text-secondary">Produto: <span className="text-text-main font-semibold">{typeof currentItem.dataSheetId === 'object' ? currentItem.dataSheetId.name : '...'}</span></p>
                        <p className="text-sm text-text-secondary">Lote: <span className="text-text-main font-semibold">{currentItem.batchNumber}</span></p>
                    </div>
                    <div className="text-right">
                        <p className="text-sm text-text-secondary">Saldo Atual</p>
                        <span className="text-text-main font-bold text-2xl">{currentItem.quantity} <span className="text-lg font-normal text-text-muted">{currentItem.unit}</span></span>
                    </div>
                </div>

                {/* Tabs */}
                <div className="flex border-b border-border/40 mb-4 justify-between items-center">
                    <div className="flex">
                        <button
                            onClick={() => setActiveTab('movements')}
                            className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors flex items-center gap-2 ${activeTab === 'movements' ? 'border-primary text-primary' : 'border-transparent text-text-muted hover:text-text-main'}`}
                        >
                            <Activity size={16} />
                            Movimentações
                        </button>
                        <button
                            onClick={() => setActiveTab('logs')}
                            className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors flex items-center gap-2 ${activeTab === 'logs' ? 'border-primary text-primary' : 'border-transparent text-text-muted hover:text-text-main'}`}
                        >
                            <FileText size={16} />
                            Logs de Auditoria
                        </button>
                    </div>
                    {activeTab === 'logs' && (
                        <input
                            type="text"
                            placeholder="Buscar por nº Mov ou Detalhes..."
                            value={searchTerm}
                            onChange={(e) => setSearchTerm(e.target.value)}
                            className="text-xs bg-surface border border-border/40 rounded-lg px-3 py-1.5 focus:outline-none focus:border-primary w-64 text-text-main placeholder-text-muted"
                        />
                    )}
                </div>

                {loading ? (
                    <div className="text-center py-8 text-text-muted">Carregando...</div>
                ) : activeTab === 'movements' ? (
                    // MOVEMENTS TABLE
                    movements.length === 0 ? (
                        <div className="text-center py-8 text-text-muted">Nenhuma movimentação registrada.</div>
                    ) : (
                        <div className="relative overflow-hidden rounded-xl border border-border/40 bg-surface">
                            <table className="w-full text-sm text-left">
                                <thead className="bg-surface-soft text-text-muted font-medium uppercase text-xs">
                                    <tr>
                                        <th className="px-4 py-3 w-32 text-center">ID</th>
                                        <th className="px-4 py-3 w-40">Data</th>
                                        <th className="px-4 py-3 w-32">Tipo</th>
                                        <th className="px-4 py-3 w-28">Qtd</th>
                                        <th className="px-4 py-3 w-40">Responsável</th>
                                        <th className="px-4 py-3">Detalhes</th>
                                        {isAdmin() && <th className="px-4 py-3 w-24 text-right">Ações</th>}
                                    </tr>
                                </thead>
                                <tbody className="divide-y divide-border/40">
                                    {movements.map((move: any) => {
                                        const isEditing = editingId === move._id;
                                        return (
                                            <tr key={move._id} className="hover:bg-surface-hover/50">
                                                <td className="px-4 py-3 text-center font-mono text-text-muted text-xs">
                                                    {formatMovementId(move.movementNumber)}
                                                </td>
                                                <td className="px-4 py-3 text-text-main align-top">
                                                    {isEditing ? (
                                                        <input
                                                            type="datetime-local"
                                                            value={editValues.date}
                                                            onChange={(e) => setEditValues({ ...editValues, date: e.target.value })}
                                                            className="w-full bg-background border border-border rounded px-2 py-1 text-xs"
                                                        />
                                                    ) : (
                                                        <span className="whitespace-nowrap">
                                                            {format(new Date(move.date), 'dd/MM/yyyy HH:mm')}
                                                        </span>
                                                    )}
                                                </td>
                                                <td className="px-4 py-3 align-top">
                                                    <div className="flex items-center gap-2 font-medium">
                                                        {getMovementIcon(move.type)}
                                                        <span>{getMovementLabel(move.type)}</span>
                                                    </div>
                                                </td>
                                                <td className="px-4 py-3 font-bold align-top">
                                                    {isEditing ? (
                                                        <input
                                                            type="number"
                                                            value={editValues.quantity}
                                                            onChange={(e) => setEditValues({ ...editValues, quantity: e.target.value })}
                                                            className="w-full bg-background border border-border rounded px-2 py-1 text-xs"
                                                            placeholder="(ex: -10)"
                                                        />
                                                    ) : (
                                                        <span className={move.quantity > 0 ? 'text-green-500' : 'text-red-500'}>
                                                            {move.quantity > 0 ? '+' : ''}{move.quantity}
                                                        </span>
                                                    )}
                                                </td>
                                                <td className="px-4 py-3 text-text-secondary align-top text-xs">
                                                    <div className="line-clamp-2" title={move.responsible}>
                                                        {move.responsible}
                                                    </div>
                                                </td>
                                                <td className="px-4 py-3 text-text-muted text-xs align-top">
                                                    {isEditing ? (
                                                        <textarea
                                                            value={editValues.notes}
                                                            onChange={(e) => setEditValues({ ...editValues, notes: e.target.value })}
                                                            className="w-full bg-background border border-border rounded px-2 py-1 text-xs resize-y min-h-[2.5rem]"
                                                            placeholder="Notas..."
                                                        />
                                                    ) : (
                                                        <div className="line-clamp-2">
                                                            {move.type === 'ADJUSTMENT' && move.reason}
                                                            {move.type === 'CONSUMPTION' && `Solicitante: ${move.requester}`}
                                                            {move.notes && ` - ${move.notes}`}
                                                            {!move.notes && !move.reason && !move.requester && '-'}
                                                        </div>
                                                    )}
                                                </td>
                                                {isAdmin() && (
                                                    <td className="px-4 py-3 text-right align-top">
                                                        {isEditing ? (
                                                            <div className="flex justify-end gap-2">
                                                                <button
                                                                    onClick={() => handleSave(move._id!)}
                                                                    className="p-1.5 bg-green-500/10 text-green-500 hover:bg-green-500/20 rounded-lg transition-colors"
                                                                    title="Salvar"
                                                                >
                                                                    <Save size={16} />
                                                                </button>
                                                                <button
                                                                    onClick={handleCancelEdit}
                                                                    className="p-1.5 bg-red-500/10 text-red-500 hover:bg-red-500/20 rounded-lg transition-colors"
                                                                    title="Cancelar"
                                                                >
                                                                    <X size={16} />
                                                                </button>
                                                            </div>
                                                        ) : (
                                                            <div className="flex justify-end gap-2">
                                                                <button
                                                                    onClick={() => handleEditClick(move)}
                                                                    className="p-1.5 text-blue-500 hover:bg-blue-500/10 rounded-lg transition-colors"
                                                                    title="Editar"
                                                                >
                                                                    <Edit2 size={16} />
                                                                </button>
                                                                <button
                                                                    onClick={() => handleDelete(move._id!, move.quantity)}
                                                                    className="p-1.5 text-red-500 hover:bg-red-500/10 rounded-lg transition-colors"
                                                                    title="Excluir"
                                                                >
                                                                    <Trash2 size={16} />
                                                                </button>
                                                            </div>
                                                        )}
                                                    </td>
                                                )}
                                            </tr>
                                        );
                                    })}
                                </tbody>
                            </table>
                        </div>
                    )
                ) : (
                    // LOGS TABLE
                    filteredLogs.length === 0 ? (
                        <div className="text-center py-8 text-text-muted">Nenhum log de auditoria encontrado.</div>
                    ) : (
                        <div className="relative overflow-hidden rounded-xl border border-border/40 bg-surface">
                            <table className="w-full text-sm text-left">
                                <thead className="bg-surface-soft text-text-muted font-medium uppercase text-xs">
                                    <tr>
                                        <th className="px-4 py-3 w-40">Data</th>
                                        <th className="px-4 py-3 w-32">Ação</th>
                                        <th className="px-4 py-3 w-32 text-center">ID Mov.</th>
                                        <th className="px-4 py-3 w-40">Usuário</th>
                                        <th className="px-4 py-3">Detalhes da Alteração</th>
                                    </tr>
                                </thead>
                                <tbody className="divide-y divide-border/40">
                                    {filteredLogs.map((log) => (
                                        <tr key={log._id} className="hover:bg-surface-hover/50">
                                            <td className="px-4 py-3 text-text-main align-top whitespace-nowrap">
                                                {format(new Date(log.timestamp), 'dd/MM/yyyy HH:mm')}
                                            </td>
                                            <td className="px-4 py-3 align-top font-bold">
                                                <span className={
                                                    log.action === 'CREATE' ? 'text-green-500' :
                                                        log.action === 'UPDATE' ? 'text-blue-500' :
                                                            'text-red-500'
                                                }>
                                                    {log.action === 'CREATE' ? 'CRIAÇÃO' :
                                                        log.action === 'UPDATE' ? 'EDIÇÃO' : 'EXCLUSÃO'}
                                                </span>
                                            </td>
                                            <td className="px-4 py-3 text-center align-top font-mono text-text-main">
                                                {formatMovementId(log.movementNumber)}
                                            </td>
                                            <td className="px-4 py-3 text-text-secondary align-top">
                                                {log.userName}
                                            </td>
                                            <td className="px-4 py-3 text-text-muted text-xs align-top font-mono">
                                                {log.details}
                                            </td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </div>
                    )
                )}
            </div>
        </Modal>
    );
};