/**
 * TicketCard.tsx
 * Card de ticket para uso na lista do dashboard.
 */

import { useNavigate } from 'react-router-dom';
import type { Ticket } from '@/lib/api';
import { StatusBadge } from './StatusBadge';
import { PriorityBadge } from './PriorityBadge';
import styles from './TicketCard.module.css';

interface TicketCardProps {
  ticket: Ticket;
}

function formatDate(iso: string): string {
  return new Intl.DateTimeFormat('pt-BR', {
    day:    '2-digit',
    month:  'short',
    hour:   '2-digit',
    minute: '2-digit',
  }).format(new Date(iso));
}

export function TicketCard({ ticket }: TicketCardProps) {
  const navigate = useNavigate();

  return (
    <article
      className={`${styles.card} ${styles[`priority_${ticket.priority}`]}`}
      onClick={() => navigate(`/tickets/${ticket.id}`)}
      role="button"
      tabIndex={0}
      onKeyDown={(e) => e.key === 'Enter' && navigate(`/tickets/${ticket.id}`)}
      aria-label={`Ticket #${ticket.id}: ${ticket.title}`}
    >
      <div className={styles.top}>
        <div className={styles.badges}>
          <StatusBadge status={ticket.status} />
          <PriorityBadge priority={ticket.priority} />
        </div>
        <span className={styles.id}>#{ticket.id}</span>
      </div>

      <h3 className={styles.title}>{ticket.title}</h3>

      <p className={styles.description}>{ticket.description}</p>

      <div className={styles.footer}>
        <span className={styles.meta}>
          Aberto em {formatDate(ticket.createdAt)}
        </span>
        {ticket.assigneeId ? (
          <span className={styles.assigned}>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <circle cx="12" cy="8" r="4" /><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" />
            </svg>
            Agente #{ticket.assigneeId}
          </span>
        ) : (
          <span className={styles.unassigned}>Sem agente</span>
        )}
      </div>
    </article>
  );
}