// Today screen — morning listen, wired to /api/today.
const { useState: useState_T, useEffect: useEffect_T, useRef: useRef_T } = React;

const DAY_NAMES = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
const prettyTitle = (id) => (id || "Today").replace(/_/g, " ").toUpperCase();

function TodayScreen({ onReflect, onSettings, variant = "C", state }) {
  const [today, setToday] = useState_T(null);
  const [user, setUser] = useState_T(null);
  const [err, setErr] = useState_T(null);
  const [kicked, setKicked] = useState_T(false);

  const refresh = () => api.getToday().then(setToday).catch(e => setErr(e));

  useEffect_T(() => {
    Promise.all([api.getToday(), api.getUser().catch(() => null)])
      .then(([t, u]) => { setToday(t); setUser(u); })
      .catch(e => { console.warn("/api/today failed:", e); setErr(e); });
  }, []);

  // First-time flow: if onboarded but no audio yet and no brewing in flight,
  // kick off generation immediately (user doesn't have to wait for the cron).
  useEffect_T(() => {
    if (!today || today.audio_url || kicked) return;
    if (today.generation_status === "brewing") return; // already running
    if (today.generation_status === "skipped") return; // yesterday unlistened — respect
    setKicked(true);
    api.generateNow().then(refresh).catch(e => console.warn("generate-now failed:", e));
  }, [today, kicked]);

  // Poll while brewing; stop the moment audio appears or status flips to failed.
  useEffect_T(() => {
    if (!today) return;
    if (today.audio_url) return;
    if (today.generation_status === "failed") return;
    if (today.generation_status === "skipped") return;
    const h = setInterval(refresh, 4000);
    return () => clearInterval(h);
  }, [today?.audio_url, today?.generation_status]);

  const greetPrefix = greeting();
  const greetName = user?.name || "";
  const daynum = user?.streak ? `Day ${user.streak}` : "";
  const dayword = today?.date ? DAY_NAMES[new Date(today.date + "T00:00:00").getDay()] : "";
  const subLine = [dayword, daynum].filter(Boolean).join(" · ");

  const effectiveState = state
    ?? (today === null && !err ? "loading"
        : today?.audio_url ? "ready"
        : today?.generation_status === "failed" ? "failed"
        : today?.generation_status === "skipped" ? "waiting-on-yesterday"
        : "brewing");

  if (effectiveState === "loading") {
    return (
      <div className="screen">
        <TopBar greet={`${greetPrefix}${greetName ? ", " + greetName : ""}`} sub={subLine} onSettings={onSettings}/>
        <div className="empty-state">
          <div className="empty-glyph"><span className="mini-spinner"/></div>
        </div>
      </div>
    );
  }
  if (effectiveState === "brewing") {
    return (
      <div className="screen">
        <TopBar greet={`${greetPrefix}${greetName ? ", " + greetName : ""}`} sub={subLine || "Day 0"} onSettings={onSettings}/>
        <div className="empty-state brewing-state">
          <Blob/>
          <div className="empty-head">CRAFTING YOUR<br/>MORNING&hellip;</div>
          <div className="empty-body">Three minutes of you, written for today. About a minute.</div>
        </div>
      </div>
    );
  }
  if (effectiveState === "waiting-on-yesterday") {
    return (
      <div className="screen">
        <TopBar greet={`${greetPrefix}${greetName ? ", " + greetName : ""}`} sub={subLine} onSettings={onSettings}/>
        <div className="empty-state">
          <div className="empty-glyph"><IconMoon size={48}/></div>
          <div className="empty-head">YESTERDAY&rsquo;S MORNING<br/>IS STILL WAITING.</div>
          <div className="empty-body">We won&rsquo;t stack a new one on top. Three minutes — sit with the last.</div>
        </div>
      </div>
    );
  }
  if (effectiveState === "failed") {
    return (
      <div className="screen">
        <TopBar greet={`${greetPrefix}${greetName ? ", " + greetName : ""}`} sub={subLine} onSettings={onSettings}/>
        <div className="empty-state">
          <div className="empty-head">SOMETHING BROKE.</div>
          <div className="empty-body">{today?.generation_error || "Generation failed."}</div>
          <button className="onboard-next" style={{marginTop:20}} onClick={() => { setKicked(false); api.generateNow().then(refresh); }}>Retry</button>
        </div>
      </div>
    );
  }

  return (
    <TodayReady
      onReflect={onReflect}
      onSettings={onSettings}
      variant={variant}
      today={today}
      greet={`${greetPrefix}${greetName ? ", " + greetName : ""}`}
      sub={subLine}
    />
  );
}

function TopBar({ greet, sub, onSettings }) {
  return (
    <div className="topbar-row">
      <div>
        <div className="greet">{greet}</div>
        <div className="sub">{sub}</div>
      </div>
      <button className="gear-btn" onClick={onSettings} aria-label="Settings"><IconGear/></button>
    </div>
  );
}

function TodayReady({ onReflect, onSettings, variant, today, greet, sub }) {
  const audioRef = useRef_T(null);
  const [isPlaying, setIsPlaying] = useState_T(false);
  const [pos, setPos] = useState_T(0);
  const [total, setTotal] = useState_T(today?.duration || 0);

  useEffect_T(() => {
    const a = audioRef.current;
    if (!a) return;
    const onTime = () => setPos(a.currentTime);
    const onMeta = () => setTotal(a.duration || today?.duration || 0);
    const onEnd  = () => { setIsPlaying(false); setPos(0); };
    a.addEventListener("timeupdate", onTime);
    a.addEventListener("loadedmetadata", onMeta);
    a.addEventListener("ended", onEnd);
    return () => {
      a.removeEventListener("timeupdate", onTime);
      a.removeEventListener("loadedmetadata", onMeta);
      a.removeEventListener("ended", onEnd);
    };
  }, [today?.audio_url]);

  const toggle = () => {
    const a = audioRef.current;
    if (!a) return;
    if (isPlaying) { a.pause(); setIsPlaying(false); }
    else           { a.play().then(() => setIsPlaying(true)).catch(e => console.warn("play failed", e)); }
  };

  const fmt = (s) => {
    if (!s || !isFinite(s)) return "--:--";
    const m = Math.floor(s / 60); const r = Math.floor(s % 60);
    return `${String(m).padStart(2,"0")}:${String(r).padStart(2,"0")}`;
  };
  const pct = total ? (pos / total) * 100 : 0;

  const title = prettyTitle(today?.title);
  const theme = today?.theme;
  const quote = today?.pull_quote;

  const Hero = variant === "B" ? (
    <div className="hero-card" style={{ alignItems: "center", textAlign: "center", justifyContent: "center", minHeight: 300 }}>
      <ThemeBadge theme={theme}/>
      <div className="hero-title" style={{ fontSize: 72, marginTop: 18 }}>{title}</div>
      <div className="hero-subtitle">{fmt(total)}</div>
    </div>
  ) : variant === "C" ? (
    <div className="hero-card" style={{ minHeight: 280 }}>
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start", position:"relative" }}>
        <div className="hero-eyebrow" style={{ marginBottom: 0 }}>{theme}</div>
        <div style={{ fontSize:11, color:"var(--text-muted)", letterSpacing:".14em", textTransform:"uppercase" }}>{fmt(total)}</div>
      </div>
      <div style={{ flex: 1 }}/>
      <div className="hero-title" style={{ fontSize: 64 }}>{title}</div>
      <div className="hero-subtitle" style={{ marginTop: 6 }}>{quote}</div>
    </div>
  ) : (
    <div className="hero-card">
      <div className="hero-eyebrow">{theme}</div>
      <div className="hero-title">{title}</div>
      <div className="hero-subtitle">{fmt(total)}</div>
      <ThemeBadge theme={theme}/>
    </div>
  );

  return (
    <div className="screen">
      <TopBar greet={greet} sub={sub} onSettings={onSettings}/>
      {Hero}
      <div className="player">
        <div className="progress-wrap">
          <div className="progress-track" onClick={(e) => {
            const a = audioRef.current; if (!a || !total) return;
            const r = e.currentTarget.getBoundingClientRect();
            const p = Math.max(0, Math.min(1, (e.clientX - r.left) / r.width));
            a.currentTime = p * total;
            setPos(a.currentTime);
          }}>
            <div className="progress-fill" style={{ "--p": `${pct}%` }}/>
            <div className="progress-knob" style={{ "--p": `${pct}%` }}/>
          </div>
          <div className="progress-times">
            <span>{fmt(pos)}</span>
            <span>{fmt(total)}</span>
          </div>
        </div>
        <PlayButton isPlaying={isPlaying} onToggle={toggle}/>
        {quote && <div className="pull-quote">&ldquo;{quote}&rdquo;</div>}
      </div>
      <button className="ghost-cta" onClick={onReflect}>
        Reflect after listening <IconArrow/>
      </button>
      <audio ref={audioRef} src={today?.audio_url} preload="metadata" playsInline/>
    </div>
  );
}

function greeting() {
  const h = new Date().getHours();
  if (h < 5)  return "Late night";
  if (h < 12) return "Good morning";
  if (h < 17) return "Afternoon";
  if (h < 21) return "Good evening";
  return "Good night";
}

// Slow, breathing organic shape — CSS-only morph. Used while a script is being
// written. No spinner, no progress bar; the point is patience, not hurry.
function Blob() {
  return (
    <div className="blob-wrap" aria-hidden="true">
      <div className="blob blob-1"/>
      <div className="blob blob-2"/>
    </div>
  );
}

Object.assign(window, { TodayScreen });