import React, { useState, useEffect } from 'react';
import { LocalNotifications } from '@capacitor/local-notifications';

export default function App() {
  const [permissaoConcedida, setPermissaoConcedida] = useState(false);
  const [segundosAgendamento, setSegundosAgendamento] = useState(5);
  const [statusMensagem, setStatusMensagem] = useState('Aguardando ação...');
  const [pendentesCount, setPendentesCount] = useState(0);

  // Ao carregar o componente, verifica as permissões atuais
  useEffect(() => {
    checarPermissoesIniciais();
    atualizarContadorPendentes();
  }, []);

  const checarPermissoesIniciais = async () => {
    try {
      const status = await LocalNotifications.checkPermissions();
      if (status.display === 'granted') {
        setPermissaoConcedida(true);
        setStatusMensagem('Permissão já está ativa no sistema.');
      } else {
        setPermissaoConcedida(false);
        setStatusMensagem('Permissão ainda não foi concedida.');
      }
    } catch (error) {
      console.error('Erro ao verificar permissão:', error);
      setStatusMensagem('Erro ao consultar suporte a notificações.');
    }
  };

  const solicitarPermissao = async () => {
    try {
      const resultado = await LocalNotifications.requestPermissions();
      if (resultado.display === 'granted') {
        setPermissaoConcedida(true);
        setStatusMensagem('Permissão concedida pelo usuário com sucesso!');
      } else {
        setPermissaoConcedida(false);
        setStatusMensagem('Usuário recusou a permissão de notificação.');
      }
    } catch (error) {
      console.error('Erro ao solicitar permissão:', error);
      setStatusMensagem('Falha ao abrir pop-up de permissão.');
    }
  };

  const dispararImediato = async () => {
    if (!permissaoConcedida) {
      alert('Por favor, ative a permissão antes de enviar alertas!');
      return;
    }

    try {
      await LocalNotifications.schedule({
        notifications: [
          {
            title: 'Haruy Sushi 🍱',
            body: 'Seu pedido #5821 acabou de ser despachado!',
            id: 101,
            sound: null,
            extra: { tipo: 'entrega' }
          }
        ]
      });
      setStatusMensagem('Notificação imediata enviada!');
      atualizarContadorPendentes();
    } catch (err) {
      console.error(err);
      setStatusMensagem('Erro ao disparar notificação imediata.');
    }
  };

  const agendarNotificacao = async () => {
    if (!permissaoConcedida) {
      alert('Ative a permissão primeiro!');
      return;
    }

    const tempo = parseInt(segundosAgendamento) || 5;
    const dataAlvo = new Date(Date.now() + tempo * 1000);

    try {
      await LocalNotifications.schedule({
        notifications: [
          {
            title: 'Lembrete do App ⏰',
            body: `Seu timer de ${tempo} segundos expirou!`,
            id: Date.now(), // ID dinâmico único baseado no timestamp
            schedule: { at: dataAlvo }
          }
        ]
      });
      setStatusMensagem(`Notificação programada para daqui a ${tempo} segundos (${dataAlvo.toLocaleTimeString()})`);
      atualizarContadorPendentes();
    } catch (err) {
      console.error(err);
      setStatusMensagem('Erro ao agendar notificação.');
    }
  };

  const atualizarContadorPendentes = async () => {
    try {
      const lista = await LocalNotifications.getPending();
      setPendentesCount(lista.notifications.length);
    } catch (err) {
      console.error(err);
    }
  };

  const cancelarTodas = async () => {
    try {
      const pendentes = await LocalNotifications.getPending();
      if (pendentes.notifications.length > 0) {
        await LocalNotifications.cancel(pendentes);
        setStatusMensagem('Todas as notificações agendadas foram canceladas.');
        atualizarContadorPendentes();
      } else {
        setStatusMensagem('Nenhuma notificação pendente para cancelar.');
      }
    } catch (err) {
      console.error(err);
    }
  };

  return (
    

      

        
        {/* Cabeçalho */}
        

          
Push & Local Alerts
          
Aula 15 - Programação para Dispositivos Móveis II
        

        {/* Status de Permissão */}
        

          

            
Status da Permissão
            
{permissaoConcedida ? 'Concedida ✅' : 'Bloqueada / Não Pedida ❌'}
          
          {!permissaoConcedida && (
            
              Ativar
            
          )}
        

        {/* Painel de Ações */}
        

          
            🚀 Disparar Notificação Imediata
          

          

            
              Agendar no Futuro (Segundos)
            
            

               setSegundosAgendamento(e.target.value)}
                className="w-24 px-3 py-2 border rounded-lg text-center font-bold text-slate-800 focus:outline-none focus:ring-2 focus:ring-slate-900"
              />
              
                ⏱️ Agendar Alerta
              
            
          
        

        {/* Notificações Pendentes e Cancelamento */}
        

          Agendadas pendentes: {pendentesCount}
          
            Cancelar Todas
          
        

        {/* Console de Log */}
        

          > Status: 
          {statusMensagem}
        

      
    
  );
}