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

// Pide permiso de notificaciones y suscribe el telefono. Si ya esta concedido, se suscribe solo.
export default function AvisosPush({ contexto }: { contexto: string }) {
  const [estado, setEstado] = useState<NotificationPermission | 'unsupported'>('default');

  useEffect(() => {
    if (!pushSoportado()) {
      setEstado('unsupported');
      return;
    }
    setEstado(Notification.permission);
    if (Notification.permission === 'granted') suscribirPush(supabase, contexto);
  }, [contexto]);

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

  if (estado === 'denied') {
    return (
      <div className="rounded-xl bg-amber-50 px-3 py-2 text-xs text-amber-700">
        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="flex w-full items-center gap-2 rounded-xl border-2 border-marca bg-marca-claro px-3 py-2.5 text-left text-sm font-bold text-marca-oscuro active:scale-[0.99]"
    >
      <Icono nombre="campana" className="h-5 w-5 shrink-0" />
      <span className="flex-1">Activa los avisos para enterarte de nuevas entregas (aunque cierres la app).</span>
    </button>
  );
}
