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

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

  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 paciente:", err));
  }, [patientID]);

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

  return (
    <>
    <div className="card p-3">
      <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-lg">
            <img src={avatarPlaceholder} alt="" />
          </div>
          <div className="media-body ms-3">
            <span>{paciente.nome || "Nome Completo"}</span>
            <p>{paciente.cpf || "CPF"}</p>
          </div>
        </div>
        <button className="btn btn-light" onClick={() => setCurrentPage("edit-page-paciente")}>
          <i className="bi bi-pencil-square"></i> Editar
        </button>
      </div>
    </div>
      
      {/* ------------------ DADOS PESSOAIS ------------------ */}
      <div className="card p-3">
      <h5 className="mb-3">Dados Pessoais</h5>
      <hr />
      <div className="row">
        <div className="col-md-6 mb-3">
          <label>Nome:</label>
          <p>{paciente.nome || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label>Nome social:</label>
          <p>{paciente.nomeSocial || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label>Data de nascimento:</label>
          <p>{paciente.dataNascimento || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label>Gênero:</label>
          <p>{paciente.sexo || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label>Outro documento:</label>
          <p>{paciente.documento || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label>Número do documento:</label>
          <p>{paciente.numeroDocumento || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label>CPF:</label>
          <p>{paciente.cpf || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label>Profissão:</label>
          <p>{paciente.profissao || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label>Nome da Mãe:</label>
          <p>{paciente.nomeMae || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label>Profissão da mãe:</label>
          <p>{paciente.profissaoMae || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label>Nome do Pai:</label>
          <p>{paciente.nomePai || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label>Profissão do pai:</label>
          <p>{paciente.profissaoPai || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label>Nome do responsável:</label>
          <p>{paciente.nomeResponsavel || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label>CPF do responsável:</label>
          <p>{paciente.cpfResponsavel || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label>Nome do esposo(a):</label>
          <p>{paciente.nomeConjuge || "-"}</p>
        </div>
        <div className="col-md-6 mb-3">
          <label>Identificador de outro sistema:</label>
          <p>{paciente.outroId || "-"}</p>
        </div>
      </div>
      </div>

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

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

      {/* ------------------ INFORMAÇÕES ADICIONAIS ------------------ */}
      <div className="card p-3">
      <h5>Informações Adicionais</h5>
      <hr />
      <div className="mb-3">
        <label>Observações:</label>
        <p>{paciente.observacoes || "-"}</p>
      </div>
      </div>

     {/* Dados pessoais
      <div className="" style={styles.section}>
        <h3  style={styles.sectionTitle}>Dados Pessoais</h3>
        <div style={styles.grid}>
          <div style={styles.item}><strong>Nome Completo:</strong> {paciente.nomeCompleto}</div>
          <div style={styles.item}><strong>CPF:</strong> {paciente.cpf}</div>
          <div style={styles.item}><strong>Idade:</strong> {paciente.idade}</div>
          <div style={styles.item}><strong>Data de Nascimento:</strong> {paciente.dataNascimento}</div>
          <div style={styles.item}><strong>Sexo:</strong> {paciente.sexo}</div>
          <div style={styles.item}><strong>Estado Civil:</strong> {paciente.estadoCivil}</div>
          <div style={styles.item}><strong>Profissão:</strong> {paciente.profissao}</div>
          <div style={styles.item}><strong>Nacionalidade:</strong> {paciente.nacionalidade}</div>
          <div style={styles.item}><strong>Naturalidade:</strong> {paciente.naturalidade}</div>
          <div style={styles.item}><strong>Etnia:</strong> {paciente.etnia}</div>
        </div>
      </div>
      */}
      {/* Contato */}
      {/* <div style={styles.section}>
        <h3 style={styles.sectionTitle}>Informações de Contato</h3>
        <div style={styles.grid}>
          <div style={styles.item}><strong>E-mail:</strong> {paciente.email}</div>
          <div style={styles.item}><strong>Celular:</strong> {paciente.celular}</div>
          <div style={styles.item}><strong>Telefone 1:</strong> {paciente.telefone1 || "-"}</div>
          <div style={styles.item}><strong>Telefone 2:</strong> {paciente.telefone2 || "-"}</div>
        </div>
      </div>  */}

    </>
  );
};

// const styles = {
//   container: {
//     width: "80%",
//     maxWidth: "800px",
//     margin: "30px auto",
//     background: "#fff",
//     borderRadius: "10px",
//     padding: "20px",
//     boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
//     fontFamily: "Arial, sans-serif",
//     position: "relative"
//   },
//   backBtn: {
//     background: "#ddd",
//     border: "none",
//     borderRadius: "6px",
//     padding: "8px 14px",
//     cursor: "pointer",
//     marginBottom: "15px"
//   },
//   header: {
//     textAlign: "center",
//     marginBottom: "20px",
//     position: "relative"
//   },
//   avatar: {
//     width: "80px",
//     height: "80px",
//     borderRadius: "50%",
//     background: "#ddd",
//     display: "block",
//     margin: "0 auto"
//   },
//   nome: {
//     margin: "10px 0 5px"
//   },
//   vip: {
//     color: "#f7b500",
//     fontWeight: "bold",
//     marginLeft: "5px"
//   },
//   cpf: {
//     margin: "5px 0",
//     color: "#555"
//   },
//   editBtn: {
//     background: "#0d6efd",
//     color: "white",
//     padding: "8px 14px",
//     border: "none",
//     borderRadius: "6px",
//     cursor: "pointer",
//     position: "absolute",
//     right: "20px",
//     top: "20px"
//   },
//   section: {
//     marginBottom: "20px",
//     border: "1px solid #e0e0e0",
//     borderRadius: "8px",
//     padding: "15px"
//   },
//   sectionTitle: {
//     marginTop: 0,
//     borderBottom: "1px solid #ddd",
//     paddingBottom: "8px",
//     fontSize: "18px"
//   },
//   grid: {
//     display: "grid",
//     gridTemplateColumns: "1fr 1fr",
//     gap: "10px 20px",
//     marginTop: "10px"
//   },
//   item: {
//     fontSize: "14px"
//   }
// };

export default Details;