App.jsx

import { useState, useEffect } from 'react';
import PathLeaderboard from './components/PathLeaderboard';
import PathDetail from './components/PathDetail';
import Diagnostics from './components/Diagnostics';
import TopBar from './components/TopBar';
import { useMetrics } from './hooks/useMetrics';
import './App.css';

function App() {
  const [selectedPath, setSelectedPath] = useState(null);
  const { summary, topPaths, diagnostics, loading, error } = useMetrics();

  const handlePathSelect = (pathId) => {
    setSelectedPath(pathId);
  };

  const handleCloseDetail = () => {
    setSelectedPath(null);
  };

  if (error) {
    return (
      <div className="error-container">
        <h2>⚠️ Error Loading Dashboard</h2>
        <p>{error}</p>
        <button onClick={() => window.location.reload()}>Retry</button>
      </div>
    );
  }

  return (
    <div className="dashboard-container">
      {/* Top Bar - System Summary */}
      <TopBar summary={summary} loading={loading} />

      <div className="main-content">
        {/* Left Panel - Path Leaderboard */}
        <div className="left-panel">
          <PathLeaderboard
            paths={topPaths}
            loading={loading}
            onPathSelect={handlePathSelect}
            selectedPath={selectedPath}
          />
        </div>

        {/* Center Panel - Path Detail (Graph) */}
        <div className="center-panel">
          {selectedPath ? (
            <PathDetail
              pathId={selectedPath}
              onClose={handleCloseDetail}
            />
          ) : (
            <div className="placeholder">
              <div className="placeholder-content">
                <svg
                  width="120"
                  height="120"
                  viewBox="0 0 120 120"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <circle cx="60" cy="60" r="40" stroke="#e5e7eb" strokeWidth="4" />
                  <circle cx="30" cy="30" r="8" fill="#3b82f6" />
                  <circle cx="90" cy="30" r="8" fill="#3b82f6" />
                  <circle cx="60" cy="90" r="8" fill="#3b82f6" />
                  <path
                    d="M30 30 L60 90 L90 30"
                    stroke="#3b82f6"
                    strokeWidth="3"
                    strokeLinecap="round"
                  />
                </svg>
                <h3>Select a path to view details</h3>
                <p>Click any path in the leaderboard to see its causal graph</p>
              </div>
            </div>
          )}
        </div>

        {/* Right Panel - Diagnostics */}
        <div className="right-panel">
          <Diagnostics data={diagnostics} loading={loading} />
        </div>
      </div>
    </div>
  );
}

export default App;