import { useEffect, useState } from 'react'
import { track } from '@/lib/telemetry/client'
import { Box, Paper, Group, Text, ActionIcon } from '@mantine/core'
import { DownloadIcon, XIcon } from '@phosphor-icons/react'
import { Trans, useLingui } from '@lingui/react/macro'
import { useAuth } from '@/contexts/auth-context'
import { useIsMobile } from '@/hooks/use-is-mobile'

const ABOVE_MOBILE_NAV_OFFSET = 'calc(4.5rem + env(safe-area-inset-bottom, 0px))'

export function IOSInstallPrompt() {
  const { t } = useLingui()
  const { user } = useAuth()
  const isMobile = useIsMobile()
  const [show, setShow] = useState(false)
  const [platform, setPlatform] = useState<'ios' | 'android' | null>(null)

  useEffect(() => {
    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent)
    const isAndroid = /Android/.test(navigator.userAgent)

    const isInStandaloneMode =
      window.matchMedia('(display-mode: standalone)').matches ||
      ('standalone' in window.navigator && (window.navigator as any).standalone)

    const hasBeenDismissed = localStorage.getItem('pwa-install-prompt-dismissed') === 'true'

    if ((isIOS || isAndroid) && !isInStandaloneMode && !hasBeenDismissed) {
      setPlatform(isIOS ? 'ios' : 'android')
      const timer = setTimeout(() => {
        setShow(true)
        track('pwa_ios_prompt_shown')
      }, 3000)
      return () => clearTimeout(timer)
    }
  }, [])

  const handleDismiss = () => {
    localStorage.setItem('pwa-install-prompt-dismissed', 'true')
    track('pwa_ios_prompt_dismissed')
    setShow(false)
  }

  if (!show || !platform) return null

  const instructions = platform === 'ios'
    ? t`Tap Share → Add to Home Screen`
    : t`Tap Menu (⋮) → Add to Home screen`

  const aboveBottomNav = Boolean(user) && isMobile
  const bottomStyle = aboveBottomNav
    ? { bottom: ABOVE_MOBILE_NAV_OFFSET, paddingBottom: '8px' }
    : { bottom: 0, paddingBottom: 'calc(8px + env(safe-area-inset-bottom, 0px))' }

  return (
    <Box style={{ position: 'fixed', left: 0, right: 0, zIndex: 1000, padding: '8px', ...bottomStyle }}>
      <Paper shadow="lg" p="sm" style={{ background: 'var(--mantine-color-blue-9)', color: 'white' }}>
        <Group justify="space-between" wrap="nowrap">
          <Group gap="xs" wrap="nowrap" style={{ flex: 1 }}>
            <DownloadIcon size={20} style={{ flexShrink: 0 }} />
            <Box style={{ flex: 1, minWidth: 0 }}>
              <Text size="sm" fw={500} style={{ lineHeight: 1.3 }}>
                <Trans>Add FLXN to your home screen for a smoother experience</Trans>
              </Text>
              <Text size="xs" opacity={0.9} style={{ lineHeight: 1.2 }}>
                {instructions}
              </Text>
            </Box>
          </Group>
          <ActionIcon variant="subtle" color="white" onClick={handleDismiss} aria-label={t`Dismiss`}>
            <XIcon size={18} />
          </ActionIcon>
        </Group>
      </Paper>
    </Box>
  )
}