function MainComponent() { const [apiKey, setApiKey] = React.useState(''); const [secret, setSecret] = React.useState(''); const [devices, setDevices] = React.useState([]); const [selectedDevice, setSelectedDevice] = React.useState(''); const fetchDevices = async ()=>{ const response = await fetch("https://proxy-server.com/devices", { method: 'POST', headers: { "Content-Type": "application/json" }, body: JSON.stringify({ apiKey, secret }) }); const data = await response.json(); setDevices(data.devices); }; const operateDevice = async (operation)=>{ const response = await fetch(`https://proxy-server.com/devices/${selectedDevice}/commands`, { method: 'POST', headers: { "Content-Type": "application/json" }, body: JSON.stringify({ apiKey, secret, command: operation, parameter: "default", commandType: "command" }) }); const data = await response.json(); if (data.success) { alert(`Device ${operation}`); } else { alert("Operation failed"); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f2f5]", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-white shadow-md rounded-lg", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center font-roboto text-xl mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "Switchbot Device Controller"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 w-full", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "border p-2 w-full mb-2 rounded bg-gray-200", placeholder: "API Key", name: "apiKey", value: apiKey, onChange: (event)=>setApiKey(event.target.value), __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "border p-2 w-full rounded bg-gray-200", placeholder: "Secret", name: "secret", value: secret, onChange: (event)=>setSecret(event.target.value), onBlur: fetchDevices, __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("select", { onChange: (event)=>setSelectedDevice(event.target.value), className: "p-2 w-full border rounded bg-gray-200 mb-4", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "Select Device"), devices.map((device)=>/*#__PURE__*/ React.createElement("option", { key: device.deviceId, value: device.deviceId, __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, device.deviceName))), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 font-roboto text-white bg-blue-500 rounded hover:bg-blue-600 mb-2", onClick: ()=>operateDevice("lock"), __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "🔒 Lock"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 font-roboto text-white bg-green-500 rounded hover:bg-green-600", onClick: ()=>operateDevice("unlock"), __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, "🔓 Unlock")))); }