// Academic Homepage v2 — components

// Bilingual helper (reads window.__currentLang set by App)
const T = ({ zh, en }) => {
  const lang = window.__currentLang || "en";
  return lang === "en" ? en : zh;
};

const tx = (zh, en) => (window.__currentLang === "en" ? en : zh);

// ============================================================
// HERO
// ============================================================
function Hero({ lang }) {
  return (
    <section className="hero">
      <img src="assets/bridge-fire-safety-hero.png" alt="Bridge fire research scene" />
      <div className="hero-overlay">
        <div className="hero-name">
          <p className="eyebrow">
            <span>{tx("结构火灾安全", "Structural Fire Safety")}</span>
            <span>{tx("桥梁与建筑", "Bridges & Buildings")}</span>
          </p>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// MENU BAR
// ============================================================
const TABS = [
  { id: "about",    zh: "个人信息", en: "About" },
  { id: "research", zh: "科研",     en: "Research" },
  { id: "papers",   zh: "论文",     en: "Publications" },
  { id: "data",     zh: "开源数据", en: "Open Data" },
  { id: "teaching", zh: "教学",     en: "Teaching" },
];

function MenuBar({ active, onTab, lang, onLang, onEmail }) {
  const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);
  const activeTab = TABS.find((t) => t.id === active) || TABS[0];

  return (
    <nav className="menubar">
      <div className="menu">
        <div className="menu-tabs" role="tablist">
          {TABS.map((t) => (
            <button
              key={t.id}
              role="tab"
              aria-selected={active === t.id}
              className={"tab-btn" + (active === t.id ? " is-active" : "")}
              onClick={() => onTab(t.id)}
            >
              {tx(t.zh, t.en)}
            </button>
          ))}
        </div>
        <div className={"mobile-menu" + (mobileMenuOpen ? " is-open" : "")}>
          <button
            className="mobile-menu-toggle"
            type="button"
            aria-expanded={mobileMenuOpen}
            aria-label={tx("切换栏目", "Switch section")}
            onClick={() => setMobileMenuOpen((open) => !open)}
          >
            <span>{tx(activeTab.zh, activeTab.en)}</span>
          </button>
          {mobileMenuOpen ? (
            <div className="mobile-menu-panel" role="menu">
              {TABS.map((t) => (
                <button
                  key={t.id}
                  type="button"
                  role="menuitem"
                  className={active === t.id ? "is-active" : ""}
                  onClick={() => {
                    onTab(t.id);
                    setMobileMenuOpen(false);
                  }}
                >
                  {tx(t.zh, t.en)}
                </button>
              ))}
            </div>
          ) : null}
        </div>
        <div className="menu-end">
          <button className="nav-email" onClick={onEmail}>Email</button>
          <div className="lang-switch" data-active={lang === "en" ? "en" : "zh"}>
            <button className={lang === "zh-CN" ? "is-active" : ""} onClick={() => onLang("zh-CN")}>中文</button>
            <button className={lang === "en" ? "is-active" : ""} onClick={() => onLang("en")}>EN</button>
          </div>
        </div>
      </div>
    </nav>
  );
}

// ============================================================
// ============================================================
// ABOUT TAB — CV
// ============================================================
function AboutTab({ data, lang }) {
  return (
    <div className="tab-panel">
      <div className="panel">
        <div className="cv-grid">
          <div className="timeline">
            <div className="tl-section">
              <h4>{tx("教育经历", "Education")}</h4>
              {data.education.map((e, k) => (
                <div className="tl-item" key={k}>
                  <span className="when">{tx(e.whenZh, e.whenEn)}</span>
                  <div className="what">
                    <span className="what-title">{tx(e.zh, e.en)}</span>
                    <span>{tx(e.descZh, e.descEn)}</span>
                  </div>
                </div>
              ))}
            </div>

            <div className="tl-section">
              <h4>{tx("工作经历", "Experience")}</h4>
              {data.experience.map((e, k) => (
                <div className="tl-item" key={k}>
                  <span className="when">{tx(e.whenZh, e.whenEn)}</span>
                  <div className="what">
                    <span className="what-title">{tx(e.zh, e.en)}</span>
                    <span>{tx(e.descZh, e.descEn)}</span>
                  </div>
                </div>
              ))}
            </div>

            <div className="tl-section">
              <h4>{tx("荣誉与奖项", "Awards")}</h4>
              <ul className="awards-list">
                {data.awards.map((a, k) => (
                  <li key={k}>
                    <span className="bullet">·</span>
                    <span>{tx(a.zh, a.en)}</span>
                    <span className="year">{a.year}</span>
                  </li>
                ))}
              </ul>
            </div>

            <div className="tl-section">
              <h4>{tx("学术服务", "Academic Service")}</h4>
              <ul className="awards-list">
                {data.service.map((s, k) => (
                  <li key={k}>
                    <span className="bullet">·</span>
                    <span>{tx(s.zh, s.en)}</span>
                    <span className="year">{s.role}{(s.periodZh || s.periodEn) ? `, ${tx(s.periodZh, s.periodEn)}` : ""}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>

          <div className="cv-profile">
            <div className="cv-portrait">
              <img src="assets/profile-liu-zhi.png" alt="" />
            </div>
            <div className="cv-name">
              <h2>{tx("刘志", "Zhi LIU")}</h2>
              <p className="role">{tx("副教授（校聘）", "Lecturer")}</p>
              <p className="org">
                {tx("土木工程学院", "College of Civil Engineering")}<br />
                {tx("南京工业大学", "Nanjing Tech University")}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// RESEARCH TAB
// ============================================================
function PaperCard({ p }) {
  return (
    <div className="paper-card">
      {p.cover
        ? <a className="paper-media has-img" href={p.link || "#"} target={p.link ? "_blank" : undefined} rel="noopener">
            <img src={p.cover} alt={tx(p.titleZh, p.titleEn)} />
          </a>
        : <div className="paper-media" data-placeholder={tx("图片区域", "Image area")}></div>}
      <div className="paper-text">
        {(p.venueZh || p.venueEn) ? <span className="paper-venue">{tx(p.venueZh, p.venueEn)}</span> : null}
        <h3>
          {p.link
            ? <a href={p.link} target="_blank" rel="noopener">{tx(p.titleZh, p.titleEn)}</a>
            : tx(p.titleZh, p.titleEn)}
        </h3>
        {(p.authorsZh || p.authorsEn) ? <p className="paper-authors">{tx(p.authorsZh, p.authorsEn)}</p> : null}
        {(p.bodyZh || p.bodyEn) ? <p className="paper-body">{tx(p.bodyZh, p.bodyEn)}</p> : (
          <p className="paper-hint">{tx("在此放置论文图与说明文字", "Add the paper figure and description here")}</p>
        )}
      </div>
    </div>
  );
}

function ResearchTab({ data, lang }) {
  const papers = data.representativePapers;
  const left = papers.filter((_, k) => k % 2 === 0);
  const right = papers.filter((_, k) => k % 2 === 1);
  return (
    <div className="tab-panel">
      <div className="panel">
        <div className="paper-masonry">
          <div className="paper-col">
            {left.map((p, k) => <PaperCard p={p} key={k} />)}
          </div>
          <div className="paper-col">
            {right.map((p, k) => <PaperCard p={p} key={k} />)}
          </div>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// PAPERS TAB
// ============================================================
function renderAuthors(str) {
  const parts = str.split(/,\s*/);
  const last = parts.length - 1;
  return parts.map((raw, i) => {
    let p = raw.trim();
    const trailingDot = p.endsWith(".");
    if (trailingDot) p = p.slice(0, -1);
    const isCorresponding = p.endsWith("*");
    if (isCorresponding) p = p.slice(0, -1);
    const isMe = p === "Zhi Liu" || p === "刘志";
    const cls = "author" + (isMe ? " me" : "") + (isCorresponding ? " corresponding" : "");
    return (
      <React.Fragment key={i}>
        <span className={cls}>{p}{isCorresponding ? "*" : ""}</span>
        {trailingDot ? "." : ""}{i < last ? ", " : ""}
      </React.Fragment>
    );
  });
}

function PubList({ items }) {
  if (!items.length) {
    return <p className="pub-empty">{tx("暂无", "—")}</p>;
  }
  const lang = window.__currentLang || "en";
  return (
    <ol className="pub-list">
      {items.map((p, k) => {
        const showCnNote = p.language === "zh" && lang === "en";
        return (
          <li className={"pub-item" + (p.invited ? " is-invited" : "")} key={k}>
            <span className="num">{k + 1}.</span>
            <div className="body">
              <span className="authors">{renderAuthors(tx(p.authors.zh, p.authors.en))}</span>{" "}
              {p.url
                ? <a className="pub-link" href={p.url} target="_blank" rel="noopener noreferrer">{tx(p.title.zh, p.title.en)}</a>
                : tx(p.title.zh, p.title.en)}{" "}
              <em className="journal">{tx(p.journal.zh, p.journal.en)}</em>
              {p.note ? `, ${tx(p.note.zh, p.note.en)}` : ""}
              {showCnNote ? <span className="lang-note"> (in Chinese)</span> : null}
              {"."}
            </div>
            {p.invited
              ? <span className="badge invited">{tx("邀稿", "Invited")}</span>
              : <span className="badge spacer" aria-hidden="true"></span>}
          </li>
        );
      })}
    </ol>
  );
}

function PapersTab({ data, lang }) {
  const [articleFilter, setArticleFilter] = React.useState("all");
  const articleFilters = [
    { id: "all",       zh: "全部", en: "All" },
    { id: "bridges",   zh: "桥梁", en: "Bridges" },
    { id: "buildings", zh: "建筑", en: "Buildings" },
  ];

  const articles    = data.publications.filter(p => p.type === "article");
  const conferences = data.publications.filter(p => p.type === "conference");
  const others      = data.publications.filter(p => p.type === "others");

  const filteredArticles = articleFilter === "all"
    ? articles
    : articles.filter(p => p.cat === articleFilter);

  return (
    <div className="tab-panel">
      <div className="panel">

        <section className="pub-section">
          <div className="pub-section-head">
            <h2>{tx("期刊论文", "Article")}</h2>
            <div className="pub-filters">
              {articleFilters.map(f => (
                <button
                  key={f.id}
                  className={articleFilter === f.id ? "is-active" : ""}
                  onClick={() => setArticleFilter(f.id)}
                >
                  {tx(f.zh, f.en)}
                </button>
              ))}
            </div>
          </div>
          <PubList items={filteredArticles} />
        </section>

        <section className="pub-section">
          <div className="pub-section-head">
            <h2>{tx("会议论文", "Conference Paper")}</h2>
          </div>
          <PubList items={conferences} />
        </section>

        <section className="pub-section">
          <div className="pub-section-head">
            <h2>{tx("其他", "Others")}</h2>
          </div>
          <PubList items={others} />
        </section>

      </div>
    </div>
  );
}

// ============================================================
// DATA TAB
// ============================================================
function DataTab({ data, lang }) {
  return (
    <div className="tab-panel">
      <div className="panel">
        <div className="data-grid">
          {data.datasets.length === 0 ? (
            <p className="pub-empty">{tx("内容待添加。", "Coming soon.")}</p>
          ) : data.datasets.map((d, k) => (
            <div className="data-card" key={k}>
              <div className="data-icon" data-kind={d.kind}>
                {d.kind === "code" ? "CODE" : "DATA"}
              </div>
              <div>
                <h3>
                  {d.url ? (
                    <a className="data-title-link" href={d.url} target="_blank" rel="noopener noreferrer">
                      {tx(d.zh, d.en)}
                    </a>
                  ) : tx(d.zh, d.en)}
                </h3>
                <p>{tx(d.descZh, d.descEn)}</p>
                <div className="meta">
                  <span><strong>{d.size}</strong></span>
                  <span>{d.format}</span>
                  <span>{d.license}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ============================================================
// TEACHING TAB
// ============================================================
function TeachingTab({ data, lang }) {
  return (
    <div className="tab-panel">
      <div className="panel">
        <div className="course-grid">
          {data.courses.length === 0 ? (
            <p className="pub-empty">{tx("课程信息待添加。", "Coming soon.")}</p>
          ) : data.courses.map((c, k) => (
            <div className="course-card" key={k}>
              <span className="level">{tx(c.levelZh, c.levelEn)}</span>
              <h3>{tx(c.zh, c.en)}</h3>
              {c.code ? <span className="code">{c.code}</span> : null}
              {(c.descZh || c.descEn) ? <p>{tx(c.descZh, c.descEn)}</p> : null}
              {(c.credits || c.term) ? (
                <div className="footer">
                  {c.credits ? <span>{c.credits} {tx("学分", "credits")}</span> : <span />}
                  {c.term ? <span>{c.term}</span> : null}
                </div>
              ) : null}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ============================================================
// FOOTER + TOAST
// ============================================================
function SiteFooter() {
  return (
    <footer className="site-footer">
      <span>{tx("刘志", "Zhi LIU")}</span>
      <span>
        <a href="mailto:zliu@njtech.edu.cn">zliu@njtech.edu.cn</a>
      </span>
    </footer>
  );
}

function Toast({ message }) {
  if (!message) return null;
  return <div className="toast" role="status">{message}</div>;
}

Object.assign(window, {
  Hero, MenuBar, AboutTab, ResearchTab, PapersTab, DataTab, TeachingTab,
  SiteFooter, Toast, T, tx,
});