import React, { useEffect, useState } from "react";

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 style={styles.container}>
      {/* Botão voltar */}
      <button style={styles.backBtn} onClick={() => setCurrentPage("tabela")}>
        ⬅ Voltar
      </button>

      {/* Cabeçalho */}
      <div style={styles.header}>
        <img
          src="https://via.placeholder.com/80"
          alt="Foto do paciente"
          style={styles.avatar}
        />
        <h2 style={styles.nome}>
          {paciente.nomeCompleto}
        </h2>
        <p style={styles.cpf}>CPF: {paciente.cpf}</p>
        <button style={styles.editBtn}>Editar</button>
      </div>

      {/* Dados pessoais */}
      <div 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>
    </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;