import React from 'react';
// ✏️ REMOVIDO: A importação do mock foi removida.
// import AgendamentosMes from './DadosConsultasMock'; 
import CardConsulta from './CardConsulta';
import "./style/styleTabelas/tabelasemana.css";

// ✨ MODIFICADO: Recebe 'agendamentos' como prop
const TabelaAgendamentoSemana = ({ agendamentos }) => {

  // ✨ MODIFICADO: Usa os dados da prop, com fallback para um objeto vazio para evitar erros.
  // Continua usando a 'semana1' como no seu código original.
  const agendamentoSemana = agendamentos?.semana1 || {};

  // Pega os agendamentos de cada dia, com fallback para um array vazio.
  const agendamentosDeSegunda = agendamentoSemana.segunda || [];
  const agendamentosDeTerca = agendamentoSemana.terca || [];
  const agendamentosDeQuarta = agendamentoSemana.quarta || [];
  const agendamentosDeQuinta = agendamentoSemana.quinta || [];
  const agendamentosDeSexta = agendamentoSemana.sexta || [];

  // ✨ LÓGICA MELHORADA: Calcula o número de linhas com base no dia com mais horários.
  // Isso evita que a tabela quebre se um dia tiver mais horários que outro após a busca.
  const numLinhas = Math.max(
    agendamentosDeSegunda.length,
    agendamentosDeTerca.length,
    agendamentosDeQuarta.length,
    agendamentosDeQuinta.length,
    agendamentosDeSexta.length
  );

  return (
    <div>
      <table className='tabelasemanal'>
        <thead>
          <tr>
            <th>Horário</th>
            <th>Segunda</th>
            <th>Terça</th>
            <th>Quarta</th>
            <th>Quinta</th>
            <th>Sexta</th>
          </tr>
        </thead>
        <tbody>
          {/* ✨ MODIFICADO: Itera com base no número de linhas calculado. */}
          {Array.from({ length: numLinhas }).map((_, index) => {
            // Pega a consulta de cada dia para a linha atual (índice)
            const consultaSeg = agendamentosDeSegunda[index];
            const consultaTer = agendamentosDeTerca[index];
            const consultaQua = agendamentosDeQuarta[index];
            const consultaQui = agendamentosDeQuinta[index];
            const consultaSex = agendamentosDeSexta[index];

            // Pega o horário da primeira consulta que existir na linha
            const horarioDaLinha = consultaSeg?.horario || consultaTer?.horario || consultaQua?.horario || consultaQui?.horario || consultaSex?.horario;

            return (
              <tr key={index}>
                <td>{horarioDaLinha}</td>
                {/* Renderiza o Card apenas se a consulta existir para aquele dia/horário */}
                <td>{consultaSeg && <CardConsulta DadosConsulta={consultaSeg} />}</td>
                <td>{consultaTer && <CardConsulta DadosConsulta={consultaTer} />}</td>
                <td>{consultaQua && <CardConsulta DadosConsulta={consultaQua} />}</td>
                <td>{consultaQui && <CardConsulta DadosConsulta={consultaQui} />}</td>
                <td>{consultaSex && <CardConsulta DadosConsulta={consultaSex} />}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

export default TabelaAgendamentoSemana;