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



function PatientForm({ onSave, onCancel,formData, setFormData,setCurrentPage }) {

   // Estado para controlar modal de feedback
  const [showMessage, setShowMessage] = useState(false);
  const [message, setMessage] = useState('');
  const [messageType, setMessageType] = useState('success'); // 'success' ou 'danger'


  const FormatTelefones = (valor) => {
    const digits = String(valor).replace(/\D/g, '').slice(0, 11);
    return digits
      .replace(/(\d)/, '($1')
      .replace(/(\d{2})(\d)/, '$1) $2' )
      .replace(/(\d)(\d{4})/, '$1 $2')
      .replace(/(\d{4})(\d{4})/, '$1-$2')
  }

  const ReceberRespostaAPIdoCPF = async (cpf) =>{
    var myHeaders = new Headers();
    myHeaders.append("Authorization", "Bearer <token>");
    myHeaders.append("Content-Type", "application/json");

    var raw = JSON.stringify({
      "cpf": cpf
    });

    var requestOptions = {
      method: 'POST',
      headers: myHeaders,
      body: raw,
      redirect: 'follow'
    };

    const response = await fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes/validar-cpf", requestOptions)
    const result = await response.json()
    
    return result.data

  }

  const ValidarCPF = async (cpf) => {
    let aviso 
    let Erro = false

    const resultadoAPI = await ReceberRespostaAPIdoCPF(cpf)

    const valido = resultadoAPI.valido
    const ExisteNoBancoDeDados = resultadoAPI.existe

    if(valido === false){
      aviso = 'CPF inválido'
      Erro = true
    }
    else if(ExisteNoBancoDeDados ===  true){
      aviso = 'O CPF informado já está presente no sistema'
      Erro = true  
    }
    return [Erro,aviso]
  }

  const FormatCPF = (valor) => {
    const digits = String(valor).replace(/\D/g, '').slice(0, 11);
    return digits
      .replace(/(\d{3})(\d)/, '$1.$2')
      .replace(/(\d{3})(\d)/, '$1.$2')
      .replace(/(\d{3})(\d{1,2})$/, '$1-$2');
  }


  // Estado para armazenar a URL da foto do avatar
  const [avatarUrl, setAvatarUrl] = useState(null);

  // Estado para controlar quais seções estão colapsadas
  const [collapsedSections, setCollapsedSections] = useState({
    dadosPessoais: true, // Alterado para true para a seção ficar aberta por padrão
    infoMedicas: false,
    infoConvenio: false,
    endereco: false,
    contato: false,
  });

  // Função para alternar o estado de colapso de uma seção
  const handleToggleCollapse = (section) => {
    setCollapsedSections(prevState => ({
      ...prevState,
      [section]: !prevState[section]
    }));
  };

  // Lógica para calcular o IMC
  useEffect(() => {
    const peso = parseFloat(formData.peso);
    const altura = parseFloat(formData.altura);
    if (peso > 0 && altura > 0) {
      const imcCalculado = peso / (altura * altura);
      setFormData(prev => ({ ...prev, imc: imcCalculado.toFixed(2) }));
    } else {
      setFormData(prev => ({ ...prev, imc: '' }));
    }
  }, [formData.peso, formData.altura]);


  const [enderecoData, setEnderecoData] = useState({})
  useEffect(() => {setEnderecoData(formData.endereco || {}); console.log(enderecoData)}, [formData.endereco])

  const [contato, setContato] = useState({})

  useEffect(() => {setContato(formData.contato || {})}, [formData.contato])


  const handleChange = (e) => {
    const { name, value, type, checked, files } = e.target;

    if (type === 'checkbox') {
      setFormData({ ...formData, [name]: checked });
    } else if (type === 'file') {
      setFormData({ ...formData, [name]: files[0] });

      // Lógica para pré-visualizar a imagem no avatar
      if (name === 'foto' && files[0]) {
        const reader = new FileReader();
        reader.onloadend = () => {
          setAvatarUrl(reader.result);
        };
        reader.readAsDataURL(files[0]);
      } else if (name === 'foto' && !files[0]) {
        setAvatarUrl(null); // Limpa o avatar se nenhum arquivo for selecionado
      }} 
     

    if (name.includes('cpf')) {

      setFormData({...formData, cpf:FormatCPF(value) });

    }else if (name.includes('telefone')) {
      let telefoneFormatado = FormatTelefones(value);
      setContato(prev => ({ ...prev, [name]: telefoneFormatado }));
    }else if (name === 'email') {
    setContato(prev => ({ ...prev, email: value }));
    }else if(name.includes('endereco')) {
      setEnderecoData(prev => ({ ...prev, [name.split('.')[1]]: value }));
    }else{
      console.log(formData, value)
      setFormData({ ...formData, [name]: value });
  }
  };
  
  const handleCepBlur = async () => {
    const cep = formData.cep.replace(/\D/g, '');
    if (cep.length === 8) {
      try {
        const response = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
        const data = await response.json();
        if (!data.erro) {
          setFormData((prev) => ({
            ...prev,
            rua: data.logradouro || '',
            bairro: data.bairro || '',
            cidade: data.localidade || '',
            estado: data.uf || ''
          }));
        } else {
          alert('CEP não encontrado!');
        }
      } catch (error) {
        alert('Erro ao buscar o CEP.');
      }
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!formData.nome || !formData.cpf || !formData.sexo || !formData.data_nascimento){
      console.log(formData)
      setMessage('Por favor, preencha: Nome, CPF, Gênero, Data de Nascimento .');
      setMessageType('danger');
      setShowMessage(true);
      return;
    }

    const CPFinvalido = await ValidarCPF(formData.cpf);
    if(CPFinvalido[0] === true){
       setMessage(CPFinvalido[1]);
      setMessageType('danger');
      setShowMessage(true);      return
    }


   const pacienteSalvo = await onSave({
      ...formData,
      id: 2,
      endereco: {
        cep: enderecoData.cep,
        cidade: enderecoData.cidade,
        estado: enderecoData.estado,
        bairro: enderecoData.bairro,
        logradouro: enderecoData.logradouro,
        numero: enderecoData.numero,
        complemento: enderecoData.complemento,
      },
      contato: {
        email: contato.email,
        telefone1: contato.telefone1,
        telefone2: contato.telefone2,
        telefone3: contato.telefone3,
      },
      infoMedicas: {
        tipoSanguineo: formData.tipoSanguineo,
        peso: formData.peso,
        altura: formData.altura,
        imc: formData.imc,
        alergias: formData.alergias,
      },
      infoConvenio: {
        convenio: formData.convenio,
        plano: formData.plano,
        numeroMatricula: formData.numeroMatricula,
        validadeCarteira: formData.validadeCarteira,
        validadeIndeterminada: formData.validadeIndeterminada,
        pacienteVip: formData.pacienteVip, 
      },

    });
     setMessage('Paciente salvo com sucesso!');
      setMessageType('success');
      setShowMessage(true);
      
  
    const pacienteId = pacienteSalvo.id;

      try{
        if (formData.foto) await uploadFotoPaciente(pacienteId, formData.foto);
        if (formData.anexos) await uploadAnexoPaciente(pacienteId, formData.anexos);
         
        } catch (error) {
        console.error(error);
        alert("Erro ao salvar paciente ou enviar arquivos.");
        }
      };
      const uploadFotoPaciente = async (pacienteId, foto) => {
        const formDataUpload = new FormData();
        formDataUpload.append('foto', foto);

    try {
      const res = await fetch(`https://suaapi.com/pacientes/${pacienteId}/foto`, {
        method: 'POST',
        headers: { 'Authorization': 'Bearer <token>' },
        body: formDataUpload
        });
      if (!res.ok) throw new Error('Erro ao enviar foto');
      alert('Foto enviada com sucesso!');
      } catch (err) {
      console.error(err);
      alert('Falha ao enviar foto');
      }
    };
      const uploadAnexoPaciente = async (pacienteId, anexo) => {
        const formDataUpload = new FormData();
        formDataUpload.append('anexo', anexo);
      try {
      const res = await fetch(`https://suaapi.com/pacientes/${pacienteId}/anexos`, {
        method: 'POST',
        headers: { 'Authorization': 'Bearer <token>' },
        body: formDataUpload
      });
      if (!res.ok) throw new Error('Erro ao enviar anexo');
      alert('Anexo enviado com sucesso!');
    } catch (err) {
      console.error(err, 'deu erro');
     
    }
      
  };

  return (
    <div className="card p-3" style={{ position: 'relative' }}>
      {/* Modal de feedback */}
      {showMessage && (
        <div className="modal-backdrop" style={{ position: 'fixed', top: 0, left: 0, width: '100vw', height: '100vh', background: 'rgba(0,0,0,0.15)', zIndex: 1050 }}></div>
      )}
      {showMessage && (
        <div className="modal d-block" tabIndex="-1" role="dialog" style={{ zIndex: 1100 }}>
          <div className="modal-dialog modal-dialog-centered" role="document">
            <div className="modal-content" style={{ borderRadius: '12px', boxShadow: '0 4px 24px rgba(0,0,0,0.10)' }}>
              <div className="modal-header" style={{ borderBottom: '2px solid #23336f1a' }}>
                <h5 className="modal-title" style={{ fontWeight: 700, color: '#23336f' }}>
                  {messageType === 'danger' ? 'Atenção' : 'Sucesso'}
                </h5>
                <button type="button" className="btn-close" aria-label="Close" onClick={() => setShowMessage(false)}></button>
              </div>
              <div className="modal-body" style={{ fontSize: '1.3rem', color: '#23336f' }}>
                {message}
              </div>
              <div className="modal-footer" style={{ borderTop: '2px solid #23336f1a', justifyContent: 'flex-end' }}>
                <button type="button" className="btn btn-primary" style={{ minWidth: 100 }} onClick={setCurrentPage('table')}>
                  Fechar
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
      <h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>

      {/* DADOS PESSOAIS */}
      <div className="mb-5 p-4 border rounded shadow-sm">
        <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('dadosPessoais')} style={{ fontSize: '1.8rem' }}>
          Dados Pessoais
          <span className="fs-5">
            {collapsedSections.dadosPessoais ? '▲' : '▼'}
          </span>
        </h4>
        <div className={`collapse${collapsedSections.dadosPessoais ? ' show' : ''}`}>
          <div className="row mt-3">
            {/* AVATAR E INPUT DE FOTO */}
            <div className="col-md-6 mb-3 d-flex align-items-center">
              <div className="me-3">
                {avatarUrl ? (
                  <img 
                    src={avatarUrl} 
                    alt="Avatar do Paciente" 
                    style={{ width: '100px', height: '100px', borderRadius: '50%', objectFit: 'cover' }} 
                  />
                ) : (
                  <div 
                    style={{ 
                      width: '100px', 
                      height: '100px', 
                      borderRadius: '50%', 
                      backgroundColor: '#e0e0e0', 
                      display: 'flex', 
                      alignItems: 'center', 
                      justifyContent: 'center',
                      fontSize: '3.5rem',
                      color: '#9e9e9e'
                    }}
                  >
                    &#x2624; 
                  </div>
                )}
              </div>
              <div>
                <label htmlFor="foto-input" className="btn btn-primary" style={{ fontSize: '1rem' }}>Carregar Foto</label>
                <input 
                  type="file" 
                  className="form-control d-none" 
                  name="foto" 
                  id="foto-input" 
                  onChange={handleChange} 
                  accept="image/*"
                />
                {formData.foto && <span className="ms-2" style={{ fontSize: '1rem' }}>{formData.foto.name}</span>}
              </div>
            </div>
            {/* CADASTRO */}
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Nome: *</label>
              <input type="text" className="form-control" name="nome" value={formData.nome} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Nome social:</label>
              <input type="text" className="form-control" name="nome_social" value={formData.nome_social} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Data de nascimento: *</label>
              <input type="date" className="form-control" name="data_nascimento" value={formData.data_nascimento} onChange={handleChange} style={{ fontSize: '1.1rem' }}  min="1900-01-01" max="2025-09-24"s/>
            </div>
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Gênero: *</label>
              <select className="form-control" name="sexo" value={formData.sexo} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
                <option value="">Selecione</option>
                <option value="Masculino">Masculino</option>
                <option value="Feminino">Feminino</option>
                <option value="Outro">Outro</option>
              </select>
            </div>
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>CPF: *</label>
              <input type="text" className="form-control" name="cpf" value={formData.cpf} onChange={ handleChange} style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>RG:</label>
              <input type="text" className="form-control" name="rg" value={formData.rg} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Outros documentos:</label>
              <select className="form-control" name="documentoTipo" value={formData.documentoTipo} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
                <option value="">Selecione</option>
                <option value="CNH">CNH</option>
                <option value="Passaporte">Passaporte</option>
                <option value="carteira de trabalho">Carteira de Trabalho</option>
              </select>
            </div>
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Número do documento:</label>
              <input type="text" className="form-control" name="numero_documento" value={formData.numero_documento} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Etnia e Raça:</label>
              <select className="form-control" name="etniaRaca" value={formData.etniaRaca} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
                <option value="">Selecione</option>
                <option value="Branca">Branca</option>
                <option value="Preta">Preta</option>
                <option value="Parda">Parda</option>
                <option value="Amarela">Amarela</option>
                <option value="Indígena">Indígena</option>
              </select>
            </div>
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Naturalidade:</label>
              <input type="text" className="form-control" name="naturalidade" value={formData.naturalidade} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Nacionalidade:</label>
              <input type="text" className="form-control" name="nacionalidade" value={formData.nacionalidade} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Profissão:</label>
              <input type="text" className="form-control" name="profissao" value={formData.profissao} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Estado civil:</label>
              <select className="form-control" name="estado_civil" value={formData.estado_civil} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
                <option value="">Selecione</option>
                <option value="Solteiro">Solteiro(a)</option>
                <option value="Casado">Casado(a)</option>
                <option value="Divorciado">Divorciado(a)</option>
                <option value="Viuvo">Viúvo(a)</option>
              </select>
            </div>
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Nome da Mãe:</label>
              <input type="text" className="form-control" name="nomeMae" value={formData.nome_mae} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Profissão da mãe:</label>
              <input type="text" className="form-control" name="profissaoMae" value={formData.profissao_mae} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Nome do Pai:</label>
              <input type="text" className="form-control" name="nomePai" value={formData.nome_pai} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Profissão do pai:</label>
              <input type="text" className="form-control" name="profissaoPai" value={formData.profissao_pai} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Nome do responsável:</label>
              <input type="text" className="form-control" name="nomeResponsavel" value={formData.nome_responsavel} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>CPF do responsável:</label>
              <input type="text" className="form-control" name="cpfResponsavel" value={formData.cpf_responsavel} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Nome do esposo(a):</label>
              <input type="text" className="form-control" name="nomeConjuge" value={formData.nome_conjuge} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Identificador de outro sistema:</label>
              <input type="text" className="form-control" name="outroId" value={formData.outroId} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-12 mb-3">
              <div className="form-check">
                <input className="form-check-input" type="checkbox" name="rnConvenio" checked={formData.rnConvenio} onChange={handleChange} id="rnConvenio" style={{ transform: 'scale(1.2)' }} />
                <label className="form-check-label ms-2" htmlFor="rnConvenio" style={{ fontSize: '1.1rem' }}>
                  RN na Guia do convênio
                </label>
              </div>
            </div>

            {/* CAMPOS MOVIDOS */}
            <div className="col-md-12 mb-3 mt-3">
              <label style={{ fontSize: '1.1rem' }}>Observações:</label>
              <textarea className="form-control" name="observacoes" value={formData.observacoes} onChange={handleChange} style={{ fontSize: '1.1rem' }}></textarea>
            </div>
            <div className="col-md-12 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Anexos do Paciente:</label>
              <div>
                <label htmlFor="anexos-input" className="btn btn-secondary" style={{ fontSize: '1.1rem' }}>Escolher arquivo</label>
                <input type="file" className="form-control d-none" name="anexos" id="anexos-input" onChange={handleChange} />
                <span className="ms-2" style={{ fontSize: '1.1rem' }}>{formData.anexos ? formData.anexos.name : 'Nenhum arquivo escolhido'}</span>
              </div>
            </div>

          </div>
        </div>
      </div>
      
      {/* INFORMAÇÕES MÉDICAS */}
      <div className="mb-5 p-4 border rounded shadow-sm">
        <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('infoMedicas')} style={{ fontSize: '1.8rem' }}>
          Informações Médicas
          <span className="fs-5">
            {collapsedSections.infoMedicas ? '▲' : '▼'}
          </span>
        </h4>
        <div className={`collapse${collapsedSections.infoMedicas ? ' show' : ''}`}>
          <div className="row mt-3">
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Tipo Sanguíneo:</label>
              <select className="form-control" name="tipoSanguineo" value={formData.tipoSanguineo} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
                <option value="">Selecione</option>
                <option value="A+">A+</option>
                <option value="A-">A-</option>
                <option value="B+">B+</option>
                <option value="B-">B-</option>
                <option value="AB+">AB+</option>
                <option value="AB-">AB-</option>
                <option value="O+">O+</option>
                <option value="O-">O-</option>
              </select>
            </div>
            <div className="col-md-2 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Peso (kg):</label>
              <input type="number" step="0.1" className="form-control" name="peso" value={formData.peso} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-2 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Altura (m):</label>
              <input type="number" step="0.01" className="form-control" name="altura" value={formData.altura} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-2 mb-3">
              <label style={{ fontSize: '1.1rem' }}>IMC (kg/m²):</label>
              <input type="text" className="form-control" name="imc" value={formData.imc} readOnly disabled style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-12 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Alergias:</label>
              <textarea className="form-control" name="alergias" value={formData.alergias} onChange={handleChange} placeholder="Ex: AAS, Dipirona, etc" style={{ fontSize: '1.1rem' }}></textarea>
            </div>
          </div>
        </div>
      </div>

      {/* INFORMAÇÕES DE CONVÊNIO */}
      <div className="mb-5 p-4 border rounded shadow-sm">
        <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('infoConvenio')} style={{ fontSize: '1.8rem' }}>
          Informações de convênio
          <span className="fs-5">
            {collapsedSections.infoConvenio ? '▲' : '▼'}
          </span>
        </h4>
        <div className={`collapse${collapsedSections.infoConvenio ? ' show' : ''}`}>
          <div className="row mt-3">
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Convênio:</label>
              <select className="form-control" name="convenio" value={formData.convenio} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
                <option value="">Selecione</option>
                <option value="Amil">Amil</option>
                <option value="Bradesco Saúde">Bradesco Saúde</option>
                <option value="SulAmérica">SulAmérica</option>
                <option value="Unimed">Unimed</option>
              </select>
            </div>
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Plano:</label>
              <input type="text" className="form-control" name="plano" value={formData.plano} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Nº de matrícula:</label>
              <input type="text" className="form-control" name="numeroMatricula" value={formData.numeroMatricula} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-4 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Validade da Carteira:</label>
              <input type="date" className="form-control" name="validadeCarteira" value={formData.validadeCarteira} onChange={handleChange} disabled={formData.validadeIndeterminada} style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-2 d-flex align-items-end mb-3">
              <div className="form-check">
                <input className="form-check-input" type="checkbox" name="validadeIndeterminada" checked={formData.validadeIndeterminada} onChange={handleChange} id="validadeIndeterminada" style={{ transform: 'scale(1.2)' }} />
                <label className="form-check-label ms-2" htmlFor="validadeIndeterminada" style={{ fontSize: '1.1rem' }}>
                  Validade indeterminada
                </label>
              </div>
            </div>
            {/* PACIENTE VIP */}
            <div className="col-md-12 mb-3 mt-3">
              <div className="form-check">
                <input className="form-check-input" type="checkbox" name="pacienteVip" checked={formData.pacienteVip} onChange={handleChange} id="pacienteVip" style={{ transform: 'scale(1.2)' }} />
                <label className="form-check-label ms-2" htmlFor="pacienteVip" style={{ fontSize: '1.1rem' }}>
                  Paciente VIP
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* ENDEREÇO */}
      <div className="mb-5 p-4 border rounded shadow-sm">
        <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('endereco')} style={{ fontSize: '1.8rem' }}>
          Endereço
          <span className="fs-5">
            {collapsedSections.endereco ? '▲' : '▼'}
          </span>
        </h4>
        <div className={`collapse${collapsedSections.endereco ? ' show' : ''}`}>
          <div className="row mt-3">
            <div className="col-md-4 mb-3">
              <label style={{ fontSize: '1.1rem' }}>CEP:</label>
              <input type="text" className="form-control" name="endereco.cep" value={enderecoData.cep} onChange={handleChange} onBlur={handleCepBlur} style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-8 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Rua:</label>
              <input type="text" className="form-control" name="endereco.logradouro" value={enderecoData.logradouro} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Bairro:</label>
              <input type="text" className="form-control" name="endereco.bairro" value={enderecoData.bairro} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-4 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Cidade:</label>
              <input type="text" className="form-control" name="endereco.cidade" value={enderecoData.cidade} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-2 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Estado:</label>
              <input type="text" className="form-control" name="endereco.estado" value={enderecoData.estado} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-4 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Número:</label>
              <input type="text" className="form-control" name="endereco.numero" value={enderecoData.numero} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-8 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Complemento:</label>
              <input type="text" className="form-control" name="endereco.complemento" value={enderecoData.complemento} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
            </div>
          </div>
        </div>
      </div>

      {/* CONTATO */}
      <div className="mb-5 p-4 border rounded shadow-sm">
        <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('contato')} style={{ fontSize: '1.8rem' }}>
          Contato
          <span className="fs-5">
            {collapsedSections.contato ? '▲' : '▼'}
          </span>
        </h4>
        <div className={`collapse${collapsedSections.contato ? ' show' : ''}`}>
          <div className="row mt-3">
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Email:</label>
              <input type="email" className="form-control" name="email" value={contato.email || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Telefone:</label>
              <input type="text" className="form-control" name="telefone1" value={contato.telefone1 || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Telefone 2:</label>
              <input type="text" className="form-control" name="telefone2" value={contato.telefone2 || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Telefone 3:</label>
              <input type="text" className="form-control" name="telefone3" value={contato.telefone3 || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
            </div>
          </div>
        </div>
      </div>
      
      {/* Botões */}
      <div className="mt-3 text-center">
        <button className="btn btn-success me-3" onClick={handleSubmit} style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
          Salvar Paciente
        </button>
        <button className="btn btn-light" onClick={onCancel} style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
          Cancelar
        </button>
      </div>
    </div>
  );
}

export default PatientForm;