import React, { useState } from 'react';
import InputMask from "react-input-mask";

function DoctorForm({ onSave, onCancel, PatientDict }) {

  const FormatTelefones = (valor) => {

   const digits = String(valor).replace(/\D/g, '').slice(0, 11);

  
  return digits
    .replace(/(\d)/, '($1')   // 123 -> 123.
    .replace(/(\d{2})(\d)/, '$1) $2' )
    .replace(/(\d)(\d{4})/, '$1 $2')
    .replace(/(\d{4})(\d{4})/, '$1-$2')
  }


  const FormatCPF = (valor) => {
  
  const digits = String(valor).replace(/\D/g, '').slice(0, 11);


  
  return digits
    .replace(/(\d{3})(\d)/, '$1.$2')   // 123 -> 123.
    .replace(/(\d{3})(\d)/, '$1.$2')   // 123.456 -> 123.456.
    .replace(/(\d{3})(\d{1,2})$/, '$1-$2'); // 123.456.789 -> 123.456.789-01
    
  }


  const [formData, setFormData] = useState({
      foto: null,
      nome: PatientDict.nome,
      nomeSocial: PatientDict.nome_social,
      dataNascimento: PatientDict.data_nascimento,
      genero: PatientDict.sexo,
      cpf: PatientDict.cpf,
      profissao: PatientDict.profissao ,
      nomeConjuge: '',
      outroId: '',
      cep: '',
      cidade: PatientDict.cidade,
      estado: PatientDict.estado,
      bairro: PatientDict.bairro,
      rua: PatientDict.logradouro,
      numero: '',
      complemento: '',
      email: PatientDict.email,
      telefone1: PatientDict.celular,
      telefone2: '',
      telefone3: '',
      observacoes: '',
      rg: '',
      documentoTipo: '',
      numeroDocumento: '',
      etniaRaca: '',
      naturalidade: '',
      nacionalidade: '',
      estadoCivil: '',
      
      // INFORMAÇÕES MÉDICAS
      tipoSanguineo: '',
      peso: '',
      altura: '',
      imc: '',
      alergias: '',
      
      // ANEXO
      anexos: null,
    });

  // 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]
    }));
  };

  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
      }

    } else {
      setFormData({ ...formData, [name]: value });
    }

    if (name.includes('cpf')) {
      let cpfFormatado = FormatCPF(value);
      setFormData(prev => ({ ...prev, [name]: cpfFormatado }));
    } else if (name.includes('telefone')) {
      let telefoneFormatado = FormatTelefones(value);
      setFormData(prev => ({ ...prev, [name]: telefoneFormatado }));
    }
  };

  // Função para buscar endereço pelo CEP
  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 = () => {
    if (!formData.nome || !formData.cpf || !formData.genero || !formData.dataNascimento || !formData.email) {
      alert('Por favor, preencha: Nome ,CPF, Gênero, Data de Nascimento e Email.');
      return;
    }

    onSave(
      {
      ...formData,
      endereco: {
        cep: formData.cep,
        cidade: formData.cidade,
        estado: formData.estado,
        bairro: formData.bairro,
        logradouro: formData.rua,
        numero: formData.numero,
        complemento: formData.complemento,
      },
      contato: {
        email: formData.email,
        telefone1: formData.telefone1,
        telefone2: formData.telefone2,
        telefone3: formData.telefone3,
      },
      infoMedicas: {
        tipoSanguineo: formData.tipoSanguineo,
        peso: formData.peso,
        altura: formData.altura,
        imc: formData.imc,
        alergias: formData.alergias,
      }
      }
    );
  };

  return (
      <div className="card p-3 shadow-sm">
      <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 Médico" 
                    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="nomeSocial" value={formData.nomeSocial} 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="dataNascimento" value={formData.dataNascimento} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Gênero: *</label>
              <select className="form-control" name="genero" value={formData.genero} 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' }}>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-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>
              </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="numeroDocumento" value={formData.numeroDocumento} 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' }}>Especialização:</label>
              <select className="form-control" name="profissao" value={formData.profissao} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
                <option value="">Selecione</option>
                <option value="Cardiologia">Clínica médica (clínico geral)</option>
                <option value="Dermatologia">Pediatria</option>
                <option value="Ginecologia">Ginecologia e obstetrícia</option>
                <option value="Pediatria">Cardiologia</option>
                <option value="Ortopedia">Ortopedia e traumatologia</option>
                <option value="Oftalmologia">Oftalmologia</option>
                <option value="Neurologia">Otorrinolaringologia</option>
                <option value="Psiquiatria">Dermatologia</option>
                <option value="Endocrinologia">Neurologia</option>
                <option value="Oncologia">Psiquiatria</option>
                <option value="Oncologia">Endocrinologia</option>
                <option value="Oncologia">Gastroenterologia</option>
                <option value="Oncologia">Urologia</option>    
              </select>
            </div>
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Estado civil:</label>
              <select className="form-control" name="estadoCivil" value={formData.estadoCivil} 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 do esposo(a):</label>
              <input type="text" className="form-control" name="nomeConjuge" value={formData.nomeConjuge} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
            </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 Médico:</label>
              <div>
                <label htmlFor="anexos-input" className="btn btn-secondary" style={{ fontSize: '1.1rem', background: '#9ca3af' }}>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>

      {/* 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="cep" value={formData.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="rua" value={formData.rua} 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="bairro" value={formData.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="cidade" value={formData.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="estado" value={formData.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="numero" value={formData.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="complemento" value={formData.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={formData.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={formData.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={formData.telefone2} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
            </div>
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Celular:</label>
              <input type="text" className="form-control" name="telefone3" value={formData.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>
  //   <div className="card p-3">
  //     <h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>

  //     {/* ------------------ DADOS PESSOAIS ------------------ */}
  //     <h5 className="mb-3">Dados Pessoais</h5>
  //     <div className="row">
  //       <div className="col-md-6 mb-3">
  //         <label>Nome: *</label>
  //         <input type="text" className="form-control" name="nome" value={formData.nome} onChange={handleChange} />
  //       </div>
  //       <div className="col-md-6 mb-3">
  //         <label>Nome social:</label>
  //         <input type="text" className="form-control" name="nomeSocial" value={formData.nomeSocial} onChange={handleChange} />
  //       </div>
  //       <div className="col-md-6 mb-3">
  //         <label>Data de nascimento:</label>
  //         <input type="date" className="form-control" name="dataNascimento" value={formData.dataNascimento} onChange={handleChange} />
  //       </div>
  //       <div className="col-md-6 mb-3">
  //         <label>Gênero: *</label>
  //         <select className="form-control" name="genero" value={formData.genero} onChange={handleChange}>
  //           <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>CPF: *</label>
  //         <input type="text" className="form-control" name="cpf" value={formData.cpf} onChange={ handleChange} />
  //       </div>
  //       <div className="col-md-6 mb-3">
  //         <label>Especialização:</label>
  //         <select
  //           className="form-control"
  //           name="profissao"
  //           value={formData.profissao}
  //           onChange={handleChange}
  //         >
  //           <option value="">Selecione uma especialização</option>
  //           <option value="Cardiologia">Clínica médica (clínico geral)</option>
  //           <option value="Dermatologia">Pediatria</option>
  //           <option value="Ginecologia">Ginecologia e obstetrícia</option>
  //           <option value="Pediatria">Cardiologia</option>
  //           <option value="Ortopedia">Ortopedia e traumatologia</option>
  //           <option value="Oftalmologia">Oftalmologia</option>
  //           <option value="Neurologia">Otorrinolaringologia</option>
  //           <option value="Psiquiatria">Dermatologia</option>
  //           <option value="Endocrinologia">Neurologia</option>
  //           <option value="Oncologia">Psiquiatria</option>
  //           <option value="Oncologia">Endocrinologia</option>
  //           <option value="Oncologia">Gastroenterologia</option>
  //           <option value="Oncologia">Urologia</option>    
  //         </select>
  //       </div>
  //     </div>

  //     {/* ------------------ ENDEREÇO ------------------ */}
  //     <h5>Endereço</h5>
  //     <div className="row">
  //       <div className="col-md-4 mb-3">
  //         <label>CEP:</label>
  //         <input type="text" className="form-control" name="cep" value={formData.cep} onChange={handleChange} onBlur={handleCepBlur} />
  //       </div>
  //       <div className="col-md-8 mb-3">
  //         <label>Rua:</label>
  //         <input type="text" className="form-control" name="rua" value={formData.rua} onChange={handleChange} />
  //       </div>
  //       <div className="col-md-6 mb-3">
  //         <label>Bairro:</label>
  //         <input type="text" className="form-control" name="bairro" value={formData.bairro} onChange={handleChange} />
  //       </div>
  //       <div className="col-md-4 mb-3">
  //         <label>Cidade:</label>
  //         <input type="text" className="form-control" name="cidade" value={formData.cidade} onChange={handleChange} />
  //       </div>
  //       <div className="col-md-2 mb-3">
  //         <label>Estado:</label>
  //         <input type="text" className="form-control" name="estado" value={formData.estado} onChange={handleChange} />
  //       </div>
  //       <div className="col-md-4 mb-3">
  //         <label>Número:</label>
  //         <input type="text" className="form-control" name="numero" value={formData.numero} onChange={handleChange} />
  //       </div>
  //       <div className="col-md-8 mb-3">
  //         <label>Complemento:</label>
  //         <input type="text" className="form-control" name="complemento" value={formData.complemento} onChange={handleChange} />
  //       </div>
  //     </div>

  //     {/* ------------------ CONTATO ------------------ */}
  //     <h5>Contato</h5>
  //     <div className="row">
  //       <div className="col-md-6 mb-3">
  //         <label>E-mail: *</label>
  //         <input type="email" className="form-control" name="email" value={formData.email} onChange={handleChange} />
  //       </div>
  //       <div className="col-md-6 mb-3">
  //         <label>Telefone: *</label>
  //         <input type="text" className="form-control" name="telefone1" value={formData.telefone1} onChange={handleChange} />
  //       </div>
  //       <div className="col-md-6 mb-3">
  //         <label>Telefone 2:</label>
  //         <input type="text" className="form-control" name="telefone2" value={formData.telefone2} onChange={handleChange} />
  //       </div>
  //       <div className="col-md-6 mb-3">
  //         <label>Telefone 3:</label>
  //         <input type="text" className="form-control" name="telefone3" value={formData.telefone3} onChange={handleChange} />
  //       </div>
  //     </div>

  //     {/* ------------------ INFORMAÇÕES ADICIONAIS ------------------ */}
  //     <h5>Informações Adicionais</h5>
  //     <div className="mb-3">
  //       <label>Observações:</label>
  //       <textarea className="form-control" name="observacoes" value={formData.observacoes} onChange={handleChange}></textarea>
  //     </div>

  //     {/* Botões */}
  //     <div className="mt-3">
  //       <button className="btn btn-success me-2" onClick={handleSubmit}>
  //         Salvar Paciente
  //       </button>
  //       <button className="btn btn-light" onClick={onCancel}>
  //         Cancelar
  //       </button>
  //     </div>
  //   </div>
  );
}


export default DoctorForm;