// Reflect screen — evening check-in
const { useState: useState_R } = React;

function ReflectScreen({ onSubmitted }) {
  const [rating, setRating] = useState_R(0);
  const [word, setWord] = useState_R("");
  const [moved, setMoved] = useState_R(null);
  const [journal, setJournal] = useState_R("");
  const [submitting, setSubmitting] = useState_R(false);
  const [done, setDone] = useState_R(false);

  const canSubmit = rating > 0 && word.trim() && moved !== null && !submitting;

  const submit = async () => {
    if (!canSubmit) return;
    setSubmitting(true);
    try {
      await api.submitReflect({
        rating,
        word: word.trim(),
        moved: moved === "YES",
        journal: journal.trim() || undefined,
      });
    } catch (e) {
      console.warn("reflect submit failed:", e);
    }
    setDone(true);
    setTimeout(() => onSubmitted(), 900);
  };

  return (
    <div className="screen">
      <div className="topbar" style={{ paddingTop: 28 }}>
        <div className="greet">{(() => {
          const d = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][new Date().getDay()];
          const h = new Date().getHours();
          const part = h < 12 ? "morning" : h < 17 ? "afternoon" : h < 21 ? "evening" : "night";
          return `${d} ${part}`;
        })()}</div>
      </div>
      <div className="screen-title">How did today land?</div>

      <div className="reflect-body">
        <div>
          <div className="field-label">Rate the session</div>
          <StarRating value={rating} onChange={setRating}/>
        </div>

        <div>
          <div className="field-label">One word for today</div>
          <input
            className="text-input"
            placeholder="heavy, sharp, clear…"
            value={word}
            onChange={e => setWord(e.target.value)}
            maxLength={24}
          />
        </div>

        <div>
          <div className="field-label">Did you move your body?</div>
          <TogglePill options={["YES","NO"]} value={moved} onChange={setMoved}/>
        </div>

        <div>
          <div className="field-label">Anything on your mind?</div>
          <textarea
            className="text-input"
            placeholder="Optional. Kept private."
            value={journal}
            onChange={e => setJournal(e.target.value)}
            rows={3}
          />
        </div>

        <button className="submit-btn" onClick={submit} disabled={!canSubmit}>
          {submitting ? "Submitting…" : "Submit"}
        </button>
      </div>

      {done && (
        <div className="submit-success">
          <div style={{ display:"flex", flexDirection:"column", alignItems:"center", gap: 20 }}>
            <div className="success-mark"><IconCheck/></div>
            <div style={{
              fontFamily: "var(--font-display)", fontSize: 28,
              letterSpacing: ".04em", color: "var(--text-primary)"
            }}>
              LOGGED.
            </div>
            <div style={{ fontSize: 13, color: "var(--text-muted)" }}>Rest up.</div>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { ReflectScreen });