// Setup screens: situation picker + coach intro
const { useState, useEffect, useRef, useMemo } = React;

// ---------- Coach avatar — uses portrait photo when available ----------
function CoachAvatar({ coach, size = 64, ring = false }) {
  const [face, bg] = coach.swatch;
  // Fallback SVG smiley for coaches without a portrait (i.e. Iris)
  const accents = {
    regina: <path d="M30 30 Q50 14 70 30 Q50 22 30 30 Z" fill={face} opacity="0.4" />
  };
  return (
    <div className="coach-avatar" style={{ width: size, height: size, background: bg }}>
      {coach.portrait ? (
        <img src={coach.portrait} alt="" width={size} height={size} draggable="false"/>
      ) : (
        <svg viewBox="0 0 100 100" width={size} height={size} aria-hidden="true">
          <circle cx="50" cy="50" r="50" fill={bg} />
          {accents[coach.id]}
          <circle cx="38" cy="56" r="3.2" fill={face} />
          <circle cx="62" cy="56" r="3.2" fill={face} />
          <path d="M40 68 Q50 76 60 68" stroke={face} strokeWidth="2.6" strokeLinecap="round" fill="none" />
          <circle cx="30" cy="66" r="2.4" fill={face} opacity="0.25" />
          <circle cx="70" cy="66" r="2.4" fill={face} opacity="0.25" />
        </svg>
      )}
      {ring && <div className="coach-avatar-ring" />}
    </div>);
}

// ---------- Setup: situation picker ----------
function SetupScreen({ onPick }) {
  const [otherText, setOtherText] = useState("");
  const [showOther, setShowOther] = useState(false);

  return (
    <div className="screen setup-screen">
      <div className="setup-header">
        <div className="brand">
          <img src="assets/cabl-logo.png" alt="CABL"/>
        </div>
        <div className="setup-step">1 of 3 — pick a situation</div>
      </div>

      <div className="setup-body">
        <div className="setup-prompt">
          <div className="kicker">Hi there <span className="wave">👋</span></div>
          <h1 className="display">What's on your mind?</h1>
          <p className="lede">Pick whatever's closest. Your coach will help you sort out the rest — it doesn't have to be a perfect match.</p>
        </div>

        <div className="situation-list">
          {SITUATIONS.map((s, i) => {
            const coach = COACHES.find((c) => c.id === s.coachId);
            const isOther = s.id === "other";
            const enabled = coach.enabled !== false;
            return (
              <button
                key={s.id}
                className={`situation-row ${enabled ? "" : "situation-row-disabled"}`}
                disabled={!enabled}
                onClick={() => {
                  if (!enabled) return;
                  if (isOther) {setShowOther(true);return;}
                  onPick(s, coach);
                }}>

                <div className="situation-row-num">{String(i + 1).padStart(2, "0")}</div>
                <div className="situation-row-body">
                  <div className="situation-row-kicker">
                    {s.kicker}
                    {!enabled && <span className="situation-row-badge">Preview</span>}
                  </div>
                  <div className="situation-row-title">{s.title}</div>
                  <div className="situation-row-blurb">
                    {enabled ? s.blurb : "Coming soon — specialist coaching for this domain is in development."}
                  </div>
                </div>
                <div className="situation-row-coach">
                  <CoachAvatar coach={coach} size={44} />
                  <div className="situation-row-coach-meta">
                    <div className="situation-row-coach-name">{coach.name.split(" ")[0]}</div>
                    <div className="situation-row-coach-title">{coach.title}</div>
                  </div>
                </div>
                <div className="situation-row-arrow">{enabled ? <Icon name="chevron-right" size={17}/> : ""}</div>
              </button>);

          })}
        </div>

        {showOther &&
        <div className="other-modal" onClick={(e) => {if (e.target.classList.contains("other-modal")) setShowOther(false);}}>
            <div className="other-card">
              <div className="kicker">Tell us in your own words</div>
              <h2 className="display-sm">What are you trying to figure out?</h2>
              <textarea
              autoFocus
              rows={5}
              placeholder="I want to ask my landlord to let me out of my lease early without paying a big penalty…"
              value={otherText}
              onChange={(e) => setOtherText(e.target.value)} />
            
              <div className="other-actions">
                <button className="btn-ghost" onClick={() => setShowOther(false)}>
                  <IconText name="arrow-left">Back</IconText>
                </button>
                <button
                className="btn-primary"
                disabled={otherText.trim().length < 8}
                onClick={() => {
                  const s = SITUATIONS.find((x) => x.id === "other");
                  onPick({ ...s, customText: otherText }, COACHES.find((c) => c.id === "regina"));
                }}>
                <IconText name="arrow-right" after>Find me a coach</IconText></button>
              </div>
            </div>
          </div>
        }
      </div>

      <div className="setup-footer">
        <div className="setup-footer-meta">
          <Icon name="lock" size={13}/>
          <span>Private — your conversation goes only to your AI coach, never shared or sold.</span>
        </div>
      </div>
    </div>);

}

// ---------- Coach intro screen ----------
function CoachScreen({ situation, coach, onStart, onBack }) {
  const firstName = coach.name.split(" ")[0];
  return (
    <div className="screen coach-screen">
      <div className="setup-header">
        <button className="brand brand-back" onClick={onBack}>
          <img src="assets/cabl-logo.png" alt="CABL"/>
        </button>
        <div className="setup-step">2 of 3 — meet your coach</div>
      </div>

      <div className="coach-body">
        <div className="coach-card">
          <div className="coach-card-avatar">
            <CoachAvatar coach={coach} size={180} ring />
          </div>
          <div className="coach-card-meta">
            <div className="kicker">Your coach for <strong>{situation.kicker}</strong></div>
            <h1 className="display">Hi, I'm {firstName}.</h1>
            <div className="coach-card-title">{coach.title}</div>
            <p className="coach-card-bio" style={{ whiteSpace: "pre-line" }}>{coach.bio}</p>

            <dl className="coach-stats">
              <div><dt>Best at</dt><dd>{coach.domain}</dd></div>
            </dl>

            <div className="coach-process">
              <div className="kicker">Here's how this'll go</div>
              <ol className="coach-process-list">
                <li><span className="step-num">1</span><p>We'll chat for about 5–10 minutes. Nothing scary.</p></li>
                <li><span className="step-num">2</span><p>I'll keep a little map so we can see what we've covered.</p></li>
                <li><span className="step-num">3</span><p>You leave with a plan you can print and bring with you.</p></li>
              </ol>
            </div>

            <div className="coach-actions">
              <button className="btn-ghost" onClick={onBack}>
                <IconText name="arrow-left">Pick a different situation</IconText>
              </button>
              <button className="btn-primary big" onClick={onStart}>
                <IconText name="arrow-right" after>Let's get started</IconText>
              </button>
            </div>
          </div>
        </div>

        <div className="coach-roster">
          <div className="kicker">Other coaches you could meet</div>
          <div className="coach-roster-list">
            {COACHES.filter((c) => c.id !== coach.id).map((c) =>
            <div key={c.id} className="coach-roster-row">
                <CoachAvatar coach={c} size={36} />
                <div>
                  <div className="coach-roster-name">{c.name.split(" ")[0]}</div>
                  <div className="coach-roster-domain">{c.domain}</div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>);

}

window.SetupScreen = SetupScreen;
window.CoachScreen = CoachScreen;
window.CoachAvatar = CoachAvatar;