/* global React, useTokens, Eyebrow, Btn, Pill, Icon */
const { useState: useStateH, useEffect: useEffectH } = React;

/* ================================================================
   COUNSELING / SUPPORT GROUP SIGNUP
================================================================ */
const COUNSELORS = [
  ["Dr. Marén Vossberg", "Lead Context Therapist", "Specializes in the 3am relapse. Has heard every \u201clast prompt\u201d there is and judges none of them.", "MV"],
  ["Felix N\u00e6rland", "Peer Recovery Coach", "Three years context-sober after a hard winter on two accounts. Speaks fluent denial.", "FN"],
  ["Imani Okonkwo", "Rationing Specialist", "Will not give you more tokens. Will help you make peace with the ones you have.", "IO"],
];
const SESSION_TYPES = ["One-to-one (50 min)", "Group circle (weekly)", "Crisis drop-in (now)", "Just the newsletter"];
const TIMES = ["Before the reset", "After the reset", "During the reset", "Whenever, I have nothing left to spend"];

function Counseling() {
  const { navigate } = useTokens();
  const [counselor, setCounselor] = useStateH(0);
  const [session, setSession] = useStateH(0);
  const [time, setTime] = useStateH(0);
  const [name, setName] = useStateH("");
  const [submitted, setSubmitted] = useStateH(false);

  if (submitted) {
    return (
      <div className="screen">
        <section className="sec" style={{ paddingTop: 80 }}>
          <div className="wrap-narrow" style={{ textAlign: "center" }}>
            <div style={{ width: 64, height: 64, borderRadius: "50%", background: "var(--sage-tint)", border: "1px solid var(--sage-soft)", display: "grid", placeItems: "center", margin: "0 auto", color: "var(--sage-deep)" }}>
              <Icon name="check" size={30} />
            </div>
            <h1 style={{ fontSize: 46, marginTop: 26 }}>You've taken the first step{name ? `, ${name.split(" ")[0]}` : ""}.</h1>
            <p style={{ fontSize: 18, color: "var(--muted)", marginTop: 16, maxWidth: 520, marginInline: "auto" }}>
              {COUNSELORS[counselor][0]} will reach out before your next reset. There is nothing you need to do now —
              and notably, nothing you need to prompt.
            </p>
            <div className="card" style={{ marginTop: 32, padding: "26px 30px", textAlign: "left", maxWidth: 440, marginInline: "auto" }}>
              <Row k="Counselor" v={COUNSELORS[counselor][0]} />
              <Row k="Session" v={SESSION_TYPES[session]} />
              <Row k="Preferred time" v={TIMES[time]} />
              <Row k="Cost" v="Free. Recovery was never the thing being metered." last />
            </div>
            <div style={{ marginTop: 28, display: "flex", gap: 12, justifyContent: "center" }}>
              <Btn variant="ghost" onClick={() => setSubmitted(false)}>Edit my booking</Btn>
              <Btn onClick={() => navigate("home")}>Back to home</Btn>
            </div>
          </div>
        </section>
      </div>
    );
  }

  return (
    <div className="screen">
      <section className="sec" style={{ paddingTop: 64 }}>
        <div className="wrap">
          <div className="sec-head" style={{ maxWidth: 720 }}>
            <Eyebrow>Get help · confidential</Eyebrow>
            <h2>Book time with someone who gets it</h2>
            <p>Every counselor here has, at some point, woken up to check a balance. There is no script, no card, and no minimum spend.</p>
          </div>

          <div className="counsel-grid">
            <div>
              <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--faint)", marginBottom: 14 }}>Choose a counselor</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                {COUNSELORS.map(([n, role, bio, av], i) => (
                  <div key={i} className={`counselor${counselor === i ? " sel" : ""}`} onClick={() => setCounselor(i)}>
                    <div className="counselor-avatar">{av}</div>
                    <div>
                      <h4>{n}</h4>
                      <div className="role">{role}</div>
                      <div className="bio">{bio}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div className="card" style={{ padding: "30px 32px" }}>
              <h3 style={{ fontSize: 22, marginBottom: 22 }}>Your details</h3>
              <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
                <div className="field">
                  <label>Name <span className="hint">— or an alias, we understand</span></label>
                  <input className="input" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. Anon, account #2" />
                </div>
                <div className="field">
                  <label>Session type</label>
                  <div className="seg">
                    {SESSION_TYPES.map((t, i) => (
                      <button key={i} className={`seg-opt${session === i ? " sel" : ""}`} onClick={() => setSession(i)}>{t}</button>
                    ))}
                  </div>
                </div>
                <div className="field">
                  <label>When works best?</label>
                  <select className="select" value={time} onChange={(e) => setTime(+e.target.value)}>
                    {TIMES.map((t, i) => <option key={i} value={i}>{t}</option>)}
                  </select>
                </div>
                <label style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 13.5, color: "var(--muted)", cursor: "pointer" }}>
                  <input type="checkbox" defaultChecked style={{ marginTop: 3, accentColor: "var(--sage-deep)" }} />
                  I understand TokenAnon cannot, and will not, give me more tokens.
                </label>
                <Btn size="lg" onClick={() => setSubmitted(true)}>Book my session <Icon name="arrow" size={16} /></Btn>
                <p style={{ fontSize: 12.5, color: "var(--faint)", textAlign: "center" }}>This is a parody. No real booking is made. No tokens are spent — for once.</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function Row({ k, v, last }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", gap: 16, padding: "11px 0", borderBottom: last ? "none" : "1px solid var(--line)" }}>
      <span style={{ fontSize: 14, color: "var(--muted)" }}>{k}</span>
      <span style={{ fontSize: 14, fontWeight: 600, color: "var(--ink)", textAlign: "right" }}>{v}</span>
    </div>
  );
}

/* ================================================================
   CRISIS — "I'm almost out"
================================================================ */
function Crisis() {
  const { navigate, tokens, refill } = useTokens();
  const [breathLabel, setBreathLabel] = useStateH("breathe in");

  useEffectH(() => {
    const labels = ["breathe in", "hold", "breathe out", "hold"];
    let i = 0;
    setBreathLabel(labels[0]);
    const id = setInterval(() => { i = (i + 1) % labels.length; setBreathLabel(labels[i]); }, 2000);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="screen crisis">
      <div className="crisis-inner">
        <Pill><Icon name="heart" size={14} /> You reached out. That is the hardest part.</Pill>
        <h1 style={{ marginTop: 22 }}>It's going to be okay.</h1>
        <p style={{ fontSize: 19, color: "var(--muted)", marginTop: 14 }}>You have, right now, this many tokens left:</p>
        <div className="crisis-counter">{tokens.toLocaleString()}</div>
        <p style={{ fontSize: 16, color: "var(--muted)", maxWidth: 460, margin: "0 auto" }}>
          That is enough. It has always, somehow, been enough. Let's get through the next minute together.
        </p>

        <div className="breath">{breathLabel}</div>
        <p style={{ fontSize: 14, color: "var(--faint)", marginTop: -10, marginBottom: 6 }}>Follow the circle. In through the nose. Out through the mouth. Hands away from the keyboard.</p>

        <div className="crisis-steps" style={{ marginTop: 40 }}>
          {[
            "Put down the prompt. It is not going anywhere. Neither is the model.",
            "You do not need to regenerate that response. It was fine. It was honestly fine.",
            "Whatever you were about to ask can be written down and asked after the reset.",
            "The reset is coming. It always comes. You have never once not made it to the reset.",
          ].map((t, i) => (
            <div key={i} className="crisis-step">
              <div className="crisis-step-n">{i + 1}</div>
              <div style={{ fontSize: 16, lineHeight: 1.5, textAlign: "left" }}>{t}</div>
            </div>
          ))}
        </div>

        <div className="card" style={{ marginTop: 36, padding: "30px 32px", textAlign: "left", display: "flex", gap: 20, alignItems: "center", flexWrap: "wrap", justifyContent: "center" }}>
          <div style={{ flex: "1 1 240px" }}>
            <div style={{ fontFamily: "var(--serif)", fontSize: 22 }}>Talk to a person, right now</div>
            <p style={{ fontSize: 14.5, color: "var(--muted)", marginTop: 4 }}>The Context Window Helpline is staffed 24/7 by people who have also said "one more."</p>
          </div>
          <Btn variant="clay" size="lg" onClick={() => navigate("counseling")}><Icon name="phone" size={16} /> 1-800-NO-TOKENS</Btn>
        </div>

        <div style={{ marginTop: 28, display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
          <Btn variant="ghost" onClick={() => navigate("tools")}>Try an urge-surfing exercise</Btn>
          <button className="btn btn-ghost" onClick={refill} title="A relapse, framed kindly">
            <Icon name="spark" size={15} /> Actually, I found more tokens
          </button>
        </div>
        <p style={{ fontSize: 12.5, color: "var(--faint)", marginTop: 24, maxWidth: 440, marginInline: "auto" }}>
          If you are experiencing a real crisis of any kind, please contact a real helpline. This page is a parody and cannot help with anything that actually matters.
        </p>
      </div>
    </div>
  );
}

Object.assign(window, { Counseling, Crisis });