import React, { useState, useEffect } from 'react';

interface Capability {
    type: string;
}

interface Capabilities {
    [key: string]: Capability;
}

const CapabilityPanel = () => {
  const [capabilities, setCapabilities] = useState<Capabilities>({});
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    const fetchCapabilities = async () => {
      const res = await fetch('/api/console/capabilities');
      const data = await res.json();
      setCapabilities(data);
    };
    fetchCapabilities();
  }, []);

  const capabilityGroups = {
    'Platform': ['get_health', 'get_build_status', 'get_state', 'get_telemetry'],
    'Repository': ['list_commits', 'get_file'],
    'Work and tickets': [],
    'Code agents': ['run_emma'],
    'Validation': [],
    'Deployment': ['trigger_build', 'commit_and_push_files'],
    'Costs': ['get_billing_summary', 'get_billing_forecast', 'get_billing_anomalies', 'get_billing_budget', 'set_billing_budget'],
    'Notifications': ['send_email', 'send_sms', 'send_webhook'],
    'Customers and Workspace': ['list_customers', 'list_workspace_users', 'create_invite'],
    'Memory and Knowledge': [],
  };

  return (
    <div className={`capability-drawer ${isOpen ? 'open' : ''}`}>
        <button onClick={() => setIsOpen(!isOpen)} className="drawer-toggle">Capabilities</button>
        <div className="drawer-content">
            <h3>Capabilities</h3>
            {Object.entries(capabilityGroups).map(([group, capabilityKeys]) => (
                <div key={group} className="capability-group">
                <h4>{group}</h4>
                <ul>
                    {capabilityKeys.map(key => {
                        const capability = capabilities[key];
                        if (!capability) return null;
                        return <li key={key} className={capability.type}>{key.replace(/_/g, ' ')}</li>
                    })}
                </ul>
                </div>
            ))}
        </div>
    </div>
  );
};

export default CapabilityPanel;