import type { UrgentAlert } from "../../api/types";
import { whenLabel } from "../../logic/format";
import { Button, Icon } from "../kit";
import { Link } from "../router";

const callPath = (a: UrgentAlert) => `/app/patients/${a.patientId}/check-ins/${a.checkInId}`;

/** YCI-29: open urgent notes, loud and red, on every page until someone acknowledges them. */
export function UrgentBanner({ alerts }: { alerts: UrgentAlert[] }) {
  const more = alerts.length - 3;
  return (
    <div role="alert" className="flex flex-wrap items-start gap-x-3.5 gap-y-3 rounded-[14px] bg-red-fill px-4 py-3.5">
      <Icon name="alarm-warning-fill" size={22} className="text-red-icon" />
      <div className="flex min-w-0 flex-1 basis-56 flex-col gap-0.5">
        <strong className="text-[14.5px] leading-5 font-semibold text-[#8f1d14]">
          {alerts.length === 1 ? "Urgent check-in note" : `${alerts.length} urgent check-in notes`} waiting for you
        </strong>
        <ul className="m-0 flex list-none flex-col gap-0.5 p-0 text-[13.5px] leading-[19px] text-[#a42418]">
          {alerts.slice(0, 3).map((a) => (
            <li key={a.id}>
              <Link to={callPath(a)} className="font-medium text-[#8f1d14] underline decoration-red-line underline-offset-2 hover:decoration-current">
                {a.patientName}
              </Link>
              : {a.text} <span className="text-red-text/75">· {whenLabel(a.at)}</span>
            </li>
          ))}
        </ul>
        {more > 0 && (
          <Link to="/app/today" className="text-[13px] font-medium text-[#8f1d14] underline decoration-red-line underline-offset-2">
            {more} more on Today
          </Link>
        )}
      </div>
      {alerts.length === 1 && (
        <Button asChild variant="red" className="ml-auto no-underline">
          <Link to={callPath(alerts[0])}>Open the note</Link>
        </Button>
      )}
    </div>
  );
}