import * as React from 'react';
import { Link } from 'react-router-dom';
import { api, type Agent } from '../api';
import { useFetch } from '../hooks/useFetch';

export function AgentsPage(): React.JSX.Element {
  const { data, error, loading } = useFetch(() => api.get<Agent[]>('/api/v1/agents'));

  if (loading) return <div>Loading agents…</div>;
  if (error !== null) return <div style={{ color: '#ff7b72' }}>Error: {error.message}</div>;
  const agents = data ?? [];

  return (
    <section>
      <h2 style={{ marginTop: 0 }}>Agents</h2>
      <p style={{ color: '#7d8590' }}>Pick an agent to manage its direct prompts and personalities.</p>
      {agents.length === 0 && <p>No agents yet — create one with <code>mcpctl create agent</code>.</p>}
      <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
        {agents.map((a) => (
          <li key={a.id} style={{ padding: '12px 0', borderBottom: '1px solid #30363d' }}>
            <Link
              to={`/agents/${encodeURIComponent(a.name)}`}
              style={{ color: '#58a6ff', textDecoration: 'none', fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace', fontSize: 15 }}
            >
              {a.name}
            </Link>
            <div style={{ color: '#7d8590', fontSize: 12, marginTop: 4 }}>
              LLM: {a.llm.name}
              {a.project !== null && <> · Project: {a.project.name}</>}
              {a.defaultPersonality !== null && <> · Default personality: {a.defaultPersonality.name}</>}
            </div>
            {a.description !== '' && (
              <div style={{ color: '#c9d1d9', marginTop: 4 }}>{a.description}</div>
            )}
          </li>
        ))}
      </ul>
    </section>
  );
}
