/* views.jsx — Vistas principales del portal */
const { useState: useStateV, useEffect: useEffectV, useMemo, useRef: useRefV } = React;

/* ============ HERO ============ */
function Hero({ lang, strings, go, data }) {
  const openCount = data.opportunities.length;
  const featured = data.opportunities.find(o => o.featured);
  const a = data.areas[featured.area];
  return (
    <section className="hero wrap">
      <div className="hero-grid">
        <div className="rise">
          <div className="eyebrow">{tr(strings.hero_eyebrow, lang)}</div>
          <h1>
            {tr(strings.hero_title_1, lang)} <span className="accent">{tr(strings.hero_title_a, lang)}</span> {tr(strings.hero_title_2, lang)}
          </h1>
          <p className="lead">{tr(strings.hero_lead, lang)}</p>
          <div className="hero-cta">
            <button className="btn btn-primary btn-lg" onClick={() => go({ name: "list", scroll: "grid" })}>
              {tr(strings.hero_cta_1, lang)} <Icons.arrowR size={17} />
            </button>
            <button className="btn btn-ghost btn-lg" onClick={() => go({ name: "about" })}>
              {tr(strings.hero_cta_2, lang)}
            </button>
          </div>
          <div className="hero-stats">
            <div className="hero-stat"><div className="n">{openCount}</div><div className="l">{tr(strings.stat_open, lang)}</div></div>
            <div className="hero-stat"><div className="n">{Object.keys(data.areas).length}</div><div className="l">{tr(strings.stat_areas, lang)}</div></div>
            <div className="hero-stat"><div className="n">{data.countries.length}+</div><div className="l">{tr(strings.stat_countries, lang)}</div></div>
          </div>
        </div>

        <div className="hero-card rise" style={{ animationDelay: "90ms", cursor: "pointer" }} onClick={() => go({ name: "detail", id: featured.id })}>
          <div>
            <div className="glyph"><Icons.flame size={56} stroke="#fff" sw={1.4} /></div>
            <div className="hc-foot" style={{ marginTop: 18 }}>
              <span className="label">{tr(strings.featured_flag, lang)}</span>
            </div>
            <h3 style={{ marginTop: 10 }}>{tr(featured.title, lang)}</h3>
            <p className="hc-body">{tr(featured.blurb, lang)}</p>
            <div className="hc-tags">
              {featured.stack.slice(0, 5).map(s => <span key={s} className="hc-tag">{s}</span>)}
            </div>
          </div>
          <div className="hc-foot">
            <span className="label">{featured.country === "Regional" ? "Regional · " : featured.country + " · "}{tr(data.modalities[featured.modality], lang)}</span>
            <span className="go" style={{ color: "#fff", fontFamily: "var(--mono)", fontSize: 12, display: "inline-flex", alignItems: "center", gap: 6 }}>
              {tr(strings.card_view, lang)} <Icons.arrowR size={14} stroke="#fff" />
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ LIST + FILTERS ============ */
function ListView({ lang, strings, go, data, cardStyle }) {
  const [q, setQ] = useStateV("");
  const [area, setArea] = useStateV("all");
  const [country, setCountry] = useStateV("all");
  const [mod, setMod] = useStateV("all");
  const gridRef = useRefV(null);

  const filtered = useMemo(() => {
    const needle = q.trim().toLowerCase();
    return data.opportunities.filter(op => {
      if (area !== "all" && op.area !== area) return false;
      if (country !== "all" && op.country !== country) return false;
      if (mod !== "all" && op.modality !== mod) return false;
      if (needle) {
        const hay = [tr(op.title, lang), tr(op.blurb, lang), op.stack.join(" "), tr(data.areas[op.area].label, lang), op.country].join(" ").toLowerCase();
        if (!hay.includes(needle)) return false;
      }
      return true;
    });
  }, [q, area, country, mod, lang, data]);

  const hasFilters = area !== "all" || country !== "all" || mod !== "all" || q.trim();
  const clear = () => { setQ(""); setArea("all"); setCountry("all"); setMod("all"); };

  const areaCounts = {};
  data.opportunities.forEach(o => { areaCounts[o.area] = (areaCounts[o.area] || 0) + 1; });

  return (
    <div className="view-enter">
      <Hero lang={lang} strings={strings} go={go} data={data} />

      <section className="wrap" ref={gridRef} id="grid-anchor">
        <div className="section-head">
          <div>
            <h2>{tr(strings.section_all, lang)}</h2>
            <div className="sh-sub">{tr(strings.section_sub, lang)}</div>
          </div>
        </div>

        {/* search */}
        <div className="toolbar">
          <div className="search">
            <Icons.search size={19} />
            <input value={q} onChange={e => setQ(e.target.value)} placeholder={tr(strings.search_ph, lang)} aria-label="Buscar" />
            {q && <button onClick={() => setQ("")} style={{ background: "none", border: 0, cursor: "pointer", color: "var(--muted)", display: "flex" }}><Icons.x size={16} /></button>}
          </div>
        </div>

        {/* filter chips */}
        <div style={{ display: "flex", flexDirection: "column", gap: 12, marginBottom: 4 }}>
          <div className="chip-row">
            <span className="filter-label">{tr(strings.filter_area, lang)}</span>
            <button className={cx("chip", area === "all" && "on")} onClick={() => setArea("all")}>{tr(strings.filter_all, lang)}</button>
            {Object.values(data.areas).map(ar => (
              <button key={ar.id} className={cx("chip", area === ar.id && "on")} onClick={() => setArea(area === ar.id ? "all" : ar.id)}>
                {tr(ar.label, lang)}<span className="count">{areaCounts[ar.id] || 0}</span>
              </button>
            ))}
          </div>
          <div className="chip-row">
            <span className="filter-label">{tr(strings.filter_mod, lang)}</span>
            <button className={cx("chip", mod === "all" && "on")} onClick={() => setMod("all")}>{tr(strings.filter_all, lang)}</button>
            {Object.keys(data.modalities).map(m => (
              <button key={m} className={cx("chip", mod === m && "on")} onClick={() => setMod(mod === m ? "all" : m)}>{tr(data.modalities[m], lang)}</button>
            ))}
            <span className="filter-label" style={{ marginLeft: 10 }}>{tr(strings.filter_country, lang)}</span>
            <select className="chip" style={{ fontFamily: "var(--mono)", paddingRight: 8 }} value={country} onChange={e => setCountry(e.target.value)}>
              <option value="all">{tr(strings.filter_all, lang)}</option>
              {data.countries.map(c => <option key={c} value={c}>{c}</option>)}
            </select>
          </div>
        </div>

        <div className="result-meta">
          <div className="count-txt"><b>{filtered.length}</b> {filtered.length === 1 ? tr(strings.results_one, lang) : tr(strings.results_many, lang)} {tr(strings.results_found, lang)}</div>
          {hasFilters && <button className="btn btn-ghost" style={{ padding: "7px 14px", fontSize: 13 }} onClick={clear}><Icons.x size={14} /> {tr(strings.clear, lang)}</button>}
        </div>

        {filtered.length === 0 ? (
          <div className="empty">
            <div className="em-ic"><Icons.search size={42} /></div>
            <h3>{tr(strings.empty_title, lang)}</h3>
            <p>{tr(strings.empty_body, lang)}</p>
          </div>
        ) : (
          <div className="grid">
            {filtered.map((op, i) => (
              <OppCard key={op.id} op={op} idx={i} lang={lang} strings={strings} cardStyle={cardStyle} onOpen={(id) => go({ name: "detail", id })} />
            ))}
          </div>
        )}
      </section>
    </div>
  );
}

/* ============ DETAIL ============ */
function DetailView({ op, lang, strings, go, data }) {
  const a = data.areas[op.area];
  const loc = op.country === "Regional" ? "Regional" : op.country;
  const metas = [
    { ic: <Icons.layers size={17} />, l: strings.d_meta_area, v: tr(a.label, lang) },
    { ic: <Icons.pin size={17} />, l: strings.d_meta_loc, v: loc },
    { ic: <Icons.clock size={17} />, l: strings.d_meta_mod, v: tr(data.modalities[op.modality], lang) },
    { ic: <Icons.briefcase size={17} />, l: strings.d_meta_ded, v: tr(data.dedications[op.dedication], lang) },
  ];
  return (
    <div className="detail wrap view-enter" style={{ "--area-color": a.color }}>
      <a className="back-link" onClick={() => go({ name: "list" })}><Icons.arrowL size={15} /> {tr(strings.d_back, lang)}</a>

      <div className="detail-head">
        <div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
          <AreaTag areaId={op.area} lang={lang} />
          <ModBadge mod={op.modality} lang={lang} />
          <span className="mono" style={{ color: "var(--muted)" }}>{tr(op.posted, lang)}</span>
        </div>
        <h1>{tr(op.title, lang)}</h1>
        <div className="detail-meta">
          {metas.map((m, i) => (
            <div className="dm" key={i}>
              <div className="ic">{m.ic}</div>
              <div><div className="dm-l">{tr(m.l, lang)}</div><div className="dm-v">{m.v}</div></div>
            </div>
          ))}
        </div>
      </div>

      <div className="detail-body">
        <div className="prose">
          <h2>{tr(strings.d_about_role, lang)}</h2>
          <p>{tr(op.intro, lang)}</p>

          <h2>{tr(strings.d_tasks, lang)}</h2>
          <ul className="task-list">
            {tr(op.tasks, lang).map((t, i) => (
              <li key={i}><span className="tick"><Icons.check size={17} /></span>{t}</li>
            ))}
          </ul>

          <h2>{tr(strings.d_skills, lang)}</h2>
          <div className="skill-table">
            {op.skills.map((s, i) => (
              <div className="skill-row" key={i}>
                <span className="sk-name">{tr(s.name, lang)}</span>
                <LevelMeter level={s.level} lang={lang} strings={strings} />
              </div>
            ))}
          </div>

          <h2>{tr(strings.d_profile, lang)}</h2>
          <ul className="task-list">
            {tr(op.profile, lang).map((t, i) => (
              <li key={i}><span className="tick"><Icons.check size={17} /></span>{t}</li>
            ))}
          </ul>

          {op.desirable && (
            <>
              <h2>{tr(strings.d_desirable, lang)}</h2>
              <div className="tag-cloud">
                {tr(op.desirable, lang).map((t, i) => <span key={i} className="tech-pill" style={{ padding: "7px 12px", fontSize: 12 }}>{t}</span>)}
              </div>
            </>
          )}
        </div>

        <aside>
          <div className="aside-card">
            <h4>{tr(strings.d_quick_title, lang)}</h4>
            <p className="ac-sub">{tr(strings.d_quick_sub, lang)}</p>
            <button className="btn btn-primary" style={{ width: "100%", justifyContent: "center", marginTop: 18 }} onClick={() => go({ name: "apply", id: op.id })}>
              {tr(strings.d_apply_now, lang)} <Icons.arrowR size={16} />
            </button>
            <ul className="aside-list">
              <li><span className="ic"><Icons.checkCircle size={17} /></span>{tr(strings.d_no_exp, lang)}</li>
              <li><span className="ic"><Icons.clock size={17} /></span>{tr(strings.d_flexible, lang)}</li>
              <li><span className="ic"><Icons.heart size={17} /></span>{tr(strings.d_purpose, lang)}</li>
            </ul>

            <div className="divider" />
            <div className="dm-l" style={{ marginBottom: 10 }}>{tr(strings.d_offer, lang)}</div>
            <ul className="offer-list">
              {tr(op.offer, lang).map((t, i) => (
                <li key={i}><span className="spark"><Icons.spark size={15} /></span>{t}</li>
              ))}
            </ul>

            <div className="divider" />
            <div className="dm-l" style={{ marginBottom: 10 }}>{tr(strings.d_stack_title, lang)}</div>
            <div className="tag-cloud">
              {op.stack.map(s => <span key={s} className="tech-pill">{s}</span>)}
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
}

Object.assign(window, { Hero, ListView, DetailView });