import { useQuery } from '@tanstack/react-query'
import { listAgents } from '../services/api'
import { Activity, AlertTriangle } from 'lucide-react'

export default function HubPage() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['agents'],
    queryFn: listAgents,
  })

  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="w-8 h-8 border-2 border-primary/30 border-t-primary rounded-full animate-spin" />
      </div>
    )
  }

  if (error) {
    return (
      <div className="flex items-center justify-center h-64 text-danger">
        <AlertTriangle size={24} className="mr-2" />
        Failed to load agents
      </div>
    )
  }

  const agents = data?.data ?? []

  return (
    <div className="space-y-6">
      <header>
        <h1 className="text-2xl font-bold">Command Hub</h1>
        <p className="text-on-surface-variant">Agent fleet overview</p>
      </header>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
        {agents.map((agent) => (
          <div
            key={agent.id}
            className="p-4 rounded-xl border border-surface-light bg-surface-dark"
          >
            <div className="flex items-start justify-between mb-3">
              <div>
                <h3 className="font-semibold">{agent.displayName}</h3>
                <p className="text-xs text-on-surface-variant">{agent.role}</p>
              </div>
              <StatusDot status={agent.status} />
            </div>

            {agent.currentTask && (
              <div className="text-sm text-on-surface-variant mb-2">
                {agent.currentTask}
              </div>
            )}

            {agent.taskProgress !== undefined && (
              <div className="w-full h-2 bg-surface-light rounded-full overflow-hidden">
                <div
                  className="h-full bg-primary rounded-full transition-all"
                  style={{ width: `${agent.taskProgress}%` }}
                />
              </div>
            )}

            <div className="mt-3 flex items-center gap-2 text-xs text-on-surface-muted">
              <Activity size={12} />
              {agent.channel} · {agent.lastActivity}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

function StatusDot({ status }: { status: string }) {
  const colorMap: Record<string, string> = {
    active: 'bg-status-active',
    idle: 'bg-status-idle',
    thinking: 'bg-status-thinking',
    error: 'bg-status-error',
  }

  return (
    <div className="flex items-center gap-1">
      <div className={`w-2.5 h-2.5 rounded-full ${colorMap[status] ?? 'bg-status-offline'}`} />
      <span className="text-xs capitalize text-on-surface-variant">{status}</span>
    </div>
  )
}