'use client' import { useEffect, useRef, useState } from 'react' import { toast } from '@/components/ui/toaster' import { cn } from '@/lib/utils' import { Upload, X, ZoomIn, ChevronLeft, ChevronRight, Share2, Download, Copy, Check } from 'lucide-react' interface Foto { id: string; url: string; tipo: 'antes' | 'despues'; created_at: string } interface Props { citaId: string servicio: string fechaCita: string readOnly?: boolean } // ── Redes sociales ────────────────────────────────────────── const REDES = [ { id: 'whatsapp', label: 'WhatsApp', color: '#25D366', icon: ( ), getUrl: (url: string, texto: string) => `https://wa.me/?text=${encodeURIComponent(`${texto}\n${url}`)}`, }, { id: 'facebook', label: 'Facebook', color: '#1877F2', icon: ( ), getUrl: (url: string) => `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`, }, { id: 'twitter', label: 'X / Twitter', color: '#000000', icon: ( ), getUrl: (url: string, texto: string) => `https://twitter.com/intent/tweet?text=${encodeURIComponent(texto)}&url=${encodeURIComponent(url)}`, }, { id: 'instagram', label: 'Instagram', color: '#E1306C', icon: ( ), getUrl: (url: string) => url, // Solo copia — Instagram no permite share directo por URL solocopiar: true, }, ] export function FotosCita({ citaId, servicio, fechaCita, readOnly = false }: Props) { const [fotos, setFotos] = useState([]) const [cargando, setCargando] = useState(true) const [subiendo, setSubiendo] = useState<'antes' | 'despues' | null>(null) const [lightbox, setLightbox] = useState<{ fotos: Foto[]; index: number } | null>(null) const inputAntesRef = useRef(null) const inputDespuesRef = useRef(null) const cargar = async () => { setCargando(true) const res = await fetch(`/api/fotos?cita_id=${citaId}`) const { fotos } = await res.json() setFotos(fotos ?? []) setCargando(false) } useEffect(() => { cargar() }, [citaId]) const fotosAntes = fotos.filter(f => f.tipo === 'antes') const fotosDespues = fotos.filter(f => f.tipo === 'despues') const handleSubir = async (e: React.ChangeEvent, tipo: 'antes' | 'despues') => { const archivos = Array.from(e.target.files ?? []) if (!archivos.length) return const actuales = tipo === 'antes' ? fotosAntes.length : fotosDespues.length const disponibles = 3 - actuales const aSubir = archivos.slice(0, disponibles) if (archivos.length > disponibles) toast(`Solo puedes subir ${disponibles} foto(s) más`, 'info') setSubiendo(tipo) let subidas = 0 for (const archivo of aSubir) { const fd = new FormData() fd.append('file', archivo) fd.append('cita_id', citaId) fd.append('tipo', tipo) const res = await fetch('/api/fotos', { method: 'POST', body: fd }) const data = await res.json() if (res.ok) subidas++ else toast(data.error ?? 'Error al subir foto', 'error') } if (subidas > 0) { toast(`${subidas} foto(s) subida(s)`, 'success'); await cargar() } setSubiendo(null) if (tipo === 'antes' && inputAntesRef.current) inputAntesRef.current.value = '' if (tipo === 'despues' && inputDespuesRef.current) inputDespuesRef.current.value = '' } const handleEliminar = async (id: string) => { if (!confirm('¿Eliminar esta foto?')) return const res = await fetch(`/api/fotos?id=${id}`, { method: 'DELETE' }) if (res.ok) { toast('Foto eliminada', 'info'); await cargar() } else toast('Error al eliminar', 'error') } const abrirLightbox = (tipo: 'antes' | 'despues', index: number) => { const lista = tipo === 'antes' ? fotosAntes : fotosDespues setLightbox({ fotos: lista, index }) } if (cargando) return (
) const tieneFotos = fotos.length > 0 return (
{!tieneFotos && !readOnly ? (

Añade fotos de tu transformación

) : tieneFotos ? (

Transformación — {servicio}

) : null} {(tieneFotos || !readOnly) && (
handleSubir(e, 'antes')} onEliminar={handleEliminar} onZoom={i => abrirLightbox('antes', i)} /> handleSubir(e, 'despues')} onEliminar={handleEliminar} onZoom={i => abrirLightbox('despues', i)} />
)} {lightbox && ( setLightbox(null)} onChange={i => setLightbox(prev => prev ? { ...prev, index: i } : null)} /> )}
) } /* ── Panel ── */ function PanelFotos({ tipo, fotos, readOnly, subiendo, inputRef, onSubir, onEliminar, onZoom }: { tipo: 'antes' | 'despues' fotos: Foto[] readOnly: boolean subiendo: boolean inputRef: React.RefObject onSubir: (e: React.ChangeEvent) => void onEliminar: (id: string) => void onZoom: (index: number) => void }) { const esAntes = tipo === 'antes' const label = esAntes ? 'Antes' : 'Después' const color = esAntes ? 'text-[#888]' : 'text-[#C9A84C]' const border = esAntes ? 'border-[#222]' : 'border-[#C9A84C]/30' return (
{label} {fotos.length}/3
{fotos.map((f, i) => (
{`${label} onZoom(i)} />
{!readOnly && ( )}
))} {!readOnly && Array.from({ length: 3 - fotos.length }).map((_, i) => ( ))} {readOnly && fotos.length === 0 && (
Sin fotos
)}
) } /* ── Lightbox con compartir ── */ function Lightbox({ fotos, index, servicio, onClose, onChange }: { fotos: Foto[] index: number servicio: string onClose: () => void onChange: (i: number) => void }) { const [mostrarShare, setMostrarShare] = useState(false) const [copiado, setCopiado] = useState(false) const foto = fotos[index] const textoCompartir = `✂️ Mi transformación en Barbería Lukakin — ${servicio}` useEffect(() => { const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') { if (mostrarShare) setMostrarShare(false); else onClose() } if (e.key === 'ArrowRight' && index < fotos.length - 1) onChange(index + 1) if (e.key === 'ArrowLeft' && index > 0) onChange(index - 1) } window.addEventListener('keydown', handler) return () => window.removeEventListener('keydown', handler) }, [index, fotos.length, mostrarShare]) const copiarEnlace = async () => { await navigator.clipboard.writeText(foto.url) setCopiado(true) toast('Enlace copiado', 'success') setTimeout(() => setCopiado(false), 2000) } const descargar = async () => { const res = await fetch(foto.url) const blob = await res.blob() const url = URL.createObjectURL(blob) const a = document.createElement('a') a.href = url a.download = `lukakin-${foto.tipo}-${index + 1}.jpg` a.click() URL.revokeObjectURL(url) } const compartirNativo = async () => { if (navigator.share) { try { await navigator.share({ title: 'Barbería Lukakin', text: textoCompartir, url: foto.url }) } catch {} } else { setMostrarShare(true) } } const abrirRed = (red: typeof REDES[0]) => { if (red.solocopiar) { copiarEnlace() toast('Copia el enlace y pégalo en Instagram', 'info') return } window.open(red.getUrl(foto.url, textoCompartir), '_blank', 'noopener,noreferrer') } return (
{ if (mostrarShare) setMostrarShare(false); else onClose() }}> {/* Barra superior */}
e.stopPropagation()}> {foto.tipo === 'antes' ? 'Antes' : 'Después'} · {index + 1}/{fotos.length}
{/* Descargar */} {/* Compartir */} {/* Cerrar */}
{/* Flecha izquierda */} {index > 0 && ( )} {/* Imagen */} Foto ampliada e.stopPropagation()} /> {/* Flecha derecha */} {index < fotos.length - 1 && ( )} {/* Panel de redes sociales */} {mostrarShare && (
e.stopPropagation()} >

Compartir transformación

{REDES.map(red => ( ))}
{/* Copiar enlace directo */}
{foto.url}
)}
) }