"use client";

import { useState, useSyncExternalStore } from "react";

// Numéro inversé : jamais présent tel quel dans le HTML rendu côté serveur,
// et pas de correspondance grep directe. Il n'est reconstruit et injecté dans
// le DOM qu'après hydratation (client), pour l'impression du CV et le clic
// « Afficher ». Les harvesters qui n'exécutent pas de JS ne récupèrent rien.
const REV = "78 45 06 396 262+";
const subscribe = () => () => {};

export default function RevealPhone() {
  const isClient = useSyncExternalStore(
    subscribe,
    () => true,
    () => false,
  );
  const [shown, setShown] = useState(false);

  if (!isClient) {
    return <span className="text-muted">Afficher le numéro</span>;
  }

  const display = REV.split("").reverse().join("");
  const tel = display.replace(/\s/g, "");
  const link = (
    <a href={`tel:${tel}`} className="text-accent hover:underline">
      {display}
    </a>
  );

  return (
    <>
      {/* Visible uniquement à l'impression / export PDF */}
      <span className="hidden print:inline">{link}</span>
      <span className="print:hidden">
        {shown ? (
          link
        ) : (
          <button
            type="button"
            onClick={() => setShown(true)}
            className="text-accent hover:underline"
          >
            Afficher le numéro
          </button>
        )}
      </span>
    </>
  );
}