import { ExternalLink, Cpu, Building2 } from 'lucide-react'

interface TicketData {
  ticket?: {
    id?: number | string
    summary?: string
    status?: string
    priority?: string
    board?: string
  }
  company?: {
    name?: string
  }
  configurations?: Array<{
    device_identifier?: string
    type?: string
    ip_address?: string
  }>
}

interface SessionTicketCardProps {
  ticketId: string
  ticketData: TicketData | null
  siteUrl?: string
}

export function SessionTicketCard({ ticketId, ticketData, siteUrl }: SessionTicketCardProps) {
  const ticket = ticketData?.ticket
  const company = ticketData?.company
  const configs = ticketData?.configurations

  const ticketUrl = siteUrl
    ? `${siteUrl}/v4_6_release/services/system_io/Service/fv_sr100_request.rails?service_recid=${ticketId}`
    : null

  return (
    <div className="rounded-xl border border-primary/20 bg-primary/5 p-3 space-y-2">
      <div className="flex items-start justify-between">
        <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-text-muted">
          Linked Ticket
        </h4>
        {ticketUrl && (
          <a
            href={ticketUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="text-muted-foreground hover:text-primary transition-colors"
            title="Open in ConnectWise"
          >
            <ExternalLink size={12} />
          </a>
        )}
      </div>

      <p className="text-sm font-semibold text-foreground">
        <span className="text-primary">#{ticketId}</span>
        {ticket?.summary && (
          <span> — {ticket.summary}</span>
        )}
      </p>

      <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
        {company?.name && (
          <span className="flex items-center gap-1">
            <Building2 size={10} />
            {company.name}
          </span>
        )}
        {ticket?.priority && (
          <>
            <span className="text-text-muted">&bull;</span>
            <span>{ticket.priority}</span>
          </>
        )}
        {ticket?.status && (
          <>
            <span className="text-text-muted">&bull;</span>
            <span>{ticket.status}</span>
          </>
        )}
      </div>

      {configs && configs.length > 0 && (
        <div className="border-t border-border/50 pt-2 mt-2">
          <p className="font-sans text-xs text-[0.5625rem] uppercase tracking-wider text-text-muted mb-1">
            Devices
          </p>
          <div className="space-y-0.5">
            {configs.slice(0, 3).map((cfg, i) => (
              <div key={i} className="flex items-center gap-1.5 text-xs text-muted-foreground">
                <Cpu size={10} />
                <span>{cfg.device_identifier}</span>
                {cfg.type && <span className="text-text-muted">({cfg.type})</span>}
              </div>
            ))}
            {configs.length > 3 && (
              <p className="text-[0.625rem] text-text-muted">
                +{configs.length - 3} more
              </p>
            )}
          </div>
        </div>
      )}
    </div>
  )
}