WebUITest-RealProjecT/FrontEnd/components/VisionDataPanel.tsx

import React, { useState, useEffect } from 'react';
import { Eye, CheckCircle, XCircle } from 'lucide-react';
import { comms } from '../communication';
import { PanelHeader } from './common/PanelHeader';
import { CyberPanel } from './common/CyberPanel';

interface PortData {
    cartSize: string;
    enabled?: boolean;
    confirm?: boolean;
    rid: string;
    rid_trust?: boolean;
    rid_new?: boolean;
    sid: string;
    sid0?: string;
    sid_trust?: boolean;
    qty: string;
    qty_trust?: boolean;
    qty_rq?: boolean;
    vname: string;
    vname_trust?: boolean;
    vlot: string;
    vlot_trust?: boolean;
    mfgdate: string;
    mfgdate_trust?: boolean;
    partno: string;
    partno_trust?: boolean;
    reelSize: string;
    rid2?: string;
    sid2?: string;
    qty2?: string;
    vname2?: string;
    vlot2?: string;
    mfgdate2?: string;
    partno2?: string;
    batch?: string;
    qtymax?: string;
    barcodeCount?: number;
    regexCount?: number;
}

interface VisionData {
    left: PortData;
    center: PortData;
    right: PortData;
}

const fieldLabels = ['RID', 'SID', 'QTY', 'VNAME', 'VLOT', 'MFG', 'PART', 'SIZE', 'BATCH'];

export const VisionDataPanel: React.FC = () => {
    const [data, setData] = useState<VisionData | null>(null);

    useEffect(() => {
        const unsubscribe = comms.subscribe((msg: any) => {
            if (msg?.type === 'VISION_DATA_UPDATE' && msg.data) {
                setData(msg.data);
            }
        });

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

    const getTrustColor = (trust?: boolean) => {
        if (trust === undefined) return 'text-slate-400';
        return trust ? 'text-lime-400' : 'text-slate-400';
    };

    const getCompareColor = (val1: string, val2?: string) => {
        if (!val2 || val2 === '') return '';
        return val1 !== val2 ? 'text-red-400' : '';
    };

    const renderPortColumn = (port: PortData | undefined, title: string, isCenter: boolean = false) => {
        if (!port) return null;

        const values = [
            { val: port.rid, val2: port.rid2, trust: port.rid_trust },
            { val: port.sid, val2: port.sid2, trust: port.sid_trust },
            { val: port.qty, val2: port.qty2, trust: port.qty_trust, rq: port.qty_rq },
            { val: port.vname, val2: port.vname2, trust: port.vname_trust },
            { val: port.vlot, val2: port.vlot2, trust: port.vlot_trust },
            { val: port.mfgdate, val2: port.mfgdate2, trust: port.mfgdate_trust },
            { val: port.partno, val2: port.partno2, trust: port.partno_trust },
            { val: port.reelSize === 'None' ? '--' : port.reelSize, val2: undefined, trust: undefined },
            { val: port.batch || '-', val2: undefined, trust: undefined },
        ];

        const headerBg = port.enabled === false ? 'bg-orange-600/80' : (port.confirm ? 'bg-lime-600/80' : 'bg-slate-700/80');
        const headerText = port.enabled === false ? 'DISABLE' : port.cartSize;

        return (
            <div className="flex-1 min-w-0 flex flex-col h-full">
                {/* Header */}
                <div className={`${headerBg} px-3 py-2 text-center font-bold text-sm border-b border-slate-600`}>
                    <span className="text-white text-base">{headerText}</span>
                    <span className="text-slate-300 ml-2 text-xs">({title})</span>
                </div>
                {/* Values */}
                <div className="flex-1 flex flex-col divide-y divide-slate-700/50">
                    {values.map((item, idx) => (
                        <div key={idx} className="flex items-center px-2 py-1.5 text-sm flex-1">
                            <span className="w-14 text-slate-500 font-bold shrink-0">{fieldLabels[idx]}</span>
                            <span className={`flex-1 font-mono truncate ${isCenter ? getTrustColor(item.trust) : getCompareColor(item.val, item.val2)}`}>
                                {item.rq ? `RQ:${item.val}` : item.val || '-'}
                            </span>
                            {isCenter && item.trust !== undefined && (
                                item.trust ?
                                    <CheckCircle className="w-4 h-4 text-lime-400 shrink-0" /> :
                                    <XCircle className="w-4 h-4 text-slate-500 shrink-0" />
                            )}
                        </div>
                    ))}
                    {/* Center-specific fields */}
                    {isCenter && (
                        <>
                            <div className="flex items-center px-2 py-1.5 text-sm flex-1">
                                <span className="w-14 text-slate-500 font-bold shrink-0">MAX</span>
                                <span className="flex-1 font-mono text-cyan-400">{port.qtymax || '-'}</span>
                            </div>
                            <div className="flex items-center px-2 py-1.5 text-sm flex-1">
                                <span className="w-14 text-slate-500 font-bold shrink-0">BCD</span>
                                <span className="flex-1 font-mono text-yellow-400">{port.barcodeCount ?? 0}</span>
                            </div>
                            <div className="flex items-center px-2 py-1.5 text-sm flex-1">
                                <span className="w-14 text-slate-500 font-bold shrink-0">REGEX</span>
                                <span className="flex-1 font-mono text-yellow-400">{port.regexCount ?? 0}</span>
                            </div>
                        </>
                    )}
                </div>
            </div>
        );
    };

    return (
        <CyberPanel className="flex flex-col h-full">
            <PanelHeader icon={Eye} title="RECOGNIZED DATA" className="mb-1" />

            <div className="flex-1 overflow-hidden">
                {!data ? (
                    <div className="flex items-center justify-center h-full text-slate-500 text-xs">
                        Waiting for data...
                    </div>
                ) : (
                    <div className="flex gap-1 h-full">
                        {renderPortColumn(data.left, 'LEFT')}
                        {renderPortColumn(data.center, 'CENTER', true)}
                        {renderPortColumn(data.right, 'RIGHT')}
                    </div>
                )}
            </div>
        </CyberPanel>
    );
};