"use client"

import { cn } from "@/lib/utils"
import { MessageCircle, WifiOff } from "lucide-react"

type ChatSession = {
  ticketId: string
  ticketRef: number
  ticketSubject: string
  sessionId: string
  agentId: string
  unreadCount: number
  lastActivityAt: number
  machineHostname?: string | null
  machineOnline?: boolean
}

type ChatSessionItemProps = {
  session: ChatSession
  isActive?: boolean
  onClick: () => void
}

function formatTime(timestamp: number) {
  const now = Date.now()
  const diff = now - timestamp
  const minutes = Math.floor(diff / 60000)
  const hours = Math.floor(diff / 3600000)
  const days = Math.floor(diff / 86400000)

  if (minutes < 1) return "Agora"
  if (minutes < 60) return `${minutes}min`
  if (hours < 24) return `${hours}h`
  if (days === 1) return "Ontem"

  return new Date(timestamp).toLocaleDateString("pt-BR", {
    day: "2-digit",
    month: "2-digit",
  })
}

export function ChatSessionItem({ session, isActive, onClick }: ChatSessionItemProps) {
  const hasUnread = session.unreadCount > 0

  return (
    <button
      type="button"
      onClick={onClick}
      className={cn(
        "flex w-full items-start gap-3 border-b border-slate-100 px-4 py-3 text-left transition-colors hover:bg-slate-50",
        isActive && "bg-slate-100",
        hasUnread && "bg-red-50/50 hover:bg-red-50"
      )}
    >
      {/* Avatar/Icone */}
      <div
        className={cn(
          "flex size-10 shrink-0 items-center justify-center rounded-full",
          hasUnread ? "bg-red-100 text-red-600" : "bg-slate-100 text-slate-600"
        )}
      >
        <MessageCircle className="size-5" />
      </div>

      {/* Conteudo */}
      <div className="min-w-0 flex-1">
        <div className="flex items-center justify-between gap-2">
          <div className="flex items-center gap-2">
            <span className={cn("text-sm font-semibold", hasUnread ? "text-red-700" : "text-slate-900")}>
              #{session.ticketRef}
            </span>
            {/* Indicador online/offline */}
            {session.machineOnline !== undefined && (
              session.machineOnline ? (
                <span className="size-2 rounded-full bg-emerald-500" />
              ) : (
                <WifiOff className="size-3 text-slate-400" />
              )
            )}
          </div>
          <span className="text-xs text-slate-400">
            {formatTime(session.lastActivityAt)}
          </span>
        </div>

        <p className="mt-0.5 truncate text-sm text-slate-600">
          {session.ticketSubject}
        </p>

        {session.machineHostname && (
          <p className="mt-0.5 truncate text-xs text-slate-400">
            {session.machineHostname}
          </p>
        )}
      </div>

      {/* Badge de nao lidos */}
      {hasUnread && (
        <div className="flex shrink-0 items-center justify-center">
          <span className="flex size-5 items-center justify-center rounded-full bg-red-500 text-xs font-bold text-white">
            {session.unreadCount > 9 ? "9+" : session.unreadCount}
          </span>
        </div>
      )}
    </button>
  )
}
