import type { CallBatchDto } from "../types";
import { batchTicketCount, formatDateTime, formatVisitorName } from "../lib/format";
import { StatusBadge } from "./StatusBadge";

export function BatchCard({
  batch,
  showContactDetails = false,
}: {
  batch: CallBatchDto;
  showContactDetails?: boolean;
}) {
  return (
    <section className="batch-card" aria-labelledby={`batch-${batch.id}`}>
      <div className="batch-card__header">
        <div>
          <h3 id={`batch-${batch.id}`}>本次叫号</h3>
        </div>
        <StatusBadge status={batch.status} />
      </div>
      <p className="batch-card__summary">
        <strong>{batchTicketCount(batch)} 个号码</strong>
        <span>{formatDateTime(batch.called_at)}</span>
      </p>
      <ul className="batch-ticket-list">
        {batch.tickets.map((ticket) => (
          <li key={ticket.id} className="batch-ticket-row">
            <div className="batch-ticket-identity">
              <strong className="ticket-number">{ticket.ticket_number}</strong>
              {showContactDetails ? (
                <span className="ticket-contact-line">
                  <span><span className="ticket-contact-label">手机号</span> <strong className="phone-value">{ticket.phone || "未返回"}</strong></span>
                  <span><span className="ticket-contact-label">游客</span> {formatVisitorName(ticket)}</span>
                </span>
              ) : null}
            </div>
            <StatusBadge status={ticket.status} kind="ticket" />
          </li>
        ))}
      </ul>
    </section>
  );
}