// Shared components for GR Gestión Inmobiliaria

const { useState, useEffect, useRef, useMemo } = React;

// ---------- Utils ----------
const formatCLP = (n) => "$" + n.toLocaleString("es-CL");
const formatPrice = (property) => {
  if (property.priceUnit === "UF") return "UF " + property.price.toLocaleString("es-CL");
  return formatCLP(property.price);
};
const priceLabel = (property) => property.operation === "Venta" ? "" : " /mes";

const buildWaLink = (msg) =>
  `https://wa.me/${window.GR_DATA.WHATSAPP_NUMBER}?text=${encodeURIComponent(msg || "Hola, me interesa conversar sobre una propiedad publicada en GR Gestión Inmobiliaria.")}`;

// ---------- Icons ----------
const Icon = ({ name, size = 18, stroke = 1.6 }) => {
  const s = { width: size, height: size, fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "bed":
      return <svg viewBox="0 0 24 24" {...s}><path d="M3 18v-3a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v3"/><path d="M3 18v3M21 18v3M7 12V8a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4"/></svg>;
    case "bath":
      return <svg viewBox="0 0 24 24" {...s}><path d="M4 12V6a2 2 0 0 1 2-2h1a2 2 0 0 1 2 2v0"/><path d="M3 12h18v2a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4z"/><path d="M6 22v-2M18 22v-2"/></svg>;
    case "area":
      return <svg viewBox="0 0 24 24" {...s}><path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z"/></svg>;
    case "car":
      return <svg viewBox="0 0 24 24" {...s}><path d="M5 17h14"/><path d="M5 17v-4l2-5h10l2 5v4"/><circle cx="8" cy="17" r="2"/><circle cx="16" cy="17" r="2"/></svg>;
    case "search":
      return <svg viewBox="0 0 24 24" {...s}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>;
    case "pin":
      return <svg viewBox="0 0 24 24" {...s}><path d="M12 21s-7-7.5-7-12a7 7 0 1 1 14 0c0 4.5-7 12-7 12z"/><circle cx="12" cy="9" r="2.5"/></svg>;
    case "wa":
      return <img src="assets/whatsapp-icon.png" alt="WhatsApp" className="wa-icon-img" style={{ width: size, height: size, display: "block", objectFit: "contain" }} />;
    case "chevron":
      return <svg viewBox="0 0 24 24" {...s}><path d="m9 6 6 6-6 6"/></svg>;
    case "star":
      return <svg viewBox="0 0 24 24" fill="currentColor" width={size} height={size}><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.27 5.82 22 7 14.14l-5-4.87 6.91-1.01z"/></svg>;
    case "shield":
      return <svg viewBox="0 0 24 24" {...s}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg>;
    case "handshake":
      return <svg viewBox="0 0 24 24" {...s}><path d="M11 17 9 19a2 2 0 0 1-3-3l4-4M13 17l2 2a2 2 0 0 0 3-3l-4-4"/><path d="m21 10-5-5-3 3-3-3-5 5"/></svg>;
    case "key":
      return <svg viewBox="0 0 24 24" {...s}><circle cx="8" cy="15" r="4"/><path d="m21 2-9.6 9.6M15.5 7.5l3 3L22 7l-3-3"/></svg>;
    case "menu":
      return <svg viewBox="0 0 24 24" {...s}><path d="M4 6h16M4 12h16M4 18h16"/></svg>;
    case "close":
      return <svg viewBox="0 0 24 24" {...s}><path d="M6 6l12 12M18 6 6 18"/></svg>;
    case "arrow":
      return <svg viewBox="0 0 24 24" {...s}><path d="M5 12h14M13 5l7 7-7 7"/></svg>;
    case "heart":
      return <svg viewBox="0 0 24 24" {...s}><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>;
    case "phone":
      return <svg viewBox="0 0 24 24" {...s}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>;
    case "mail":
      return <svg viewBox="0 0 24 24" {...s}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>;
    case "check":
      return <svg viewBox="0 0 24 24" {...s}><path d="M5 12l5 5L20 7"/></svg>;
    case "filter":
      return <svg viewBox="0 0 24 24" {...s}><path d="M3 6h18M6 12h12M10 18h4"/></svg>;
    case "grid":
      return <svg viewBox="0 0 24 24" {...s}><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>;
    case "map":
      return <svg viewBox="0 0 24 24" {...s}><path d="m1 6 7-3 8 3 7-3v15l-7 3-8-3-7 3z"/><path d="M8 3v15M16 6v15"/></svg>;
    case "sparkle":
      return <svg viewBox="0 0 24 24" {...s}><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/></svg>;
    default:
      return null;
  }
};

// ---------- Header ----------
function Header({ route, onNavigate, logoVariant }) {
  const [open, setOpen] = useState(false);
  const links = [
    { id: "home", label: "Inicio" },
    { id: "listing", label: "Propiedades" },
    { id: "about", label: "Nosotros" },
    { id: "publish", label: "Publica tu propiedad" },
    { id: "contact", label: "Contacto" },
  ];
  return (
    <header className="site-header">
      <div className="shell header-shell">
        <button className="logo-btn" onClick={() => onNavigate("home")} aria-label="GR Gestión Inmobiliaria">
          {logoVariant === "icon" ? (
            <img src="assets/logo-icon.png" alt="GR" className="logo-img logo-icon" />
          ) : logoVariant === "badge" ? (
            <span className="logo-badge">
              <img src="assets/favicon-red.png" alt="GR" />
              <span className="logo-badge-text">
                <span className="logo-badge-name">GR</span>
                <span className="logo-badge-sub">Gestión Inmobiliaria</span>
              </span>
            </span>
          ) : (
            <img src="assets/logo-full.png" alt="GR Gestión Inmobiliaria" className="logo-img logo-full" />
          )}
        </button>

        <nav className="primary-nav">
          {links.map((l) => (
            <button key={l.id} className={"nav-link" + (route === l.id ? " is-active" : "")} onClick={() => onNavigate(l.id)}>
              {l.label}
            </button>
          ))}
        </nav>

        <div className="header-cta">
          <a className="ghost-btn" href={`tel:${window.GR_DATA.WHATSAPP_NUMBER}`}>
            <Icon name="phone" size={16} />
            <span>{window.GR_DATA.WHATSAPP_DISPLAY}</span>
          </a>
          <a className="wa-btn-sm" href={buildWaLink()} target="_blank" rel="noopener">
            <Icon name="wa" size={16} />
            WhatsApp
          </a>
        </div>

        <button className="menu-toggle" onClick={() => setOpen(!open)} aria-label="Menú">
          <Icon name={open ? "close" : "menu"} size={22} />
        </button>
      </div>

      {open && (
        <div className="mobile-menu">
          {links.map((l) => (
            <button key={l.id} className="mobile-link" onClick={() => { onNavigate(l.id); setOpen(false); }}>
              {l.label}
            </button>
          ))}
          <a className="wa-btn-sm full" href={buildWaLink()} target="_blank" rel="noopener">
            <Icon name="wa" size={16} /> WhatsApp · {window.GR_DATA.WHATSAPP_DISPLAY}
          </a>
        </div>
      )}
    </header>
  );
}

// ---------- Property card ----------
function PropertyCard({ property, onOpen, cardStyle = "rounded" }) {
  const wa = buildWaLink(`Hola, me interesa la propiedad "${property.title}" en ${property.commune} (ref ${property.id.toUpperCase()}). ¿Podemos coordinar una visita?`);
  return (
    <article className={"prop-card style-" + cardStyle}>
      <div className="prop-media" onClick={() => onOpen(property)}>
        <img src={property.image} alt={property.title} loading="lazy" />
        <div className="prop-media-grad" />
        <div className="prop-badges">
          {property.status === "Arrendado" && <span className="badge badge-rented">Arrendado</span>}
          {property.status === "Vendido" && <span className="badge badge-rented">Vendido</span>}
          {!property.status && property.new && <span className="badge badge-new">Nuevo</span>}
          {!property.status && property.featured && <span className="badge badge-featured">Destacado</span>}
        </div>
        {property.status && <div className="prop-overlay-rented" />}
        <button className="prop-fav" aria-label="Guardar">
          <Icon name="heart" size={18} />
        </button>
        <div className="prop-operation">{property.operation}</div>
      </div>

      <div className="prop-body">
        <div className="prop-type-row">
          <span className="prop-type">{property.type} · {property.commune}</span>
          <span className="prop-ref">REF {property.id.toUpperCase()}</span>
        </div>
        <h3 className="prop-title" onClick={() => onOpen(property)}>{property.title}</h3>
        <div className="prop-address">
          <Icon name="pin" size={14} /> {property.address}
        </div>

        <ul className="prop-specs">
          <li><Icon name="bed" size={16} /><span>{property.bedrooms} dorm.</span></li>
          <li><Icon name="bath" size={16} /><span>{property.bathrooms} baños</span></li>
          {property.area > 0 && <li><Icon name="area" size={16} /><span>{property.area} m²</span></li>}
          {property.parking > 0 && <li><Icon name="car" size={16} /><span>{property.parking}</span></li>}
        </ul>

        <div className="prop-price-row">
          <div>
            {property.promoPrice && <div className="prop-promo">{property.promoLabel}</div>}
            <div className="prop-price">{formatPrice(property)} <span>{priceLabel(property)}</span></div>
            {property.expenses > 0 && <div className="prop-expenses">+ {formatCLP(property.expenses)} gastos comunes</div>}
          </div>
        </div>

        <div className="prop-actions">
          {property.status ? (
            <div className="prop-status-label">{property.status}</div>
          ) : (
            <>
              <button className="btn-secondary" onClick={() => onOpen(property)}>
                Ver detalle <Icon name="chevron" size={14} />
              </button>
              <a className="wa-btn" href={wa} target="_blank" rel="noopener">
                <Icon name="wa" size={16} />
                Consultar
              </a>
            </>
          )}
        </div>
      </div>
    </article>
  );
}

// ---------- Footer ----------
function Footer({ onNavigate }) {
  return (
    <footer className="site-footer" id="contact">
      <div className="shell footer-shell">
        <div className="footer-brand">
          <img src="assets/logo-icon-white.png" alt="GR" className="footer-logo" />
          <div>
            <div className="footer-brand-name">GR Gestión Inmobiliaria</div>
            <div className="footer-brand-tag">Administrando hogares desde 2012</div>
          </div>
        </div>

        <div className="footer-cols">
          <div className="footer-col">
            <h4>Navegación</h4>
            <button onClick={() => onNavigate("home")}>Inicio</button>
            <button onClick={() => onNavigate("listing")}>Propiedades</button>
            <button onClick={() => onNavigate("about")}>Nosotros</button>
            <button onClick={() => onNavigate("publish")}>Publica tu propiedad</button>
          </div>
          <div className="footer-col">
            <h4>Servicios</h4>
            <span>Arriendo de departamentos</span>
            <span>Arriendo de casas</span>
            <span>Administración de propiedades</span>
            <span>Asesoría para propietarios</span>
          </div>
          <div className="footer-col">
            <h4>Contacto</h4>
            <a href={`tel:${window.GR_DATA.WHATSAPP_NUMBER}`}><Icon name="phone" size={14} /> {window.GR_DATA.WHATSAPP_DISPLAY}</a>
            <a href={buildWaLink()} target="_blank" rel="noopener"><Icon name="wa" size={14} /> WhatsApp directo</a>
            <a href="mailto:contacto@grgestion.cl"><Icon name="mail" size={14} /> contacto@grgestion.cl</a>
            <span><Icon name="pin" size={14} /> Huérfanos 1117, oficina 803, Santiago</span>
          </div>
          <div className="footer-col">
            <h4>Horario</h4>
            <span>Lunes a Viernes</span>
            <span>9:30 – 18:30 hrs</span>
            <span>Sábado 10:00 – 14:00 hrs</span>
            <span className="footer-hint">Atención de WhatsApp todos los días</span>
          </div>
        </div>
      </div>
      <div className="footer-bottom shell">
        <span>© 2026 GR Gestión Inmobiliaria. Todos los derechos reservados.</span>
        <span>Corredores asociados a la CCHC · +13 años de experiencia en el rubro</span>
      </div>
    </footer>
  );
}

// ---------- Floating WhatsApp ----------
function FloatingWA() {
  const [expanded, setExpanded] = useState(false);
  const [dismissed, setDismissed] = useState(false);
  useEffect(() => {
    const t = setTimeout(() => setExpanded(true), 1800);
    const t2 = setTimeout(() => setExpanded(false), 8000);
    return () => { clearTimeout(t); clearTimeout(t2); };
  }, []);
  if (dismissed) return null;
  return (
    <div className={"wa-float-wrap" + (expanded ? " is-expanded" : "")}>
      <a href={buildWaLink()} target="_blank" rel="noopener" className="wa-float" aria-label="Contactar por WhatsApp">
        <span className="wa-float-pulse" aria-hidden="true" />
        <span className="wa-float-icon">
          <Icon name="wa" size={26} />
        </span>
        <span className="wa-float-label">
          <strong>¿Hablamos?</strong>
          <em>Respondemos en menos de 30 min</em>
        </span>
      </a>
      <button
        className="wa-float-close"
        aria-label="Cerrar"
        onClick={(e) => { e.stopPropagation(); setDismissed(true); }}
      >
        <Icon name="close" size={12} stroke={2.4} />
      </button>
    </div>
  );
}

Object.assign(window, { Icon, Header, PropertyCard, Footer, FloatingWA, formatCLP, buildWaLink });