// ToolsPanelRefactored - Refactored tools panel with separated concerns
import React from 'react';
import Card from '../Card';
import ToolsRegistry from './ToolsRegistry';
import PredictiveAlerts from './PredictiveAlerts';
import ToolHealthPanelRefactored from './ToolHealthPanelRefactored';
import ToolsDispatch from './ToolsDispatch';
import ToolsJobQueue from './ToolsJobQueue';

function ToolsPanelRefactored({ selectedTool, setSelectedTool }) {
  // Custom hook for data
  const { tools, queue, jobs, loading, refresh } = useTools();

  // Loading state
  if (loading) {
    return <Card title="Tools"><p className="text-gray-400 text-sm">Loading...</p></Card>;
  }

  return (
    <div className="space-y-6">
      {/* Tool Registry */}
      <ToolsRegistry 
        tools={tools} 
        selectedTool={selectedTool} 
        onToolSelect={setSelectedTool}
        onRefresh={refresh}
      />

      {/* Predictive Alerts */}
      <PredictiveAlerts tools={tools} queue={queue} jobs={jobs} />

      {/* Tool Health Panel */}
      <ToolHealthPanelRefactored />

      {/* Tool Dispatch */}
      <ToolsDispatch tools={tools} onRefresh={refresh} />

      {/* Job Queue */}
      <ToolsJobQueue queue={queue} jobs={jobs} onRefresh={refresh} />
    </div>
  );
}

export default ToolsPanelRefactored;
