// Primeiro acesso ao Manejo de Pasto: explica o uso da localização ANTES do alerta do sistema.
// Um único caminho (Continuar) — a escolha de permitir ou não acontece no alerta nativo.
function GpsIntroIlustracao() {
  return (
    <svg viewBox="0 0 300 170" width="100%" style={{ display: 'block' }} aria-hidden="true">
      <rect x="0" y="0" width="300" height="170" rx="16" fill="#eef1ea"></rect>
      <g stroke="#fff" strokeWidth="3" strokeLinejoin="round">
        <path d="M18 22 L118 16 L126 78 L22 86 Z" fill="#cfdcc4"></path>
        <path d="M126 16 L206 20 L212 70 L134 78 Z" fill="#bccfae"></path>
        <path d="M214 22 L282 18 L284 96 L220 92 Z" fill="#d9e2cf"></path>
        <path d="M22 94 L128 86 L134 152 L26 154 Z" fill="#c4d5b7"></path>
        <path d="M136 86 L214 78 L222 150 L142 152 Z" fill="#d3dec8"></path>
        <path d="M222 100 L284 104 L282 152 L230 152 Z" fill="#b6caa6"></path>
      </g>
      <path d="M0 128 C60 118 90 140 150 126 S250 104 300 116" fill="none" stroke="#a7c3d3" strokeWidth="3" strokeLinecap="round"></path>
      <circle cx="172" cy="114" r="26" fill="#2f7cd6" fillOpacity="0.14"></circle>
      <circle cx="172" cy="114" r="8" fill="#2f7cd6" stroke="#fff" strokeWidth="3"></circle>
    </svg>
  )
}

function GpsIntro({ onContinuar }) {
  return (
    <window.MPhone logo footer={<window.MButton onClick={onContinuar}>Continuar</window.MButton>}>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 28, paddingBottom: 12 }}>
        <div style={{ padding: '0 6px' }}><GpsIntroIlustracao /></div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, padding: '0 4px' }}>
          <span style={{ fontSize: 24, fontWeight: 'var(--font-weight-bold)', color: 'var(--color-grayish-dark)', lineHeight: 1.2 }}>Sua localização no campo</span>
          <span style={{ fontSize: 16, color: 'var(--color-grayish)', lineHeight: 1.5, textWrap: 'pretty' }}>O app usa a localização do aparelho para mostrar onde você está no mapa da fazenda e quais módulos estão perto de você. Sua posição fica só neste aparelho.</span>
        </div>
      </div>
    </window.MPhone>
  )
}

// Alerta nativo de permissão (simulado) — iOS ou Android. Resultado: 'ok' | 'aproximada' | 'negada'.
function GpsAlertaSistema({ plataforma = 'android', onResultado }) {
  const [precisa, setPrecisa] = React.useState(true)
  const ok = () => onResultado(precisa ? 'ok' : 'aproximada')
  const veu = { position: 'absolute', inset: 0, zIndex: 80, background: 'rgba(0,0,0,0.42)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }
  if (plataforma === 'ios') {
    const btn = (txt, fn, bold) => <button onClick={fn} style={{ minHeight: 44, border: 'none', borderTop: '0.5px solid rgba(60,60,67,0.3)', background: 'transparent', cursor: 'pointer', fontFamily: '-apple-system, system-ui, sans-serif', fontSize: 17, fontWeight: bold ? 600 : 400, color: '#007aff' }}>{txt}</button>
    return (
      <div style={veu}>
        <div style={{ width: 270, borderRadius: 14, background: 'rgba(242,242,247,0.97)', overflow: 'hidden', display: 'flex', flexDirection: 'column', fontFamily: '-apple-system, system-ui, sans-serif' }}>
          <div style={{ padding: '18px 16px 14px', display: 'flex', flexDirection: 'column', gap: 6, textAlign: 'center' }}>
            <span style={{ fontSize: 17, fontWeight: 600, color: '#000', lineHeight: 1.3 }}>Permitir que "Fazenda Guanabara" use sua localização?</span>
            <span style={{ fontSize: 13, color: '#000', lineHeight: 1.35 }}>Usada para mostrar onde você está no mapa da fazenda e os módulos perto de você.</span>
          </div>
          <div style={{ margin: '0 16px 12px', borderRadius: 10, overflow: 'hidden', position: 'relative' }}>
            <GpsIntroIlustracao />
            <button onClick={() => setPrecisa(!precisa)} style={{ position: 'absolute', top: 8, left: 8, display: 'flex', alignItems: 'center', gap: 4, padding: '4px 9px', border: 'none', borderRadius: 99, background: 'rgba(255,255,255,0.92)', cursor: 'pointer', fontFamily: 'inherit', fontSize: 12, fontWeight: 600, color: precisa ? '#007aff' : '#8e8e93' }}>
              <span style={{ width: 6, height: 6, borderRadius: 99, background: precisa ? '#007aff' : '#8e8e93' }}></span>{precisa ? 'Precisa: Ativada' : 'Precisa: Desativada'}
            </button>
          </div>
          {btn('Permitir uma vez', ok)}
          {btn('Permitir durante o uso do app', ok, true)}
          {btn('Não permitir', () => onResultado('negada'))}
        </div>
      </div>
    )
  }
  const opc = (on, txt, fn) => (
    <button onClick={fn} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, padding: 0, border: 'none', background: 'transparent', cursor: 'pointer', fontFamily: 'Roboto, system-ui, sans-serif' }}>
      <span style={{ width: 84, height: 84, borderRadius: 99, overflow: 'hidden', border: on ? '3px solid #3f6b3d' : '3px solid transparent', display: 'flex' }}>
        <svg viewBox="0 0 84 84" width="100%"><rect width="84" height="84" fill="#e3e9dc"></rect><path d="M0 52 C20 46 40 60 84 44" stroke="#a7c3d3" strokeWidth="3" fill="none"></path>{txt === 'Precisa' ? <circle cx="42" cy="40" r="6" fill="#2f7cd6" stroke="#fff" strokeWidth="2.5"></circle> : <circle cx="42" cy="40" r="26" fill="#2f7cd6" fillOpacity="0.25"></circle>}</svg>
      </span>
      <span style={{ fontSize: 14, color: '#1c1b1f', fontWeight: on ? 600 : 400 }}>{txt}</span>
    </button>
  )
  const abtn = (txt, fn) => <button onClick={fn} style={{ minHeight: 44, border: 'none', borderRadius: 99, background: '#e4ebdd', cursor: 'pointer', fontFamily: 'Roboto, system-ui, sans-serif', fontSize: 14, fontWeight: 500, color: '#1c3a1b' }}>{txt}</button>
  return (
    <div style={veu}>
      <div style={{ width: '100%', borderRadius: 28, background: '#f6f8f2', padding: '22px 20px 18px', display: 'flex', flexDirection: 'column', gap: 18, fontFamily: 'Roboto, system-ui, sans-serif' }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12, textAlign: 'center' }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="#3f6b3d"><path d="M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z"></path></svg>
          <span style={{ fontSize: 20, color: '#1c1b1f', lineHeight: 1.3 }}>Permitir que <b>Fazenda Guanabara</b> acesse a localização deste dispositivo?</span>
        </div>
        <div style={{ display: 'flex', gap: 12 }}>{opc(precisa, 'Precisa', () => setPrecisa(true))}{opc(!precisa, 'Aproximada', () => setPrecisa(false))}</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {abtn('Durante o uso do app', ok)}
          {abtn('Apenas esta vez', ok)}
          {abtn('Não permitir', () => onResultado('negada'))}
        </div>
      </div>
    </div>
  )
}

Object.assign(window, { PastGpsIntro: GpsIntro, PastGpsAlerta: GpsAlertaSistema })