// UAP.CLUB — App shell. Single iOS frame, tab routing, modal post sheet.

const { useState, useEffect, useMemo, useCallback } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#f15a24",
  "startScreen": "near"
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = ["#f15a24", "#e85d2a", "#c84512", "#0b0d10"];

function RotatingSightLine() {
  const phrases = [
    "something.",
    "a light.",
    "a shape.",
    "a signal.",
    "a UAP.",
    "a UFO.",
    "what others saw.",
  ];
  const [activeIndex, setActiveIndex] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setActiveIndex((value) => (value + 1) % phrases.length);
    }, 2400);
    return () => clearInterval(id);
  }, []);

  return (
    <h1 className="split-heading rotating-heading" aria-label={"you saw " + phrases[activeIndex]}>
      <span className="split-line" aria-hidden="true">
        {"you saw".split("").map((char, i) => (
          <span
            key={char + i}
            className="split-char"
            style={{ "--char-delay": (i * 28) + "ms" }}>
            {char === " " ? "\u00a0" : char}
          </span>
        ))}
      </span>
      <span className="split-line muted italic rotating-line" aria-live="polite">
        <span key={activeIndex} className="rotating-phrase">
          {phrases[activeIndex]}
        </span>
      </span>
    </h1>
  );
}

function AppShell() {
  const tw = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}];
  const t = tw[0];
  const setTweak = tw[1];

  useEffect(() => {
    document.documentElement.style.setProperty("--sky", t.accent);
  }, [t.accent]);

  const Device = window.IOSDevice;

  return (
    <div className="stage">
      <div className="mobile-launch-copy" aria-label="UAP Club coming soon">
        <RotatingSightLine/>
        <small>UAP Club is coming soon.</small>
      </div>
      <div className="hero-device">
        <Device width={390} height={844}>
          <App initial={t.startScreen}/>
        </Device>
      </div>
      <section className="launch-copy" aria-label="UAP Club coming soon">
        <div className="launch-kicker">
          field notes
        </div>
        <RotatingSightLine/>
        <p className="launch-lede">
          Report your sightings. Find out who saw it too.
        </p>
        <p className="launch-note">
          Discover UAPs reported around you. Find people who saw the same thing. UAP Club is a quieter social map for sightings, witnesses, and unexplained aerial events.
        </p>
      </section>
      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection title="Start screen">
            <window.TweakSelect label="Open on" value={t.startScreen} options={[
              { value: "onboarding", label: "Onboarding" },
              { value: "near", label: "Near me" },
              { value: "map", label: "Map" },
              { value: "notif", label: "Activity" },
              { value: "profile", label: "Profile" },
            ]} onChange={(v) => setTweak("startScreen", v)}/>
          </window.TweakSection>
          <window.TweakSection title="Theme">
            <window.TweakColor label="Accent" value={t.accent} options={ACCENT_OPTIONS} onChange={(v) => setTweak("accent", v)}/>
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </div>
  );
}

function App({ initial = "near" }) {
  const [route, setRoute] = useState(initial === "onboarding" ? "onboarding" : initial);
  const [openId, setOpenId] = useState(null);
  const [postOpen, setPostOpen] = useState(false);
  const [liked, setLiked] = useState(new Set());
  const [toast, setToast] = useState(null);

  // sync to tweak changes
  useEffect(() => { setRoute(initial); setOpenId(null); }, [initial]);

  const onLike = useCallback((id) => {
    setLiked(prev => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id); else next.add(id);
      return next;
    });
  }, []);

  const sightings = window.SIGHTINGS || [];
  const openSighting = sightings.find(s => s.id === openId);

  if (route === "onboarding") {
    return (
      <div className="app">
        <ScreenOnboarding onEnter={() => setRoute("near")}/>
      </div>
    );
  }

  if (openSighting) {
    return (
      <ScreenDetail
        s={openSighting}
        onBack={() => setOpenId(null)}
        liked={liked.has(openSighting.id)}
        onLike={onLike}/>
    );
  }

  return (
    <div className="app">
      {route === "near" && (
        <ScreenNearMe
          onOpenSighting={(s) => setOpenId(s.id)}
          onOpenMap={() => setRoute("map")}
          onOpenNotif={() => setRoute("notif")}
          liked={liked}
          onLike={onLike}/>
      )}
      {route === "map" && (
        <ScreenMap
          onOpenSighting={(s) => setOpenId(s.id)}
          onClose={() => setRoute("near")}/>
      )}
      {route === "notif" && (
        <ScreenNotifications
          onOpenSighting={(s) => setOpenId(s.id)}
          onOpenNotif={() => {}}/>
      )}
      {route === "profile" && (
        <ScreenProfile
          onOpenSighting={(s) => setOpenId(s.id)}/>
      )}

      {postOpen && (
        <PostSheet
          onClose={() => setPostOpen(false)}
          onPosted={() => {
            setPostOpen(false);
            setToast({ msg: "Posted to nearby observers", at: new Date() });
            setTimeout(() => setToast(null), 2600);
            setRoute("near");
          }}/>
      )}

      {toast && (
        <div className="toast">
          <span className="dot"/>
          <span>{toast.msg}</span>
          <span className="mono">just now</span>
        </div>
      )}

      <TabBar route={route} onChange={setRoute} onPost={() => setPostOpen(true)}/>
    </div>
  );
}

function TabBar({ route, onChange, onPost }) {
  const tabs = [
    { id: "near", label: "Near me", ico: "near" },
    { id: "map", label: "Map", ico: "map" },
    { id: "post", label: "Post", ico: "plus", fab: true },
    { id: "notif", label: "Activity", ico: "bell" },
    { id: "profile", label: "You", ico: "user" },
  ];
  return (
    <nav className="tabbar">
      {tabs.map(t => {
        const active = t.id === route;
        return (
          <button
            key={t.id}
            className={"tab " + (active ? "active" : "") + (t.fab ? " fab" : "")}
            onClick={() => t.fab ? onPost() : onChange(t.id)}>
            <span className="ico"><Icon name={t.ico} size={22} stroke={t.fab ? "#fff" : (active ? "var(--ink)" : "var(--fog)")} sw={t.fab ? 2.2 : (active ? 2.1 : 1.7)}/></span>
            <span className="label">{t.label}</span>
          </button>
        );
      })}
    </nav>
  );
}

ReactDOM.createRoot(document.getElementById("app")).render(<AppShell/>);