import { useEffect, useMemo, useState } from "react"; import { toast } from "react-toastify"; import { URL_API } from "~/constants"; interface ISucursal { sucursalID: number; estado?: string; name: string; banner: string; url: string; region?: string; address: string; email: string; phone: string; instagram_url: string; website_urls?: { title?: string; url?: string }[]; facebook_url?: string; tiktok_url?: string; youtube_url?: string; mercadolibre_url?: string; x_url?: string; map: string; whatsapp: string; } const mainRed = "#e31e24"; /** Agrupa sucursales por estado (Venezuela). Sin estado → "Sin estado". */ function groupSucursalesByState(sucursales: ISucursal[]): Map { const map = new Map(); for (const s of sucursales) { const state = (s.estado && s.estado.trim()) ? s.estado.trim() : "Sin estado"; if (!map.has(state)) map.set(state, []); map.get(state)!.push(s); } const sorted = new Map(); const keys = Array.from(map.keys()).sort((a, b) => { if (a === "Sin estado") return 1; if (b === "Sin estado") return -1; return a.localeCompare(b); }); keys.forEach((k) => sorted.set(k, map.get(k)!)); return sorted; } export default function BranchesPage() { const [sucursales, setSucursales] = useState([]); const [expandedStates, setExpandedStates] = useState>(new Set()); const [loading, setLoading] = useState(true); const byState = useMemo(() => groupSucursalesByState(sucursales), [sucursales]); useEffect(() => { const fetchSucursals = async () => { try { setLoading(true); const response = await fetch(`${URL_API}/sucursal`); const data = await response.json(); setSucursales(Array.isArray(data) ? data : []); } catch (error) { console.error("Error al obtener las sucursales:", error); toast.error("Error al obtener las sucursales"); } finally { setLoading(false); } }; fetchSucursals(); }, []); const toggleState = (stateName: string) => { setExpandedStates((prev) => { const next = new Set(prev); if (next.has(stateName)) next.delete(stateName); else next.add(stateName); return next; }); }; const handleViewOnMap = (branch: ISucursal) => { if (branch.map) { const url = branch.map.startsWith("http") ? branch.map : `https://www.google.com/maps?q=${encodeURIComponent(branch.map)}`; window.open(url, "_blank"); } else { toast.info("Coordenadas no disponibles para esta sucursal"); } }; const normalizedWebsiteUrls = (branch: ISucursal): { title: string; url: string }[] => { const list = Array.isArray(branch.website_urls) ? branch.website_urls : []; const cleaned = list .map((v) => ({ title: String(v?.title || "").trim(), url: String(v?.url || "").trim(), })) .filter((item) => item.url); if (cleaned.length > 0) return cleaned; return branch.url ? [{ title: "Pagina Web", url: branch.url }] : []; }; const formatWhatsAppNumber = (value: string) => { const digits = value.replace(/\D/g, ""); if (digits.length >= 10) return digits; return value; }; const SOCIAL_ICON_SIZE = 18; const socialIconMap: Record = { Instagram: ( ), Facebook: ( ), TikTok: ( ), YouTube: ( ), MercadoLibre: ( ), }; const renderSocialLink = (label: string, url: string | undefined) => { if (!url) return null; const icon = socialIconMap[label]; return ( {icon ?? label} ); }; if (loading) { return (
Cargando...
); } return (
{/* Título con efecto de burbujas */}

CONOCE TODAS NUESTRAS SUCURSALES

{/* Acordeón por estado de Venezuela; al expandir se muestran las sucursales */}
{Array.from(byState.entries()).map(([estado, list]) => { const isExpanded = expandedStates.has(estado); return (
{isExpanded && (
{list.map((sucursal) => (

{sucursal.name.toUpperCase()}

{sucursal.address && (

{sucursal.address.toUpperCase()}

)}
{normalizedWebsiteUrls(sucursal).length > 0 && (
{normalizedWebsiteUrls(sucursal).map((website, idx) => ( {website.title || `Web ${idx + 1}`} ))}
)} {sucursal.email && ( )} {/* {sucursal.url && ( )} */} {(sucursal.phone || sucursal.whatsapp) && (
{sucursal.phone && {sucursal.phone}} {sucursal.whatsapp && ( <> {sucursal.phone && " · "} {sucursal.whatsapp} )}
)} {(sucursal.instagram_url || sucursal.facebook_url || sucursal.tiktok_url || sucursal.youtube_url || sucursal.mercadolibre_url || sucursal.x_url) && (
{renderSocialLink("Instagram", sucursal.instagram_url)} {renderSocialLink("Facebook", sucursal.facebook_url)} {renderSocialLink("TikTok", sucursal.tiktok_url)} {renderSocialLink("YouTube", sucursal.youtube_url)} {renderSocialLink("MercadoLibre", sucursal.mercadolibre_url)} {renderSocialLink("X", sucursal.x_url)}
)}
{(sucursal.map && ( ))}
))}
)}
); })}
{sucursales.length === 0 && !loading && (

No hay sucursales registradas.

)}
); }