"use client"

import { useState } from "react"
import { useMutation } from "convex/react"
// @ts-expect-error Convex runtime API lacks TypeScript declarations
import { api } from "@/convex/_generated/api"
import type { Id } from "@/convex/_generated/dataModel"
import type { TicketStatus } from "@/lib/schemas/ticket"
import { useAuth } from "@/lib/auth-client"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { toast } from "sonner"
import { cn } from "@/lib/utils"
import { ChevronDown } from "lucide-react"

const statusStyles: Record<TicketStatus, { label: string; badgeClass: string }> = {
  NEW: { label: "Novo", badgeClass: "bg-slate-100 text-slate-700" },
  OPEN: { label: "Aberto", badgeClass: "bg-[#dff1fb] text-[#0a4760]" },
  PENDING: { label: "Pendente", badgeClass: "bg-[#fdebd6] text-[#7b4107]" },
  ON_HOLD: { label: "Em espera", badgeClass: "bg-[#ede8ff] text-[#4f2f96]" },
  RESOLVED: { label: "Resolvido", badgeClass: "bg-[#dcf4eb] text-[#1f6a45]" },
  CLOSED: { label: "Fechado", badgeClass: "bg-slate-200 text-slate-700" },
}

const triggerClass =
  "group inline-flex h-auto w-auto items-center justify-center rounded-full border border-transparent bg-transparent p-0 shadow-none ring-0 ring-offset-0 ring-offset-transparent focus-visible:outline-none focus-visible:border-transparent focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:shadow-none hover:bg-transparent data-[state=open]:bg-transparent data-[state=open]:border-transparent data-[state=open]:shadow-none data-[state=open]:ring-0 data-[state=open]:ring-offset-0 data-[state=open]:ring-offset-transparent [&>*:last-child]:hidden"
const itemClass = "rounded-md px-2 py-2 text-sm text-neutral-800 transition hover:bg-slate-100 data-[state=checked]:bg-[#00e8ff]/15 data-[state=checked]:text-neutral-900 focus:bg-[#00e8ff]/10"
const baseBadgeClass =
  "inline-flex h-9 items-center gap-2 rounded-full border border-slate-200 px-3 text-sm font-semibold transition hover:border-slate-300"

export function StatusSelect({ ticketId, value }: { ticketId: string; value: TicketStatus }) {
  const updateStatus = useMutation(api.tickets.updateStatus)
  const [status, setStatus] = useState<TicketStatus>(value)
  const { convexUserId } = useAuth()

  return (
    <Select
      value={status}
      onValueChange={async (selected) => {
        const previous = status
        const next = selected as TicketStatus
        setStatus(next)
        toast.loading("Atualizando status...", { id: "status" })
        try {
          if (!convexUserId) throw new Error("missing user")
          await updateStatus({ ticketId: ticketId as unknown as Id<"tickets">, status: next, actorId: convexUserId as Id<"users"> })
          toast.success("Status alterado para " + (statusStyles[next]?.label ?? next) + ".", { id: "status" })
        } catch {
          setStatus(previous)
          toast.error("Não foi possível atualizar o status.", { id: "status" })
        }
      }}
    >
      <SelectTrigger className={triggerClass} aria-label="Atualizar status">
        <SelectValue asChild>
          <Badge className={cn(baseBadgeClass, statusStyles[status]?.badgeClass)}>
            {statusStyles[status]?.label ?? status}
            <ChevronDown className="size-3 text-current transition group-data-[state=open]:rotate-180" />
          </Badge>
        </SelectValue>
      </SelectTrigger>
      <SelectContent className="rounded-lg border border-slate-200 bg-white text-neutral-800 shadow-sm">
        {(["NEW", "OPEN", "PENDING", "ON_HOLD", "RESOLVED", "CLOSED"] as const).map((option) => (
          <SelectItem key={option} value={option} className={itemClass}>
            {statusStyles[option].label}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  )
}