import React, { useState, useEffect, useCallback } from 'react';
import { X, Move, Square, ChevronLeft, ChevronRight, ChevronUp, ChevronDown, Home, Printer, XCircle, Settings } from 'lucide-react';
import { comms } from '../communication';
import { useAlert } from '../contexts/AlertContext';

interface PickerMoveDialogProps {
    isOpen: boolean;
    onClose: () => void;
}

interface PickerStatus {
    xEnabled: boolean;
    zEnabled: boolean;
    pickerSafe: boolean;
    managementEnabled: boolean;
    manPosL: boolean;
    manPosR: boolean;
}

export const PickerMoveDialog: React.FC<PickerMoveDialogProps> = ({ isOpen, onClose }) => {
    const { showAlert, showConfirm } = useAlert();
    const [status, setStatus] = useState<PickerStatus>({
        xEnabled: false,
        zEnabled: false,
        pickerSafe: false,
        managementEnabled: false,
        manPosL: false,
        manPosR: false
    });
    const [isJogging, setIsJogging] = useState(false);

    // Subscribe to picker status updates
    useEffect(() => {
        if (!isOpen) return;

        const unsubscribe = comms.subscribe((data: any) => {
            if (data.type === 'PICKER_STATUS') {
                setStatus(data.data);
            }
        });

        // Request initial status
        comms.getPickerStatus();

        // Set up polling interval
        const intervalId = setInterval(() => {
            comms.getPickerStatus();
        }, 200);

        return () => {
            unsubscribe();
            clearInterval(intervalId);
        };
    }, [isOpen]);

    const handleClose = async () => {
        try {
            const result = await comms.canCloseManage();
            if (!result.canClose) {
                showAlert({
                    type: 'error',
                    title: 'Cannot Close',
                    message: result.message || 'Printer motion is in management position.\nReturn to position and try again.'
                });
                return;
            }
            onClose();
        } catch (error) {
            // If check fails, still allow close
            onClose();
        }
    };

    // === Position Move Buttons ===
    const handleMoveLeft = async () => {
        const result = await comms.pickerMoveLeft();
        if (!result.success) {
            showAlert({ type: 'error', title: 'Move Failed', message: result.message });
        }
    };

    const handleMoveLeftWait = async () => {
        const result = await comms.pickerMoveLeftWait();
        if (!result.success) {
            showAlert({ type: 'error', title: 'Move Failed', message: result.message });
        }
    };

    const handleMoveCenter = async () => {
        const result = await comms.pickerMoveCenter();
        if (!result.success) {
            showAlert({ type: 'error', title: 'Move Failed', message: result.message });
        }
    };

    const handleMoveRightWait = async () => {
        const result = await comms.pickerMoveRightWait();
        if (!result.success) {
            showAlert({ type: 'error', title: 'Move Failed', message: result.message });
        }
    };

    const handleMoveRight = async () => {
        const result = await comms.pickerMoveRight();
        if (!result.success) {
            showAlert({ type: 'error', title: 'Move Failed', message: result.message });
        }
    };

    // === Jog Control ===
    const handleJogStart = useCallback(async (direction: 'up' | 'down' | 'left' | 'right') => {
        setIsJogging(true);
        await comms.pickerJogStart(direction);
    }, []);

    const handleJogStop = useCallback(async () => {
        setIsJogging(false);
        await comms.pickerJogStop();
    }, []);

    const handleStop = async () => {
        await comms.pickerStop();
    };

    // === Vision Validation Cancel ===
    const handleCancelVisionL = async () => {
        const confirmed = await showConfirm({
            title: 'Cancel Vision Validation',
            message: 'Do you want to cancel LEFT-QR code verification?'
        });
        if (confirmed) {
            const result = await comms.cancelVisionValidation('left');
            if (result.success) {
                showAlert({ type: 'success', title: 'Cancelled', message: 'LEFT-QR verification cancelled' });
            } else {
                showAlert({ type: 'error', title: 'Cancel Failed', message: result.message });
            }
        }
    };

    const handleCancelVisionR = async () => {
        const confirmed = await showConfirm({
            title: 'Cancel Vision Validation',
            message: 'Do you want to cancel RIGHT-QR code verification?'
        });
        if (confirmed) {
            const result = await comms.cancelVisionValidation('right');
            if (result.success) {
                showAlert({ type: 'success', title: 'Cancelled', message: 'RIGHT-QR verification cancelled' });
            } else {
                showAlert({ type: 'error', title: 'Cancel Failed', message: result.message });
            }
        }
    };

    // === Management Position ===
    const handleManagePosL = async () => {
        const result = await comms.pickerManagePosition('left');
        if (!result.success) {
            showAlert({ type: 'error', title: 'Move Failed', message: result.message });
        }
    };

    const handleManagePosR = async () => {
        const result = await comms.pickerManagePosition('right');
        if (!result.success) {
            showAlert({ type: 'error', title: 'Move Failed', message: result.message });
        }
    };

    const handleManagePosReturn = async () => {
        const result = await comms.pickerManageReturn();
        if (!result.success) {
            showAlert({ type: 'error', title: 'Return Failed', message: result.message });
        }
    };

    // === Z-Axis Control ===
    const handleZHome = async () => {
        const confirmed = await showConfirm({
            title: 'Z-Axis Home',
            message: 'Do you want to proceed with picker Z-axis home search?'
        });
        if (confirmed) {
            const result = await comms.pickerZHome();
            if (!result.success) {
                showAlert({ type: 'error', title: 'Home Failed', message: result.message });
            }
        }
    };

    const handleZZero = async () => {
        const confirmed = await showConfirm({
            title: 'Z-Axis Zero',
            message: 'Do you want to move picker Z-axis to coordinate:0?'
        });
        if (confirmed) {
            const result = await comms.pickerZZero();
            if (!result.success) {
                showAlert({ type: 'error', title: 'Move Failed', message: result.message });
            }
        }
    };

    // === Print Test ===
    const handlePrintL = async () => {
        const result = await comms.pickerTestPrint('left');
        if (!result.success) {
            showAlert({ type: 'error', title: 'Print Failed', message: result.message });
        }
    };

    const handlePrintR = async () => {
        const result = await comms.pickerTestPrint('right');
        if (!result.success) {
            showAlert({ type: 'error', title: 'Print Failed', message: result.message });
        }
    };

    if (!isOpen) return null;

    return (
        <div className="fixed inset-0 z-[100] flex items-center justify-center">
            {/* Backdrop */}
            <div
                className="absolute inset-0 bg-black/80 backdrop-blur-sm"
                onClick={handleClose}
            />

            {/* Dialog */}
            <div className="relative bg-black/95 backdrop-blur-md border-2 border-neon-blue rounded-lg shadow-2xl w-full max-w-4xl mx-4 animate-fadeIn">
                {/* Header */}
                <div className="flex items-center justify-between p-4 border-b border-white/10">
                    <div className="flex items-center gap-3">
                        <Move className="w-6 h-6 text-neon-blue" />
                        <h2 className="text-xl font-tech font-bold text-white uppercase tracking-wider">
                            Picker(X) Movement and Management
                        </h2>
                    </div>
                    <button
                        onClick={handleClose}
                        className="text-slate-400 hover:text-white transition-colors"
                    >
                        <X className="w-6 h-6" />
                    </button>
                </div>

                {/* Content */}
                <div className="p-4">
                    {/* Row 1: Jog Controls */}
                    <div className="grid grid-cols-5 gap-2 mb-2">
                        {/* Z Up */}
                        <button
                            onMouseDown={() => handleJogStart('up')}
                            onMouseUp={handleJogStop}
                            onMouseLeave={handleJogStop}
                            disabled={!status.zEnabled}
                            className="h-24 flex items-center justify-center bg-slate-800/50 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed border border-white/10 rounded-lg text-purple-400 transition-colors"
                        >
                            <ChevronUp className="w-16 h-16" strokeWidth={3} />
                        </button>

                        {/* X Left Jog */}
                        <button
                            onMouseDown={() => handleJogStart('left')}
                            onMouseUp={handleJogStop}
                            onMouseLeave={handleJogStop}
                            disabled={!status.xEnabled}
                            className="h-24 flex items-center justify-center bg-slate-800/50 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed border border-white/10 rounded-lg text-blue-900 transition-colors"
                        >
                            <ChevronLeft className="w-16 h-16" strokeWidth={3} />
                        </button>

                        {/* Stop */}
                        <button
                            onClick={handleStop}
                            className={`h-24 flex items-center justify-center border border-white/10 rounded-lg transition-colors ${
                                status.pickerSafe
                                    ? 'bg-green-500/30 hover:bg-green-500/40 text-green-400'
                                    : 'bg-red-500/30 hover:bg-red-500/40 text-red-400'
                            }`}
                        >
                            <Square className="w-16 h-16" fill="currentColor" />
                        </button>

                        {/* X Right Jog */}
                        <button
                            onMouseDown={() => handleJogStart('right')}
                            onMouseUp={handleJogStop}
                            onMouseLeave={handleJogStop}
                            disabled={!status.xEnabled}
                            className="h-24 flex items-center justify-center bg-slate-800/50 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed border border-white/10 rounded-lg text-blue-900 transition-colors"
                        >
                            <ChevronRight className="w-16 h-16" strokeWidth={3} />
                        </button>

                        {/* Z Down */}
                        <button
                            onMouseDown={() => handleJogStart('down')}
                            onMouseUp={handleJogStop}
                            onMouseLeave={handleJogStop}
                            disabled={!status.zEnabled}
                            className="h-24 flex items-center justify-center bg-slate-800/50 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed border border-white/10 rounded-lg text-purple-400 transition-colors"
                        >
                            <ChevronDown className="w-16 h-16" strokeWidth={3} />
                        </button>
                    </div>

                    {/* Row 2: Position Buttons */}
                    <div className="grid grid-cols-5 gap-2 mb-2">
                        <button
                            onClick={handleMoveLeft}
                            disabled={!status.managementEnabled}
                            className="h-24 flex items-center justify-center bg-slate-800/50 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed border border-white/10 rounded-lg text-white font-tech text-2xl font-bold transition-colors"
                        >
                            Left
                        </button>
                        <button
                            onClick={handleMoveLeftWait}
                            disabled={!status.managementEnabled}
                            className="h-24 flex items-center justify-center bg-slate-800/50 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed border border-white/10 rounded-lg text-white font-tech text-2xl font-bold transition-colors"
                        >
                            Wait
                        </button>
                        <button
                            onClick={handleMoveCenter}
                            disabled={!status.managementEnabled}
                            className="h-24 flex items-center justify-center bg-slate-800/50 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed border border-white/10 rounded-lg text-green-400 font-tech text-2xl font-bold transition-colors"
                        >
                            Center
                        </button>
                        <button
                            onClick={handleMoveRightWait}
                            disabled={!status.managementEnabled}
                            className="h-24 flex items-center justify-center bg-slate-800/50 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed border border-white/10 rounded-lg text-white font-tech text-2xl font-bold transition-colors"
                        >
                            Wait
                        </button>
                        <button
                            onClick={handleMoveRight}
                            disabled={!status.managementEnabled}
                            className="h-24 flex items-center justify-center bg-slate-800/50 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed border border-white/10 rounded-lg text-white font-tech text-2xl font-bold transition-colors"
                        >
                            Right
                        </button>
                    </div>

                    {/* Row 3: Vision Cancel & Management Position */}
                    <div className="grid grid-cols-5 gap-2 mb-2">
                        <button
                            onClick={handleCancelVisionL}
                            className="h-24 flex flex-col items-center justify-center bg-amber-900/30 hover:bg-amber-900/50 border border-amber-500/50 rounded-lg text-amber-300 font-tech font-bold transition-colors"
                        >
                            <XCircle className="w-6 h-6 mb-1" />
                            <span className="text-sm">Vision Validation</span>
                            <span className="text-sm">Cancel(L)</span>
                        </button>
                        <button
                            onClick={handleManagePosL}
                            disabled={!status.managementEnabled}
                            className="h-24 flex flex-col items-center justify-center bg-purple-900/30 hover:bg-purple-900/50 disabled:opacity-50 disabled:cursor-not-allowed border border-purple-500/50 rounded-lg text-purple-300 font-tech font-bold transition-colors"
                        >
                            <Settings className="w-6 h-6 mb-1" />
                            <span className="text-sm">Print Management</span>
                            <span className="text-sm">Position(L)</span>
                        </button>
                        <button
                            onClick={handleManagePosReturn}
                            disabled={!status.managementEnabled}
                            className="h-24 flex flex-col items-center justify-center bg-purple-900/30 hover:bg-purple-900/50 disabled:opacity-50 disabled:cursor-not-allowed border border-purple-500/50 rounded-lg text-purple-300 font-tech font-bold transition-colors"
                        >
                            <Home className="w-6 h-6 mb-1" />
                            <span className="text-sm">Management Position</span>
                            <span className="text-sm">Return</span>
                        </button>
                        <button
                            onClick={handleManagePosR}
                            disabled={!status.managementEnabled}
                            className="h-24 flex flex-col items-center justify-center bg-purple-900/30 hover:bg-purple-900/50 disabled:opacity-50 disabled:cursor-not-allowed border border-purple-500/50 rounded-lg text-purple-300 font-tech font-bold transition-colors"
                        >
                            <Settings className="w-6 h-6 mb-1" />
                            <span className="text-sm">Print Management</span>
                            <span className="text-sm">Position(R)</span>
                        </button>
                        <button
                            onClick={handleCancelVisionR}
                            className="h-24 flex flex-col items-center justify-center bg-amber-900/30 hover:bg-amber-900/50 border border-amber-500/50 rounded-lg text-amber-300 font-tech font-bold transition-colors"
                        >
                            <XCircle className="w-6 h-6 mb-1" />
                            <span className="text-sm">Vision Validation</span>
                            <span className="text-sm">Cancel(R)</span>
                        </button>
                    </div>

                    {/* Row 4: Z-Home, Print, Z-Zero */}
                    <div className="grid grid-cols-5 gap-2">
                        <button
                            onClick={handleZHome}
                            className="h-24 flex flex-col items-center justify-center bg-slate-800/50 hover:bg-slate-700/50 border border-white/10 rounded-lg text-white font-tech text-lg font-bold transition-colors"
                        >
                            <Home className="w-6 h-6 mb-1" />
                            <span>Z-HOME</span>
                        </button>
                        <button
                            onClick={handlePrintL}
                            className="h-24 flex flex-col items-center justify-center bg-slate-800/50 hover:bg-slate-700/50 border border-white/10 rounded-lg text-white font-tech text-lg font-bold transition-colors"
                        >
                            <Printer className="w-6 h-6 mb-1" />
                            <span>PRINT(L)</span>
                        </button>
                        <button
                            disabled
                            className="h-24 flex items-center justify-center bg-slate-800/30 border border-white/10 rounded-lg text-slate-500 font-tech text-lg font-bold cursor-not-allowed"
                        >
                            --
                        </button>
                        <button
                            onClick={handlePrintR}
                            className="h-24 flex flex-col items-center justify-center bg-slate-800/50 hover:bg-slate-700/50 border border-white/10 rounded-lg text-white font-tech text-lg font-bold transition-colors"
                        >
                            <Printer className="w-6 h-6 mb-1" />
                            <span>PRINT(R)</span>
                        </button>
                        <button
                            onClick={handleZZero}
                            className="h-24 flex flex-col items-center justify-center bg-slate-800/50 hover:bg-slate-700/50 border border-white/10 rounded-lg text-white font-tech text-lg font-bold transition-colors"
                        >
                            <span className="text-2xl mb-1">0</span>
                            <span>Z-ZERO</span>
                        </button>
                    </div>
                </div>

                {/* Footer */}
                <div className="flex justify-end p-4 border-t border-white/10">
                    <button
                        onClick={handleClose}
                        className="px-6 py-2 bg-slate-700 hover:bg-slate-600 border border-white/20 text-white font-tech font-bold rounded transition-colors"
                    >
                        Close
                    </button>
                </div>
            </div>
        </div>
    );
};