import { ConvexProvider } from "convex/react"
import { ChatWidget } from "./ChatWidget"
import { ChatHubWidget } from "./ChatHubWidget"
import { ConvexMachineProvider, useConvexMachine } from "./ConvexMachineProvider"
import { Loader2 } from "lucide-react"

function ChatAppContent() {
  const { client, isReady, error } = useConvexMachine()

  // Obter ticketId e ticketRef da URL
  const params = new URLSearchParams(window.location.search)
  const ticketId = params.get("ticketId")
  const ticketRef = params.get("ticketRef")
  const isHub = params.get("hub") === "true"

  // Aguardar cliente Convex estar pronto
  if (!isReady || !client) {
    if (error) {
      return (
        <div className="pointer-events-none flex h-full w-full items-end justify-end bg-transparent p-2">
          <div className="pointer-events-auto flex items-center gap-2 rounded-full bg-red-100 px-4 py-2 text-red-600 shadow-lg">
            <span className="text-sm font-medium">Erro: {error}</span>
          </div>
        </div>
      )
    }

    return (
      <div className="pointer-events-none flex h-full w-full items-end justify-end bg-transparent p-2">
        <div className="pointer-events-auto flex items-center gap-2 rounded-full bg-slate-200 px-4 py-2 text-slate-600 shadow-lg">
          <Loader2 className="size-4 animate-spin" />
          <span className="text-sm font-medium">Conectando...</span>
        </div>
      </div>
    )
  }

  // Modo hub - lista de todas as sessoes
  if (isHub || !ticketId) {
    return (
      <ConvexProvider client={client}>
        <ChatHubWidget />
      </ConvexProvider>
    )
  }

  // Modo chat - conversa de um ticket especifico
  return (
    <ConvexProvider client={client}>
      <ChatWidget ticketId={ticketId} ticketRef={ticketRef ? Number(ticketRef) : undefined} />
    </ConvexProvider>
  )
}

export function ChatApp() {
  return (
    <ConvexMachineProvider>
      <ChatAppContent />
    </ConvexMachineProvider>
  )
}

export { ChatWidget }
export { ChatHubWidget }
export * from "./types"