// Écrans d'erreur — 404, 500, hors ligne.
//
// Trois variantes d'un même écran : pictogramme, titre, explication, action.
// Aucun n'est câblé sur un vrai routeur (l'app n'en a pas) : ils existent pour
// que le jour où le backend répond mal, l'écran soit déjà dessiné. On peut les
// voir avec `?error=404` (ou 500 / offline) dans l'URL.
//
// Le ton suit le reste de l'app : vouvoiement, pas d'excuse geignarde, une
// sortie concrète à chaque fois.

const ER_VT = window.VT || {};
const ER_INK = ER_VT.ink || '#0a0a0a';
const ER_SUB = ER_VT.sub || '#6b7280';
const ER_BG = ER_VT.paper || '#f6f5f1';
const ER_SURF = ER_VT.surface || '#ffffff';
const ER_HAIR2 = ER_VT.hair2 || 'rgba(10,10,10,0.10)';
const ER_MED = ER_VT.medBlue || '#3d6b8f';
const ER_MED_TINT = ER_VT.medBlueTint || 'rgba(61,107,143,0.10)';
const ER_WARN = ER_VT.warning || '#d97706';

const ER_VARIANTS = {
  404: {
    code: '404',
    tint: ER_MED_TINT,
    color: ER_MED,
    icon: <><circle cx="11" cy="11" r="7" /><path d="M20 20l-3.5-3.5" /><path d="M8.5 11h5" /></>,
    title: 'Page introuvable',
    body: "Ce contenu a été déplacé, supprimé, ou l'adresse comporte une erreur. Rien n'est perdu côté dossiers.",
    action: 'Retour au tableau de bord',
  },
  500: {
    code: '500',
    tint: 'rgba(217,119,6,0.10)',
    color: ER_WARN,
    icon: <><path d="M12 4l10 17H2z" /><path d="M12 10v4" /><circle cx="12" cy="17.4" r="0.7" fill="currentColor" stroke="none" /></>,
    title: 'Le serveur ne répond pas',
    body: "L'incident est enregistré de notre côté. Vos données ne sont pas affectées — rien de ce que vous avez validé n'est perdu.",
    action: 'Réessayer',
  },
  offline: {
    code: 'HORS LIGNE',
    tint: 'rgba(10,10,10,0.05)',
    color: ER_SUB,
    icon: <><path d="M1 1l22 22" /><path d="M16.7 12.5a6 6 0 0 0-3.2-2.4" /><path d="M5 12.5a10 10 0 0 1 4-2.3" /><path d="M2 8.8a15 15 0 0 1 5-3" /><path d="M22 8.8a15 15 0 0 0-8.5-3.6" /><circle cx="12" cy="19" r="0.8" fill="currentColor" stroke="none" /></>,
    title: 'Pas de connexion',
    body: "Vous pouvez continuer à dicter : les comptes rendus sont conservés sur l'appareil et partiront dès le retour du réseau.",
    action: 'Réessayer',
  },
};

function ErrorScreen({ variant = '404', onAction, actionLabel, onSecondary, secondaryLabel }) {
  const v = ER_VARIANTS[variant] || ER_VARIANTS['404'];

  return (
    <div data-vasco={`error-${variant}`} style={{
      width: '100%', height: '100%', background: ER_BG, color: ER_INK,
      display: 'flex', flexDirection: 'column',
      paddingTop: 62, paddingBottom: 34,
      fontFamily: "'Inter Tight', -apple-system, system-ui, sans-serif",
      overflow: 'hidden',
    }}>
      <div style={{
        flex: 1, minHeight: 0,
        display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center',
        padding: '0 34px', textAlign: 'center',
      }}>
        <div style={{
          width: 84, height: 84, borderRadius: '50%', background: v.tint,
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}>
          <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke={v.color}
            strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
            {v.icon}
          </svg>
        </div>

        <div className="mono" style={{
          fontSize: 11, fontWeight: 600, color: ER_SUB,
          letterSpacing: '1.2px', marginTop: 20,
        }}>{v.code}</div>

        <div style={{
          fontSize: 26, fontWeight: 700, color: ER_INK,
          letterSpacing: '-0.7px', lineHeight: 1.15, marginTop: 8,
        }}>{v.title}</div>

        <div style={{
          fontSize: 14, fontWeight: 500, color: ER_SUB,
          lineHeight: 1.5, marginTop: 12, maxWidth: 300,
        }}>{v.body}</div>
      </div>

      <div style={{ padding: '0 24px', flexShrink: 0 }}>
        <button onClick={onAction} className="press" style={{
          width: '100%', height: ER_VT.hLg || 48, borderRadius: ER_VT.rLg || 16,
          background: ER_INK, border: 'none',
          fontFamily: 'inherit', fontSize: 14, fontWeight: 700, color: '#fff',
          cursor: 'pointer',
        }}>{actionLabel || v.action}</button>

        {onSecondary && (
          <button onClick={onSecondary} className="press" style={{
            width: '100%', height: ER_VT.hLg || 48, borderRadius: ER_VT.rLg || 16,
            marginTop: 10,
            background: ER_SURF, border: `1px solid ${ER_HAIR2}`,
            fontFamily: 'inherit', fontSize: 14, fontWeight: 600, color: ER_INK,
            cursor: 'pointer',
          }}>{secondaryLabel || 'Retour au tableau de bord'}</button>
        )}
      </div>
    </div>
  );
}

// `?error=404` / `?error=500` / `?error=offline` — même mécanique que
// `?onboarding` : montrable en démo sans ouvrir la console.
function errorFromUrl() {
  try {
    const m = /(^|[?&])error=(404|500|offline)(&|$)/.exec(window.location.search);
    return m ? m[2] : null;
  } catch (e) { return null; }
}

window.ErrorScreen = ErrorScreen;
window.vascoErrorFromUrl = errorFromUrl;
console.log('%c[VASCO] error-screens.jsx chargé', 'color:#3d6b8f;font-weight:bold');