import { useEffect, useState } from 'react';
import { activarPush, suscribirPush, pushSoportado } from '@gustito/shared';
import { Icono } from '@gustito/shared/iconos';
import { supabase } from '../lib/supabase';

function esIOS(): boolean {
  const ua = navigator.userAgent || '';
  // iPhone/iPad (iPadOS se hace pasar por Mac con pantalla tactil).
  return /iphone|ipad|ipod/i.test(ua) || (/Macintosh/.test(ua) && navigator.maxTouchPoints > 1);
}
function esInstalada(): boolean {
  return (
    window.matchMedia('(display-mode: standalone)').matches ||
    (navigator as unknown as { standalone?: boolean }).standalone === true
  );
}

// Pide permiso de notificaciones y suscribe al encargado. Si ya esta concedido, se
// suscribe solo. En iPhone el push SOLO funciona con la pagina instalada en la
// pantalla de inicio (Apple): si esta en Safari sin instalar, se explica como hacerlo.
export default function AvisosPush({ contexto }: { contexto: string }) {
  const [estado, setEstado] = useState<NotificationPermission | 'unsupported'>('default');
  const [iosInstalar, setIosInstalar] = useState(false);
  const [oculto, setOculto] = useState(false);

  useEffect(() => {
    // iPhone en Safari (sin instalar): hay que agregar a inicio para recibir avisos.
    if (esIOS() && !esInstalada()) {
      try {
        setOculto(localStorage.getItem('gx_ios_avisos_ok') === '1');
      } catch {
        /* ignore */
      }
      setIosInstalar(true);
      return;
    }
    if (!pushSoportado()) {
      setEstado('unsupported');
      return;
    }
    setEstado(Notification.permission);
    if (Notification.permission === 'granted') suscribirPush(supabase, contexto);
  }, [contexto]);

  if (iosInstalar) {
    if (oculto) return null;
    return (
      <div className="fixed inset-x-3 top-3 z-40 mx-auto max-w-md rounded-xl bg-dorado px-3 py-2.5 text-sm font-bold text-noche shadow-glow">
        <div className="flex items-start gap-2">
          <span className="text-lg leading-none">📲</span>
          <p className="flex-1">
            En iPhone, para recibir avisos: toca <b>Compartir</b> (el cuadrito con la flecha ↑) y luego{' '}
            <b>Agregar a inicio</b>. Abre la app desde ahí y activa los avisos.
          </p>
          <button
            onClick={() => {
              setOculto(true);
              try {
                localStorage.setItem('gx_ios_avisos_ok', '1');
              } catch {
                /* ignore */
              }
            }}
            className="shrink-0 text-lg leading-none text-noche/60"
            aria-label="Cerrar"
          >
            ×
          </button>
        </div>
      </div>
    );
  }

  if (estado === 'unsupported' || estado === 'granted') return null;

  if (estado === 'denied') {
    return (
      <div className="fixed inset-x-3 top-3 z-40 mx-auto max-w-md rounded-xl bg-amber-500/15 px-3 py-2 text-xs font-semibold text-amber-300 ring-1 ring-amber-500/30">
        Los avisos están bloqueados. Actívalos en los ajustes del navegador para este sitio.
      </div>
    );
  }

  return (
    <button
      onClick={async () => setEstado(await activarPush(supabase, contexto))}
      className="fixed inset-x-3 top-3 z-40 mx-auto flex max-w-md items-center gap-2 rounded-xl bg-dorado px-3 py-2.5 text-left text-sm font-bold text-noche shadow-glow active:scale-[0.99]"
    >
      <Icono nombre="campana" className="h-5 w-5 shrink-0" />
      <span className="flex-1">Activa los avisos para enterarte al instante de los pedidos nuevos.</span>
      <span className="text-xs opacity-70">Activar</span>
    </button>
  );
}
