import { useActivity } from '../hooks/useApi';

export function ActivityFeed() {
  const { data: activity, isLoading } = useActivity();

  if (isLoading) return <div className="p-4 text-sm text-text-muted">Loading...</div>;
  if (!activity?.length) return <div className="p-4 text-sm text-text-muted">No recent activity</div>;

  return (
    <div className="space-y-1">
      {activity.slice(0, 20).map((item, i) => (
        <div key={i} className="flex items-center gap-2 px-4 py-1.5 text-xs">
          <span className={`h-1.5 w-1.5 rounded-full ${kindColor(item.kind)}`} />
          <span className="flex-1 truncate text-text-secondary">{item.name}</span>
          <span className="text-text-muted">{timeAgo(item.modified)}</span>
        </div>
      ))}
    </div>
  );
}

function kindColor(kind: string): string {
  switch (kind) {
    case 'human_task': return 'bg-accent';
    case 'agent_task': return 'bg-warning';
    case 'knowledge': return 'bg-success';
    default: return 'bg-text-muted';
  }
}

function timeAgo(iso: string): string {
  const ms = Date.now() - new Date(iso).getTime();
  const mins = Math.floor(ms / 60000);
  if (mins < 1) return 'now';
  if (mins < 60) return `${mins}m`;
  const hrs = Math.floor(mins / 60);
  if (hrs < 24) return `${hrs}h`;
  return `${Math.floor(hrs / 24)}d`;
}