import { useQuery } from '@tanstack/react-query'
import { api } from '@/lib/api-client'
import type { RepairTicket } from '@/types/repair'
import type { PaginatedResponse } from '@lunarfront/shared/schemas'
import { Badge } from '@/components/ui/badge'

const STATUS_GROUPS = [
  { label: 'New', statuses: ['new', 'in_transit', 'intake'], color: 'bg-blue-500/10 text-blue-500 border-blue-500/20' },
  { label: 'Diagnosing', statuses: ['diagnosing', 'pending_approval'], color: 'bg-yellow-500/10 text-yellow-500 border-yellow-500/20' },
  { label: 'In Progress', statuses: ['approved', 'in_progress', 'pending_parts'], color: 'bg-orange-500/10 text-orange-500 border-orange-500/20' },
  { label: 'Ready', statuses: ['ready'], color: 'bg-green-500/10 text-green-500 border-green-500/20' },
]

interface RepairStatusBarProps {
  activeFilter: string | null
  onFilterChange: (statuses: string[] | null) => void
}

export function RepairStatusBar({ activeFilter, onFilterChange }: RepairStatusBarProps) {
  // Fetch all non-terminal tickets for counts
  const { data } = useQuery({
    queryKey: ['repair-tickets', 'station-counts'],
    queryFn: () => api.get<PaginatedResponse<RepairTicket>>('/v1/repair-tickets', { page: 1, limit: 1, q: undefined, sort: undefined, order: 'asc' }),
    staleTime: 30_000,
  })

  // We need per-status counts — fetch a larger list for counting
  const { data: allData } = useQuery({
    queryKey: ['repair-tickets', 'station-all'],
    queryFn: () => api.get<PaginatedResponse<RepairTicket>>('/v1/repair-tickets', { page: 1, limit: 500, q: undefined, sort: undefined, order: 'asc' }),
    staleTime: 30_000,
  })

  const tickets = allData?.data ?? []

  return (
    <div className="flex items-center gap-2 px-3 py-2 border-b border-border bg-card/50 shrink-0">
      <button
        className={`text-xs px-2 py-1 rounded-md transition-colors ${!activeFilter ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'}`}
        onClick={() => onFilterChange(null)}
      >
        All ({data?.pagination?.total ?? tickets.length})
      </button>
      {STATUS_GROUPS.map((group) => {
        const count = tickets.filter(t => group.statuses.includes(t.status)).length
        const isActive = activeFilter === group.label
        return (
          <button
            key={group.label}
            className={`flex items-center gap-1.5 text-xs px-2 py-1 rounded-md transition-colors ${isActive ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'}`}
            onClick={() => onFilterChange(isActive ? null : group.statuses)}
          >
            {group.label}
            {count > 0 && (
              <Badge variant="outline" className={`text-[10px] h-4 px-1 ${group.color}`}>
                {count}
              </Badge>
            )}
          </button>
        )
      })}
    </div>
  )
}