/* global React, M */
const { useState } = React;

// ====================================================================
// B1 — Discover
// ====================================================================
function DiscoverMobile() {
  const { MScreen, Eyebrow, MSectionH, Perf, Glyph } = window.M;
  const [active, setActive] = useState(["Mutual asks"]);
  const toggle = (chip) => setActive(a => a.includes(chip) ? a.filter(x => x !== chip) : [...a, chip]);

  const results = [
    { initials: "PA", name: "Priya Anand", role: "Commercial mortgage broker · Stride Finance", why: "You both serve SME owners. She places 12 commercial deals per year under $4M.", stats: ["62", "55", "23"], hue: 220 },
    { initials: "JW", name: "James Whitford", role: "Accountant · Coast Ledger", why: "Three group members in common. He sees every commercial purchase before you do.", stats: ["41", "38", "17"], hue: 200 },
    { initials: "EH", name: "Eliza Hart", role: "Brand strategist · Salt & Sail", why: "She works with owner-operators 6–18 months in. Wants to meet commercial solicitors.", stats: ["62", "55", "23"], hue: 240 },
    { initials: "DP", name: "Devon Park", role: "Commercial agent · Ray White Commercial", why: "Sources first-commercial buyers under $4M across the Gold Coast.", stats: ["33", "28", "14"], hue: 230 },
  ];

  const suggested = [
    { initials: "TR", name: "Tomás Rivera", role: "Tax advisor · Mermaid Beach", hue: 215 },
    { initials: "AP", name: "Aria Pemberton", role: "HR consultant · Pemberton People", hue: 235 },
    { initials: "LB", name: "Lior Ben-Ami", role: "Insurance broker · Burleigh Heads", hue: 250 },
  ];

  return (
    <MScreen>
      {/* Top bar */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "16px 20px 12px" }}>
        <div className="serif" style={{ fontSize: 22, letterSpacing: "-0.01em" }}>1to<span className="serif-i" style={{ color: "var(--accent)" }}>1</span></div>
        <button style={{ width: 36, height: 36, borderRadius: 18, background: "transparent", border: "none", display: "grid", placeItems: "center", cursor: "pointer", color: "var(--text-2)" }}><Glyph.Search/></button>
      </div>

      {/* Search bar */}
      <div style={{ padding: "0 20px 12px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "12px 14px", background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 10 }}>
          <Glyph.Search size={16} color="var(--text-3)"/>
          <span className="serif-i muted" style={{ fontSize: 14 }}>Find someone to meet.</span>
        </div>
      </div>

      {/* Filter chips */}
      <div style={{ display: "flex", gap: 6, padding: "0 20px 16px", overflowX: "auto", scrollbarWidth: "none" }}>
        {["Industry", "Within 25km", "Available this week", "Open to new 1to1s", "Mutual asks", "In my groups"].map((chip, i) => {
          const on = active.includes(chip);
          return (
            <button key={i} onClick={() => toggle(chip)} style={{
              flex: "0 0 auto", padding: "8px 13px", borderRadius: 999,
              border: "1px solid " + (on ? "transparent" : "var(--border)"),
              background: on ? "var(--accent)" : "var(--surface-2)",
              color: on ? "#0E0D0B" : "var(--text-2)",
              fontSize: 12.5, fontWeight: on ? 600 : 400, cursor: "pointer",
              whiteSpace: "nowrap",
            }}>{chip}</button>
          );
        })}
      </div>

      {/* Results */}
      <div style={{ padding: "8px 20px 0", borderTop: "1px solid var(--border-soft)" }}>
        <div style={{ paddingTop: 16, paddingBottom: 8 }}>
          <Eyebrow>47 people · sorted by mutual asks</Eyebrow>
        </div>
        {results.map((r, i) => (
          <div key={i} style={{ padding: "16px 0", borderBottom: i < results.length - 1 ? "1px solid var(--border-soft)" : "none", display: "flex", gap: 14, alignItems: "flex-start", cursor: "pointer" }}>
            <PortraitTile initials={r.initials} hue={r.hue} size={56}/>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 14.5, fontWeight: 500 }}>{r.name}</div>
              <div className="muted" style={{ fontSize: 12.5 }}>{r.role}</div>
              <div className="serif-i" style={{ color: "var(--accent)", fontSize: 13, lineHeight: 1.45, marginTop: 8 }}>"{r.why}"</div>
            </div>
            <div style={{ textAlign: "right", flex: "0 0 auto" }}>
              <div className="mono" style={{ fontSize: 11.5, fontWeight: 500 }}>{r.stats[0]}</div>
              <div className="mono muted-2" style={{ fontSize: 9, letterSpacing: "0.1em", textTransform: "uppercase", marginTop: 2 }}>1to1s</div>
              <div className="mono" style={{ fontSize: 11.5, fontWeight: 500, marginTop: 4 }}>{r.stats[1]}</div>
              <div className="mono muted-2" style={{ fontSize: 9, letterSpacing: "0.1em", textTransform: "uppercase", marginTop: 2 }}>reach</div>
              <div className="mono" style={{ fontSize: 11.5, fontWeight: 500, marginTop: 4 }}>{r.stats[2]}</div>
              <div className="mono muted-2" style={{ fontSize: 9, letterSpacing: "0.1em", textTransform: "uppercase", marginTop: 2 }}>conn</div>
            </div>
          </div>
        ))}
      </div>

      <Perf margin="24px 20px"/>

      {/* Based on your asks */}
      <div style={{ padding: "0 0 8px" }}>
        <div style={{ padding: "0 20px 14px" }}>
          <Eyebrow>Based on your asks</Eyebrow>
        </div>
        <div style={{ display: "flex", gap: 12, padding: "0 20px 8px", overflowX: "auto", scrollbarWidth: "none" }}>
          {suggested.map((s, i) => (
            <div key={i} style={{ flex: "0 0 180px", borderRadius: 12, overflow: "hidden", border: "1px solid var(--border-soft)", background: "var(--surface)", cursor: "pointer" }}>
              <div style={{ height: 130, background: `linear-gradient(180deg, oklch(0.32 0.02 ${s.hue}), oklch(0.18 0.02 ${s.hue}))`, position: "relative" }}>
                <div className="mono" style={{ position: "absolute", top: 10, right: 12, fontSize: 8, letterSpacing: "0.14em", color: "rgba(237,238,241,0.6)" }}>№ {String(247 + i)}</div>
                <div style={{ position: "absolute", bottom: 12, left: 14, right: 14 }}>
                  <div className="serif" style={{ fontSize: 18, lineHeight: 1, letterSpacing: "-0.01em" }}>{s.name.split(" ")[0]}<br/><span className="serif-i">{s.name.split(" ")[1]}</span></div>
                </div>
              </div>
              <div style={{ padding: 12 }}>
                <div className="muted" style={{ fontSize: 11.5 }}>{s.role}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <Perf margin="24px 20px"/>

      {/* Recently active in your group */}
      <div style={{ padding: "0 20px 32px" }}>
        <Eyebrow>Recently active · Coast Referral Collective</Eyebrow>
        <div style={{ marginTop: 14 }}>
          {[
            { i: "HL", n: "Hugo Lambert", r: "Business coach · Lambert Advisory", w: "Active 2h ago · 1 mutual ask" },
            { i: "SK", n: "Sienna Kovač", r: "Financial planner · Kovač Wealth", w: "Active yesterday" },
            { i: "FA", n: "Felix Aoki", r: "Copywriter · Aoki & Co.", w: "Active 2d ago · 2 mutual asks" },
            { i: "NV", n: "Nadia Verlaine", r: "Conveyancer · Verlaine Conveyancing", w: "Active 3d ago" },
          ].map((m, i) => (
            <div key={i} style={{ display: "flex", gap: 12, alignItems: "center", padding: "12px 0", borderBottom: i < 3 ? "1px solid var(--border-soft)" : "none" }}>
              <PortraitTile initials={m.i} hue={220 + i*10} size={40}/>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13.5, fontWeight: 500 }}>{m.n}</div>
                <div className="muted" style={{ fontSize: 12 }}>{m.r}</div>
                <div className="mono" style={{ fontSize: 10, color: "var(--text-3)", letterSpacing: "0.08em", marginTop: 2 }}>{m.w.toUpperCase()}</div>
              </div>
              <span style={{ color: "var(--text-3)", fontSize: 14 }}>›</span>
            </div>
          ))}
        </div>
      </div>
    </MScreen>
  );
}

function PortraitTile({ initials, hue = 220, size = 56 }) {
  return (
    <div style={{ width: size, height: size, flex: `0 0 ${size}px`, borderRadius: 12, overflow: "hidden", background: `linear-gradient(180deg, oklch(0.32 0.02 ${hue}), oklch(0.18 0.02 ${hue}))`, position: "relative", display: "grid", placeItems: "center" }}>
      <span className="serif-i" style={{ fontSize: size * 0.36, color: "rgba(237,238,241,0.85)" }}>{initials}</span>
    </div>
  );
}

// ====================================================================
// B1a — Filter expansion sheet
// ====================================================================
function DiscoverFilterSheet() {
  const { MScreen, MTopBar, Eyebrow, MStickyCTA, SagePill } = window.M;
  const [industries, setIndustries] = useState(["Finance & accounting", "Property"]);
  const [radius, setRadius] = useState(25);
  const [sort, setSort] = useState("mutual");

  const toggle = (v) => setIndustries(a => a.includes(v) ? a.filter(x => x !== v) : [...a, v]);

  return (
    <MScreen footer={
      <MStickyCTA>
        <SagePill fullWidth>Apply filters · 47 people</SagePill>
      </MStickyCTA>
    }>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "16px 20px 12px" }}>
        <div className="serif" style={{ fontSize: 22, letterSpacing: "-0.01em" }}>Filters</div>
        <button style={{ background: "transparent", border: "none", color: "var(--text-3)", cursor: "pointer", padding: 4, fontSize: 18 }}>✕</button>
      </div>

      <div style={{ padding: "8px 20px 24px", borderBottom: "1px solid var(--border-soft)" }}>
        <Eyebrow>Industry</Eyebrow>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: 12 }}>
          {["Legal & conveyancing","Finance & accounting","Property","Marketing & creative","Technology","Coaching & advisory","HR & people","Insurance"].map((v, i) => {
            const on = industries.includes(v);
            return (
              <button key={i} onClick={() => toggle(v)} style={{
                padding: "8px 13px", borderRadius: 999,
                border: "1px solid " + (on ? "transparent" : "var(--border)"),
                background: on ? "var(--accent)" : "var(--surface-2)",
                color: on ? "#0E0D0B" : "var(--text-2)", fontSize: 12.5, cursor: "pointer", fontWeight: on?600:400,
              }}>{v}</button>
            );
          })}
        </div>
      </div>

      <div style={{ padding: "20px 20px 24px", borderBottom: "1px solid var(--border-soft)" }}>
        <Eyebrow>Within range</Eyebrow>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginTop: 12 }}>
          <span className="serif" style={{ fontSize: 28, letterSpacing: "-0.02em" }}>{radius}<span className="muted-2" style={{ fontSize: 14, marginLeft: 4 }}>km</span></span>
          <span className="mono muted-2" style={{ fontSize: 11, letterSpacing: "0.1em" }}>FROM ROBINA</span>
        </div>
        <input type="range" min="5" max="100" value={radius} onChange={(e) => setRadius(parseInt(e.target.value))} style={{ width: "100%", marginTop: 14, accentColor: "var(--accent)" }}/>
        <div style={{ display: "flex", justifyContent: "space-between", marginTop: 6 }}>
          <span className="mono muted-2" style={{ fontSize: 10 }}>5km</span>
          <span className="mono muted-2" style={{ fontSize: 10 }}>100km</span>
        </div>
      </div>

      <div style={{ padding: "20px 20px 24px", borderBottom: "1px solid var(--border-soft)" }}>
        <Eyebrow>Asks & offers overlap</Eyebrow>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: 12 }}>
          {["Any overlap", "1+ mutual ask", "2+ mutual asks", "Asks I can offer"].map((v, i) => (
            <button key={i} style={{
              padding: "8px 13px", borderRadius: 999,
              border: "1px solid " + (i===2?"transparent":"var(--border)"),
              background: i===2?"var(--accent)":"var(--surface-2)",
              color: i===2?"#0E0D0B":"var(--text-2)", fontSize: 12.5, cursor: "pointer", fontWeight: i===2?600:400,
            }}>{v}</button>
          ))}
        </div>
      </div>

      <div style={{ padding: "20px 20px 32px" }}>
        <Eyebrow>Sort by</Eyebrow>
        <div style={{ marginTop: 12 }}>
          {[
            ["mutual", "Mutual asks"],
            ["active", "Most active"],
            ["quality", "Highest quality"],
            ["diverse", "Most diverse"],
            ["recent", "Recently joined"],
          ].map(([v, l], i) => (
            <div key={v} onClick={() => setSort(v)} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "12px 0", borderBottom: i<4?"1px solid var(--border-soft)":"none", cursor: "pointer" }}>
              <span style={{ fontSize: 14, color: sort === v ? "var(--accent)" : "var(--text)" }}>{l}</span>
              {sort === v && <span style={{ color: "var(--accent)" }}>✓</span>}
            </div>
          ))}
        </div>
      </div>
    </MScreen>
  );
}

// ====================================================================
// B1b — Discover empty state
// ====================================================================
function DiscoverEmpty() {
  const { MScreen, Eyebrow, Glyph } = window.M;
  return (
    <MScreen>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "16px 20px 12px" }}>
        <div className="serif" style={{ fontSize: 22 }}>1to<span className="serif-i" style={{ color: "var(--accent)" }}>1</span></div>
        <button style={{ width: 36, height: 36, borderRadius: 18, background: "transparent", border: "none", color: "var(--text-2)", cursor: "pointer" }}><Glyph.Search/></button>
      </div>

      <div style={{ padding: "0 20px 12px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "12px 14px", background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 10 }}>
          <Glyph.Search size={16} color="var(--text-3)"/>
          <span style={{ fontSize: 14 }}>Solar installer · Robina · 5km</span>
        </div>
      </div>

      <div style={{ display: "flex", gap: 6, padding: "0 20px 16px", overflowX: "auto" }}>
        {["Industry · 1", "Within 5km", "Available this week"].map((c, i) => (
          <span key={i} style={{ padding: "8px 13px", borderRadius: 999, background: "var(--accent)", color: "#0E0D0B", fontSize: 12.5, fontWeight: 600, whiteSpace: "nowrap" }}>{c}</span>
        ))}
      </div>

      <div style={{ borderTop: "1px solid var(--border-soft)", padding: "60px 32px 24px", textAlign: "center" }}>
        <h2 className="serif-i" style={{ fontSize: 30, letterSpacing: "-0.01em", margin: 0, color: "var(--text)" }}>
          No one matches that yet.
        </h2>
        <p className="muted" style={{ fontSize: 14, lineHeight: 1.6, marginTop: 14, maxWidth: 320, marginLeft: "auto", marginRight: "auto" }}>
          Try widening your radius, or relax one filter. New members join every week.
        </p>
        <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 32, alignItems: "center" }}>
          {["Widen to 25km", "Remove industry filter", "Show people available next week too"].map((v, i) => (
            <button key={i} style={{ padding: "12px 18px", borderRadius: 999, background: "transparent", border: "1px dashed var(--border)", color: "var(--text)", fontSize: 13, cursor: "pointer" }}>{v}</button>
          ))}
        </div>

        <div className="perf" style={{ margin: "48px 0 24px" }}/>

        <Eyebrow>Or invite</Eyebrow>
        <p className="muted" style={{ fontSize: 13, lineHeight: 1.55, marginTop: 12 }}>
          Know a solar installer in Robina? Send them a 1to1 invite — they'll get a curated welcome.
        </p>
        <button className="btn btn-ghost" style={{ marginTop: 16 }}>Send an invite</button>
      </div>
    </MScreen>
  );
}

window.DiscoverMobile = DiscoverMobile;
window.DiscoverFilterSheet = DiscoverFilterSheet;
window.DiscoverEmpty = DiscoverEmpty;