/* 慶宜僱傭代理 — Helper Database page (filter + search) */
function DatabasePage({ setPage, t }) {
  const D = t.ext.db;
  const [nat, setNat] = React.useState("all");
  const [spec, setSpec] = React.useState("all");
  const [q, setQ] = React.useState("");
  const [cv, setCv] = React.useState(null);

  const list = t.helpers.filter((p) => {
    if (nat !== "all" && p.nat !== nat) return false;
    if (spec !== "all" && p.spec !== spec) return false;
    if (q.trim()) {
      const hay = (p.name + " " + p.skills.join(" ") + " " + p.langs.join(" ") + " " + p.nat).toLowerCase();
      if (!hay.includes(q.trim().toLowerCase())) return false;
    }
    return true;
  });

  return (
    <main>
      <section className="section tight" style={{ paddingBottom: 24 }}>
        <div className="container">
          <SectionHead eyebrow={D.eyebrow} title={D.title} lede={D.lede} />
          {/* filter bar */}
          <div className="db-filter">
            <div className="db-search">
              <Icon n="search" style={{ width: 18, height: 18 }} />
              <input value={q} onChange={(e) => setQ(e.target.value)} placeholder={D.searchPh} />
            </div>
            <div className="db-selects">
              <label className="db-sel"><span>{D.natLabel}</span>
                <select value={nat} onChange={(e) => setNat(e.target.value)}>
                  {D.natOpts.map(([v, l]) => <option key={v} value={v}>{l}</option>)}
                </select>
              </label>
              <label className="db-sel"><span>{D.specLabel}</span>
                <select value={spec} onChange={(e) => setSpec(e.target.value)}>
                  {D.specOpts.map(([v, l]) => <option key={v} value={v}>{l}</option>)}
                </select>
              </label>
            </div>
            <div className="db-count"><b>{list.length}</b> {D.resultsLabel}</div>
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 8 }}>
        <div className="container">
          {list.length === 0 ? (
            <div className="db-empty"><Icon n="search-x" style={{ width: 30, height: 30 }} /><p>{D.empty}</p></div>
          ) : (
            <div className="db-grid">
              {list.map((p, i) => (
                <article className="dbcard" key={i}>
                  <div className="dbcard__media">
                    <Photo src={p.img && window.HY_IMG ? window.HY_IMG[p.img] : undefined} label="姐姐照片 Photo" style={{ height: 240, borderRadius: 0, border: "none" }} />
                    <span className="hbadge hbadge--rating"><Icon n="star" style={{ width: 13, height: 13 }} /> {p.rating}</span>
                    <span className="hbadge hbadge--nat">{p.nat}</span>
                  </div>
                  <div className="dbcard__body">
                    <h4>{p.name} <small>{p.age}</small></h4>
                    <div className="dbcard__rows">
                      <div className="dbrow"><span>{D.fYears}</span><b>{p.years} {t.helperSection.yrsLabel}</b></div>
                      <div className="dbrow"><span>{D.fMarital}</span><b>{p.marital}</b></div>
                      <div className="dbrow"><span>{D.fChild}</span><b>{p.child}</b></div>
                      <div className="dbrow"><span>{D.fElder}</span><b>{p.elder}</b></div>
                      <div className="dbrow"><span>{D.fLangs}</span><b>{p.langs.join("、")}</b></div>
                    </div>
                    <div className="dbcard__skills">{p.skills.map((s) => <span className="tag tag--cream" key={s}>{s}</span>)}</div>
                    <div className="dbcard__btns">
                      <button className="btn btn--outline btn--sm" type="button" onClick={(e) => { e.preventDefault(); setCv(p); }}><Icon n="file-text" />{D.viewCv}</button>
                      <button className="btn btn--gold btn--sm" type="button" onClick={(e) => { e.preventDefault(); setPage("contact"); }}><Icon n="calendar-check" />{D.book}</button>
                    </div>
                  </div>
                </article>
              ))}
            </div>
          )}
        </div>
      </section>

      {/* CV modal */}
      {cv && (
        <div className="cv-overlay" onClick={() => setCv(null)}>
          <div className="cv-modal" onClick={(e) => e.stopPropagation()}>
            <button className="cv-close" onClick={() => setCv(null)} aria-label="Close" type="button"><Icon n="x" /></button>
            <div className="cv-modal__head">
              <div className="cv-photo"><Photo src={cv.img && window.HY_IMG ? window.HY_IMG[cv.img] : undefined} label="Photo" style={{ height: 130, width: 110, borderRadius: 12, border: "none" }} /></div>
              <div>
                <h3>{cv.name} <small>{cv.age}</small></h3>
                <div className="cv-meta"><span><Icon n="star" style={{ width: 14, height: 14 }} /> {cv.rating}</span><span>{cv.nat}</span><span>{cv.marital}</span></div>
                <div className="dbcard__skills" style={{ marginTop: 10 }}>{cv.skills.map((s) => <span className="tag tag--cream" key={s}>{s}</span>)}</div>
              </div>
            </div>
            <div className="cv-rows">
              <div className="dbrow"><span>{D.fYears}</span><b>{cv.years} {t.helperSection.yrsLabel}</b></div>
              <div className="dbrow"><span>{D.fLangs}</span><b>{cv.langs.join("、")}</b></div>
              <div className="dbrow"><span>{D.fChild}</span><b>{cv.child}</b></div>
              <div className="dbrow"><span>{D.fElder}</span><b>{cv.elder}</b></div>
            </div>
            <p className="cv-blurb">{cv.blurb}</p>
            <button className="btn btn--gold btn--lg" type="button" onClick={(e) => { e.preventDefault(); setCv(null); setPage("contact"); }} style={{ width: "100%" }}><Icon n="calendar-check" />{D.book}</button>
          </div>
        </div>
      )}

      <CTABand setPage={setPage} t={t} />
    </main>
  );
}
window.DatabasePage = DatabasePage;