/* @component-map
 * App — Main container, tab navigation [app.jsx]
 * Dashboard — Overview stats, device grid, status indicators [components/Dashboard.jsx]
 * DeviceDetail — Individual device detail view with readings [components/DeviceDetail.jsx]
 * DataFeed — Real-time data feed log [components/DataFeed.jsx]
 * DeviceManager — Add/edit/remove devices [components/DeviceManager.jsx]
 * @end-component-map */
// DEPLOY_CONFIG: {"cron": [{"name": "check-device-heartbeats", "schedule": "*/5 * * * *", "action": "event", "config": {"event_type": "device.heartbeat.check"}}], "triggers": [{"name": "mark-device-offline-on-stale-heartbeat", "on": "collection.update", "collection": "devices", "actions": [{"type": "event", "event_type": "device.offline.mark"}]}, {"name": "sensor-reading-threshold-alert", "on": "collection.add", "collection": "sensor_readings", "actions": [{"type": "email", "to": "alerts@your-domain.com", "subject": "Sensor threshold alert", "body": "A sensor reading exceeded its configured threshold."}, {"type": "event", "event_type": "notification.create"}]}]}


import { useState } from 'react';
import { Dashboard } from './components/Dashboard.jsx';
import { DataFeed } from './components/DataFeed.jsx';
import { DeviceManager } from './components/DeviceManager.jsx';
import { DeviceDetail } from './components/DeviceDetail.jsx';

function App() {
  const [activeTab, setActiveTab] = useState('dashboard');
  const [selectedDevice, setSelectedDevice] = useState(null);

  const tabs = [
    { id: 'dashboard', label: 'Dashboard', icon: '📊' },
    { id: 'feed', label: 'Live Feed', icon: '📡' },
    { id: 'devices', label: 'Devices', icon: '⚙️' },
  ];

  if (selectedDevice) {
    return (
      <DeviceDetail
        deviceId={selectedDevice}
        onBack={() => setSelectedDevice(null)}
      />
    );
  }

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-left">
          <span className="header-icon">🌐</span>
          <h1 className="header-title">IoT Command Center</h1>
        </div>
        <div className="header-status">
          <span className="status-dot pulse"></span>
          <span className="status-text">Live</span>
        </div>
      </header>

      <nav className="tab-bar">
        {tabs.map(tab => (
          <button
            key={tab.id}
            className={`tab-btn ${activeTab === tab.id ? 'active' : ''}`}
            onClick={() => setActiveTab(tab.id)}
          >
            <span className="tab-icon">{tab.icon}</span>
            <span className="tab-label">{tab.label}</span>
          </button>
        ))}
      </nav>

      <main className="app-main">
        {activeTab === 'dashboard' && <Dashboard onSelectDevice={setSelectedDevice} />}
        {activeTab === 'feed' && <DataFeed />}
        {activeTab === 'devices' && <DeviceManager />}
      </main>
    </div>
  );
}

// PROGRESS:sc_001:complete:Setting up IoT dashboard shell and navigation


const applyDeviceStatus = (device) => ({
  ...device,
  isOffline: Boolean(device?.isOffline),
  lastSeenAt: device?.lastSeenAt || null,
});

export function normalizeDevices(devices = []) {
  return devices.map(applyDeviceStatus);
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);