"use client"

import * as React from "react"
import { ExternalLink } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { useGetContactDealsQuery } from "@/api/rtk/contact-deal-api"
import { cn } from "@/lib/utils"

interface Props {
  contactId: string
}

export function ContactDealsWidget({ contactId }: Props) {
  const { data: deals = [], isLoading } = useGetContactDealsQuery(contactId)

  if (isLoading) return <p className="text-xs text-muted-foreground">Loading deals...</p>

  if (deals.length === 0)
    return <p className="text-xs text-muted-foreground">No deals linked to this contact.</p>

  return (
    <div className="flex flex-col gap-2">
      {deals.map((deal) => (
        <div
          key={deal.id}
          className="flex items-center gap-3 rounded-lg border bg-white/60 p-3"
        >
          <div className="flex-1 min-w-0">
            <p className="text-sm font-semibold truncate">
              {deal.customerName ?? deal.leadId ?? deal.id}
            </p>
            {deal.leadId && (
              <p className="text-xs text-muted-foreground">{deal.leadId}</p>
            )}
          </div>
          <Badge
            variant="secondary"
            className="text-[10px] shrink-0 bg-accent/10 text-accent"
          >
            {deal.stage}
          </Badge>
        </div>
      ))}
    </div>
  )
}