import { ReactNode } from "react";
import { getStatusToken } from "../../lib/bookingStatus";

export interface BookingCardData {
  bookingId?: string;
  /** API PascalCase ("Pending", "InProgress") or token case. */
  status?: string;
  serviceId?: string;
  serviceName?: string;
  date?: string;
  time?: string;
  price?: number | string;
}

interface BookingCardProps {
  data: BookingCardData;
  /** Role-gated action buttons supplied by the caller. */
  actions?: ReactNode;
}

/** Date arrives as an ISO string; the spec wants a short display form. */
const formatDate = (value?: string) => {
  if (!value) return undefined;
  const at = new Date(value);
  if (Number.isNaN(at.getTime())) return value.split("T")[0];
  return at.toLocaleDateString([], { weekday: "short", month: "short", day: "numeric" });
};

/**
 * Centered system message describing a booking: status row, Service/Date grid,
 * time range, then whatever actions the caller passes.
 */
const BookingCard = ({ data, actions }: BookingCardProps) => {
  const status = getStatusToken(data.status);
  const date = formatDate(data.date);

  return (
    <div className="booking-card">
      <div className="booking-card__status">
        <span className="booking-card__dot" style={{ backgroundColor: status.color }} />
        <span className="booking-card__status-label" style={{ color: status.color }}>
          {status.label}
        </span>
      </div>

      <div className="booking-card__grid">
        {data.serviceName && (
          <div className="booking-card__cell">
            <span className="booking-card__label">Service</span>
            <span className="booking-card__value">{data.serviceName}</span>
          </div>
        )}
        {date && (
          <div className="booking-card__cell">
            <span className="booking-card__label">Date</span>
            <span className="booking-card__value">{date}</span>
          </div>
        )}
      </div>

      {data.time && <div className="booking-card__time">{data.time}</div>}

      {actions && <div className="booking-card__actions">{actions}</div>}
    </div>
  );
};

export default BookingCard;