Control-Center/frontend/src/pages/LogsPage.tsx

import { useState } from 'react'
import { useQuery, useQueryClient } from '@tanstack/react-query'
import { listTasks } from '../services/api'
import { AlertCircle, RefreshCw, Filter, CheckCircle, Circle, Clock, XCircle, Loader, ListTodo } from 'lucide-react'
import type { Task } from '../types'

const STATUS_FILTERS = ['all', 'pending', 'running', 'completed', 'failed'] as const
type StatusFilter = (typeof STATUS_FILTERS)[number]

const STATUS_ICON: Record<string, React.ElementType> = {
  pending: Clock,
  running: Loader,
  completed: CheckCircle,
  failed: XCircle,
}

const STATUS_COLOR: Record<string, string> = {
  pending: 'text-yellow-500',
  running: 'text-blue-400',
  completed: 'text-green-500',
  failed: 'text-red-500',
}

export default function LogsPage() {
  const queryClient = useQueryClient()
  const [statusFilter, setStatusFilter] = useState<StatusFilter>('all')

  const { data, isLoading, error } = useQuery({
    queryKey: ['tasks'],
    queryFn: listTasks,
  })

  const tasks = (data?.data ?? []) as Task[]

  const filtered = statusFilter === 'all'
    ? tasks
    : tasks.filter((t) => t.status === statusFilter)

  // Sort newest first
  const sorted = [...filtered].sort(
    (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
  )

  if (isLoading) return <LogsSkeleton />

  if (error) {
    return (
      <div className="flex flex-col items-center justify-center h-96 gap-4">
        <AlertCircle size={48} className="text-danger" />
        <p className="text-danger text-lg">Failed to load activity logs</p>
        <button
          onClick={() => queryClient.invalidateQueries({ queryKey: ['tasks'] })}
          className="flex items-center gap-2 px-4 py-2 rounded-lg bg-primary/10 text-primary hover:bg-primary/20 transition-colors"
        >
          <RefreshCw size={16} /> Retry
        </button>
      </div>
    )
  }

  return (
    <div className="space-y-6">
      <header>
        <h1 className="text-2xl font-bold">Activity Logs</h1>
        <p className="text-on-surface-variant">Task activity across all agents</p>
      </header>

      {/* Filter tabs */}
      <div className="flex items-center gap-1 flex-wrap">
        <Filter size={16} className="text-on-surface-muted mr-1" />
        {STATUS_FILTERS.map((f) => (
          <button
            key={f}
            onClick={() => setStatusFilter(f)}
            className={`px-3 py-1.5 rounded-lg text-sm capitalize transition-colors ${
              statusFilter === f
                ? 'bg-primary/10 text-primary'
                : 'text-on-surface-variant hover:bg-surface-light hover:text-on-surface'
            }`}
          >
            {f}
          </button>
        ))}
      </div>

      {/* Activity feed */}
      {sorted.length === 0 ? (
        <div className="flex flex-col items-center justify-center h-48 gap-3 border border-dashed border-surface-light rounded-xl">
          <ListTodo size={40} className="text-on-surface-muted" />
          <p className="text-on-surface-muted text-lg">No tasks found</p>
          <p className="text-on-surface-muted text-sm">
            {statusFilter === 'all' ? 'Tasks will appear here as agents execute work.' : `No ${statusFilter} tasks.`}
          </p>
        </div>
      ) : (
        <div className="space-y-2">
          {sorted.map((task) => {
            const Icon = STATUS_ICON[task.status] ?? Circle
            const fmtTime = formatTime(task.createdAt)
            return (
              <div
                key={task.id}
                className="flex items-start gap-4 p-4 rounded-xl border border-surface-light bg-surface-dark hover:border-surface-lighter transition-colors"
              >
                <div className={`mt-0.5 shrink-0 ${STATUS_COLOR[task.status] ?? 'text-on-surface-muted'}`}>
                  <Icon size={20} />
                </div>
                <div className="flex-1 min-w-0">
                  <p className="font-medium truncate">{task.title}</p>
                  <p className="text-xs text-on-surface-variant mt-0.5">
                    Agent {task.agentId}
                    {task.sessionKey && ` · ${task.sessionKey}`}
                  </p>
                </div>
                <div className="shrink-0 flex flex-col items-end gap-1">
                  <span className={`text-xs capitalize px-2 py-0.5 rounded-full font-medium ${
                    statusFilter !== 'all'
                      ? 'bg-primary/10 text-primary'
                      : 'bg-surface-light text-on-surface-variant'
                  }`}>
                    {task.status}
                  </span>
                  {task.progress != null && task.progress > 0 && task.progress < 100 && (
                    <span className="text-xs text-on-surface-muted">{task.progress}%</span>
                  )}
                </div>
                <span className="shrink-0 text-xs text-on-surface-muted whitespace-nowrap">
                  {fmtTime}
                </span>
              </div>
            )
          })}
        </div>
      )}
    </div>
  )
}

function formatTime(iso: string): string {
  try {
    const d = new Date(iso)
    const now = new Date()
    const diffMs = now.getTime() - d.getTime()
    const diffMin = Math.floor(diffMs / 60_000)
    if (diffMin < 1) return 'just now'
    if (diffMin < 60) return `${diffMin}m ago`
    const diffHr = Math.floor(diffMin / 60)
    if (diffHr < 24) return `${diffHr}h ago`
    return d.toLocaleDateString()
  } catch {
    return iso
  }
}

function LogsSkeleton() {
  return (
    <div className="space-y-6 animate-pulse">
      <div>
        <div className="h-8 w-44 skeleton mb-2" />
        <div className="h-4 w-56 skeleton" />
      </div>
      <div className="flex gap-1">
        {[...Array(5)].map((_, i) => (
          <div key={i} className="h-8 w-20 rounded-lg skeleton" />
        ))}
      </div>
      <div className="space-y-2">
        {[...Array(6)].map((_, i) => (
          <div key={i} className="flex items-start gap-4 p-4 rounded-xl border border-surface-light bg-surface-dark">
            <div className="h-5 w-5 rounded-full skeleton shrink-0" />
            <div className="flex-1">
              <div className="h-4 w-3/4 skeleton mb-1" />
              <div className="h-3 w-1/2 skeleton" />
            </div>
            <div className="h-6 w-20 rounded-full skeleton" />
            <div className="h-3 w-16 skeleton" />
          </div>
        ))}
      </div>
    </div>
  )
}