codey.lol/src/components/RandomMsg.tsx

import { useState, useEffect } from "react";
import { API_URL } from "../config";

interface RandomMsgResponse {
  msg?: string;
}

export default function RandomMsg(): React.ReactElement {
  const [randomMsg, setRandomMsg] = useState<string>("");
  const [responseTime, setResponseTime] = useState<number | null>(null);
  const [showResponseTime, setShowResponseTime] = useState<boolean>(false);

  const getRandomMsg = async (): Promise<void> => {
    try {
      const start = performance.now();
      const response = await fetch(`${API_URL}/randmsg`, {
        method: "POST",
        headers: { "Content-Type": "application/json; charset=utf-8" },
      });
      const end = performance.now();
      setResponseTime(Math.round(end - start));
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      const data = await response.json();
      if (data?.msg) setRandomMsg(data.msg.replace(/<br\s*\/?\>/gi, "\n"));
    } catch (err) {
      console.error("Failed to fetch random message:", err);
      setResponseTime(null);
    }
  };

  useEffect(() => void getRandomMsg(), []);

  return (
    <div className="random-msg-container">
      {randomMsg && (
        <div className="random-msg" style={{ position: "relative", display: "inline" }}>
          <small
            style={{ cursor: responseTime !== null ? "pointer" : "default" }}
            onClick={() => {
              if (responseTime !== null) setShowResponseTime((v) => !v);
            }}
            tabIndex={0}
            onBlur={() => setShowResponseTime(false)}
          >
            <i>{randomMsg}</i>
          </small>
          <button
            aria-label="New footer message"
            type="button"
            className="random-msg-reload"
            onClick={getRandomMsg}
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              width="12"
              height="12"
              aria-hidden="true"
              focusable="false"
            >
              <path
                d="M17.65 6.35a7.95 7.95 0 0 0-5.65-2.35 8 8 0 1 0 7.75 9.94h-2.08a6 6 0 1 1-5.67-7.94 5.94 5.94 0 0 1 4.22 1.78L13 11h7V4z"
                fill="currentColor"
              />
            </svg>
          </button>
          {showResponseTime && responseTime !== null && (
            <div
              style={{
                position: "absolute",
                left: "50%",
                top: "100%",
                transform: "translateX(-50%)",
                marginTop: 4,
                background: "#222",
                color: "#fff",
                fontSize: "0.75em",
                padding: "2px 8px",
                borderRadius: 6,
                boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
                zIndex: 10,
                whiteSpace: "nowrap"
              }}
              role="status"
              aria-live="polite"
            >
              API response: {responseTime} ms
            </div>
          )}
        </div>
      )}
    </div>
  );
}