import React from "react";

/**
 * The appointment's start, as a time of day, or "" when there isn't one worth printing.
 *
 * LIVED IN `PatientAppointmentDialog` UNTIL THE SENTENCE BELOW ACQUIRED A SECOND HOME. It moved
 * rather than being copied: two formatters is how one screen ends up saying 2:00 PM and another
 * 14:00 for the same visit.
 */
export const timeOf = (instant: string | undefined): string => {
  if (!instant) return "";
  const parsed = new Date(instant);
  if (Number.isNaN(parsed.getTime())) return "";
  return parsed.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
};

export interface VideoVisitJoinNoticeProps {
  /** Decided by the caller from the appointment's own Location, which each one already resolves. */
  isVideoVisit: boolean;
  /** `Appointment.start`. */
  start?: string;
}

/**
 * WHERE A VIDEO VISIT WILL OPEN, SAID BEFORE IT OPENS.
 *
 * The deck requires it in words (`mockups/patient-portal/appointments.html`): *"Before the visit
 * starts the detail panel says where it will appear, rather than leaving the patient hunting for
 * it"*. A patient looking at a video appointment otherwise reads a Location, a Visit Type and a
 * Booked On date, none of which tell them what to do at the appointed minute.
 *
 * There is deliberately NO Join button here. Spencer amended R6 on 2026-08-14: there is ONE join
 * affordance, `AvailableMeetingBanner`, fixed top-centre over every page. A second Join on a detail
 * panel would be the WEAKER of the two - present only on this screen, below the fold on a phone -
 * while looking equally authoritative. So this sets the expectation and names the place, because
 * *"it will pop up"* does not tell somebody where to look.
 *
 * SHARED BECAUSE IT WAS FOUND MISSING FROM ONE OF THE TWO SURFACES THAT NEEDED IT. The home's
 * appointment dialog had the sentence; the Appointments page's detail panel had nothing. That is
 * the same shape Cancel and Directions were in on this very panel, and it has the same fix: not a
 * second copy of the words, but one component both surfaces mount.
 */
export const VideoVisitJoinNotice: React.FC<VideoVisitJoinNoticeProps> = ({
  isVideoVisit,
  start,
}) => {
  if (!isVideoVisit) return null;

  return (
    <p className="rounded-lg bg-muted p-3 text-sm text-secondary">
      Your provider will start the visit at {timeOf(start) || "your appointment time"}. A{" "}
      <strong>Join</strong> button appears at the top of your screen the moment they do.
    </p>
  );
};

export default VideoVisitJoinNotice;