// Shared components for kolabs site
const { useState, useEffect, useRef } = React;

// Path router helpers (history API)
function usePathRoute() {
  const [path, setPath] = useState(() => decodeURIComponent(window.location.pathname || '/'));
  useEffect(() => {
    const onPop = () => setPath(decodeURIComponent(window.location.pathname || '/'));
    window.addEventListener('popstate', onPop);
    window.addEventListener('kolabs:navigate', onPop);
    return () => {
      window.removeEventListener('popstate', onPop);
      window.removeEventListener('kolabs:navigate', onPop);
    };
  }, []);
  return path;
}

function navigate(to) {
  if (!to) return;
  if (window.location.pathname === to) return;
  window.history.pushState({}, '', to);
  window.dispatchEvent(new Event('kolabs:navigate'));
  window.scrollTo({ top: 0, behavior: 'instant' });
}

// Backward-compat alias. The single source of truth for path↔lang mapping
// is `pathForLang` in i18n.jsx (uses PATH_MAP for slug translation).
function applyLang(to, lang) {
  return pathForLang(to, lang);
}

function Link({ to, children, className, onClick: extraOnClick, ...rest }) {
  const { lang } = useLang();
  const href = applyLang(to, lang);
  const onClick = (e) => {
    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button === 1) return;
    e.preventDefault();
    if (extraOnClick) extraOnClick(e);
    navigate(href);
  };
  return (
    <a href={href} onClick={onClick} className={className} {...rest}>
      {children}
    </a>
  );
}

// Top status ticker
function Ticker() {
  const [time, setTime] = useState(new Date());
  const t = useT();
  useEffect(() => {
    const id = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const hh = String(time.getHours()).padStart(2, '0');
  const mm = String(time.getMinutes()).padStart(2, '0');
  const ss = String(time.getSeconds()).padStart(2, '0');
  return (
    <div className="ticker">
      <div className="ticker-inner">
        <span className="dot"></span>
        <span><strong style={{color:'var(--ink)'}}>SYS</strong> · {t.ticker.sys}</span>
        <span className="sep"></span>
        <span>{t.ticker.version}</span>
        <span className="sep"></span>
        <span>{t.ticker.apps}</span>
        <span className="spacer"></span>
        <span>{hh}:{mm}:{ss}</span>
      </div>
    </div>
  );
}

// Nav with Apps dropdown
function Nav({ current }) {
  const [open, setOpen] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const t = useT();
  const { lang } = useLang();
  const ddRef = useRef(null);
  useEffect(() => {
    function onClick(e) {
      if (ddRef.current && !ddRef.current.contains(e.target)) setOpen(false);
    }
    document.addEventListener('mousedown', onClick);
    return () => document.removeEventListener('mousedown', onClick);
  }, []);

  const apps = [
    { ...t.appsMeta.noctavia, to: '/noctavia' },
    { ...t.appsMeta.zikirmatik, to: '/zikirmatik' },
    { ...t.appsMeta.ramazan, to: '/ramazan' },
    { ...t.appsMeta.kelimebul, to: '/kelime-bul' },
    { ...t.appsMeta.hesapvakti, to: '/hesap-vakti' },
    { ...t.appsMeta.tasarrufcu, to: '/tasarrufcu' },
  ];

  const isAppPage = ['/noctavia','/zikirmatik','/ramazan','/kelime-bul','/hesap-vakti','/tasarrufcu'].some(p => current === p || current.startsWith(p + '/'));

  return (
    <div className="nav">
      <div className="nav-inner">
        <Link to="/" className="brand">
          <span className="brand-mark">k</span>
          <span>kolabs<span style={{color:'var(--accent)'}}>.</span></span>
        </Link>
        <div className="nav-links desktop-only">
          <Link to="/" className={current === '/' ? 'active' : ''}>{t.nav.home}</Link>
          <div className="nav-dd" ref={ddRef}>
            <button className={`nav-dd-trigger ${isAppPage ? 'active' : ''}`} onClick={()=>setOpen(o=>!o)}>
              {t.nav.apps}
              <svg width="10" height="10" viewBox="0 0 10 10" style={{transform: open?'rotate(180deg)':'none', transition:'transform .2s'}}>
                <path d="M2 4l3 3 3-3" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </button>
            {open && (
              <div className="nav-dd-menu">
                {apps.map((a, i) => (
                  <Link key={i} to={a.to} className="nav-dd-item" onClick={()=>setOpen(false)}>
                    <div>
                      <div className="nav-dd-name">{a.name}</div>
                      <div className="nav-dd-desc">{a.desc}</div>
                    </div>
                    <span className="nav-dd-tag">{a.tag}</span>
                  </Link>
                ))}
              </div>
            )}
          </div>
          <a href="#manifesto" onClick={(e)=>{e.preventDefault();navigate(applyLang('/', lang));setTimeout(()=>{const el=document.getElementById('manifesto');if(el)el.scrollIntoView({behavior:'smooth'});},80);}}>{t.nav.manifesto}</a>
          <a href="mailto:info@kolabs.tr">{t.nav.contact}</a>
          <LanguageSwitcher />
        </div>
        <a href="https://play.google.com/store/apps/dev?id=4847348210883195663" target="_blank" rel="noopener" className="nav-cta desktop-only">
          {t.nav.playStore} ↗
        </a>
        <button className="nav-burger mobile-only" onClick={()=>setMobileOpen(o=>!o)} aria-label={t.nav.menu}>
          <span></span><span></span><span></span>
        </button>
      </div>
      {mobileOpen && (
        <div className="mobile-menu">
          <Link to="/" onClick={()=>setMobileOpen(false)}>{t.nav.home}</Link>
          <div className="mobile-section">{t.nav.apps}</div>
          {apps.map((a,i) => (
            <Link key={i} to={a.to} onClick={()=>setMobileOpen(false)} className="mobile-app">
              <span>{a.name}</span><span className="nav-dd-tag">{a.tag}</span>
            </Link>
          ))}
          <a href="mailto:info@kolabs.tr">{t.nav.contact}</a>
          <LanguageSwitcher />
        </div>
      )}
    </div>
  );
}

// Footer
function Footer() {
  const t = useT();
  return (
    <footer className="site-foot">
      <div className="foot-inner">
        <div className="foot-brand">
          <h3>kolabs<span style={{color:'var(--accent)'}}>.</span></h3>
          <p>{t.footer.intro}</p>
        </div>
        <div className="foot-col">
          <h4>{t.footer.appsTitle}</h4>
          <ul>
            <li><Link to="/noctavia">{t.appsMeta.noctavia.name}</Link></li>
            <li><Link to="/zikirmatik">{t.appsMeta.zikirmatik.name}</Link></li>
            <li><Link to="/ramazan">{t.appsMeta.ramazan.name}</Link></li>
            <li><Link to="/kelime-bul">{t.appsMeta.kelimebul.name}</Link></li>
            <li><Link to="/hesap-vakti">{t.appsMeta.hesapvakti.name}</Link></li>
            <li><Link to="/tasarrufcu">{t.appsMeta.tasarrufcu.name}</Link></li>
          </ul>
        </div>
        <div className="foot-col">
          <h4>{t.footer.noctaviaTitle}</h4>
          <ul>
            <li><Link to="/noctavia/sesli-yorum">{t.footer.sesliYorum}</Link></li>
            <li><Link to="/noctavia/ruya-sozlugu">{t.footer.ruyaSozlugu}</Link></li>
            <li><Link to="/noctavia/tema-analizi">{t.footer.temaAnalizi}</Link></li>
            <li><Link to="/noctavia/ruya-gunlugu">{t.footer.ruyaGunlugu}</Link></li>
            <li><Link to="/noctavia/premium">{t.footer.premium}</Link></li>
          </ul>
        </div>
        <div className="foot-col">
          <h4>{t.footer.legalTitle}</h4>
          <ul>
            <li><Link to="/gizlilik">{t.footer.privacy}</Link></li>
            <li><Link to="/kullanim-sartlari">{t.footer.terms}</Link></li>
            <li><a href="mailto:info@kolabs.tr">info@kolabs.tr</a></li>
          </ul>
        </div>
      </div>
      <div className="foot-bottom">
        <span>{t.footer.rights}</span>
        <span>{t.footer.tagline}</span>
      </div>
    </footer>
  );
}

// App card on home
function AppCard({ app }) {
  const t = useT();
  const { lang } = useLang();
  return (
    <div className="app-card" onClick={() => app.link && navigate(applyLang(app.link, lang))} role="button" tabIndex="0">
      <div className="app-card-head">
        <div className="app-icon">
          <img src={app.icon} alt={app.name} />
        </div>
        {app.status === 'soon' ? (
          <span className="app-tag">{t.home.statusSoon}</span>
        ) : (
          <span className="app-tag live">{t.home.statusLive}</span>
        )}
      </div>
      <h3 className="app-name">{app.name}</h3>
      <p className="app-desc">{app.tagline}</p>
      <div className="app-card-foot">
        <span>{app.category}</span>
        <span className="arrow">→</span>
      </div>
    </div>
  );
}

// Reusable button to play store
function PlayButton({ appId, children, variant = 'primary' }) {
  const t = useT();
  if (children === undefined) children = t.common.download;
  const cls = variant === 'accent' ? 'btn btn-accent' : variant === 'ghost' ? 'btn btn-ghost' : 'btn btn-primary';
  const url = `https://play.google.com/store/apps/details?id=${appId}`;
  return (
    <a href={url} target="_blank" rel="noopener noreferrer" className={cls}
       onClick={() => window.trackInstall && window.trackInstall(appId)}>
      <span>{children}</span>
      <span className="arrow">↗</span>
    </a>
  );
}

// Crumbs
function Crumbs({ items }) {
  return (
    <div className="crumbs">
      {items.map((it, i) => (
        <React.Fragment key={i}>
          {i > 0 && <span className="sep">/</span>}
          {it.to ? <Link to={it.to}>{it.label}</Link> : <span className="current">{it.label}</span>}
        </React.Fragment>
      ))}
    </div>
  );
}

Object.assign(window, { usePathRoute, navigate, applyLang, Link, Ticker, Nav, Footer, AppCard, PlayButton, Crumbs });