// frontend/src/pages/DetalleOrquidea.jsx
import { useState, useEffect } from ‘react’;
import { useParams } from ‘react-router-dom’;
import Loading from ‘../components/ui/Loading’;
import Button from ‘../components/ui/Button’;
import api from ‘../services/api’;
const DetalleOrquidea = () => {
const { id } = useParams();
const [orquidea, setOrquidea] = useState(null);
const [loading, setLoading] = useState(true);
const [cantidad, setCantidad] = useState(1);
const [tabActiva, setTabActiva] = useState(‘descripcion’);
useEffect(() => {
cargarDetalle();
}, [id]);
const cargarDetalle = async () => {
try {
setLoading(true);
const response = await api.get(`/orquideas/${id}`);
setOrquidea(response.data);
} catch (error) {
console.error(‘Error cargando detalle:’, error);
} finally {
setLoading(false);
}
};
if (loading) return <Loading mensaje=”Cargando detalles…” />;
if (!orquidea) return <div>Orquídea no encontrada</div>;
return (
<main>
{/* Encabezado con imagen principal */}
<section style={{
backgroundColor: ‘#1B4332’,
color: ‘#FAF7F5’,
padding: ‘3rem 2rem’,
textAlign: ‘center’
}}>
<h1>{orquidea.nombre}</h1>
<p>{orquidea.variedad} – {orquidea.colorFlor}</p>
</section>
<section style={{
maxWidth: ‘1200px’,
margin: ‘0 auto’,
padding: ‘3rem 2rem’,
display: ‘grid’,
gridTemplateColumns: ‘1fr 1fr’,
gap: ‘3rem’
}}>
{/* Columna izquierda: Imagen y detalles */}
<div>
{/* Galería de imágenes */}
<div style={{
backgroundColor: ‘#f5f5f5’,
borderRadius: ’12px’,
height: ‘400px’,
display: ‘flex’,
alignItems: ‘center’,
justifyContent: ‘center’,
marginBottom: ‘1rem’
}}>
<img
src={orquidea.imageUrl || ‘https://placehold.co/400×400?text=Orquidea’}
alt={orquidea.nombre}
style={{ maxWidth: ‘100%’, maxHeight: ‘100%’, objectFit: ‘cover’ }}
/>
</div>
{/* Miniaturas (placeholder para galería) */}
<div style={{ display: ‘flex’, gap: ‘0.5rem’, marginBottom: ‘2rem’ }}>
{[1, 2, 3].map(i => (
<div
key={i}
style={{
width: ’80px’,
height: ’80px’,
backgroundColor: ‘#e0e0e0’,
borderRadius: ‘8px’,
cursor: ‘pointer’
}}
/>
))}
</div>
{/* Información básica */}
<div style={{ marginBottom: ‘2rem’ }}>
<h2 style={{ color: ‘#1B4332’, marginBottom: ‘1rem’ }}>
${orquidea.precio?.toLocaleString(‘es-CO’)}
</h2>
<p style={{ color: ‘#2D6A4F’, marginBottom: ‘0.5rem’ }}>
{orquidea.stock > 0 ? `${orquidea.stock} disponibles` : ‘Agotado’}
</p>
<p style={{ color: ‘#666’, marginBottom: ‘0.5rem’ }}>
Tamaño: {orquidea.tamanio}
</p>
<p style={{ color: ‘#666’, marginBottom: ‘0.5rem’ }}>
Nivel de cuidado: {orquidea.nivelCuidado}
</p>
<p style={{ color: ‘#666’ }}>
Tiempo de floración: {orquidea.tiempoFloracion}
</p>
</div>
{/* Selector de cantidad y botón */}
<div style={{ display: ‘flex’, gap: ‘1rem’, alignItems: ‘center’ }}>
<div style={{ display: ‘flex’, alignItems: ‘center’, gap: ‘0.5rem’ }}>
<button
onClick={() => setCantidad(Math.max(1, cantidad – 1))}
style={{
width: ’32px’,
height: ’32px’,
borderRadius: ‘50%’,
border: ‘1px solid #ddd’,
backgroundColor: ‘#fff’,
cursor: ‘pointer’
}}
>
–
</button>
<span style={{ minWidth: ’40px’, textAlign: ‘center’ }}>
{cantidad}
</span>
<button
onClick={() => setCantidad(Math.min(orquidea.stock, cantidad + 1))}
style={{
width: ’32px’,
height: ’32px’,
borderRadius: ‘50%’,
border: ‘1px solid #ddd’,
backgroundColor: ‘#fff’,
cursor: ‘pointer’
}}
>
+
</button>
</div>
<Button
text=”Agregar al carrito”
onClick={() => alert(`Agregaste ${cantidad} ${orquidea.nombre} al carrito`)}
disabled={orquidea.stock === 0}
/>
</div>
</div>
{/* Columna derecha: Tabs y recomendaciones */}
<div>
{/* Tabs */}
<div style={{ marginBottom: ‘2rem’ }}>
<div style={{ display: ‘flex’, gap: ‘1rem’, borderBottom: ‘2px solid #e0e0e0’ }}>
<button
onClick={() => setTabActiva(‘descripcion’)}
style={{
padding: ‘0.75rem 1rem’,
border: ‘none’,
backgroundColor: tabActiva === ‘descripcion’ ? ‘#1B4332’ : ‘transparent’,
color: tabActiva === ‘descripcion’ ? ‘#fff’ : ‘#1B4332’,
cursor: ‘pointer’,
borderRadius: ‘8px 8px 0 0’
}}
>
Descripción
</button>
<button
onClick={() => setTabActiva(‘cuidados’)}
style={{
padding: ‘0.75rem 1rem’,
border: ‘none’,
backgroundColor: tabActiva === ‘cuidados’ ? ‘#1B4332’ : ‘transparent’,
color: tabActiva === ‘cuidados’ ? ‘#fff’ : ‘#1B4332’,
cursor: ‘pointer’,
borderRadius: ‘8px 8px 0 0’
}}
>
Cuidados
</button>
</div>
<div style={{ padding: ‘1.5rem’, backgroundColor: ‘#f9f9f9’, borderRadius: ‘0 8px 8px 8px’ }}>
{tabActiva === ‘descripcion’ && (
<div>
<h3 style={{ color: ‘#1B4332’, marginBottom: ‘1rem’ }}>Sobre esta orquídea</h3>
<p style={{ lineHeight: ‘1.6’, color: ‘#333’ }}>
{orquidea.descripcion || ‘Una hermosa orquídea de la variedad ‘ + orquidea.variedad +
‘ con flores de color ‘ + orquidea.colorFlor + ‘. Perfecta para adornar tu hogar u oficina.’}
</p>
</div>
)}
{tabActiva === ‘cuidados’ && orquidea.guiaCuidado && (
<div>
<h3 style={{ color: ‘#1B4332’, marginBottom: ‘1rem’ }}>Guía de cuidado</h3>
<div style={{ display: ‘flex’, flexDirection: ‘column’, gap: ‘1rem’ }}>
<p><strong>Riego:</strong> {orquidea.guiaCuidado.frecuenciaRiego}</p>
<p><strong>Luz:</strong> {orquidea.guiaCuidado.luzRequerida}</p>
<p><strong>Temperatura:</strong> {orquidea.guiaCuidado.temperaturaIdeal}</p>
<p><strong>Humedad:</strong> {orquidea.guiaCuidado.humedadRequerida}</p>
</div>
</div>
)}
</div>
</div>
{/* Recomendaciones de macetas */}
{orquidea.recomendaciones && orquidea.recomendaciones.length > 0 && (
<div>
<h3 style={{ color: ‘#1B4332’, marginBottom: ‘1rem’ }}>
Macetas recomendadas
</h3>
<div style={{ display: ‘flex’, flexDirection: ‘column’, gap: ‘1rem’ }}>
{orquidea.recomendaciones.map(rec => (
<div
key={rec.maceta.id}
style={{
padding: ‘1rem’,
backgroundColor: ‘#fff’,
border: ‘1px solid #e0e0e0’,
borderRadius: ‘8px’
}}
>
<h4 style={{ color: ‘#1B4332’, marginBottom: ‘0.5rem’ }}>
{rec.maceta.nombre}
</h4>
<p style={{ color: ‘#666’, fontSize: ‘0.9rem’, marginBottom: ‘0.5rem’ }}>
{rec.descripcion}
</p>
<p style={{ color: ‘#E91E8C’, fontWeight: ‘bold’ }}>
${rec.maceta.precio?.toLocaleString(‘es-CO’)}
</p>
</div>
))}
</div>
</div>
)}
</div>
</section>
</main>
);
};
export default DetalleOrquidea;