// UAP.CLUB — Detail, Post, Notifications, Profile screens.

const { useState: _useStateB } = React;

/* ============================================================
   DETAIL SCREEN
   ============================================================ */
function ScreenDetail({ s, onBack, onLike, liked }) {
  if (!s) return null;
  return (
    <div className="app">
      <div className="scroll">
        <div className="detail">
          <button className="detail-back" onClick={onBack}><Icon name="arrowL" size={18}/></button>
          <div className="detail-photo" style={{backgroundImage: `url(${s.media})`}}/>

          <div className="card-actions" style={{padding: "10px 12px 4px"}}>
            <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"><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="detail-body">
            <h1>{s.title}</h1>
            <p className="lede">{s.desc}</p>

            <dl className="detail-spec">
              <div><dt>Where</dt><dd>{s.place}</dd></div>
              <div><dt>When</dt><dd>{s.when}</dd></div>
              <div><dt>Coords</dt><dd className="mono">{s.coords}</dd></div>
              <div><dt>Duration</dt><dd className="mono">{s.duration}</dd></div>
              <div><dt>Weather</dt><dd>{s.weather}</dd></div>
              <div><dt>Witnesses</dt><dd>{s.witnesses}</dd></div>
            </dl>

            {s.witnesses > 1 && (
              <div className="witness-row">
                <div className="stack">
                  {[s.handle, "silentwatcher", "eastsignal"].slice(0, Math.min(3, s.witnesses)).map((h, i) => (
                    <span key={i} className="face" style={{backgroundImage: `url(${avatarSvg(h)})`}}/>
                  ))}
                </div>
                <div className="lbl"><b>{s.witnesses} people</b> saw the same thing within 12 minutes.</div>
                <button className="cta">View</button>
              </div>
            )}

            <h3 className="h2">Discussion</h3>
            <div className="thread">
              {(s.comments || []).map((c, i) => (
                <div key={i} className="cmt">
                  <div className="av" style={{backgroundImage: `url(${avatarSvg(c.who)})`}}/>
                  <div>
                    <div className="bub">
                      <div className="who">{c.who} <span className="when">· {c.when}</span></div>
                      <div className="body">{c.text}</div>
                    </div>
                    <div className="acts"><span>Like</span><span>Reply</span></div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
      <div className="composer">
        <div className="av" style={{backgroundImage: `url(${avatarSvg("northobserver")})`}}/>
        <div className="field">Add a comment…</div>
        <button className="send">Post</button>
      </div>
    </div>
  );
}
window.ScreenDetail = ScreenDetail;

/* ============================================================
   POST FLOW (modal)
   ============================================================ */
function PostSheet({ onClose, onPosted }) {
  const [step, setStep] = _useStateB(0);
  const [cat, setCat] = _useStateB("light");
  const [media, setMedia] = _useStateB(null);
  const samples = [
    window.__pathToBlob("images/sighting-04-reykjanes.jpg"),
    window.__pathToBlob("images/sighting-05-marfa.jpg"),
    window.__pathToBlob("images/sighting-09-pensacola.jpg"),
  ];
  const cats = [
    { id: "triangle", label: "Triangle", ico: "triangle" },
    { id: "orb", label: "Orb / sphere", ico: "orb" },
    { id: "light", label: "Lights", ico: "light" },
    { id: "disc", label: "Disc", ico: "layer" },
    { id: "trail", label: "Trail / streak", ico: "share" },
    { id: "other", label: "Other", ico: "more" },
  ];

  return (
    <div className="modal" onClick={onClose}>
      <div className="panel" onClick={e => e.stopPropagation()}>
        <div className="handle"/>
        <div className="head">
          <button onClick={onClose} style={{color: "var(--fog)", fontSize: 14}}>Cancel</button>
          <h2>Report a sighting</h2>
          <button
            onClick={() => { if (step < 2) setStep(step + 1); else onPosted(); }}
            style={{color: "var(--sky)", fontSize: 14, fontWeight: 700}}>
            {step < 2 ? "Next" : "Post"}
          </button>
        </div>

        {step === 0 && (
          <div className="post-step">
            {!media ? (
              <button className="post-drop" onClick={() => setMedia(samples[0])}>
                <span className="ico"><Icon name="cam" size={20}/></span>
                <span className="t">Add a photo or video</span>
                <span className="s">JPG · PNG · MP4 up to 60s</span>
              </button>
            ) : (
              <div className="post-preview" style={{backgroundImage: `url(${media})`}}>
                <button className="replace" onClick={() => setMedia(null)}>Replace</button>
              </div>
            )}
            <div style={{display: "flex", gap: 6, marginTop: 12, overflow: "auto"}}>
              {samples.map(src => (
                <button key={src} onClick={() => setMedia(src)} style={{flexShrink: 0, width: 64, height: 64, borderRadius: 8, backgroundImage: `url(${src})`, backgroundSize: "cover", border: media === src ? "2px solid var(--sky)" : "1px solid var(--line)", padding: 0}}/>
              ))}
            </div>
            <div className="field-help" style={{marginTop: 12}}>Choose recent media or import from your library.</div>
          </div>
        )}

        {step === 1 && (
          <div className="post-step">
            <div className="field-label">What did it look like?</div>
            <div className="cat-grid">
              {cats.map(c => (
                <button key={c.id} className={"cat-tile " + (cat === c.id ? "selected" : "")} onClick={() => setCat(c.id)}>
                  <span className="glyph"><Icon name={c.ico} size={18}/></span>
                  {c.label}
                </button>
              ))}
            </div>
            <div className="field-label">Title</div>
            <input className="field-input" defaultValue="Three amber lights drifting low over the Hudson"/>
            <div className="field-label">What happened?</div>
            <textarea className="field-input" defaultValue="Three slow-moving lights. Amber, no flicker, no audible engine. They held a loose triangle, drifted south, then one accelerated."/>
          </div>
        )}

        {step === 2 && (
          <div className="post-step">
            <div className="field-label">Location</div>
            <div style={{borderRadius: 12, overflow: "hidden", border: "1px solid var(--line)", height: 160, position: "relative"}}>
              <MapBackdrop pins={[{id:"new", pos:{x:0.5,y:0.5}, verified:false}]} activeId="new"/>
            </div>
            <input className="field-input" style={{marginTop: 10}} defaultValue="Cold Spring, NY"/>
            <div className="field-help">Your exact coordinates are saved but only the city is shown publicly.</div>

            <div className="field-label">Time observed</div>
            <input className="field-input" defaultValue="Tonight, 19:42"/>

            <div className="field-label">Duration</div>
            <input className="field-input" defaultValue="00:04:18"/>

            <div style={{marginTop: 18, padding: 14, background: "var(--bg-2)", borderRadius: 12, fontSize: 12, color: "var(--ink-2)", lineHeight: 1.5}}>
              By posting, you confirm this is your firsthand account. AI will analyze for known explanations (drones, satellites, planes) and surface possible matches.
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
window.PostSheet = PostSheet;

/* ============================================================
   NOTIFICATIONS
   ============================================================ */
function ScreenNotifications({ onOpenSighting, onOpenNotif }) {
  const sightings = (window.SIGHTINGS || []);
  const sightingByMedia = (m) => sightings.find(s => s.media === m);
  const P = (p) => (window.__pathToBlob ? window.__pathToBlob(p) : p);
  const items = [
    { who: "silentwatcher", thumb: P("images/sighting-02-kowloon.jpg"), body: <><b>silentwatcher</b> commented on your Hudson sighting: "Saw something similar near Garrison."</>, when: "12m", pip: "chat" },
    { who: "eastsignal", thumb: P("images/sighting-01-hudson.jpg"), body: <><b>eastsignal</b> corroborated your sighting from 2.4 mi away.</>, when: "47m", pip: "verif" },
    { who: "meridian", thumb: P("images/sighting-01-hudson.jpg"), body: <><b>meridian</b> liked your sighting.</>, when: "1h", pip: "heart" },
  ];
  const earlier = [
    { who: "skyrecord", thumb: P("images/sighting-03-sandia.jpg"), body: <><b>skyrecord</b> posted nearby in Albuquerque, NM.</>, when: "Yesterday", pip: "near" },
    { who: "lowtide", thumb: P("images/sighting-04-reykjanes.jpg"), body: <>3 new sightings near you this week.</>, when: "2d", pip: "near" },
    { who: "driftvalley", thumb: P("images/sighting-05-marfa.jpg"), body: <><b>driftvalley</b> started following you.</>, when: "3d", pip: "user" },
    { who: "hollowmoon", thumb: P("images/sighting-06-mendocino.jpg"), body: <><b>hollowmoon</b> tagged you on a Mendocino orb.</>, when: "5d", pip: "tagged" },
  ];
  const N = ({n}) => {
    const target = sightingByMedia(n.thumb);
    return (
      <button
        className="notif"
        onClick={() => target && onOpenSighting && onOpenSighting(target)}
        style={{textAlign: "left", border: 0, borderBottom: "1px solid var(--line)", background: "transparent", cursor: target ? "pointer" : "default", width: "100%"}}>
        <div className="av" style={{backgroundImage: `url(${avatarSvg(n.who)})`}}>
          <span className={"pip " + (n.pip === "heart" ? "hot" : n.pip === "verif" ? "green" : "")}>
            <Icon name={n.pip} size={10} stroke="#fff" sw={2.4}/>
          </span>
        </div>
        <div className="body">{n.body}<span className="when">{n.when}</span></div>
        {n.thumb && <div className="thumb" style={{backgroundImage: `url(${n.thumb})`}}/>}
      </button>
    );
  };
  return (
    <>
      <TopNav onNotif={onOpenNotif} unread={0}/>
      <div className="scroll">
        <div style={{padding: "14px 18px 4px"}}>
          <h1 style={{margin: 0, fontSize: 24, fontWeight: 700, letterSpacing: "-0.02em"}}>Activity</h1>
        </div>
        <div className="notif-section">Today</div>
        {items.map((n, i) => <N key={i} n={n}/>)}
        <div className="notif-section">Earlier</div>
        {earlier.map((n, i) => <N key={i} n={n}/>)}
        <div style={{height: 24}}/>
      </div>
    </>
  );
}
window.ScreenNotifications = ScreenNotifications;

/* ============================================================
   PROFILE
   ============================================================ */
function ScreenProfile({ onOpenSighting }) {
  const sightings = (window.SIGHTINGS || []);
  const mine = sightings.slice(0, 6);
  const [tab, setTab] = _useStateB("posts");
  return (
    <>
      <div className="topnav">
        <div className="brand" style={{fontSize: 15}}>northobserver</div>
        <div className="right">
          <button className="topnav-btn"><Icon name="sliders" size={20}/></button>
          <button className="topnav-btn"><Icon name="moreV" size={20}/></button>
        </div>
      </div>
      <div className="scroll">
        <div className="profile-head">
          <div className="profile-row">
            <div className="av" style={{backgroundImage: `url(${avatarSvg("northobserver")})`}}/>
            <div className="stats">
              <div className="stat"><div className="num">12</div><div className="lbl">Sightings</div></div>
              <div className="stat"><div className="num">428</div><div className="lbl">Followers</div></div>
              <div className="stat"><div className="num">96</div><div className="lbl">Following</div></div>
            </div>
          </div>
        </div>
        <div className="profile-bio">
          <div className="name">North Observer <span style={{color: "var(--sky)"}}><Icon name="verif" size={14} stroke="#f15a24"/></span></div>
          <div className="handle">Cold Spring, NY · joined 2024</div>
          <div className="bio">Hudson Valley nights. Quiet observer. Three corroborated, nine still open.</div>
        </div>
        <div className="profile-actions">
          <button className="btn btn-ghost">Edit profile</button>
          <button className="btn btn-ghost">Share profile</button>
          <button className="btn btn-ghost" style={{flex: "0 0 44px"}}><Icon name="user" size={16}/></button>
        </div>

        <div className="profile-tabs">
          <button className={"pt " + (tab === "posts" ? "active" : "")} onClick={() => setTab("posts")}><Icon name="grid" size={16}/></button>
          <button className={"pt " + (tab === "saved" ? "active" : "")} onClick={() => setTab("saved")}><Icon name="bookmark" size={16}/></button>
          <button className={"pt " + (tab === "tagged" ? "active" : "")} onClick={() => setTab("tagged")}><Icon name="tagged" size={16}/></button>
        </div>
        <div className="grid-3">
          {mine.map(s => (
            <button
              key={s.id}
              className="cell"
              onClick={() => onOpenSighting && onOpenSighting(s)}
              style={{backgroundImage: `url(${s.media})`, padding: 0, border: 0, cursor: "pointer"}}>
              {s.verified && <span className="verif"><Icon name="verif" size={14} stroke="#fff"/></span>}
            </button>
          ))}
        </div>
        <div style={{height: 24}}/>
      </div>
    </>
  );
}
window.ScreenProfile = ScreenProfile;