import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { FaUser, FaUserPlus, FaCalendarAlt, FaCalendarCheck } from 'react-icons/fa';
import './style/Inicio.css';
import { useAuth } from '../components/utils/AuthProvider';
import { Link } from 'react-router-dom';

function Inicio() {
  const { authTokens, setAuthTokens } = useAuth();
  const navigate = useNavigate();
  const [pacientes, setPacientes] = useState([]);
  const [agendamentos, setAgendamentos] = useState([]);

  useEffect(() => {

    
      var myHeaders = new Headers();
    myHeaders.append("apikey", "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inl1YW5xZnN3aGJlcmtvZXZ0bWZyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTQ5NTQzNjksImV4cCI6MjA3MDUzMDM2OX0.g8Fm4XAvtX46zifBZnYVH4tVuQkqUH6Ia9CXQj4DztQ");
    myHeaders.append("Content-Type", "application/json");
    
    var raw = JSON.stringify({
       "email": "riseup@popcode.com.br",
       "password": "riseup"
       
    });
    
    var requestOptions = {
       method: 'POST',
       headers: myHeaders,
       body: raw,
      
       redirect: 'follow'
    };
    
    fetch("https://yuanqfswhberkoevtmfr.supabase.co/auth/v1/token?grant_type=password", requestOptions)
       .then(response => response.json())
       .then(result => {setAuthTokens(result); console.log(result)})
       .catch(error => console.log('error', error));
    





    /*const fetchPacientes = async () => {
      try {
        const res = await fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes");
        const data = await res.json();
        console.log(data)
        //setPacientes(data.data);
      } catch (error) {
        console.error("Erro ao buscar pacientes:", error);
      }
    };

    const fetchAgendamentos = async () => {
      return; // <===serve para que nao cause erro
      // try {
      //   const res = await fetch();
      //   const data = await res.json();
      //   setAgendamentos(data.data);
      // } catch (error) {
      //   console.error("Erro ao buscar agendamentos:", error);
      // }
    };

    fetchPacientes();
    fetchAgendamentos();*/
  }, []);

  const totalPacientes = pacientes.length;
  const novosEsseMes = pacientes.filter(p => p.createdAt && new Date(p.createdAt).getMonth() === new Date().getMonth()).length;

  const hoje = new Date();
  const agendamentosDoDia = agendamentos.filter(
    a => a.data && new Date(a.data).getDate() === hoje.getDate()
  );
  const agendamentosHoje = agendamentosDoDia.length;

  return (
    <div className="dashboard-container">
      <div className="dashboard-header">
       
       <h1>Bem-vindo ao MediConnect</h1><br></br>
      
      </div>

      <div className="stats-grid">
        <div className="stat-card">
          <div className="stat-info">
            <span className="stat-label">TOTAL DE PACIENTES</span>
            <span className="stat-value">{totalPacientes}</span>
          </div>
          <div className="stat-icon-wrapper blue"><FaUser className="stat-icon" /></div>
        </div>

        <div className="stat-card">
          <div className="stat-info">
            <span className="stat-label">NOVOS ESTE MÊS</span>
            <span className="stat-value">{novosEsseMes}</span>
          </div>
          <div className="stat-icon-wrapper green"><FaUserPlus className="stat-icon" /></div>
        </div>
        
        <div className="stat-card">
          <div className="stat-info">
            <span className="stat-label">AGENDAMENTOS HOJE</span>
            <span className="stat-value">{agendamentosHoje}</span>
          </div>
          <div className="stat-icon-wrapper purple"><FaCalendarCheck className="stat-icon" /></div>
        </div>
        
        <div className="stat-card">
          <div className="stat-info">
            <span className="stat-label">PENDÊNCIAS</span>
            <span className="stat-value">0</span>
          </div>
          <div className="stat-icon-wrapper orange"><FaCalendarAlt className="stat-icon" /></div>
        </div>
      </div>

      <div className="quick-actions">
        <h2>Ações Rápidas</h2>
        <div className="actions-grid">
          <div className="action-button" onClick={() => navigate('/secretaria/pacientes/cadastro')}>
            <FaUserPlus className="action-icon" />
            <div className="action-info">
              <span className="action-title">Novo Paciente</span>
              <span className="action-desc">Cadastrar um novo paciente</span>
            </div>
          </div>
          <div className="action-button" onClick={() => navigate('/secretaria/pacientes')}>
            <FaUser className="action-icon" />
            <div className="action-info">
              <span className="action-title">Lista de Pacientes</span>
              <span className="action-desc">Ver todos os pacientes</span>
            </div>
          </div>
          <div className="action-button" onClick={() => navigate('/secretaria/agendamento')}>
            <FaCalendarCheck className="action-icon" />
            <div className="action-info">
              <span className="action-title">Agendamentos</span>
              <span className="action-desc">Gerenciar consultas</span>
            </div>
          </div>
        </div>
      </div>

      <div className="appointments-section">
        <h2>Próximos Agendamentos</h2>
        {agendamentosHoje > 0 ? (
          <div>
            {agendamentosDoDia.map(agendamento => (
              <div key={agendamento.id} className="agendamento-item">
                <p>{agendamento.nomePaciente}</p>
                <p>{new Date(agendamento.data).toLocaleTimeString()}</p>
              </div>
            ))}
          </div>
        ) : (
          <div className="no-appointments-content">
            <FaCalendarCheck className="no-appointments-icon" />
            <p>Nenhum agendamento para hoje</p>
            <button className="manage-button" onClick={() => navigate('/secretaria/agendamento')}>
              Gerenciar Agendamentos
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

export default Inicio;