/* @component-map
 * App — Main container, layout shell [app.jsx]
 * WebhookDashboard — Webhook URL display, stats, and payload list [components/WebhookDashboard.jsx]
 * PayloadDetail — Formatted JSON view of a single payload [components/PayloadDetail.jsx]
 * @end-component-map */
// DEPLOY_CONFIG: {"triggers": [{"name": "persist_webhook_event_history", "on": "collection.add", "collection": "webhook_events", "actions": []}, {"name": "alert_on_error_webhook_payload", "on": "collection.add", "collection": "webhook_events", "actions": [{"type": "email", "to": "alerts@your-domain.com", "subject": "Webhook alert: error pattern detected", "body": "An incoming webhook event matched the configured error pattern. Review the payload and event history immediately."}]}], "secrets": {"email_provider_api_key": "REPLACE_WITH_YOUR_EMAIL_PROVIDER_API_KEY", "email_from": "alerts@your-domain.com", "alert_recipients": "alerts@your-domain.com"}, "config": {"webhook_error_match_pattern": "error", "webhook_error_match_mode": "contains"}}


import { useState } from 'react';
import { WebhookDashboard } from './components/WebhookDashboard.jsx';
import { PayloadDetail } from './components/PayloadDetail.jsx';

function App() {
  const [selectedPayload, setSelectedPayload] = useState(null);

  return (
    <div className="app-container">
      <header className="app-header">
        <div className="header-left">
          <div className="logo-mark">⚡</div>
          <div>
            <h1 className="app-title">Webhook Inspector</h1>
            <p className="app-subtitle">Real-time payload monitoring</p>
          </div>
        </div>
      </header>
      <main className="app-main">
        {selectedPayload ? (
          <PayloadDetail
            payload={selectedPayload}
            onBack={() => setSelectedPayload(null)}
          />
        ) : (
          <WebhookDashboard onSelectPayload={setSelectedPayload} />
        )}
      </main>
    </div>
  );
}

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