// Call sheet — confirmation avant d'ouvrir l'application Téléphone.
//
// Pourquoi une confirmation plutôt qu'un `tel:` direct sur le bouton Appeler :
// un `tel:` posé sur l'action elle-même part au premier tap, et en démo sur
// Mac ça ouvre FaceTime par-dessus l'app. Ici le premier tap n'ouvre qu'une
// feuille — le lien réel n'est atteint qu'au second, délibéré. Sur un vrai
// iPhone le comportement reste celui attendu : l'appel se lance.
//
// Même architecture que ToastStore : un store hors React, appelable de
// n'importe où sans provider ni prop drilling.

const CS_VT = window.VT || {};
const CS_INK = CS_VT.ink || '#0a0a0a';
const CS_SUB = CS_VT.sub || '#6b7280';
const CS_SURF = CS_VT.surface || '#ffffff';
const CS_HAIR2 = CS_VT.hair2 || 'rgba(10,10,10,0.10)';
const CS_MED = CS_VT.medBlue || '#3d6b8f';
const CS_MED_TINT = CS_VT.medBlueTint || 'rgba(61,107,143,0.10)';
const CS_OK = CS_VT.success || '#059669';

const CallStore = {
  target: null,
  listeners: new Set(),

  subscribe(fn) {
    this.listeners.add(fn);
    return () => this.listeners.delete(fn);
  },

  open(name, phone) {
    this.target = { name: name || 'ce patient', phone: phone || '' };
    this.listeners.forEach((fn) => fn(this.target));
  },

  close() {
    this.target = null;
    this.listeners.forEach((fn) => fn(null));
  },
};

// API publique : requestCall('Martin Jean', '06 88 41 09 22')
function requestCall(name, phone) {
  if (!phone) {
    showToast(`Aucun numéro enregistré pour ${name || 'ce patient'}`, 'error');
    return;
  }
  CallStore.open(name, phone);
}

function CallHost() {
  const [target, setTarget] = React.useState(CallStore.target);
  React.useEffect(() => CallStore.subscribe(setTarget), []);

  if (!target) return null;

  // Les numéros mockés sont écrits avec des espaces ; tel: veut du brut.
  const dial = `tel:${String(target.phone).replace(/[^\d+]/g, '')}`;

  return (
    <>
      <div onClick={() => CallStore.close()} style={{
        position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.35)', zIndex: 950,
        animation: 'csFade .2s ease',
      }} />
      <div style={{
        position: 'absolute', left: 12, right: 12, bottom: 12, zIndex: 951,
        background: CS_SURF, borderRadius: CS_VT.rXl2 || 22,
        boxShadow: CS_VT.shadowLg,
        // 28px de fond : les boutons doivent finir au-dessus des 34px du
        // home indicator, sinon le geste système passe devant « Appeler ».
        padding: '22px 20px 28px',
        animation: 'csUp .25s cubic-bezier(.2,.7,.2,1)',
      }}>
        <div style={{
          width: 52, height: 52, borderRadius: '50%', margin: '0 auto',
          background: CS_MED_TINT, display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={CS_MED}
            strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
            <path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7 12.8 12.8 0 0 0 .7 2.8 2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5 12.8 12.8 0 0 0 2.8.7A2 2 0 0 1 22 16.9z" />
          </svg>
        </div>

        <div style={{
          textAlign: 'center', marginTop: 14,
          fontSize: 16, fontWeight: 700, color: CS_INK, letterSpacing: '-0.2px',
        }}>{target.name}</div>

        <div className="mono" style={{
          textAlign: 'center', marginTop: 6,
          fontSize: 19, fontWeight: 600, color: CS_INK, letterSpacing: '0.5px',
        }}>{target.phone}</div>

        <div style={{
          textAlign: 'center', marginTop: 8,
          fontSize: 11.5, fontWeight: 500, color: CS_SUB,
        }}>Ouvre l'application Téléphone de l'appareil</div>

        <div style={{ display: 'flex', gap: 8, marginTop: 20 }}>
          <button onClick={() => CallStore.close()} className="press" style={{
            flex: 1, height: CS_VT.hLg || 48, borderRadius: CS_VT.rLg || 16,
            background: 'none', border: `1px solid ${CS_HAIR2}`,
            fontFamily: 'inherit', fontSize: 14, fontWeight: 700, color: CS_INK, cursor: 'pointer',
          }}>Annuler</button>

          <a href={dial} onClick={() => CallStore.close()} className="press" style={{
            flex: 1, height: CS_VT.hLg || 48, borderRadius: CS_VT.rLg || 16,
            background: CS_OK, textDecoration: 'none',
            fontFamily: 'inherit', fontSize: 14, fontWeight: 700, color: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="#fff" stroke="none">
              <path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7 12.8 12.8 0 0 0 .7 2.8 2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5 12.8 12.8 0 0 0 2.8.7A2 2 0 0 1 22 16.9z" />
            </svg>
            Appeler
          </a>
        </div>

        <style>{`
          @keyframes csFade { from { opacity: 0; } to { opacity: 1; } }
          @keyframes csUp { from { transform: translateY(110%); } to { transform: translateY(0); } }
        `}</style>
      </div>
    </>
  );
}

window.requestCall = requestCall;
window.CallHost = CallHost;
console.log('%c[VASCO] call-sheet.jsx chargé', 'color:#3d6b8f;font-weight:bold');