//inicio.jsx
//Nesta página falta: ajustar caminho do CSS

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


function Inicio() {

  const navigate = useNavigate();
  const { getAuthorizationHeader, isAuthenticated } = useAuth();
  const [pacientes, setPacientes] = useState([]);
  const [medicos, setMedicos] = useState([]);
  const [agendamentos, setAgendamentos] = useState([]);
  const [agendamentosComPacientes, setAgendamentosComPacientes] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchPacientes = async () => {
      try {
        const authHeader = getAuthorizationHeader();
        
        const myHeaders = new Headers();
        myHeaders.append("apikey", API_KEY);
        myHeaders.append("Authorization", authHeader);

        const requestOptions = {
          method: 'GET',
          headers: myHeaders,
          redirect: 'follow'
        };

        const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients", requestOptions);
        
        if (response.ok) {
          const data = await response.json();
          setPacientes(data);
          console.log('Pacientes carregados:', data.length);
        } else {
          console.error(' Erro ao buscar pacientes:', response.status);
        }
      } catch (error) {
        console.error(' Erro ao buscar pacientes:', error);
      }
    };

    const fetchMedicos = async () => {
      try {
        const authHeader = getAuthorizationHeader();
        
        const myHeaders = new Headers();
        myHeaders.append("apikey", API_KEY);
        myHeaders.append("Authorization", authHeader);

        const requestOptions = {
          method: 'GET',
          headers: myHeaders,
          redirect: 'follow'
        };

        const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors", requestOptions);
        
        if (response.ok) {
          const data = await response.json();
          setMedicos(data);
          console.log(' Médicos carregados:', data.length);
        } else {
          console.error('Erro ao buscar médicos:', response.status);
        }
      } catch (error) {
        console.error(' Erro ao buscar médicos:', error);
      }
    };

    const fetchAgendamentos = async () => {
      try {
        const authHeader = getAuthorizationHeader();
        
        const myHeaders = new Headers();
        myHeaders.append("apikey", API_KEY);
        myHeaders.append("Authorization", authHeader);

        const requestOptions = {
          method: 'GET',
          headers: myHeaders,
          redirect: 'follow'
        };

        const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOptions);
        
        if (response.ok) {
          const data = await response.json();
          setAgendamentos(data);
          console.log(' Agendamentos carregados:', data.length);
        } else {
          console.error(' Erro ao buscar agendamentos:', response.status);
        }
      } catch (error) {
        console.error(' Erro ao buscar agendamentos:', error);
      } finally {
        setLoading(false);
      }
    };

    if (isAuthenticated) {
      fetchPacientes();
      fetchMedicos();
      fetchAgendamentos();
    }
  }, [isAuthenticated, getAuthorizationHeader]);


  useEffect(() => {
    if (agendamentos.length > 0 && pacientes.length > 0 && medicos.length > 0) {
      const agendamentosComNomes = agendamentos.map(agendamento => {
        const paciente = pacientes.find(p => p.id === agendamento.patient_id);
        const medico = medicos.find(m => m.id === agendamento.doctor_id);
        return {
          ...agendamento,
          nomePaciente: paciente?.full_name || 'Paciente não encontrado',
          nomeMedico: medico?.full_name || 'Médico não encontrado',
          especialidadeMedico: medico?.specialty || ''
        };
      });
      setAgendamentosComPacientes(agendamentosComNomes);
    }
  }, [agendamentos, pacientes, medicos]);

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

  const hoje = new Date();
  hoje.setHours(0, 0, 0, 0);
  
  const agendamentosDoDia = agendamentosComPacientes.filter(a => {
    if (!a.scheduled_at) return false;
    const dataAgendamento = new Date(a.scheduled_at);
    dataAgendamento.setHours(0, 0, 0, 0);
    return dataAgendamento.getTime() === hoje.getTime();
  });
  
  const agendamentosHoje = agendamentosDoDia.length;
  

  const pendencias = agendamentos.filter(a => a.status === 'pending' || a.status === 'scheduled').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">{loading ? '...' : pendencias}</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('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('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>
        {loading ? (
          <div className="no-appointments-content">
            <p>Carregando agendamentos...</p>
          </div>
        ) : agendamentosHoje > 0 ? (
          <div className="agendamentos-list">
            {agendamentosDoDia.slice(0, 5).map(agendamento => (
              <div key={agendamento.id} className="agendamento-item">
                <div className="agendamento-info">
                  <div className="agendamento-time-date">
                    <p className="agendamento-hora">
                      {new Date(agendamento.scheduled_at).toLocaleTimeString('pt-BR', { 
                        hour: '2-digit', 
                        minute: '2-digit' 
                      })}
                    </p>
                    <p className="agendamento-data">
                      {new Date(agendamento.scheduled_at).toLocaleDateString('pt-BR', {
                        day: '2-digit',
                        month: '2-digit',
                        year: 'numeric'
                      })}
                    </p>
                  </div>
                  <div className="agendamento-detalhes">
                    <p className="agendamento-paciente">
                      <strong>Paciente:</strong> {agendamento.nomePaciente}
                    </p>
                    <p className="agendamento-medico">
                      <strong>Dr(a):</strong> {agendamento.nomeMedico}
                      {agendamento.especialidadeMedico && ` - ${agendamento.especialidadeMedico}`}
                    </p>
                  </div>
                  <span className={`agendamento-status status-${agendamento.status}`}>
                    {agendamento.status === 'scheduled' ? 'Agendado' : 
                     agendamento.status === 'completed' ? 'Concluído' : 
                     agendamento.status === 'pending' ? 'Pendente' : 
                     agendamento.status === 'cancelled' ? 'Cancelado' : 
                     agendamento.status === 'requested' ? '' : agendamento.status}
                  </span>
                </div>
              </div>
            ))}
            {agendamentosHoje > 5 && (
              <button className="view-all-button" onClick={() => navigate('/secretaria/agendamento')}>
                Ver todos os {agendamentosHoje} agendamentos
              </button>
            )}
          </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;