import { useEffect, useState } from 'react'
import { deliveryMode } from '../config/server'

// Shown only in plain-HTTP browser mode (http://<LAN IP>), where the page can't
// work offline after a reload and can't be installed as a real PWA.
//
// The APK is served by the venue's own server (scripts/build-apk.mjs bundles the
// release APK into the web build), so the banner appears only when that file is
// actually there. VITE_APP_DOWNLOAD_URL overrides the location if ever needed.
const DOWNLOAD_URL = import.meta.env.VITE_APP_DOWNLOAD_URL || '/downloads/xenia-waiter.apk'
const DISMISS_KEY = 'install-banner-dismissed-until'
const DISMISS_DAYS = 7

function isDismissed() {
  try {
    return Number(localStorage.getItem(DISMISS_KEY) || 0) > Date.now()
  } catch {
    return false
  }
}

export default function InstallAppBanner() {
  const eligible = deliveryMode() === 'plain-web' && !isDismissed()
  const [available, setAvailable] = useState(false)
  const [hidden, setHidden] = useState(false)

  useEffect(() => {
    if (!eligible) return
    fetch(DOWNLOAD_URL, { method: 'HEAD' })
      .then(r => setAvailable(r.ok && !(r.headers.get('content-type') || '').includes('text/html')))
      .catch(() => {})
  }, [eligible])

  if (!eligible || !available || hidden) return null

  function dismiss() {
    try {
      localStorage.setItem(DISMISS_KEY, String(Date.now() + DISMISS_DAYS * 86_400_000))
    } catch {
      // storage unavailable — banner just reappears next load
    }
    setHidden(true)
  }

  return (
    <div style={{
      position: 'fixed',
      bottom: 80,
      left: 12,
      right: 12,
      zIndex: 9998,
      background: 'var(--bg2)',
      border: '1px solid var(--accent)',
      borderRadius: 16,
      padding: '12px 14px',
      display: 'flex',
      alignItems: 'center',
      gap: 12,
      boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
    }}>
      <span style={{ flex: 1, fontSize: 13, color: 'var(--text)', lineHeight: 1.35 }}>
        Για γρηγορότερη και πιο σταθερή λειτουργία, εγκαταστήστε την εφαρμογή.
      </span>
      <a
        href={DOWNLOAD_URL}
        download
        style={{
          background: 'var(--accent)',
          color: '#0f172a',
          borderRadius: 10,
          padding: '8px 14px',
          fontSize: 14,
          fontWeight: 700,
          textDecoration: 'none',
          whiteSpace: 'nowrap',
        }}
      >
        Εγκατάσταση
      </a>
      <button
        onClick={dismiss}
        aria-label="Κλείσιμο"
        style={{
          background: 'none',
          border: 'none',
          color: 'var(--muted)',
          fontSize: 20,
          lineHeight: 1,
          padding: 4,
          cursor: 'pointer',
        }}
      >
        ×
      </button>
    </div>
  )
}