/* Shared layout: Header, Footer, Page wrapper, helpers */

const { useState, useEffect, useRef, useMemo } = React;

// ---------- i18n hook ----------
function useT(lang) {
  return (key) => (window.I18N[lang] && window.I18N[lang][key]) || window.I18N.en[key] || key;
}
window.useT = useT;

// ---------- Date helpers ----------
function formatDate(d, lang) {
  const t = useT(lang);
  const dt = new Date(d);
  return `${t("month."+dt.getMonth())} ${dt.getDate()}, ${dt.getFullYear()}`;
}
function formatTime(d) {
  const dt = new Date(d);
  return `${String(dt.getHours()).padStart(2,"0")}:${String(dt.getMinutes()).padStart(2,"0")}`;
}
function formatDayName(d, lang) {
  const t = useT(lang);
  const dt = new Date(d);
  const today = new Date();
  const tom = new Date(); tom.setDate(today.getDate()+1);
  const sameDay = (a,b) => a.toDateString() === b.toDateString();
  if (sameDay(dt, today)) return t("today");
  if (sameDay(dt, tom)) return t("tomorrow");
  return t("wk."+dt.getDay()).toUpperCase();
}
window.formatDate = formatDate;
window.formatTime = formatTime;
window.formatDayName = formatDayName;

// ---------- Header ----------
window.Header = function Header({ route, navigate, lang, setLang }) {
  const t = useT(lang);
  const [openTeams, setOpenTeams] = useState(false);
  const [openAbout, setOpenAbout] = useState(false);
  const teamsRef = useRef(null);
  const aboutRef = useRef(null);

  useEffect(() => {
    function onClick(e) {
      if (teamsRef.current && !teamsRef.current.contains(e.target)) setOpenTeams(false);
      if (aboutRef.current && !aboutRef.current.contains(e.target)) setOpenAbout(false);
    }
    document.addEventListener("mousedown", onClick);
    return () => document.removeEventListener("mousedown", onClick);
  }, []);

  const isActive = (k) => route.page === k || (k === "teams" && route.page === "team")
                       || (k === "about" && (route.page === "matchhistory"));
  return (
    <header className="header">
      <div className="header-inner">
        <button className="brand" onClick={() => navigate({ page: "home" })} style={{background:"none", border:0, color:"inherit", padding:0}}>
          <span className="mark"><BrandMark size={32} /></span>
          <span className="name">ABYSS<span>ALIS</span></span>
        </button>

        <nav className="nav">
          <button className={"nav-link " + (isActive("home") ? "active" : "")} onClick={() => navigate({ page: "home" })}>{t("nav.home")}</button>

          {/* Teams dropdown */}
          <div ref={teamsRef} style={{ position: "relative" }}>
            <button
              className={"nav-link " + (isActive("teams") ? "active" : "") + (openTeams ? " open" : "")}
              onClick={() => { setOpenTeams(o => !o); setOpenAbout(false); }}
            >
              {t("nav.teams")} <span className="caret"><Icon.arrowDown /></span>
            </button>
            {openTeams && (
              <div className="nav-dropdown">
                <button className="nav-dropdown-item" onClick={() => { navigate({ page: "teams" }); setOpenTeams(false); }}>
                  <strong style={{fontFamily:"var(--display)", fontSize:13, letterSpacing:"0.16em", textTransform:"uppercase"}}>{t("nav.allteams")}</strong>
                  <span className="game-tag"><Icon.arrow size={12} /></span>
                </button>
                <div style={{height:1, background:"var(--abyss-line)", margin:"4px 0"}} />
                {window.TEAMS.map(team => (
                  <button key={team.slug} className="nav-dropdown-item" onClick={() => { navigate({ page: "team", slug: team.slug }); setOpenTeams(false); }}>
                    <span style={{ fontFamily:"var(--display)", fontWeight:700, fontSize:13, letterSpacing:"0.04em", textTransform:"uppercase" }}>
                      {team.name}
                    </span>
                    <span className="game-tag">{(window.GAMES.find(g=>g.id===team.game)||{}).short}</span>
                  </button>
                ))}
              </div>
            )}
          </div>

          <button className={"nav-link " + (isActive("news") ? "active" : "")} onClick={() => navigate({ page: "news" })}>{t("nav.news")}</button>
          <button className={"nav-link " + (isActive("achievements") ? "active" : "")} onClick={() => navigate({ page: "achievements" })}>{t("nav.achievements")}</button>

          {/* About dropdown */}
          <div ref={aboutRef} style={{ position: "relative" }}>
            <button
              className={"nav-link " + (isActive("about") ? "active" : "") + (openAbout ? " open" : "")}
              onClick={() => { setOpenAbout(o => !o); setOpenTeams(false); }}
            >
              {t("nav.about")} <span className="caret"><Icon.arrowDown /></span>
            </button>
            {openAbout && (
              <div className="nav-dropdown" style={{ minWidth: 220 }}>
                <button className="nav-dropdown-item" onClick={() => { navigate({ page: "about" }); setOpenAbout(false); }}>
                  <span>{t("nav.about.us")}</span>
                </button>
                <button className="nav-dropdown-item" onClick={() => { navigate({ page: "matchhistory" }); setOpenAbout(false); }}>
                  <span>{t("nav.about.matchhistory")}</span>
                </button>
              </div>
            )}
          </div>

          <button className={"nav-link " + (isActive("matchdays") ? "active" : "")} onClick={() => navigate({ page: "matchdays" })}>{t("nav.matchdays")}</button>
        </nav>

        <div className="header-right">
          <div className="lang-switch">
            <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
            <button className={lang === "da" ? "on" : ""} onClick={() => setLang("da")}>DA</button>
          </div>
          <button className="icon-btn" title="Discord"><Icon.discord size={14} /></button>
          <button className="icon-btn" title="Twitch"><Icon.twitch size={14} /></button>
        </div>
      </div>
    </header>
  );
};

// ---------- Footer ----------
window.Footer = function Footer({ navigate, lang }) {
  const t = useT(lang);
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <div className="brand-large">ABYSS<span>ALIS</span></div>
            <div style={{ fontFamily:"var(--mono)", fontSize:11, letterSpacing:"0.22em", color:"var(--ink-3)", textTransform:"uppercase", marginBottom:18 }}>
              {t("footer.tagline")}
            </div>
            <div className="contact">
              <strong style={{color:"var(--ink)"}}>{t("footer.owner")}</strong><br/>
              <a href="mailto:Fizz090202@outlook.dk">Fizz090202@outlook.dk</a><br/>
              Denmark
            </div>
          </div>
          <div>
            <h4>{t("footer.org")}</h4>
            <div className="footer-list">
              <a onClick={() => navigate({ page: "about" })}>{t("nav.about.us")}</a>
              <a onClick={() => navigate({ page: "teams" })}>{t("nav.teams")}</a>
              <a onClick={() => navigate({ page: "achievements" })}>{t("nav.achievements")}</a>
              <a onClick={() => navigate({ page: "matchhistory" })}>{t("nav.about.matchhistory")}</a>
            </div>
          </div>
          <div>
            <h4>{t("footer.legal")}</h4>
            <div className="footer-list">
              <a>{t("footer.tos")}</a>
              <a>{t("footer.privacy")}</a>
              <a>{t("footer.cookies")}</a>
              <a>{t("footer.imprint")}</a>
            </div>
          </div>
          <div>
            <h4>{t("footer.follow")}</h4>
            <div className="footer-socials">
              <a className="icon-btn" title="X / Twitter"><Icon.x /></a>
              <a className="icon-btn" title="Instagram"><Icon.instagram /></a>
              <a className="icon-btn" title="YouTube"><Icon.youtube /></a>
              <a className="icon-btn" title="Twitch"><Icon.twitch /></a>
              <a className="icon-btn" title="Discord"><Icon.discord /></a>
            </div>
            <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 16, lineHeight: 1.6 }}>
              {t("footer.contact.body")}
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <div>{t("footer.copyright")}</div>
          <div className="links">
            <a>{t("footer.tos")}</a>
            <a>{t("footer.privacy")}</a>
            <a>{t("footer.cookies")}</a>
          </div>
        </div>
        <div className="giant-text">ABYSSALIS</div>
      </div>
    </footer>
  );
};

// ---------- Match Card ----------
window.MatchCard = function MatchCard({ m, lang }) {
  const t = useT(lang);
  const isUpcoming = m.status === "upcoming";
  const dt = new Date(m.date);
  return (
    <div className="match">
      <div className={"badge " + (isUpcoming ? "" : (m.status === "win" ? "win" : "loss"))}>
        {isUpcoming ? `${formatDayName(m.date, lang)} · ${formatTime(m.date)}` : (m.status === "win" ? t("win") : t("loss"))}
      </div>
      <div className="team-side">
        <div className="logo"><TeamLogo team={{slug:m.team_slug, abbr:m.team_abbr, founded:""}} size={48}/></div>
        <div className="team-text">
          <div className="team-name">{m.team}</div>
          <div className="team-tag">{m.team_abbr}</div>
        </div>
      </div>
      <div className="center">
        {isUpcoming
          ? <div className="vs">{t("vs")}</div>
          : (
            <div style={{display:"flex", gap:8, justifyContent:"center", alignItems:"baseline"}}>
              <span className={"score " + (m.status === "win" ? "win" : "")}>{m.score_us}</span>
              <span className="score-sep">:</span>
              <span className={"score " + (m.status === "loss" ? "win" : "")}>{m.score_them}</span>
            </div>
          )}
        <div className="when">{m.tournament}</div>
      </div>
      <div className="team-side right">
        <div className="team-text">
          <div className="team-name">{m.opp}</div>
          <div className="team-tag">{m.opp_abbr}</div>
        </div>
        <div className="logo">
          <svg viewBox="0 0 80 80" width="48" height="48"><rect width="80" height="80" fill="#0a1628"/><text x="40" y="48" textAnchor="middle" fontFamily="'Big Shoulders Display'" fontWeight="800" fontSize="22" fill="rgba(244,248,255,0.5)" letterSpacing="2">{m.opp_abbr}</text></svg>
        </div>
      </div>
    </div>
  );
};

// ---------- Section header ----------
window.SectionHead = function SectionHead({ num, title, sub, right }) {
  return (
    <div className="section-head">
      <div className="left">
        {num && <div className="num">{num}</div>}
        <h2 className="display-lg">{title}</h2>
        {sub && <div style={{ color: "var(--ink-3)", fontSize: 14, marginTop: 4 }}>{sub}</div>}
      </div>
      {right}
    </div>
  );
};

// ---------- Page hero ----------
window.PageHero = function PageHero({ crumbs = [], title, lead, navigate, lang }) {
  const t = useT(lang);
  return (
    <div className="page-hero">
      <div className="wrap page-hero-inner">
        <div className="crumbs">
          <button onClick={() => navigate({ page: "home" })}>{t("nav.home")}</button>
          {crumbs.map((c, i) => (
            <React.Fragment key={i}>
              <span className="sep">/</span>
              {c.onClick
                ? <button onClick={c.onClick}>{c.label}</button>
                : <span style={{ color: "var(--ink)" }}>{c.label}</span>}
            </React.Fragment>
          ))}
        </div>
        <h1>{title}</h1>
        {lead && <p className="lead">{lead}</p>}
      </div>
    </div>
  );
};