import React, { useEffect, useState } from "react";
import avatarPlaceholder from '../assets/images/avatar_placeholder.png';

const Details = ({ patientID, setCurrentPage }) => {
  const [paciente, setPaciente] = useState({});

  useEffect(() => {
    if (!patientID) return;

    fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}`)
      .then(res => res.json())
      .then(data => setPaciente(data))
      .catch(err => console.error("Erro ao buscar médico:", err));
  }, [patientID]);

  //if (!paciente) return <p style={{ textAlign: "center" }}>Carregando...</p>;

  return (
    <>
    <div className="card p-3 shadow-sm">
      <h3 className="mb-3 text-center">MediConnect</h3>
      <hr />
      <div className="d-flex justify-content-between align-items-center mb-3">
        <button className="btn btn-success me-2" onClick={() => setCurrentPage("table")}>
          <i className="bi bi-chevron-left"></i> Voltar
        </button>
        <div className="d-flex mb-3">
          <div className="avatar avatar-xl">
            <img src={avatarPlaceholder} alt="" />
          </div>
          <div className="media-body ms-3 font-extrabold">
            <span>{paciente.nome || "Nome Completo"}</span>
            <p>{paciente.cpf || "CPF"}</p>
          </div>
        </div>
        <button className="btn btn-light" onClick={() => setCurrentPage("edit-page-doctor")}>
          <i className="bi bi-pencil-square"></i> Editar
        </button>
      </div>
    </div>
      
      {/* ------------------ DADOS PESSOAIS ------------------ */}
      <div className="card p-3 shadow-sm">
      <h5 className="mb-3">Dados Pessoais</h5>
      <hr />
      <div className="row">
        <div className="col-md-6 mb-3">
          <label className="font-extrabold">Nome:</label>
          <p>{paciente.nome || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label className="font-extrabold">Nome social:</label>
          <p>{paciente.nomeSocial || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label className="font-extrabold">Data de nascimento:</label>
          <p>{paciente.dataNascimento || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label className="font-extrabold">Gênero:</label>
          <p>{paciente.sexo || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label className="font-extrabold">CPF:</label>
          <p>{paciente.cpf || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label className="font-extrabold">CRM:</label>
          <p>{paciente.rg || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label className="font-extrabold">Outro documento:</label>
          <p>{paciente.documento || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label className="font-extrabold">Número do documento:</label>
          <p>{paciente.numeroDocumento || "-"}</p>
        </div>

        <div className="col-md-6 mb-3">
          <label className="font-extrabold">Etnia e Raça:</label>
          <p>{paciente.etniaRaca || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label className="font-extrabold">Nacionalidade:</label>
          <p>{paciente.etniaRaca || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label className="font-extrabold">Naturalidade:</label>
          <p>{paciente.etniaRaca || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label className="font-extrabold">Especialização:</label>
          <p>{paciente.profissao || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label className="font-extrabold">Estado civil:</label>
          <p>{paciente.estadoCivil || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label className="font-extrabold">Nome do esposo(a):</label>
          <p>{paciente.nomeConjuge || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label className="font-extrabold">Identificador de outro sistema:</label>
          <p>{paciente.outroId || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label className="font-extrabold">Observações:</label>
          <p>{paciente.observacoes || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label className="font-extrabold">Anexos do Médico:</label>
          <p>{ "-"}</p>
        </div>
      </div>
      </div>

      {/* ------------------ ENDEREÇO ------------------ */}
      <div className="card p-3 shadow-sm">
      <h5>Endereço</h5>
      <hr />
      <div className="row">
        <div className="col-md-4 mb-3">
          <label className="font-extrabold">CEP:</label>
          <p>{paciente.cep || "-"}</p>
        </div>
        <div className="col-md-8 mb-3">
          <label className="font-extrabold">Rua:</label>
          <p>{paciente.rua || "-"}</p>
        </div>
        <div className="col-md-4 mb-3">
          <label className="font-extrabold">Bairro:</label>
          <p>{paciente.bairro || "-"}</p>
        </div>
        <div className="col-md-4 mb-3">
          <label className="font-extrabold">Cidade:</label>
          <p>{paciente.cidade || "-"}</p>
        </div>
        <div className="col-md-2 mb-3">
          <label className="font-extrabold">Estado:</label>
          <p>{paciente.estado || "-"}</p>
        </div>
        <div className="col-md-4 mb-3">
          <label className="font-extrabold">Número:</label>
          <p>{paciente.numero || "-"}</p>
        </div>
        <div className="col-md-8 mb-3">
          <label className="font-extrabold">Complemento:</label>
          <p>{paciente.complemento || "-"}</p>
        </div>
      </div>
      </div>

      {/* ------------------ CONTATO ------------------ */}
      <div className="card p-3 shadow-sm">
      <h5>Contato</h5>
      <hr />
      <div className="row">
        <div className="col-md-6 mb-3">
          <label className="font-extrabold">Email:</label>
          <p>{paciente.email || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label className="font-extrabold">Telefone:</label>
          <p>{paciente.telefone1 || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label className="font-extrabold">Telefone 2:</label>
          <p>{paciente.telefone2 || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label className="font-extrabold">Celular:</label>
          <p>{paciente.telefone3 || "-"}</p>
        </div>
      </div>
      </div>
    </>
  );
};

export default Details;