import { useEffect, useState } from 'react'
import { Share, ExternalLink, X } from 'lucide-react'

function isIos() {
  return /iPad|iPhone|iPod/.test(navigator.userAgent) ||
    // iPadOS 13+ reports as 'MacIntel' but has touch support, unlike a real Mac
    (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
}

function isStandalone() {
  return window.matchMedia('(display-mode: standalone)').matches ||
    (window.navigator as unknown as { standalone?: boolean }).standalone === true
}

// Safari's UA also matches "Safari", so this checks for the other iOS
// browsers/in-app webviews that spoof it — none of them can add to the
// home screen; only Safari itself can.
function isNonSafariIosBrowser() {
  return /CriOS|FxiOS|EdgiOS|OPiOS|mercury|GSA|DuckDuckGo|Instagram|FBAN|FBAV|Line\//.test(navigator.userAgent)
}

/**
 * iOS has no `beforeinstallprompt` API — Safari never fires it, so the
 * portal's Install button (?install=1) does nothing there. This shows the
 * manual steps instead: Share -> Add to Home Screen in Safari, or a prompt
 * to switch to Safari first if the page was opened in another browser/app.
 */
export default function IosInstallHint() {
  const [mode, setMode] = useState<'safari' | 'other' | null>(null)

  useEffect(() => {
    if (!isIos() || isStandalone()) return
    if (!new URLSearchParams(window.location.search).has('install')) return
    setMode(isNonSafariIosBrowser() ? 'other' : 'safari')
  }, [])

  if (!mode) return null

  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 9999,
      background: 'rgba(15,15,32,0.55)',
      display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
      padding: '0 16px 24px',
    }}>
      <div style={{
        position: 'relative',
        width: '100%', maxWidth: '360px',
        background: 'var(--card-bg)', borderRadius: 'var(--radius)',
        border: '1px solid var(--card-border)', boxShadow: 'var(--shadow-md)',
        padding: '20px', textAlign: 'center',
      }}>
        <button
          onClick={() => setMode(null)}
          aria-label="Dismiss"
          style={{
            position: 'absolute', top: '10px', right: '10px',
            background: 'none', border: 'none', color: 'var(--text-mid)',
            padding: '4px', cursor: 'pointer', lineHeight: 0,
          }}
        >
          <X size={16} strokeWidth={1.75} />
        </button>

        <div style={{
          width: '44px', height: '44px', margin: '0 auto 12px',
          borderRadius: '50%', background: 'var(--gold)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          {mode === 'safari'
            ? <Share size={22} strokeWidth={1.75} color="var(--navy)" />
            : <ExternalLink size={22} strokeWidth={1.75} color="var(--navy)" />}
        </div>

        {mode === 'safari' ? (
          <p style={{ fontSize: '14px', color: 'var(--text-dark)', lineHeight: 1.5, margin: 0 }}>
            To install this app, tap the <strong>Share</strong> icon in Safari's
            toolbar, then choose <strong>Add to Home Screen</strong>.
          </p>
        ) : (
          <p style={{ fontSize: '14px', color: 'var(--text-dark)', lineHeight: 1.5, margin: 0 }}>
            iOS only allows installing apps from <strong>Safari</strong>. Open this
            page in Safari, then tap Share → <strong>Add to Home Screen</strong>.
          </p>
        )}
      </div>
    </div>
  )
}