frontend/src/ui/tools/ToolsTab.tsx

import React, { useState } from 'react'
import { Search, RefreshCw, Filter } from 'lucide-react'
import type { CapabilityItem } from '../../agentic/types'
import { useToolsInventory, TypeFilter } from './useToolsInventory'
import { ToolsGrid } from './ToolsGrid'
import { ToolsEmptyState } from './ToolsEmptyState'
import { ToolDetailDrawer } from './ToolDetailDrawer'

type Props = {
  backendUrl: string
  apiKey?: string
  onGoToMcpServers?: () => void
}

const TYPE_BUTTONS: { value: TypeFilter; label: string }[] = [
  { value: 'all', label: 'All' },
  { value: 'tool', label: 'Tools' },
  { value: 'a2a', label: 'A2A Agents' },
]

export function ToolsTab({ backendUrl, apiKey, onGoToMcpServers }: Props) {
  const {
    items,
    counts,
    loading,
    error,
    refresh,
    search,
    setSearch,
    statusFilter,
    setStatusFilter,
    typeFilter,
    setTypeFilter,
    forgeHealthy,
  } = useToolsInventory({ backendUrl, apiKey })

  const [selectedItem, setSelectedItem] = useState<CapabilityItem | null>(null)
  const [refreshing, setRefreshing] = useState(false)

  const handleRefresh = async () => {
    setRefreshing(true)
    try {
      await refresh()
    } finally {
      setRefreshing(false)
    }
  }

  const hasItems = !loading && !error && items.length > 0
  const showEmpty = !loading && !error && items.length === 0 && !search && statusFilter === 'all' && typeFilter === 'all'

  return (
    <div className="space-y-4">
      {/* Stats bar */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4 flex-wrap">
          {/* Total capabilities */}
          <div className="flex items-center gap-2">
            <span className="text-sm text-white/50">Total</span>
            <span className="text-sm font-semibold text-white">{counts.total}</span>
          </div>
          <div className="w-px h-4 bg-white/10" />

          {/* Tools count */}
          <div className="flex items-center gap-2">
            <span className="w-1.5 h-1.5 rounded-full bg-blue-400" />
            <span className="text-sm text-white/50">Tools</span>
            <span className="text-sm font-semibold text-blue-300">{counts.tools.total}</span>
          </div>

          {/* A2A count */}
          <div className="flex items-center gap-2">
            <span className="w-1.5 h-1.5 rounded-full bg-violet-400" />
            <span className="text-sm text-white/50">A2A</span>
            <span className="text-sm font-semibold text-violet-300">{counts.a2a.total}</span>
          </div>

          <div className="w-px h-4 bg-white/10" />

          {/* Active / Inactive */}
          <div className="flex items-center gap-2">
            <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
            <span className="text-sm text-white/50">Active</span>
            <span className="text-sm font-semibold text-emerald-300">{counts.active}</span>
          </div>
          <div className="flex items-center gap-2">
            <span className="w-1.5 h-1.5 rounded-full bg-yellow-400" />
            <span className="text-sm text-white/50">Inactive</span>
            <span className="text-sm font-semibold text-yellow-300">{counts.inactive}</span>
          </div>

          {/* Forge status */}
          {forgeHealthy !== null && (
            <>
              <div className="w-px h-4 bg-white/10" />
              <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${
                forgeHealthy
                  ? 'bg-emerald-500/20 text-emerald-300'
                  : 'bg-red-500/20 text-red-300'
              }`}>
                Forge {forgeHealthy ? 'Online' : 'Offline'}
              </span>
            </>
          )}
        </div>

        <button
          onClick={handleRefresh}
          disabled={refreshing}
          className="flex items-center gap-2 px-3 py-1.5 text-xs font-medium text-white/60 hover:text-white bg-white/5 hover:bg-white/10 rounded-lg transition-colors disabled:opacity-50"
        >
          <RefreshCw size={14} className={refreshing ? 'animate-spin' : ''} />
          Refresh
        </button>
      </div>

      {/* Search + filter bar */}
      {(counts.total > 0 || search || statusFilter !== 'all' || typeFilter !== 'all') && (
        <div className="flex items-center gap-3">
          <div className="flex-1 relative">
            <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-white/30" />
            <input
              type="text"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Search by name, description, or ID..."
              className="w-full bg-white/5 border border-white/10 rounded-xl pl-10 pr-4 py-2.5 text-sm text-white placeholder-white/30 focus:outline-none focus:border-purple-500/50 transition-colors"
            />
          </div>

          {/* Type filter */}
          <div className="flex items-center gap-1 bg-white/5 border border-white/10 rounded-xl p-1">
            {TYPE_BUTTONS.map((t) => (
              <button
                key={t.value}
                onClick={() => setTypeFilter(t.value)}
                className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-colors ${
                  typeFilter === t.value
                    ? 'bg-white/10 text-white'
                    : 'text-white/40 hover:text-white/60'
                }`}
              >
                {t.label}
              </button>
            ))}
          </div>

          {/* Status filter */}
          <div className="flex items-center gap-1 bg-white/5 border border-white/10 rounded-xl p-1">
            {(['all', 'active', 'inactive'] as const).map((s) => (
              <button
                key={s}
                onClick={() => setStatusFilter(s)}
                className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-colors capitalize ${
                  statusFilter === s
                    ? 'bg-white/10 text-white'
                    : 'text-white/40 hover:text-white/60'
                }`}
              >
                {s}
              </button>
            ))}
          </div>
        </div>
      )}

      {/* Content */}
      {loading && <ToolsEmptyState loading />}
      {error && <ToolsEmptyState error={error} />}
      {showEmpty && <ToolsEmptyState onGoToMcpServers={onGoToMcpServers} />}

      {!loading && !error && items.length === 0 && (search || statusFilter !== 'all' || typeFilter !== 'all') && !showEmpty && (
        <div className="flex flex-col items-center justify-center h-40 text-white/40">
          <Filter size={32} className="mb-3 opacity-30" />
          <p className="text-sm">No capabilities match your search or filters.</p>
        </div>
      )}

      {hasItems && (
        <ToolsGrid items={items} onSelect={setSelectedItem} />
      )}

      {/* Detail drawer */}
      {selectedItem && (
        <ToolDetailDrawer item={selectedItem} onClose={() => setSelectedItem(null)} />
      )}
    </div>
  )
}