// Écran de connexion — entièrement mocké, aucun backend.
// Deux entrées : Pro Santé Connect (le chemin réel à terme) et mode démo.
// Le choix est mémorisé pour ne pas réafficher l'écran à chaque rechargement.

const LG_VT = window.VT || {};
const LG_INK = LG_VT.ink || '#0a0a0a';
const LG_SUB = LG_VT.sub || '#6b7280';
const LG_BG = LG_VT.paper || '#f6f5f1';
const LG_SURF = LG_VT.surface || '#ffffff';
const LG_HAIR2 = LG_VT.hair2 || 'rgba(10,10,10,0.10)';
const LG_MED = LG_VT.medBlue || '#3d6b8f';
const LG_MED_TINT = LG_VT.medBlueTint || 'rgba(61,107,143,0.10)';

const VASCO_AUTH_KEY = 'vasco_auth';

// localStorage peut lever (mode privé, quota) : on ne casse pas l'app pour ça.
const authRead = () => {
  try { return window.localStorage.getItem(VASCO_AUTH_KEY); } catch (e) { return null; }
};
const authWrite = (v) => {
  try { window.localStorage.setItem(VASCO_AUTH_KEY, v); } catch (e) { /* sans mémoire */ }
};
const authClear = () => {
  try { window.localStorage.removeItem(VASCO_AUTH_KEY); } catch (e) { /* rien à faire */ }
};

function LoginScreen({ onDone }) {
  const [connecting, setConnecting] = React.useState(false);

  // Le passage par PSC prend un instant en vrai : l'attente rend le mock crédible.
  const connectPSC = () => {
    if (connecting) return;
    setConnecting(true);
    setTimeout(() => {
      authWrite('psc');
      onDone();
    }, 1400);
  };

  const enterDemo = () => {
    if (connecting) return;
    authWrite('demo');
    showToast('Mode démo — données fictives', 'info');
    onDone();
  };

  return (
    <div style={{
      width: '100%', height: '100%', background: LG_BG, color: LG_INK,
      display: 'flex', flexDirection: 'column',
      paddingTop: 62, paddingBottom: 34,
      fontFamily: "'Inter Tight', -apple-system, system-ui, sans-serif",
      overflow: 'hidden',
    }}>
      {/* Identité */}
      <div style={{
        flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center', gap: 18, padding: '0 32px',
      }}>
        <div style={{
          width: 64, height: 64, borderRadius: 22, background: LG_MED_TINT,
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}>
          <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke={LG_MED}
            strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
            <rect x="9" y="3" width="6" height="12" rx="3" />
            <path d="M5 11a7 7 0 0 0 14 0" />
            <path d="M12 18v3" />
          </svg>
        </div>

        <div style={{ textAlign: 'center' }}>
          <div style={{
            fontSize: 34, fontWeight: 700, color: LG_INK,
            letterSpacing: '-1px', lineHeight: 1,
          }}>VASCO</div>
          <div style={{
            fontSize: 14, fontWeight: 500, color: LG_SUB,
            marginTop: 8, lineHeight: 1.4,
          }}>
            L'assistant du chirurgien vasculaire
          </div>
        </div>
      </div>

      {/* Accès */}
      <div style={{ padding: '0 24px', flexShrink: 0 }}>
        <button onClick={connectPSC} disabled={connecting} className={connecting ? undefined : 'press'}
          style={{
            width: '100%', height: LG_VT.hLg || 48, borderRadius: LG_VT.rLg || 16,
            background: LG_INK, border: 'none',
            fontFamily: 'inherit', fontSize: 14, fontWeight: 700, color: '#fff',
            cursor: connecting ? 'default' : 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9,
          }}>
          {connecting ? (
            <>
              <span style={{
                width: 15, height: 15, borderRadius: '50%', flexShrink: 0,
                border: '2px solid rgba(255,255,255,0.3)', borderTopColor: '#fff',
                animation: 'lgSpin .7s linear infinite',
              }} />
              Connexion…
            </>
          ) : (
            <>
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#fff"
                strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
                <rect x="3" y="11" width="18" height="11" rx="2" />
                <path d="M7 11V7a5 5 0 0 1 10 0v4" />
              </svg>
              Se connecter avec Pro Santé Connect
            </>
          )}
        </button>

        <button onClick={enterDemo} disabled={connecting} className={connecting ? undefined : 'press'}
          style={{
            width: '100%', height: LG_VT.hLg || 48, borderRadius: LG_VT.rLg || 16,
            marginTop: 10,
            background: LG_SURF, border: `1px solid ${LG_HAIR2}`,
            fontFamily: 'inherit', fontSize: 14, fontWeight: 600, color: LG_INK,
            cursor: connecting ? 'default' : 'pointer',
          }}>
          Continuer en mode démo
        </button>

        <div style={{
          fontSize: 11, fontWeight: 500, color: LG_SUB,
          textAlign: 'center', marginTop: 16, lineHeight: 1.45,
        }}>
          Données de santé hébergées en France · HDS
        </div>
      </div>

      <style>{`@keyframes lgSpin { to { transform: rotate(360deg); } }`}</style>
    </div>
  );
}

window.LoginScreen = LoginScreen;
window.vascoAuthRead = authRead;
window.vascoAuthClear = authClear;