import { Ticket, Unlink, Link2, Send } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { Session } from '@/types'
import type { PSATicketInfo } from '@/types/integrations'

interface Props {
  session: Session
  hasConnection: boolean
  onLinkClick: () => void
  onUnlink: () => void
  onUpdateClick?: () => void
  ticketInfo?: PSATicketInfo | null
}

export function TicketLinkIndicator({ session, hasConnection, onLinkClick, onUnlink, onUpdateClick, ticketInfo }: Props) {
  // No connection — show nothing
  if (!hasConnection) return null

  // No ticket linked — show subtle "Link Ticket" button
  if (!session.psa_ticket_id) {
    return (
      <button
        type="button"
        onClick={onLinkClick}
        className={cn(
          'inline-flex items-center gap-1.5 rounded-lg px-2 py-1 text-xs text-muted-foreground transition-colors',
          'hover:bg-accent hover:text-foreground'
        )}
      >
        <Link2 className="h-3.5 w-3.5" />
        Link Ticket
      </button>
    )
  }

  // Ticket linked
  return (
    <div className="card-flat inline-flex items-start gap-2.5 rounded-lg border border-border px-3 py-2">
      <Ticket className="mt-0.5 h-4 w-4 shrink-0 text-blue-400" />
      <div className="min-w-0">
        <p className="text-sm font-medium text-foreground">
          CW #{session.psa_ticket_id}
          {ticketInfo?.summary && (
            <span className="text-muted-foreground"> — {ticketInfo.summary}</span>
          )}
        </p>
        {ticketInfo && (
          <div className="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted-foreground">
            {ticketInfo.company_name && <span>{ticketInfo.company_name}</span>}
            {ticketInfo.board_name && (
              <>
                <span className="text-text-muted">&bull;</span>
                <span>{ticketInfo.board_name}</span>
              </>
            )}
            {ticketInfo.status_name && (
              <>
                <span className="text-text-muted">&bull;</span>
                <span>{ticketInfo.status_name}</span>
              </>
            )}
          </div>
        )}
      </div>
      <div className="flex shrink-0 items-center gap-1">
        {onUpdateClick && (
          <button
            type="button"
            onClick={onUpdateClick}
            className={cn(
              'inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs text-muted-foreground transition-colors',
              'hover:bg-accent-dim hover:text-foreground'
            )}
            title="Update ticket"
          >
            <Send className="h-3 w-3" />
            <span className="hidden sm:inline">Update</span>
          </button>
        )}
        <button
          type="button"
          onClick={onUnlink}
          className="shrink-0 rounded p-0.5 text-xs text-muted-foreground transition-colors hover:text-foreground"
          title="Unlink ticket"
        >
          <Unlink className="h-3.5 w-3.5" />
        </button>
      </div>
    </div>
  )
}
