// AcademiaDental — Install instructions modal (platform-aware)
const { useState: useStateI, useEffect: useEffectI } = React;

window.AD_INSTALL = (function () {
  function detect() {
    const ua = navigator.userAgent;
    const isIOS = /iPad|iPhone|iPod/.test(ua) && !window.MSStream;
    const isAndroid = /Android/.test(ua);
    const isMac = /Macintosh/.test(ua) && !isIOS;
    const isWin = /Windows/.test(ua);
    const isLinux = /Linux/.test(ua) && !isAndroid;
    const isSafari = /Safari/.test(ua) && !/Chrome|CriOS|FxiOS|EdgiOS/.test(ua);
    const isChrome = /Chrome|CriOS/.test(ua) && !/Edg/.test(ua);
    const isFirefox = /Firefox|FxiOS/.test(ua);
    const isEdge = /Edg/.test(ua);
    const isStandalone =
      window.matchMedia('(display-mode: standalone)').matches ||
      window.navigator.standalone === true;
    let kind = 'desktop-chrome';
    if (isStandalone) kind = 'installed';
    else if (isIOS && isSafari) kind = 'ios-safari';
    else if (isIOS) kind = 'ios-other';
    else if (isAndroid && isChrome) kind = 'android-chrome';
    else if (isAndroid) kind = 'android-other';
    else if (isChrome || isEdge) kind = 'desktop-chrome';
    else if (isSafari) kind = 'desktop-safari';
    else if (isFirefox) kind = 'desktop-firefox';
    return { kind, isIOS, isAndroid, isMac, isWin, isLinux, isSafari, isChrome, isEdge, isFirefox, isStandalone };
  }
  return { detect };
})();

function InstallModal({ onClose, installEvt, doInstall }) {
  const env = window.AD_INSTALL.detect();

  function platformContent() {
    if (env.kind === 'installed') {
      return {
        title: '¡Ya está instalada!',
        sub: 'Estás usando AcademiaDental como app. Búscala en la pantalla de inicio o launcher.',
        steps: []
      };
    }
    if (installEvt) {
      return {
        title: 'Instalar en este dispositivo',
        sub: 'Tu navegador permite instalar la app con un click. La verás como ícono en tu launcher/escritorio.',
        steps: [],
        primary: 'Instalar ahora'
      };
    }
    if (env.kind === 'ios-safari') {
      return {
        title: 'Añadir a pantalla de inicio (iPhone/iPad)',
        sub: 'Funciona en Safari. Si estás en Chrome/Firefox para iOS, ábrela en Safari primero.',
        steps: [
          { icon: 'share', text: 'Toca el botón Compartir (📤) en la barra inferior.' },
          { icon: 'plus',  text: 'Selecciona "Agregar a pantalla de inicio".' },
          { icon: 'check', text: 'Confirma con "Agregar". La app aparecerá como ícono.' }
        ]
      };
    }
    if (env.kind === 'ios-other') {
      return {
        title: 'Cambia a Safari para instalar',
        sub: 'En iOS la instalación funciona solo desde Safari.',
        steps: [
          { icon: 'share', text: 'Toca los 3 puntos ⋯ → "Abrir en Safari".' },
          { icon: 'share', text: 'En Safari toca Compartir (📤).' },
          { icon: 'plus',  text: 'Selecciona "Agregar a pantalla de inicio".' }
        ]
      };
    }
    if (env.kind === 'android-chrome') {
      return {
        title: 'Instalar en Android (Chrome)',
        sub: 'En Chrome de Android la app se instala como cualquier otra.',
        steps: [
          { icon: 'menu',  text: 'Toca el menú ⋮ arriba a la derecha.' },
          { icon: 'plus',  text: '"Instalar aplicación" o "Añadir a pantalla principal".' },
          { icon: 'check', text: 'Confirma con "Instalar". Verás el ícono en el launcher.' }
        ]
      };
    }
    if (env.kind === 'android-other') {
      return {
        title: 'Instalar en Android',
        sub: 'Tu navegador puede tener una opción "Instalar aplicación" en su menú.',
        steps: [
          { icon: 'menu',  text: 'Abre el menú del navegador.' },
          { icon: 'plus',  text: 'Busca "Instalar app" o "Añadir a pantalla principal".' },
          { icon: 'check', text: 'Confirma. Si no aparece, abre la app en Chrome.' }
        ]
      };
    }
    if (env.kind === 'desktop-chrome') {
      return {
        title: 'Instalar en notebook (Chrome / Edge)',
        sub: 'Verás un ícono de instalación en la barra de direcciones.',
        steps: [
          { icon: 'install', text: 'Mira la barra de direcciones — un ícono "Instalar app" (⊕).' },
          { icon: 'menu',    text: 'O abre el menú ⋮ → "Instalar AcademiaDental".' },
          { icon: 'check',   text: 'La app se abre como ventana propia y aparece en tu launcher.' }
        ]
      };
    }
    if (env.kind === 'desktop-safari') {
      return {
        title: 'Añadir al Dock (Safari macOS)',
        sub: 'Disponible desde macOS Sonoma (14+).',
        steps: [
          { icon: 'share', text: 'En Safari abre menú Archivo → "Añadir al Dock"…' },
          { icon: 'check', text: 'Confirma. La app aparece como ícono nativo.' }
        ]
      };
    }
    if (env.kind === 'desktop-firefox') {
      return {
        title: 'Firefox',
        sub: 'Firefox de escritorio no soporta instalación PWA nativa. Recomendamos abrir en Chrome o Edge.',
        steps: [
          { icon: 'install', text: 'Abre esta URL en Chrome o Edge para poder instalar.' },
          { icon: 'check',   text: 'En móvil Firefox sí puede: menú ⋮ → "Instalar".' }
        ]
      };
    }
    return {
      title: 'Instalar como app',
      sub: 'Las opciones varían según navegador. Busca "Instalar" o "Añadir a pantalla principal" en el menú.',
      steps: []
    };
  }
  const c = platformContent();

  const stepIcon = (k) => {
    const s = { width: 18, height: 18, color: '#fff' };
    if (k === 'share') return <Icon.Send style={s}/>;
    if (k === 'plus')  return <Icon.Download style={s}/>;
    if (k === 'check') return <Icon.Check style={s}/>;
    if (k === 'menu')  return <Icon.Settings style={s}/>;
    if (k === 'install') return <Icon.Download style={s}/>;
    return <Icon.Check style={s}/>;
  };

  return (
    <div className="modal-root" onClick={onClose}>
      <div className="modal-card" style={{maxWidth:420}} onClick={(e) => e.stopPropagation()}>
        <div style={{display:'flex',gap:12,alignItems:'flex-start',marginBottom:12}}>
          <div style={{width:42,height:42,borderRadius:12,background:'var(--teal-pale)',color:'var(--teal)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
            <Icon.Download style={{width:20,height:20}}/>
          </div>
          <div style={{flex:1}}>
            <h3 style={{marginBottom:4}}>{c.title}</h3>
            <p style={{margin:0,fontSize:13,color:'var(--gray-600)',lineHeight:1.5}}>{c.sub}</p>
          </div>
          <button onClick={onClose} style={{background:'none',border:'none',cursor:'pointer',padding:4,marginTop:-2}}>
            <Icon.X style={{width:18,height:18,color:'var(--gray-400)'}}/>
          </button>
        </div>

        {c.steps && c.steps.length ? (
          <div style={{display:'flex',flexDirection:'column',gap:10,marginTop:10}}>
            {c.steps.map((s, i) => (
              <div key={i} style={{display:'flex',gap:12,alignItems:'flex-start'}}>
                <div style={{
                  width:28,height:28,borderRadius:'50%',
                  background:'var(--teal-light)',color:'#fff',
                  display:'flex',alignItems:'center',justifyContent:'center',
                  fontSize:12,fontWeight:700,flexShrink:0
                }}>{i+1}</div>
                <div style={{flex:1,fontSize:13.5,color:'var(--gray-900)',lineHeight:1.5,paddingTop:4}}>{s.text}</div>
              </div>
            ))}
          </div>
        ) : null}

        <div style={{marginTop:16,display:'flex',flexDirection:'column',gap:8}}>
          {installEvt ? (
            <button className="btn" onClick={() => { doInstall(); onClose(); }}>
              <Icon.Download style={{width:14,height:14}}/> {c.primary || 'Instalar ahora'}
            </button>
          ) : null}
          {env.kind === 'installed' ? (
            <button className="btn secondary" onClick={onClose}>Entendido</button>
          ) : (
            <button className="btn secondary" onClick={onClose}>Cerrar</button>
          )}
        </div>

        <div style={{marginTop:14,padding:'10px 12px',background:'var(--gray-100)',borderRadius:10,fontSize:11.5,color:'var(--gray-600)',lineHeight:1.5}}>
          💡 Una vez instalada funciona <strong>offline</strong>, abre en su propia ventana sin barras del navegador, y aparece en tu launcher como cualquier otra app.
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { InstallModal });