// Quick City — Shared React components
const { useState, useEffect } = React;

/* ───────── i18n hook ───────── */
function useT() {
  const [lang, setLang] = useState(() => (window.QCI18N ? window.QCI18N.getLang() : 'de'));
  useEffect(() => {
    const handler = (e) => setLang(e.detail.lang);
    window.addEventListener('qc-lang-change', handler);
    return () => window.removeEventListener('qc-lang-change', handler);
  }, []);
  // Translator function — falls back to provided default, then to the key
  const t = (key, fallback) => {
    if (!window.QCI18N) return fallback !== undefined ? fallback : key;
    const v = window.QCI18N.t(key);
    if (v === key && fallback !== undefined) return fallback;
    return v;
  };
  return { t, lang, setLang: (l) => window.QCI18N && window.QCI18N.setLang(l) };
}

function LangSwitcher() {
  const { lang, setLang } = useT();
  const langs = ['de', 'en', 'tr'];
  return (
    <div className="lang-switcher" style={{display:'inline-flex', gap:0}}>
      {langs.map(l => (
        <button
          key={l}
          className={'lang-btn' + (lang === l ? ' active' : '')}
          onClick={() => setLang(l)}
          aria-label={`Sprache ${l.toUpperCase()}`}
        >{l.toUpperCase()}</button>
      ))}
    </div>
  );
}

function getRoute() {
  // Clean URLs via History API: read the pathname (e.g. /lns/ausbau).
  let path = decodeURIComponent(location.pathname || '/');
  // If served as /app.html (fallback), strip it.
  path = path.replace(/^\/?app\.html\/?/i, '/');
  let query = location.search ? location.search.slice(1) : '';
  // Legacy support: old #/lns/ausbau links still work.
  if ((path === '' || path === '/') && location.hash.length > 1) {
    const h = location.hash.slice(1);
    const qi = h.indexOf('?');
    if (qi !== -1) { path = h.slice(0, qi); query = h.slice(qi + 1); }
    else { path = h; }
  }
  // Query embedded in path (e.g. /projekte?brand=lns)
  if (path.indexOf('?') !== -1) {
    const i = path.indexOf('?');
    query = path.slice(i + 1);
    path = path.slice(0, i);
  }
  const params = new URLSearchParams(query);
  return { path: path.replace(/^\/+|\/+$/g, '') || '', params };
}

// Navigate without full page reload (History API).
function qcNavigate(href) {
  history.pushState({}, '', href);
  window.dispatchEvent(new Event('qc-route'));
}

// Global click interceptor — set up once. Turns internal <a href="/..."> into
// SPA navigation, and handles in-page #anchors (#bewerben etc.) with a smooth scroll.
if (typeof window !== 'undefined' && !window.__qcRouterInit) {
  window.__qcRouterInit = true;
  document.addEventListener('click', function (e) {
    if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
    const a = e.target.closest ? e.target.closest('a') : null;
    if (!a) return;
    const href = a.getAttribute('href');
    if (!href) return;
    if (a.target === '_blank' || a.hasAttribute('download')) return;
    // In-page anchor
    if (href.charAt(0) === '#') {
      if (href.length > 1) {
        const el = document.getElementById(href.slice(1));
        if (el) {
          e.preventDefault();
          const y = el.getBoundingClientRect().top + window.pageYOffset - 80;
          window.scrollTo({ top: y, behavior: 'smooth' });
        }
      }
      return;
    }
    // Internal absolute path → SPA nav
    if (href.charAt(0) === '/' && !href.startsWith('//')) {
      e.preventDefault();
      qcNavigate(href);
    }
  });
}

function useRoute() {
  const [route, setRoute] = useState(getRoute());
  useEffect(() => {
    const onChange = () => setRoute(getRoute());
    window.addEventListener('popstate', onChange);
    window.addEventListener('qc-route', onChange);
    window.addEventListener('hashchange', onChange);
    return () => {
      window.removeEventListener('popstate', onChange);
      window.removeEventListener('qc-route', onChange);
      window.removeEventListener('hashchange', onChange);
    };
  }, []);
  // Scroll to top whenever the path changes (after React has rendered the new page)
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [route.path]);
  return route;
}

function detectBrand(route) {
  if (route.path.startsWith('lns')) return 'lns';
  if (route.path.startsWith('ifm')) return 'ifm';
  if (route.path === 'projekte' && route.params.get('brand') === 'lns') return 'lns';
  return 'ifm';
}

function Nav({ brand, currentHash }) {
  const { t } = useT();
  const data = window.QC_DATA;
  const b = data.brands[brand];
  const items = data.nav[brand];
  const [mobileOpen, setMobileOpen] = useState(false);
  const [openSub, setOpenSub] = useState(null);

  // Lock body scroll when mobile menu is open
  useEffect(() => {
    document.body.style.overflow = mobileOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [mobileOpen]);

  // Close mobile menu when route changes
  useEffect(() => { setMobileOpen(false); setOpenSub(null); }, [currentHash]);

  // Nav i18n keys mirror data.js order. We translate by label match.
  const navKeyByLabel = {
    'Unternehmen': 'nav.company',
    'Über uns': 'nav.about',
    'Unsere Unternehmen': 'nav.companies',
    'Unsere Technik': 'nav.tech',
    'Unsere Werte': 'nav.values',
    'Zertifikate': 'nav.certs',
    'Leistungen': 'nav.services',
    'Projekte': 'nav.projects',
    'Team': 'nav.team',
    'Karriere': 'nav.career',
    'Kontakt & Standort': 'nav.contact',
    'Übersicht': 'nav.career.overview',
    'Stellenangebote': 'nav.career.jobs',
    'Winterdienst': 'svc.winterdienst.title',
    'Garten- & Landschaftsbau': 'svc.garten.title',
    'Grünflächenpflege': 'svc.gruen.title',
    'Baumdienste': 'svc.baum.title',
    'Reinigungsservice': 'svc.reinigung.title',
    'Tiefbau & Kabelverlegung': 'svc.tiefbau.title',
    'Telekommunikation & Netzausbau': 'svc.ausbau.title',
    'Straßen-, Wege- & Flächenbau': 'svc.bau.title',
    'Baustellensicherung & Logistik': 'svc.baustellenpruefung.title',
    'Störungsdienst & Wartung': 'svc.stoerungsdienst.title'
  };
  const tnav = (label) => navKeyByLabel[label] ? t(navKeyByLabel[label], label) : label;

  return (
    <nav className={'nav' + (mobileOpen ? ' nav--mobile-open' : '')}>
      <a href={b.home} className="nav__logo" onClick={() => setMobileOpen(false)}>
        <img src={b.logo} alt={b.name} />
      </a>

      {/* Desktop links */}
      <ul className="nav__links">
        {items.map(item => (
          <li className="nav__item" key={item.href}>
            <a className={'nav__link' + (currentHash.startsWith(item.href) ? ' active' : '')} href={item.href}>{tnav(item.label)}</a>
            {item.children && (
              <ul className="nav__dropdown">
                {item.children.map(c => (
                  <li key={c.href}><a href={c.href}>{tnav(c.label)}</a></li>
                ))}
              </ul>
            )}
          </li>
        ))}
      </ul>

      <a className="nav__switch" href={data.brands[b.switchTo].home}>
        <span>{t(brand === 'ifm' ? 'nav.to_lns' : 'nav.to_ifm', b.switchLabel)}</span>
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
      </a>

      <LangSwitcher />

      {/* Mobile burger button */}
      <button
        className={'nav__burger' + (mobileOpen ? ' is-open' : '')}
        onClick={() => setMobileOpen(o => !o)}
        aria-label={mobileOpen ? 'Menü schließen' : 'Menü öffnen'}
      >
        <span></span><span></span><span></span>
      </button>

      {/* Mobile menu overlay */}
      <div className={'nav__mobile' + (mobileOpen ? ' is-open' : '')}>
        <ul className="nav__mobile-list">
          {items.map(item => {
            const hasChildren = !!item.children;
            const isOpen = openSub === item.href;
            return (
              <li className="nav__mobile-item" key={item.href}>
                {hasChildren ? (
                  <>
                    <button
                      className={'nav__mobile-link nav__mobile-link--toggle' + (isOpen ? ' is-open' : '')}
                      onClick={() => setOpenSub(isOpen ? null : item.href)}
                    >
                      <span>{tnav(item.label)}</span>
                      <span className="nav__mobile-chevron">{isOpen ? '−' : '+'}</span>
                    </button>
                    {isOpen && (
                      <ul className="nav__mobile-sub">
                        <li><a href={item.href} onClick={() => setMobileOpen(false)}>{tnav(item.label)} — {t('common.overview', 'Übersicht')}</a></li>
                        {item.children.map(c => (
                          <li key={c.href}><a href={c.href} onClick={() => setMobileOpen(false)}>{tnav(c.label)}</a></li>
                        ))}
                      </ul>
                    )}
                  </>
                ) : (
                  <a className="nav__mobile-link" href={item.href} onClick={() => setMobileOpen(false)}>{tnav(item.label)}</a>
                )}
              </li>
            );
          })}
        </ul>
        <div className="nav__mobile-footer">
          <a className="nav__switch nav__switch--mobile" href={data.brands[b.switchTo].home} onClick={() => setMobileOpen(false)}>
            <span>{t(brand === 'ifm' ? 'nav.to_lns' : 'nav.to_ifm', b.switchLabel)}</span>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </a>
          <LangSwitcher />
        </div>
      </div>
    </nav>
  );
}

function Footer({ brand }) {
  const { t } = useT();
  const data = window.QC_DATA;
  const b = data.brands[brand];
  const services = brand === 'ifm' ? data.ifmServices : data.lnsServices;
  const about = brand === 'ifm' ? data.nav.ifm[0].children : data.nav.lns[0].children;
  const navKeyByLabel = {
    'Über uns': 'nav.about',
    'Unsere Unternehmen': 'nav.companies',
    'Unsere Technik': 'nav.tech',
    'Unsere Werte': 'nav.values',
    'Zertifikate': 'nav.certs',
    'Team': 'nav.team',
    'Karriere': 'nav.career',
    'Kontakt & Standort': 'nav.contact'
  };
  const tnav = (label) => navKeyByLabel[label] ? t(navKeyByLabel[label], label) : label;
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__grid">
          <div>
            <img src={b.logo} alt={b.name} style={{height:60, width:'auto', display:'block'}} />
            <p className="footer__tagline">{t('footer.tagline_' + brand, b.tagline)}</p>
          </div>
          <div className="footer__col">
            <div className="footer__col-title">{t('footer.company', 'Unternehmen')}</div>
            <ul>{about.map(c => <li key={c.href}><a href={c.href}>{tnav(c.label)}</a></li>)}</ul>
          </div>
          <div className="footer__col">
            <div className="footer__col-title">{t('footer.services', 'Leistungen')}</div>
            <ul>
              <li><a href={'/' + brand + '/leistungen'}>{t('footer.overview', 'Übersicht')}</a></li>
              {services.map(s => <li key={s.slug}><a href={'/' + brand + '/' + s.slug}>{t('svc.' + s.slug + '.title', s.title)}</a></li>)}
            </ul>
          </div>
          <div className="footer__col">
            <div className="footer__col-title">{t('footer.contact', 'Kontakt')}</div>
            <p>
              {b.address.split('\n').map((l,i)=>(<React.Fragment key={i}>{l}<br/></React.Fragment>))}
              <br/>{t('footer.tel', 'Tel.')}: {b.phone}<br/>{b.email}
            </p>
          </div>
        </div>
        <div className="footer__bottom">
          <div>© {new Date().getFullYear()} Quick City</div>
          <div className="footer__legal"><a href={`/${brand}/impressum`}>{t('footer.imprint', 'Impressum')}</a><a href={`/${brand}/datenschutz`}>{t('footer.privacy', 'Datenschutz')}</a></div>
        </div>
      </div>
    </footer>
  );
}

function Layout({ brand, children }) {
  const b = window.QC_DATA.brands[brand];
  const route = useRoute();
  // Apply brand colors via inline style on body
  useEffect(() => {
    document.body.style.setProperty('--accent', b.accent);
    document.body.style.setProperty('--switch-color', b.switch);
    // Swap favicon to match the active brand (red IFM / orange LNS logo)
    var icon = document.querySelector('link[rel="icon"]');
    if (!icon) { icon = document.createElement('link'); icon.rel = 'icon'; document.head.appendChild(icon); }
    icon.type = 'image/jpeg';
    icon.href = brand === 'lns' ? 'assets/logo-lns.jpg' : 'assets/logo-ifm.jpg';
  }, [brand]);
  return (
    <>
      <Nav brand={brand} currentHash={'/' + route.path} />
      <main className="page">{children}</main>
      <Footer brand={brand} />
    </>
  );
}

function Modal({ open, onClose, children }) {
  if (!open) return null;
  return (
    <div className="modal" onClick={e => { if (e.target.classList.contains('modal')) onClose(); }}>
      <div className="modal__box">
        <button className="modal__close" onClick={onClose}>×</button>
        {children}
      </div>
    </div>
  );
}

function ServiceGrid({ brand }) {
  const { t } = useT();
  const services = brand === 'ifm' ? window.QC_DATA.ifmServices : window.QC_DATA.lnsServices;
  return (
    <div className="svc-grid">
      {services.map(s => (
        <a key={s.slug} className="svc-card" href={'/' + brand + '/' + s.slug}>
          <div className="svc-card__deco">{s.deco}</div>
          <div className="svc-card__title">{t('svc.' + s.slug + '.title', s.title)}</div>
          <div className="svc-card__sub">{t('svc.' + s.slug + '.sub', s.sub)}</div>
          <div className="svc-card__arrow">{t('common.learn_more', 'Mehr erfahren')} →</div>
        </a>
      ))}
    </div>
  );
}

Object.assign(window, { useT, useRoute, detectBrand, Nav, Footer, Layout, Modal, ServiceGrid, LangSwitcher });