interface Props {
  expiresAt: Date | null;
  capabilities: { read: boolean; write: boolean };
  token: string;
}

function relativeExpiry(d: Date): string {
  const ms = d.getTime() - Date.now();
  if (ms <= 0) return "expired";
  const days = Math.round(ms / 86400000);
  if (days >= 1) return `in ${days} day${days === 1 ? "" : "s"}`;
  const hours = Math.round(ms / 3600000);
  if (hours >= 1) return `in ${hours} hour${hours === 1 ? "" : "s"}`;
  const mins = Math.round(ms / 60000);
  return `in ${mins} min`;
}

export function ShareBanner({ expiresAt, capabilities, token }: Props) {
  const mode = capabilities.write ? "edit" : "view-only";
  return (
    <div
      className="flex items-center gap-3 px-6 py-2.5 text-[12.5px] flex-wrap"
      style={{
        background: "var(--paper-2)",
        borderBottom: "0.5px solid var(--hair)",
        color: "var(--ink-soft)",
      }}
    >
      <span className="dot" style={{ background: "var(--c-bills)", width: 6, height: 6 }} />
      <span>
        Public share link · <span style={{ textTransform: "lowercase" }}>{mode}</span>
      </span>
      {expiresAt ? (
        <>
          <span style={{ color: "var(--ink-2)", fontWeight: 600 }}>
            · expires {relativeExpiry(expiresAt)}
          </span>
          <span>· revoke anytime</span>
        </>
      ) : (
        <span>· no expiration</span>
      )}
      <code
        className="ml-auto"
        style={{
          fontFamily: "var(--mono)",
          fontSize: 11,
          color: "var(--ink-mute)",
          background: "var(--card)",
          padding: "3px 8px",
          borderRadius: 4,
          border: "0.5px solid var(--hair)",
        }}
      >
        /s/{token.slice(0, 12)}
      </code>
    </div>
  );
}