import { useAgentTasks } from '../hooks/useApi';
import { StatusBadge } from '../components/StatusBadge';
import type { AgentTask, AgentTaskStatus } from '../api/types';

const COLUMNS: { id: AgentTaskStatus; label: string }[] = [
  { id: 'queued', label: 'Queued' },
  { id: 'running', label: 'Running' },
  { id: 'done', label: 'Done' },
  { id: 'failed', label: 'Failed' },
];

export function AgentQueuePage() {
  const { data: tasks, isLoading } = useAgentTasks();

  const byStatus = (s: AgentTaskStatus) => (tasks || []).filter((t) => t.status === s);

  return (
    <div className="p-6">
      <h1 className="mb-4 text-lg font-semibold">Agent Queue</h1>

      {isLoading ? (
        <div className="text-text-muted">Loading...</div>
      ) : (
        <div className="flex gap-4">
          {COLUMNS.map((col) => {
            const items = byStatus(col.id);
            return (
              <div key={col.id} className="w-72 shrink-0">
                <div className="mb-2 flex items-center justify-between px-1">
                  <h3 className="text-sm font-semibold text-text-secondary">{col.label}</h3>
                  <span className="text-xs text-text-muted">{items.length}</span>
                </div>
                <div className="space-y-2 rounded-lg border border-border bg-surface p-2">
                  {items.length === 0 ? (
                    <div className="py-4 text-center text-xs text-text-muted">Empty</div>
                  ) : (
                    items.map((task) => <AgentTaskCard key={task.id} task={task} />)
                  )}
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

function AgentTaskCard({ task }: { task: AgentTask }) {
  return (
    <div className="rounded-lg border border-border bg-surface-raised p-3">
      <div className="mb-1 text-sm font-medium text-text-primary">{task.title}</div>
      <div className="flex items-center gap-2 text-xs text-text-secondary">
        <span>{task.agent}</span>
        <StatusBadge value={task.priority} />
        {task.type && <span className="text-text-muted">{task.type}</span>}
      </div>
      {task.error && (
        <div className="mt-2 truncate rounded bg-danger/10 px-2 py-1 text-xs text-danger">
          {task.error}
        </div>
      )}
      {task.started && (
        <div className="mt-1 text-xs text-text-muted">
          started: {new Date(task.started).toLocaleTimeString()}
        </div>
      )}
    </div>
  );
}