// Header — sticky nav + countdown sale banner
const Ic = window.Ic;

function CountdownBanner() {
  function secsLeft() {
    const now = new Date();
    const end = new Date(now);
    end.setHours(23, 59, 59, 999);
    return Math.max(0, Math.floor((end - now) / 1000));
  }

  const [secs, setSecs] = React.useState(secsLeft);

  React.useEffect(() => {
    const t = setInterval(() => setSecs(secsLeft()), 1000);
    return () => clearInterval(t);
  }, []);

  const h = String(Math.floor(secs / 3600)).padStart(2, "0");
  const m = String(Math.floor((secs % 3600) / 60)).padStart(2, "0");
  const s = String(secs % 60).padStart(2, "0");

  const msg = `✦  50% ХЯМДРАЛ ДУУСАХАД  ${h}:${m}:${s}                    ✦  WIRED ONLY · NOT AIRPODS                    ✦  50% ХЯМДРАЛ ДУУСАХАД  ${h}:${m}:${s}                    ✦  WIRED ONLY · NOT AIRPODS                    `;

  return (
    <div style={{ background:"#FF3B6F", overflow:"hidden", height:34, display:"flex", alignItems:"center" }}>
      <div style={{ display:"flex", animation:"bannerScroll 20s linear infinite", whiteSpace:"nowrap", willChange:"transform" }}>
        {[0,1].map(k => (
          <span key={k} style={{ fontFamily:"Inter, sans-serif", fontSize:17, letterSpacing:"0.12em", textTransform:"uppercase", color:"#fff", fontWeight:900, paddingRight:0 }}>
            {msg}
          </span>
        ))}
      </div>
      <style>{`
        @keyframes bannerScroll {
          0%   { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
      `}</style>
    </div>
  );
}

function Header({ cartCount, onNav, onOpenCart, onSearch, screen }) {
  const [q, setQ] = React.useState("");
  const isMobile = screen === "mobile" || (typeof window !== "undefined" && window.innerWidth < 768);

  const handleSearch = e => {
    const v = e.target.value;
    setQ(v);
    if (onSearch) onSearch(v);
  };

  const handleKey = e => {
    if (e.key === "Enter" && onSearch) onSearch(q);
  };

  const navLinks = [
    ["home", "Shop"],
    ["catalog", "iPod"],
    ["catalog", "MP4"],
  ];

  return (
    <header className="site-header" style={hdrStyles.bar}>
      <CountdownBanner />

      {isMobile ? (
        <>
          {/* Mobile: лого + cart/icons нэг мөр */}
          <div style={hdrStyles.mobileTop}>
            <a onClick={() => { onNav("home"); setQ(""); }} style={{...hdrStyles.wordmark, cursor:"pointer"}}>
              <span style={hdrStyles.script}>nine.ub<span style={hdrStyles.nine}>9</span></span>
            </a>
            <div style={{ display:"flex", alignItems:"center", gap:8, marginLeft:"auto" }}>
              <a style={hdrStyles.iconBtn}><Ic.Heart /></a>
              <a href="admin.html" style={hdrStyles.adminBtn} title="Admin">⚙</a>
              <a onClick={onOpenCart} style={hdrStyles.cartBtn}>
                <Ic.Cart size={16}/>
                <span style={hdrStyles.cartCount}>{cartCount}</span>
              </a>
            </div>
          </div>
          {/* Mobile: search */}
          <div style={hdrStyles.mobileSearchRow}>
            <div style={{...hdrStyles.search, width:"100%", boxSizing:"border-box"}}>
              <Ic.Search size={15} />
              <input
                placeholder="Хайх · iPod, MP4..."
                style={hdrStyles.searchInput}
                value={q}
                onChange={handleSearch}
                onKeyDown={handleKey}
              />
              {q && (
                <button onClick={() => { setQ(""); if (onSearch) onSearch(""); }} style={{ background:"none", border:"none", cursor:"pointer", color:"#98979E", fontSize:14, lineHeight:1, padding:0 }}>×</button>
              )}
            </div>
          </div>
        </>
      ) : (
        /* Desktop: нэг мөр */
        <div style={hdrStyles.inner}>
          <a onClick={() => { onNav("home"); setQ(""); }} style={{...hdrStyles.wordmark, cursor:"pointer"}}>
            <span style={hdrStyles.script}>nine.ub<span style={hdrStyles.nine}>9</span></span>
          </a>
          <nav style={hdrStyles.nav}>
            {navLinks.map(([s,label], i) => (
              <a key={i} onClick={() => onNav(s, label !== "Shop" ? label : null)} style={hdrStyles.navItem}>{label}</a>
            ))}
          </nav>
          <div style={hdrStyles.right}>
            <div style={hdrStyles.search}>
              <Ic.Search size={16} />
              <input
                placeholder="Хайх · iPod, MP4..."
                style={hdrStyles.searchInput}
                value={q}
                onChange={handleSearch}
                onKeyDown={handleKey}
              />
              {q && (
                <button onClick={() => { setQ(""); if (onSearch) onSearch(""); }} style={{ background:"none", border:"none", cursor:"pointer", color:"#98979E", fontSize:14, lineHeight:1, padding:0 }}>×</button>
              )}
            </div>
            <a style={hdrStyles.iconBtn}><Ic.Heart /></a>
            <a href="admin.html" style={hdrStyles.adminBtn} title="Admin">⚙</a>
            <a onClick={onOpenCart} style={hdrStyles.cartBtn}>
              <Ic.Cart size={16}/>
              <span>Cart</span>
              <span style={hdrStyles.cartCount}>{cartCount}</span>
            </a>
          </div>
        </div>
      )}

      {isMobile ? (
        <div style={{ background:"#0E0D11", overflow:"hidden", height:32, display:"flex", alignItems:"center" }}>
          <div style={{ display:"flex", animation:"tickerScroll 14s linear infinite", whiteSpace:"nowrap", willChange:"transform" }}>
            {[0,1].map(k => (
              <span key={k} style={{ fontFamily:"JetBrains Mono, monospace", fontSize:11, letterSpacing:"0.18em", textTransform:"uppercase", color:"#fff", paddingRight:48 }}>
                ✦  ДАРААГИЙН ЭЭЛЖЭЭС МАНАЙ БҮХ БАРАА 25% НЭМЭГДЭНЭ  ✦  ДАРААГИЙН ЭЭЛЖЭЭС МАНАЙ БҮХ БАРАА 25% НЭМЭГДЭНЭ
              </span>
            ))}
          </div>
          <style>{`@keyframes tickerScroll { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }`}</style>
        </div>
      ) : (
        <div style={hdrStyles.ticker}>
          <span>Дараагийн ээлжээс манай бүх бараа 25% нэмэгдэхийг анхаарна уу!!</span>
        </div>
      )}
    </header>
  );
}

const hdrStyles = {
  bar: { top:0, zIndex:50, background:"#FFFFFF", borderBottom:"1px solid #E8E7E9" },
  inner: { maxWidth:1280, margin:"0 auto", padding:"14px 24px", display:"flex", alignItems:"center", gap:24 },
  wordmark: { display:"flex", alignItems:"baseline", textDecoration:"none", color:"#0E0D11" },
  script: { fontFamily:"Caveat, cursive", fontWeight:700, fontSize:36, lineHeight:1 },
  nine: { color:"#FF3B6F", fontSize:14, verticalAlign:"super", marginLeft:1 },
  nav: { display:"flex", gap:22, marginLeft:18 },
  navItem: { fontFamily:"Inter, sans-serif", fontWeight:500, fontSize:14, color:"#0E0D11", textDecoration:"none", cursor:"pointer" },
  right: { marginLeft:"auto", display:"flex", alignItems:"center", gap:10 },
  search: { display:"flex", alignItems:"center", gap:8, background:"#FAFAFB", border:"1px solid #E8E7E9", borderRadius:999, padding:"8px 14px", width:240 },
  searchInput: { border:"none", outline:"none", background:"transparent", fontFamily:"Inter, sans-serif", fontSize:13, color:"#0E0D11", width:"100%" },
  iconBtn: { width:36, height:36, display:"inline-flex", alignItems:"center", justifyContent:"center", color:"#0E0D11", cursor:"pointer" },
  adminBtn: { width:32, height:32, display:"inline-flex", alignItems:"center", justifyContent:"center", color:"#98979E", fontSize:16, textDecoration:"none", borderRadius:8, background:"#FAFAFB", border:"1px solid #E8E7E9" },
  cartBtn: { display:"inline-flex", alignItems:"center", gap:8, background:"#1F1D23", color:"#fff", padding:"9px 14px", borderRadius:999, fontFamily:"Inter, sans-serif", fontWeight:600, fontSize:13, cursor:"pointer" },
  cartCount: { background:"#FFEC42", color:"#0E0D11", borderRadius:999, padding:"2px 7px", fontFamily:"JetBrains Mono, monospace", fontSize:10, letterSpacing:"0.1em", fontWeight:600 },
  ticker: { background:"#0E0D11", color:"#fff", padding:"8px 0", display:"flex", gap:24, fontFamily:"JetBrains Mono, monospace", fontSize:11, letterSpacing:"0.18em", textTransform:"uppercase", overflow:"hidden", whiteSpace:"nowrap", justifyContent:"center" },
  mobileTop: { display:"flex", alignItems:"center", padding:"10px 16px" },
  mobileSearchRow: { padding:"0 16px 10px" },
  mobileNav: { display:"flex", borderTop:"1px solid #F0EFF2", borderBottom:"1px solid #F0EFF2" },
  mobileNavTab: { flex:1, textAlign:"center", fontFamily:"Inter, sans-serif", fontWeight:600, fontSize:14, color:"#0E0D11", textDecoration:"none", cursor:"pointer", padding:"11px 0", letterSpacing:"0.02em" },
};

window.Header = Header;