// UAP.CLUB — Onboarding, Near Me, Map screens.

const { useState: _useState1 } = React;

/* ============================================================
   ONBOARDING
   ============================================================ */
function ScreenOnboarding({ onEnter }) {
  const sightings = window.SIGHTINGS || [];
  const tiles = sightings.slice(0, 9);
  return (
    <div className="onb">
      <div className="hero">
        <div className="grid">
          {tiles.map((s, i) =>
          <div key={s.id} className="cell" style={{ backgroundImage: `url(${s.media})` }} />
          )}
        </div>
        <div className="pill-stat"><span className="live" /> 12 sightings near you tonight</div>
        <h1>See what's<br />in the sky.</h1>
        <p>A friendly map of unidentified things people are seeing — right where you live.</p>
      </div>
      <div className="actions">
        <button className="btn btn-primary btn-block" onClick={onEnter}>
          Allow location & continue
        </button>
        <button className="btn btn-ghost btn-block" onClick={onEnter}>
          Browse without an account
        </button>
        <div className="foot">Already a member? <a href="#" onClick={(e) => {e.preventDefault();onEnter();}}>Sign in</a></div>
      </div>
    </div>);

}
window.ScreenOnboarding = ScreenOnboarding;

/* ============================================================
   TOP NAV — used across feed-style screens
   ============================================================ */
function TopNav({ place = "Cold Spring, NY", onSearch, onNotif, unread = 3 }) {
  return (
    <div className="topnav" style={{ borderWidth: "0px" }}>
      <div className="brand">
        <span className="uap">UAP</span><span className="dot">.</span><span className="club">club</span>
        <span className="reg">EST 2026</span>
      </div>
      <div className="right">
        <button className="topnav-btn" onClick={onSearch} aria-label="Search">
          <Icon name="search" size={20} />
        </button>
        <button className="topnav-btn" onClick={onNotif} aria-label="Notifications">
          <Icon name="bell" size={20} />
          {unread > 0 && <span className="pip" />}
        </button>
      </div>
    </div>);

}
window.TopNav = TopNav;

/* ============================================================
   PHOTO CARD
   ============================================================ */
function PhotoCard({ s, onOpen, onLike, liked, witnesses = [] }) {
  return (
    <article className="card">
      <header className="card-head">
        <div className="av" style={{ backgroundImage: `url(${avatarSvg(s.handle)})` }} />
        <div className="who">
          <div className="name">
            {s.handle}
            {s.verified && <span className="verif"><Icon name="verif" size={14} stroke="#2a7fff" /></span>}
          </div>
          <div className="where">
            <span className="pin"><Icon name="pin" size={11} /></span>
            {s.place} · {s.distance !== "—" ? s.distance : "far away"}
          </div>
        </div>
        <div className="when">{s.when}</div>
        <button className="more"><Icon name="moreV" size={18} /></button>
      </header>
      <button className="card-photo" style={{ backgroundImage: `url(${s.media})`, width: "100%", display: "block", padding: 0, border: 0 }} onClick={() => onOpen(s)}>
        <span className="stamp">
          <Icon name="pinFill" size={11} stroke="#fff" />
          {s.coords.split(",")[0].trim()}
        </span>
        {s.witnesses > 1 &&
        <span className="corroborate">
            {witnesses.slice(0, Math.min(3, s.witnesses)).map((w, i) =>
          <span key={i} className="face" style={{ backgroundImage: `url(${avatarSvg(w)})` }} />
          )}
            {s.witnesses} corroborated
          </span>
        }
      </button>
      <div className="card-actions">
        <button className={"act " + (liked ? "pushed" : "")} onClick={() => onLike(s.id)}>
          <Icon name={liked ? "heartFill" : "heart"} size={20} stroke={liked ? "#ff4d54" : "currentColor"} />
          <span className="num">{42 + (liked ? 1 : 0)}</span>
        </button>
        <button className="act" onClick={() => onOpen(s)}>
          <Icon name="chat" size={20} />
          <span className="num">{s.comments?.length || 0}</span>
        </button>
        <button className="act">
          <Icon name="share" size={20} />
        </button>
        <span className="act-spacer" />
        <button className="act"><Icon name="bookmark" size={20} /></button>
      </div>
      <div className="card-body">
        <h3 className="title">{s.title}</h3>
        <p className="desc">
          {s.desc.length > 140 ? <>{s.desc.slice(0, 140).trim()}… <span className="more">more</span></> : s.desc}
        </p>
        <div className="meta">
          <Tag tone={s.category === "triangle" ? "" : s.category === "orb" ? "sky" : ""}>
            {s.category}
          </Tag>
          {s.verified && <Tag tone="green">verified</Tag>}
          <span className="dot" />
          <span className="mono">{s.duration}</span>
          <span className="dot" />
          <span>{s.weather.split(",")[0]}</span>
        </div>
      </div>
    </article>);

}
window.PhotoCard = PhotoCard;

/* ============================================================
   NEAR ME SCREEN
   ============================================================ */
function ScreenNearMe({ onOpenSighting, onOpenMap, onOpenNotif, liked, onLike }) {
  const sightings = window.SIGHTINGS || [];
  const [filter, setFilter] = _useState1("all");
  const filterPills = [
  { id: "all", label: "All", ico: null },
  { id: "tonight", label: "Tonight", ico: "clock" },
  { id: "nearest", label: "Nearest", ico: "near" },
  { id: "verified", label: "Verified", ico: "verif" },
  { id: "triangle", label: "Triangle", ico: "triangle" },
  { id: "orb", label: "Orb", ico: "orb" },
  { id: "lights", label: "Lights", ico: "light" }];


  const tonight = sightings.filter((s) => s.when.includes("hr ago") || s.when.includes("min"));
  const week = sightings.filter((s) => !tonight.includes(s));

  const witnessHandles = sightings.map((s) => s.handle);

  return (
    <>
      <TopNav onNotif={onOpenNotif} />
      <div className="scroll">
        <div className="nearme-head">
          <button className="locchip">
            <span className="pin"><Icon name="pin" size={13} /></span>
            Cold Spring, NY
            <span className="chev"><Icon name="chevD" size={12} /></span>
          </button>
        </div>

        <div className="minimap">
          <button onClick={onOpenMap} style={{ width: "100%", height: "100%", padding: 0, border: 0, background: "none" }}>
            <MapBackdrop pins={sightings.slice(0, 6)} activeId={null} />
          </button>
          <div className="badge-count">
            <span className="live" />
            12 nearby tonight
          </div>
          <button className="corner" onClick={onOpenMap}>
            <Icon name="map" size={13} />
            View map
          </button>
        </div>

        <div className="filter-rail">
          {filterPills.map((p) =>
          <button
            key={p.id}
            className={"pill " + (filter === p.id ? "active" : "")}
            onClick={() => setFilter(p.id)}>
              {p.ico && <span className="ico"><Icon name={p.ico} size={13} /></span>}
              {p.label}
            </button>
          )}
        </div>

        <div className="feed-section">
          <h2>Tonight near you</h2>
          <button className="more">See all</button>
        </div>
        {tonight.slice(0, 3).map((s) =>
        <PhotoCard
          key={s.id}
          s={s}
          onOpen={onOpenSighting}
          onLike={onLike}
          liked={liked.has(s.id)}
          witnesses={witnessHandles.filter((h) => h !== s.handle)} />
        )}

        <div className="feed-section">
          <h2>This week, around the world</h2>
        </div>
        {week.map((s) =>
        <PhotoCard
          key={s.id}
          s={s}
          onOpen={onOpenSighting}
          onLike={onLike}
          liked={liked.has(s.id)}
          witnesses={witnessHandles.filter((h) => h !== s.handle)} />
        )}

        <div style={{ height: 24 }} />
      </div>
    </>);

}
window.ScreenNearMe = ScreenNearMe;

/* ============================================================
   MAP SCREEN — full-bleed
   ============================================================ */
function ScreenMap({ onOpenSighting, onClose }) {
  const sightings = window.SIGHTINGS || [];
  const [activeId, setActiveId] = _useState1(sightings[0]?.id);
  const active = sightings.find((s) => s.id === activeId) || sightings[0];

  return (
    <div className="map-screen">
      <MapBackdrop pins={sightings} activeId={activeId} onPinClick={(p) => setActiveId(p.id)} full />

      <div className="map-search">
        <Icon name="search" size={16} />
        <span className="label">Search this area</span>
        <span className="av" style={{ backgroundImage: `url(${avatarSvg("northobserver")})` }} />
      </div>

      <div className="map-chips">
        <button className="map-chip active">All</button>
        <button className="map-chip">Tonight</button>
        <button className="map-chip">Verified only</button>
        <button className="map-chip">Triangle</button>
        <button className="map-chip">Orb</button>
        <button className="map-chip">Lights</button>
      </div>

      <button className="map-fab" aria-label="Locate">
        <Icon name="locate" size={20} />
      </button>

      <div className="sheet">
        <div className="sheet-handle" />
        <div className="sheet-head">
          <div>
            <div className="ttl">{sightings.length} sightings on map</div>
            <div className="sub">Tap a row to open · pin to focus</div>
          </div>
          <button className="more" onClick={onClose} style={{ color: "var(--sky)", fontSize: 13, fontWeight: 600 }}>Done</button>
        </div>
        <div className="sheet-list">
          {sightings.map((s) =>
          <button
            key={s.id}
            className={"sheet-row " + (s.id === activeId ? "active" : "")}
            onMouseEnter={() => setActiveId(s.id)}
            onClick={() => onOpenSighting(s)}>
              <span className="thumb" style={{ backgroundImage: `url(${s.media})` }} />
              <span className="info">
                <span className="name">{s.title}</span>
                <span className="where">
                  <span className="pin"><Icon name="pin" size={10} /></span>
                  {s.place} · {s.distance}
                </span>
                <span className="meta">
                  {s.verified && <><span className="verif"><Icon name="verif" size={10} stroke="#2a7fff" /></span> verified ·</>}
                  <span>{s.when}</span>
                  <span>·</span>
                  <span>{s.witnesses} witness{s.witnesses === 1 ? "" : "es"}</span>
                </span>
              </span>
              <span className="arrow"><Icon name="chev" size={14} /></span>
            </button>
          )}
        </div>
      </div>
    </div>);

}
window.ScreenMap = ScreenMap;