// ====== Shared layout components ======
const { CATEGORIES, PHONE_DISPLAY, PHONE_DIGITS, WHATSAPP_URL, EMAIL, ADDRESS_LINE1, ADDRESS_LINE2, MAP_EMBED } = window.KUKA_DATA;

const NAV = [
  { id: 'home',     label: 'Kryefaqja' },
  { id: 'products', label: 'Produktet' },
  { id: 'contact',  label: 'Kontakt' },
];

function Brand({ onClick, dark }) {
  return (
    <div className="brand" onClick={onClick}>
      <span className="brand-name">KUKA</span>
      <span className="brand-sub">MOBILERI · BURREL</span>
    </div>
  );
}

function Header({ page, go }) {
  const [open, setOpen] = React.useState(false);
  const handleNav = (id) => { setOpen(false); go(id); };
  // map nav id to page check
  const isActive = (id) => {
    if (id === 'home') return page.name === 'home';
    if (id === 'products') return page.name === 'category' || page.name === 'products';
    if (id === 'about') return page.name === 'about';
    if (id === 'contact') return page.name === 'contact';
    return false;
  };
  return (
    <header className="header">
      <div className="header-inner">
        <Brand onClick={() => handleNav('home')} />
        <nav className={`nav ${open ? 'open' : ''}`}>
          {NAV.map(n => (
            <a key={n.id} className={isActive(n.id) ? 'active' : ''} onClick={() => handleNav(n.id)}>
              {n.label}
            </a>
          ))}
        </nav>
        <div className="header-contact">
          <a className="tel-link" href={`tel:${PHONE_DIGITS}`}>
            <Icon.Phone size={16} />
            <span>{PHONE_DISPLAY}</span>
          </a>
          <a className="icon-btn" href={WHATSAPP_URL} target="_blank" rel="noopener" aria-label="WhatsApp">
            <Icon.WhatsApp size={18} />
          </a>
          <button className="menu-toggle" onClick={() => setOpen(o => !o)} aria-label="Menu">
            {open ? <Icon.Close /> : <Icon.Menu />}
          </button>
        </div>
      </div>
    </header>
  );
}

function Footer({ go }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <Brand />
            <p>Mobilje me porosi prej vitit 2008. Punim me dorë në Burrel, për shtëpi në të gjithë Shqipërinë.</p>
          </div>
          <div>
            <h4>Produktet</h4>
            <ul className="footer-list">
              {CATEGORIES.map(c => (
                <li key={c.id}><a onClick={() => go('category', { categoryId: c.id })}>{c.name}</a></li>
              ))}
            </ul>
          </div>
          <div>
            <h4>Mobileri Kuka</h4>
            <ul className="footer-list">
              <li><a onClick={() => go('home')}>Kryefaqja</a></li>
              <li><a onClick={() => go('contact')}>Kontakt</a></li>
              <li><a href={WHATSAPP_URL} target="_blank" rel="noopener">WhatsApp</a></li>
            </ul>
          </div>
          <div>
            <h4>Vendndodhja</h4>
            <div className="footer-map">
              {MAP_EMBED ? (
                <iframe title="Harta" src={MAP_EMBED} loading="lazy" referrerPolicy="no-referrer-when-downgrade" allowFullScreen></iframe>
              ) : (
                <div className="map-ph">
                  <div className="map-pin">
                    <span className="lab">Burrel</span>
                    <span className="dot" />
                    <span className="stem" />
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 Mobileri Kuka · Burrel, Shqipëri</div>
          <div className="socials">
            <a href="#" aria-label="Instagram"><Icon.Instagram /></a>
            <a href="#" aria-label="Facebook"><Icon.Facebook /></a>
            <a href={WHATSAPP_URL} aria-label="WhatsApp"><Icon.WhatsApp size={14} /></a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function WhatsAppFloat() {
  return (
    <a className="wa-float" href={WHATSAPP_URL} target="_blank" rel="noopener" aria-label="Na shkruani në WhatsApp">
      <Icon.WhatsApp size={28} />
    </a>
  );
}

// ====== Uploaded-images context (populated from /api/images) ======
const ImagesContext = React.createContext({ map: {}, ready: false });
window.ImagesContext = ImagesContext;

// ====== Image / placeholder helper ======
// Priority: uploaded photo (by `id`) -> manual `img` prop -> striped placeholder.
function Ph({ tone = 'walnut', label, img, id }) {
  const ctx = React.useContext(ImagesContext);
  const uploaded = id && ctx && ctx.map && ctx.map[id] && ctx.map[id][0];
  const src = uploaded || img || '';
  const [err, setErr] = React.useState(false);
  React.useEffect(() => { setErr(false); }, [src]);
  const cls = tone === 'light' ? 'ph ph-light' : tone === 'gold' ? 'ph ph-gold' : 'ph';
  if (src && !err) {
    return <img className="ph-img" src={src} alt={label || ''} loading="lazy" onError={() => setErr(true)} />;
  }
  return <div className={cls} data-label={label} />;
}

// ====== Product gallery removed — photos now open in the Lightbox viewer. ======

// ====== Lightbox: full-screen photo viewer with zoom (buttons + wheel + drag) ======
function Lightbox({ images, index = 0, categoryName = '', onClose }) {
  const [i, setI] = React.useState(index);
  const [scale, setScale] = React.useState(1);
  const [tx, setTx] = React.useState(0);
  const [ty, setTy] = React.useState(0);
  const [grabbing, setGrabbing] = React.useState(false);
  const drag = React.useRef(null);
  const swipe = React.useRef(null);
  const multi = images.length > 1;

  const reset = () => { setScale(1); setTx(0); setTy(0); };
  const go = React.useCallback((d) => { setScale(1); setTx(0); setTy(0); setI(x => (x + d + images.length) % images.length); }, [images.length]);

  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === 'Escape') onClose();
      else if (e.key === 'ArrowLeft' && multi) go(-1);
      else if (e.key === 'ArrowRight' && multi) go(1);
    };
    document.body.style.overflow = 'hidden';
    window.addEventListener('keydown', onKey);
    return () => { document.body.style.overflow = ''; window.removeEventListener('keydown', onKey); };
  }, [multi, go, onClose]);

  const clamp = (s) => Math.min(4, Math.max(1, s));
  const zoomBy = (f) => setScale(s => {
    const n = clamp(s * f);
    if (n === 1) { setTx(0); setTy(0); }
    return n;
  });

  const onWheel = (e) => { e.preventDefault(); zoomBy(e.deltaY < 0 ? 1.15 : 1 / 1.15); };
  const onDouble = () => { if (scale > 1) reset(); else setScale(2.4); };
  const onImgClick = () => { if (scale === 1) setScale(2.4); };

  const onPointerDown = (e) => {
    if (scale <= 1) return;
    drag.current = { x: e.clientX, y: e.clientY, tx, ty };
    setGrabbing(true);
    try { e.currentTarget.setPointerCapture(e.pointerId); } catch (err) {}
  };
  const onPointerMove = (e) => {
    if (!drag.current) return;
    setTx(drag.current.tx + (e.clientX - drag.current.x));
    setTy(drag.current.ty + (e.clientY - drag.current.y));
  };
  const onPointerUp = () => { drag.current = null; setGrabbing(false); };

  const waText = encodeURIComponent(`Përshëndetje! Më intereson një punim nga kategoria "${categoryName}". A mund të më jepni më shumë informacion?`);

  return (
    <div className="lb-backdrop" onClick={onClose}>
      <button className="lb-close" onClick={onClose} aria-label="Mbyll"><Icon.Close size={22} /></button>
      {multi && <div className="lb-counter">{i + 1} / {images.length}</div>}
      {multi && <button className="lb-nav lb-prev" onClick={(e) => { e.stopPropagation(); go(-1); }} aria-label="Mbrapa">&#8249;</button>}
      {multi && <button className="lb-nav lb-next" onClick={(e) => { e.stopPropagation(); go(1); }} aria-label="Para">&#8250;</button>}

      <figure
        className="lb-stage"
        onClick={(e) => e.stopPropagation()}
        onWheel={onWheel}
        onTouchStart={(e) => { if (scale === 1 && e.touches[0]) swipe.current = e.touches[0].clientX; }}
        onTouchEnd={(e) => {
          if (scale === 1 && swipe.current != null && e.changedTouches[0] && multi) {
            const dx = e.changedTouches[0].clientX - swipe.current;
            if (Math.abs(dx) > 50) go(dx < 0 ? 1 : -1);
          }
          swipe.current = null;
        }}
      >
        <img
          className="lb-img"
          src={images[i]}
          alt={categoryName}
          draggable="false"
          style={{
            transform: `translate(${tx}px, ${ty}px) scale(${scale})`,
            cursor: scale > 1 ? (grabbing ? 'grabbing' : 'grab') : 'zoom-in',
            transition: drag.current ? 'none' : 'transform .18s ease',
            touchAction: 'none',
          }}
          onClick={onImgClick}
          onDoubleClick={onDouble}
          onPointerDown={onPointerDown}
          onPointerMove={onPointerMove}
          onPointerUp={onPointerUp}
          onPointerCancel={onPointerUp}
        />
      </figure>

      <div className="lb-bar" onClick={(e) => e.stopPropagation()}>
        <div className="lb-zoom">
          <button onClick={() => zoomBy(1 / 1.3)} aria-label="Zvogëlo">&minus;</button>
          <button className="lb-zoom-reset" onClick={reset}>{Math.round(scale * 100)}%</button>
          <button onClick={() => zoomBy(1.3)} aria-label="Zmadho">+</button>
        </div>
        <a className="btn btn-whatsapp" href={`${WHATSAPP_URL}?text=${waText}`} target="_blank" rel="noopener">
          <Icon.WhatsApp size={16} /> Pyet për këtë punim
        </a>
      </div>
    </div>
  );
}

Object.assign(window, { Header, Footer, WhatsAppFloat, Ph, Lightbox, Brand, NAV, ImagesContext });