/* @component-map
 * App — Main container, tab navigation [app.jsx]
 * Dashboard — Live stats, current output, daily summary [components/Dashboard.jsx]
 * History — Historical production charts and data table [components/History.jsx]
 * WebhookPanel — Webhook status and manual data entry for testing [components/WebhookPanel.jsx]
 * @end-component-map */
// DEPLOY_CONFIG: {"cron": [{"name": "calculate_daily_production_totals", "schedule": "0 0 * * *", "action": "event", "config": {"event_type": "production.calculate_daily_totals"}}, {"name": "calculate_monthly_production_totals", "schedule": "0 1 1 * *", "action": "event", "config": {"event_type": "production.calculate_monthly_totals"}}, {"name": "run_production_anomaly_detection", "schedule": "*/15 * * * *", "action": "event", "config": {"event_type": "production.detect_anomalies"}}, {"name": "evaluate_low_daily_production_against_rolling_average", "schedule": "0 8 * * *", "action": "event", "config": {"event_type": "production.evaluate_low_daily_vs_rolling_average"}}], "triggers": [{"name": "notify_on_production_anomaly", "on": "collection.add", "collection": "production_anomalies", "actions": [{"type": "email", "to": "ops@company.com", "subject": "Production anomaly detected", "body": "A production anomaly was detected. Please review the latest aggregated totals and affected equipment/location details."}]}, {"name": "notify_owner_when_daily_production_below_half_rolling_average", "on": "collection.add", "collection": "production_low_daily_vs_average_alerts", "actions": [{"type": "email", "to": "{{owner_email}}", "subject": "Daily production below 50% of rolling average", "body": "Daily production fell below 50% of the rolling average.\n\nDate: {{date}}\nDaily value: {{daily_value}}\nRolling average: {{rolling_average}}\nPercent of average: {{percent_of_average}}%\n\nPlease review the production summary and investigate any operational issues."}]}], "server_secrets": ["OWNER_EMAIL", "SMTP_HOST", "SMTP_PORT", "SMTP_USER", "SMTP_PASSWORD", "SMTP_FROM", "EMAIL_API_KEY"]}


import { useState } from 'react';
import { Dashboard } from './components/Dashboard.jsx';
import { History } from './components/History.jsx';
import { WebhookPanel } from './components/WebhookPanel.jsx';

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

  const tabs = [
    { id: 'dashboard', label: '☀️ Dashboard', icon: '⚡' },
    { id: 'history', label: '📊 History', icon: '📈' },
    { id: 'webhook', label: '🔗 Data Feed', icon: '📡' }
  ];

  return (
    <div className="app-container">
      <header className="app-header">
        <div className="header-content">
          <div className="logo-section">
            <span className="logo-icon">☀️</span>
            <div>
              <h1 className="app-title">SolarPulse</h1>
              <p className="app-subtitle">Solar Production Monitor</p>
            </div>
          </div>
        </div>
      </header>

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

      <main className="main-content">
        {activeTab === 'dashboard' && <Dashboard />}
        {activeTab === 'history' && <History />}
        {activeTab === 'webhook' && <WebhookPanel />}
      </main>
    </div>
  );
}

// PROGRESS:sc_001:complete:Setting up solar dashboard shell

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