riseup-squad23/src/pages/ProfilePage.jsx

// src/pages/ProfilePage.jsx
import React, { useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
// import { useAuth } from '../components/utils/AuthProvider'; // <-- NOVO: Se você puder importar isso.

// --- SIMULAÇÃO DE DADOS DE USUÁRIO ---
// COMO NÃO PODEMOS IMPORTAR O useAuth SEM MEXER EM OUTROS ARQUIVOS, VAMOS USAR ESTA SIMULAÇÃO:
const simulatedUserData = {
    // ESTA SIMULAÇÃO DEVERIA SER SUBTITUÍDA PELO SEU CONTEXTO DE AUTENTICAÇÃO REAL.
    // O EMAIL REALMENTE LOGADO VEM DO CONTEXTO DE AUTENTICAÇÃO (useAuth)
    email: 'admin@squad23.com', 
    role: 'Administrador' // Vamos forçar um valor para fins de visualização
};

const ProfilePage = () => {
  const location = useLocation();
  const navigate = useNavigate();
  // const { user } = useAuth(); // Descomente esta linha e comente o bloco simulatedUserData se puder usar o useAuth!

  // --- Lógica de Cargo (AGORA CORRIGIDA PARA PEGAR DA URL SE O CONTEXTO FALHAR) ---
  const getRoleFromPath = () => {
    const path = location.pathname;
    if (path.includes('/admin')) return 'Administrador';
    if (path.includes('/secretaria')) return 'Secretária';
    if (path.includes('/medico')) return 'Médico';
    if (path.includes('/financeiro')) return 'Financeiro';
    return 'Usuário Padrão';
  };
  
  // Use a simulação ou o dado real:
  const userRole = simulatedUserData.role || getRoleFromPath();
  const userEmail = simulatedUserData.email || 'email.nao.encontrado@mediconnect.com';
  
  // --- Estados do Componente ---

  // Se o nome do usuário vier do contexto de autenticação, use-o aqui
  const [userName, setUserName] = useState('Admin Padrão'); 
  const [isEditingName, setIsEditingName] = useState(false);

  // --- Funções de Interação ---

  const handleNameChange = (e) => {
    if (e.key === 'Enter') {
      setIsEditingName(false);
    }
  };

  const handleClose = () => {
    navigate(-1); // Volta para a página anterior
  };

  return (
    <div style={styles.overlay}>
      <div style={styles.modalContainer}>
        
        {/* Botão de Fechar (X) */}
        <button onClick={handleClose} style={styles.closeButton} aria-label="Fechar Perfil">
          &times;
        </button>

        {/* 1. Área da Foto de Perfil (Quadrada) */}
        <div style={styles.profilePictureContainer}>
          <div style={styles.profilePicturePlaceholder}></div>
        </div>

        <div style={styles.infoContainer}>

          {/* 2. Nome do Usuário com Edição */}
          <div style={styles.nameSection}>
            {isEditingName ? (
              <input
                type="text"
                value={userName}
                onChange={(e) => setUserName(e.target.value)}
                onBlur={() => setIsEditingName(false)}
                onKeyPress={handleNameChange}
                autoFocus
                style={styles.nameInput}
              />
            ) : (
              <h2 style={styles.userName}>{userName}</h2>
            )}
            
            <button 
              onClick={() => setIsEditingName(!isEditingName)} 
              style={styles.editButton}
              aria-label="Editar Nome"
            >
              <span role="img" aria-label="lapis">✏️</span> 
            </button>
          </div>

          {/* 3. Email (AGORA EXIBE O VALOR SIMULADO/CORRIGIDO) */}
          <p style={styles.emailText}>Email: <strong>{userEmail}</strong></p>

          {/* 4. Cargo (AGORA EXIBE O VALOR SIMULADO/CORRIGIDO) */}
          <p style={styles.roleText}>Cargo: <strong>{userRole}</strong></p>
        </div>
      </div>
    </div>
  );
};

// Estilos Atualizados para Aumentar o Tamanho do Modal
const styles = {
    overlay: {
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: 'rgba(0, 0, 0, 0.5)', 
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        zIndex: 1100, 
    },
    modalContainer: {
        position: 'relative', 
        padding: '50px 70px', // Aumentado o padding
        backgroundColor: 'white',
        borderRadius: '15px',
        boxShadow: '0 8px 30px rgba(0, 0, 0, 0.3)',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        minWidth: '400px', 
        width: '60%', // Aumentando a largura para cobrir mais a tela
        maxWidth: '500px', // Limite máximo para não ficar gigante em telas grandes
        height: 'auto',
    },
    closeButton: {
        position: 'absolute',
        top: '15px',
        right: '20px',
        background: 'none',
        border: 'none',
        fontSize: '30px',
        cursor: 'pointer',
        color: '#666',
        lineHeight: '1', 
    },
    // ... (Os estilos de profilePictureContainer, infoContainer, etc., permanecem iguais)
    profilePictureContainer: {
        width: '120px',
        height: '120px',
        borderRadius: '15px', 
        overflow: 'hidden',
        boxShadow: '0 4px 10px rgba(0, 0, 0, 0.15)',
        marginBottom: '20px',
    },
    profilePicturePlaceholder: {
        width: '100%',
        height: '100%',
        backgroundColor: '#A9A9A9', 
        backgroundImage: 'url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%23FFFFFF" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm-45.7 48C79.8 304 0 383.8 0 482.3c0 16.7 13.5 30.2 30.2 30.2h387.6c16.7 0 30.2-13.5 30.2-30.2 0-98.5-79.8-178.3-178.3-178.3h-45.7z"/></svg>\')',
        backgroundSize: '80%',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center',
    },
    infoContainer: {
        textAlign: 'center',
        maxWidth: '400px',
        width: '100%',
    },
    nameSection: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        marginBottom: '10px',
    },
    userName: {
        margin: '0 5px 0 0',
        fontSize: '1.8rem',
        color: '#333',
    },
    nameInput: {
        fontSize: '1.8rem',
        padding: '5px',
        border: '1px solid #ccc',
        borderRadius: '5px',
        textAlign: 'center',
        marginRight: '5px',
    },
    editButton: {
        background: 'none',
        border: 'none',
        cursor: 'pointer',
        fontSize: '1.2rem',
        marginLeft: '5px',
    },
    emailText: {
        fontSize: '1rem',
        color: '#666',
        margin: '5px 0',
    },
    roleText: {
        fontSize: '1.1rem',
        color: '#333',
        marginTop: '15px',
        paddingTop: '10px',
        borderTop: '1px solid #eee',
    }
};

export default ProfilePage;