import { LockIcon } from "lucide-react";

import { cn } from "@/lib/utils";

import { TONE_BOX } from "./tones";

const TEXT = {
  medical: "Confidential medical information. Your access is recorded.",
  pay: "Confidential pay information.",
} as const;

/**
 * Sensitive-data notice (spec 04 §14.1): at the top of a medical or pay section, every time it shows. Calm
 * (info), not dismissible, no click-through. Render it only for roles that can see the data: for everyone
 * else the section and the notice are both absent, so nothing reveals that the data exists.
 */
export function SensitiveNotice({ kind, className }: { kind: keyof typeof TEXT; className?: string }) {
  return (
    <p className={cn("flex items-center gap-2 rounded-md border px-3 py-2 text-sm", TONE_BOX.info, className)}>
      <LockIcon className="size-4 shrink-0" aria-hidden />
      {TEXT[kind]}
    </p>
  );
}

/**
 * Partly masks a phone number for screens that face the customer queue: 0712 345 123 → 07•• ••• 123.
 * The bullets aren't read out: pair with `maskedLabel` for the accessible name.
 */
export function maskPhone(phone: string) {
  const d = phone.replace(/\D/g, "").replace(/^254/, "0");
  if (d.length < 6) return "•".repeat(d.length);
  return `${d.slice(0, 2)}•• ••• ${d.slice(-3)}`;
}

export const maskedLabel = (phone: string) => `phone number ending ${phone.replace(/\D/g, "").slice(-3)}`;