import React, { useEffect, useState, useRef } from 'react'; import './ProfileView.css'; function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick }) { const [firstName, setFirstName] = useState(currentUser?.first_name || ''); const [lastName, setLastName] = useState(currentUser?.last_name || ''); const [avatarUrl, setAvatarUrl] = useState(currentUser?.avatar_url || ''); const [searchHistory, setSearchHistory] = useState([]); const [uploading, setUploading] = useState(false); const fileInputRef = useRef(null); // Config modal state const [showConfig, setShowConfig] = useState(false); const [configFirstName, setConfigFirstName] = useState(''); const [configLastName, setConfigLastName] = useState(''); const [configEmail, setConfigEmail] = useState(''); const [configCity, setConfigCity] = useState(''); const [configAddress, setConfigAddress] = useState(''); const [configSaving, setConfigSaving] = useState(false); const [configFeedback, setConfigFeedback] = useState(null); useEffect(() => { setFirstName(currentUser?.first_name || ''); setLastName(currentUser?.last_name || ''); setAvatarUrl(currentUser?.avatar_url || ''); loadSearchHistory(); }, [currentUser?.id]); async function loadSearchHistory() { try { const res = await fetch('/api/search-history', { credentials: 'include' }); if (res.ok) { const data = await res.json(); setSearchHistory(data); } } catch (err) { console.error('Error loading search history:', err); } } function openConfig() { setConfigFirstName(currentUser?.first_name || ''); setConfigLastName(currentUser?.last_name || ''); setConfigEmail(currentUser?.email || ''); setConfigCity(currentUser?.city || ''); setConfigAddress(currentUser?.address || ''); setConfigFeedback(null); setShowConfig(true); } async function handleConfigSave(e) { e?.preventDefault(); setConfigSaving(true); setConfigFeedback(null); try { const res = await fetch('/api/users/me', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ first_name: configFirstName.trim() || null, last_name: configLastName.trim() || null, email: configEmail.trim() || null, city: configCity.trim() || null, address: configAddress.trim() || null, }), }); if (!res.ok) { const err = await res.json().catch(() => ({})); throw new Error(err.error || `Error al guardar (HTTP ${res.status})`); } const updated = await res.json(); onProfileSaved?.(updated); setFirstName(updated.first_name || ''); setLastName(updated.last_name || ''); setConfigFeedback({ type: 'ok', text: 'Perfil guardado.' }); setTimeout(() => setShowConfig(false), 1200); } catch (err) { setConfigFeedback({ type: 'err', text: err.message || 'Error al guardar' }); } finally { setConfigSaving(false); } } async function handleAvatarUpload(e) { const file = e.target.files?.[0]; if (!file) return; setUploading(true); try { const reader = new FileReader(); reader.onload = async () => { const base64 = reader.result; setAvatarUrl(base64); try { const res = await fetch('/api/users/me', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ avatar_url: base64 }), }); if (res.ok) { const updated = await res.json(); onProfileSaved?.(updated); } } catch (err) { console.error('Error saving avatar:', err); } setUploading(false); }; reader.readAsDataURL(file); } catch (err) { console.error('Error processing image:', err); setUploading(false); } } async function handleDeleteSearch(id) { try { const res = await fetch(`/api/search-history/${id}`, { method: 'DELETE', credentials: 'include', }); if (res.ok) { setSearchHistory(prev => prev.filter(item => item.id !== id)); } } catch (err) { console.error('Error deleting search:', err); } } const displayName = [firstName, lastName].filter(Boolean).join(' ') || currentUser?.username || 'Usuario'; return (
{/* Avatar Section */}
fileInputRef.current?.click()} > {avatarUrl ? ( Avatar ) : ( )}
{uploading &&

Subiendo foto...

}
{/* Read-only Name Section */}

Nombre

{firstName || '—'}

Apellidos

{lastName || '—'}

{/* Menu Section */}
Mis Direcciones
{searchHistory.length > 0 && (

Tus búsquedas recientes:

{searchHistory.map((item) => (
{item.address}
))}
)} {currentUser?.is_admin && ( )}
{/* Config Modal */} {showConfig && (
setShowConfig(false)}>
e.stopPropagation()}>

Configuración

setConfigFirstName(e.target.value)} placeholder="Tu nombre" disabled={configSaving} />
setConfigLastName(e.target.value)} placeholder="Tus apellidos" disabled={configSaving} />
setConfigEmail(e.target.value)} placeholder="tu@email.com" disabled={configSaving} />
setConfigCity(e.target.value)} placeholder="Tu ciudad" disabled={configSaving} />
setConfigAddress(e.target.value)} placeholder="Calle Mayor 1, Madrid" disabled={configSaving} />
{configFeedback && (

{configFeedback.text}

)}
)}
); } export default ProfileView;