/* global React */
const { useState, useEffect, useMemo, useRef } = React;

// =============== INDIVIDUAL MODULE COMPONENTS ===============
function ModNav() {
  return (
    <div className="mod-nav">
      <div className="mod-nav-logo">N<i>EXT</i></div>
      <div className="mod-nav-links"><span>Quartos</span><span>Spa</span><span>Restaurante</span></div>
      <div className="mod-nav-cta">Reservar</div>
    </div>
  );
}
function ModHero({ m }) {
  return (
    <div className="mod-hero">
      <div className="hero-eyebrow">{m.eyebrow}</div>
      <h2 className="hero-title">{m.title}</h2>
      <p className="hero-sub">{m.subtitle}</p>
    </div>
  );
}
function ModCards({ m }) {
  const items = [
    { name: 'Studio City', meta: '€120 · 28m²' },
    { name: 'Suite Ocean', meta: '€180 · 42m²' },
    { name: 'Suite Top', meta: '€280 · 60m²' }
  ];
  return (
    <div className="mod-cards">
      <h3 className="mod-cards-title">{m.title}</h3>
      <div className="cards-grid">
        {items.map((it, i) => (
          <div key={i} className="card-mini">
            <div className={`card-img-mini ${i === 1 ? 'alt-1' : i === 2 ? 'alt-2' : ''}`}></div>
            <div className="card-body-mini">
              <div className="card-title-mini">{it.name}</div>
              <div className="card-meta-mini">{it.meta}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
function ModTextImg({ m }) {
  return (
    <div className="mod-textimg">
      <div className="textimg-text">
        <div className="eyebrow">{m.eyebrow}</div>
        <h3>{m.title}</h3>
        <p>Cada detalhe pensado para acrescentar — nunca distrair. Materiais nobres, tecnologia silenciosa.</p>
        <a>Saber mais →</a>
      </div>
      <div className="textimg-img"></div>
    </div>
  );
}
function ModFeatures() {
  const f = [
    { i: '✦', t: 'Vista', d: 'Funchal e oceano' },
    { i: '◐', t: 'Spa', d: 'Wellness incluído' },
    { i: '☆', t: 'Cozinha', d: 'Autor com produto local' }
  ];
  return (
    <div className="mod-features">
      {f.map((x, i) => (
        <div key={i} className="feature">
          <div className="feature-icon">{x.i}</div>
          <div className="feature-title">{x.t}</div>
          <div className="feature-desc">{x.d}</div>
        </div>
      ))}
    </div>
  );
}
function ModGallery() {
  return (
    <div className="mod-gallery">
      <div className="gallery-grid">
        <div className="gallery-img"></div>
        <div className="gallery-img"></div>
        <div className="gallery-img"></div>
      </div>
    </div>
  );
}
function ModMenu() {
  const items = [
    { n: 'Atum dos Açores, ponzu', d: 'Wasabi fresco, cebolinho', p: '€18' },
    { n: 'Bochecha de porco preto', d: 'Puré trufado, vinho do Porto', p: '€26' },
    { n: 'Pastel de nata desconstruído', d: 'Canela, café da Madeira', p: '€9' }
  ];
  return (
    <div className="mod-menu">
      <h3>Sugestões</h3>
      {items.map((it, i) => (
        <div key={i} className="menu-item">
          <div>
            <div className="menu-item-name">{it.n}</div>
            <div className="menu-item-desc">{it.d}</div>
          </div>
          <div className="menu-item-price">{it.p}</div>
        </div>
      ))}
    </div>
  );
}
function ModCTA({ m }) {
  return (
    <div className="mod-cta">
      <div>
        <h4>{m.title}</h4>
        <p>{m.sub}</p>
      </div>
      <button>{m.btn}</button>
    </div>
  );
}
function ModFooter() {
  return (
    <div className="mod-footer">
      <div className="brand-mini">N<i>EXT</i></div>
      <div className="links"><span>Política</span><span>Contacto</span><span>©</span></div>
    </div>
  );
}

const MODULE_RENDERERS = {
  nav: ModNav, hero: ModHero, cards: ModCards, textimg: ModTextImg,
  features: ModFeatures, gallery: ModGallery, menu: ModMenu, cta: ModCTA, footer: ModFooter
};

// =============== PAGE THUMBNAIL ===============
function PageThumb({ page, globalTheme, perModuleThemes, customVars, focusedMod, optionMode }) {
  const pageRef = useRef(null);

  useEffect(() => {
    if (!pageRef.current) return;
    const t = window.THEMES[globalTheme];
    if (!t) return;
    Object.entries(t.vars).forEach(([k, v]) => pageRef.current.style.setProperty(k, v));
    if (customVars) {
      Object.entries(customVars).forEach(([k, v]) => pageRef.current.style.setProperty(k, v));
    }
  }, [globalTheme, customVars]);

  return (
    <div className="page-frame">
      <div className="page-bar">
        <div className="page-bar-dots"><i></i><i></i><i></i></div>
        <div className="page-url">{page.url}</div>
        <div className="page-tag">{page.label}</div>
      </div>
      <div className="page" ref={pageRef}>
        {page.modules.map((m) => {
          const Renderer = MODULE_RENDERERS[m.type];
          if (!Renderer) return null;
          const key = `${page.id}-${m.id}`;
          const moduleThemeId = perModuleThemes && perModuleThemes[key];
          const isFocused = focusedMod === key;
          const themed = optionMode === 'C' && moduleThemeId && moduleThemeId !== globalTheme;

          // build per-module style override
          let modStyle = {};
          if (themed) {
            const mt = window.THEMES[moduleThemeId];
            if (mt) modStyle = mt.vars;
          }

          return (
            <div key={key}
                 className={`mod ${isFocused ? 'focused' : ''}`}
                 data-themed={themed ? '1' : '0'}
                 style={modStyle}>
              <Renderer m={m} />
              {optionMode === 'C' && (
                <div className="mod-label">{window.MODULE_LABELS[m.type]} {themed ? '· ' + window.THEMES[moduleThemeId].name.replace('NEXT ', '') : ''}</div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.PageThumb = PageThumb;