WebUITest-RealProjecT/FrontEnd/App.tsx

import React, { useState, useEffect, useRef } from 'react';
import { HashRouter, Routes, Route } from 'react-router-dom';
import { Layout } from './components/layout/Layout';
import { HomePage } from './pages/HomePage';
import { IOMonitorPage } from './pages/IOMonitorPage';
import { RecipePage } from './pages/RecipePage';
import { SystemState, Recipe, IOPoint, LogEntry, RobotTarget, ConfigItem } from './types';
import { comms } from './communication';

// --- MOCK DATA ---


const INITIAL_IO: IOPoint[] = [
  ...Array.from({ length: 32 }, (_, i) => {
    let name = `DOUT_${i.toString().padStart(2, '0')}`;
    if (i === 0) name = "Tower Lamp Red";
    if (i === 1) name = "Tower Lamp Yel";
    if (i === 2) name = "Tower Lamp Grn";
    return { id: i, name, type: 'output' as const, state: false };
  }),
  ...Array.from({ length: 32 }, (_, i) => {
    let name = `DIN_${i.toString().padStart(2, '0')}`;
    let initialState = false;
    if (i === 0) name = "Front Door Sensor";
    if (i === 1) name = "Right Door Sensor";
    if (i === 2) name = "Left Door Sensor";
    if (i === 3) name = "Back Door Sensor";
    if (i === 4) { name = "Main Air Pressure"; initialState = true; }
    if (i === 5) { name = "Vacuum Generator"; initialState = true; }
    if (i === 6) { name = "Emergency Stop Loop"; initialState = true; }
    return { id: i, name, type: 'input' as const, state: initialState };
  })
];

// --- MAIN APP ---

export default function App() {
  const [activeTab, setActiveTab] = useState<'recipe' | 'motion' | 'camera' | 'setting' | 'initialize' | null>(null);
  const [systemState, setSystemState] = useState<SystemState>(SystemState.IDLE);
  const [currentRecipe, setCurrentRecipe] = useState<Recipe>({ id: '0', name: 'No Recipe', lastModified: '-' });
  const [robotTarget, setRobotTarget] = useState<RobotTarget>({ x: 0, y: 0, z: 0 });
  const [logs, setLogs] = useState<LogEntry[]>([]);
  const [ioPoints, setIoPoints] = useState<IOPoint[]>([]);
  const [currentTime, setCurrentTime] = useState(new Date());
  const [isLoading, setIsLoading] = useState(true);
  const [isHostConnected, setIsHostConnected] = useState(false);
  const videoRef = useRef<HTMLVideoElement>(null);

  // -- COMMUNICATION LAYER --
  useEffect(() => {
    const unsubscribe = comms.subscribe((msg: any) => {
      if (!msg) return;

      if (msg.type === 'CONNECTION_STATE') {
        setIsHostConnected(msg.connected);
        addLog(msg.connected ? "HOST CONNECTED" : "HOST DISCONNECTED", msg.connected ? "info" : "warning");
      }

      if (msg.type === 'STATUS_UPDATE') {
        if (msg.position) {
          setRobotTarget({ x: msg.position.x, y: msg.position.y, z: msg.position.z });
        }
        if (msg.ioState) {
          setIoPoints(prev => {
            const newIO = [...prev];
            msg.ioState.forEach((update: { id: number, type: string, state: boolean }) => {
              const idx = newIO.findIndex(p => p.id === update.id && p.type === update.type);
              if (idx >= 0) newIO[idx] = { ...newIO[idx], state: update.state };
            });
            return newIO;
          });
        }
        if (msg.sysState) {
          setSystemState(msg.sysState as SystemState);
        }
      }
    });

    addLog("COMMUNICATION CHANNEL OPEN", "info");
    setIsHostConnected(comms.getConnectionState());

    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
    return () => {
      clearInterval(timer);
      unsubscribe();
    };
  }, []);

  // -- INITIALIZATION --
  useEffect(() => {
    const initSystem = async () => {
      addLog("SYSTEM STARTED", "info");
      // Initial IO data will be loaded by HomePage when it mounts
      try {
        const ioStr = await comms.getIOList();
        const ioData = JSON.parse(ioStr);
        setIoPoints(ioData);
        addLog("IO LIST LOADED", "info");
      } catch (e) {
        addLog("FAILED TO LOAD IO DATA", "error");
      }
      setIsLoading(false);
    };
    initSystem();
  }, []);

  const addLog = (msg: string, type: 'info' | 'warning' | 'error' = 'info') => {
    setLogs(prev => [{ id: Date.now() + Math.random(), timestamp: new Date().toLocaleTimeString(), message: msg, type }, ...prev].slice(0, 50));
  };

  // Logic Helpers
  const doorStates = {
    front: ioPoints.find(p => p.id === 0 && p.type === 'input')?.state || false,
    right: ioPoints.find(p => p.id === 1 && p.type === 'input')?.state || false,
    left: ioPoints.find(p => p.id === 2 && p.type === 'input')?.state || false,
    back: ioPoints.find(p => p.id === 3 && p.type === 'input')?.state || false,
  };
  const isLowPressure = !(ioPoints.find(p => p.id === 4 && p.type === 'input')?.state ?? true);
  const isEmergencyStop = !(ioPoints.find(p => p.id === 6 && p.type === 'input')?.state ?? true);

  // -- COMMAND HANDLERS --

  const handleControl = async (action: 'start' | 'stop' | 'reset') => {
    if (isEmergencyStop && action === 'start') return addLog('EMERGENCY STOP ACTIVE', 'error');

    try {
      await comms.sendControl(action.toUpperCase());
      addLog(`CMD SENT: ${action.toUpperCase()}`, 'info');
    } catch (e) {
      addLog('COMM ERROR', 'error');
    }
  };

  const toggleIO = async (id: number, type: 'input' | 'output', forceState?: boolean) => {
    if (type === 'output') {
      const current = ioPoints.find(p => p.id === id && p.type === type)?.state;
      const nextState = forceState !== undefined ? forceState : !current;
      await comms.setIO(id, nextState);
    }
  };

  const moveAxis = async (axis: 'X' | 'Y' | 'Z', value: number) => {
    if (isEmergencyStop) return;
    await comms.moveAxis(axis, value);
    addLog(`CMD MOVE ${axis}: ${value}`, 'info');
  };

  const handleSaveConfig = async (newConfig: ConfigItem[]) => {
    try {
      await comms.saveConfig(JSON.stringify(newConfig));
      addLog("CONFIGURATION SAVED", "info");
    } catch (e) {
      console.error(e);
      addLog("FAILED TO SAVE CONFIG", "error");
    }
  };

  const handleSelectRecipe = async (r: Recipe) => {
    try {
      addLog(`LOADING: ${r.name}`, 'info');
      const result = await comms.selectRecipe(r.id);

      if (result.success) {
        setCurrentRecipe(r);
        addLog(`RECIPE LOADED: ${r.name}`, 'info');
      } else {
        addLog(`RECIPE LOAD FAILED: ${result.message}`, 'error');
      }
    } catch (error: any) {
      addLog(`RECIPE LOAD ERROR: ${error.message || 'Unknown error'}`, 'error');
      console.error('Recipe selection error:', error);
    }
  };

  return (
    <HashRouter>
      <Layout
        currentTime={currentTime}
        isHostConnected={isHostConnected}
        robotTarget={robotTarget}
        onTabChange={setActiveTab}
        activeTab={activeTab}
        isLoading={isLoading}
      >
        <Routes>
          <Route
            path="/"
            element={
              <HomePage
                systemState={systemState}
                currentRecipe={currentRecipe}
                robotTarget={robotTarget}
                logs={logs}
                ioPoints={ioPoints}
                doorStates={doorStates}
                isLowPressure={isLowPressure}
                isEmergencyStop={isEmergencyStop}
                activeTab={activeTab}
                onSelectRecipe={handleSelectRecipe}
                onMove={moveAxis}
                onControl={handleControl}
                onSaveConfig={handleSaveConfig}
                onCloseTab={() => setActiveTab(null)}
                videoRef={videoRef}
              />
            }
          />
          <Route
            path="/io-monitor"
            element={
              <IOMonitorPage
                onToggle={toggleIO}
              />
            }
          />
          <Route
            path="/recipe"
            element={<RecipePage />}
          />
        </Routes>
      </Layout>
    </HashRouter>
  );
}