/* Overlays — History (Chats) drawer + color-sampled Player */
const { useState: useStateO, useEffect: useEffectO, useRef: useRefO } = React;

/* Your Journey side menu. In the Care flow it grows an upcoming-appointment
   row (with a one-time tooltip) above the usual path + chat-history cards. */
const JD_DAYS = [
  { wk: 'Sun', n: '15' },
  { wk: 'Mon', n: '16', today: true },
  { wk: 'Tue', n: '17', badge: 'award' },
  { wk: 'Wed', n: '18' },
  { wk: 'Thu', n: '19', badge: 'sleep' },
];

function Drawer({ open, onClose, onOpenPlayer, care = false, tooltip = false, onDismissTip, streakCount = 2 }) {
  const D = window.HS_DATA;
  const Ic = window.Icon;
  const appt = D.CARE_APPT || {};

  return (
    <div className={"drawer" + (open ? " open" : "")}>
      <div className="drawer-inner">
        <div className="jd-topbar">
          <div className="jd-topbar-l">
            <button className="jd-round" aria-label="Saved"><Ic name="heart-filled" size={22} className="ic-inset" /></button>
            <button className="jd-round" aria-label="Recent"><Ic name="history" size={22} className="ic-inset" /></button>
          </div>
          <div className={"jd-streak" + (streakCount === 0 ? " zero" : "") + (care ? " active" : "")} aria-label={streakCount + " day streak"}>
            <span key={open ? "orb-o" : "orb-c"} className={"jd-streak-orb" + (care && open ? " filling" : "")}>
              <Ic name="streak-badge" size={26} className="s-base" style={{ width: 30, height: 52 }} />
              {care && <Ic name="streak-badge" size={26} className="s-fill" style={{ width: 30, height: 52 }} />}
            </span>
            <span key={open ? "num-o" : "num-c"} className={"jd-streak-num" + (care && open ? " pop" : "")}>{streakCount}</span>
          </div>
        </div>

        <div className="jd-cal">
          {JD_DAYS.map((d, i) => {
            const badge = (d.badge === 'sleep' && !care) ? null : d.badge;
            return (
            <div key={i} className={"jd-day" + (d.today ? " today" : "")}>
              <span className="jd-day-wk">{d.wk}</span>
              {badge === 'award'
                ? <span className="jd-day-cell award"><Ic name="streak-badge" size={26} style={{ width: 20, height: 42 }} /></span>
                : badge === 'sleep'
                  ? <span className="jd-day-cell care"><img src="assets/care-inactive.svg" alt="" width="20" height="20" /></span>
                  : <span className={"jd-day-cell num" + (d.today ? " today" : "")}>{d.n}</span>}
            </div>
            );
          })}
        </div>

        <div className="drawer-scroll">
          <h2 className="jd-journey-h">Your journey</h2>
          {!care && (
            <button className="jd-summary" onClick={onClose}>
              <span className="jd-summary-main">
                <span className="jd-summary-meta"><Ic name="chat-active" size={15} color="var(--hs-warm-grey-700)" /><span>Thur, June 18th</span></span>
                <span className="jd-summary-title">Processing emotions after work</span>
              </span>
              <span className="jd-summary-arrow"><Ic name="arrow-right-thick" size={20} color="var(--hs-warm-grey-800)" /></span>
            </button>
          )}
          {care && (
            <React.Fragment>
              <button className="jd-care" onClick={onClose}>
                <img className="jd-care-av" src="assets/care-therapist.png" alt="" />
                <span className="jd-care-info">
                  <span className="jd-care-t">{appt.title || 'Video therapy in 2 days'}</span>
                  <span className="jd-care-sub">1 task: <span className="jd-care-link">{appt.task || 'Fill out intake form'}</span></span>
                </span>
                <span className="jd-care-caret"><img src="assets/caret-right.svg" alt="" width="22" height="22" /></span>
              </button>

              {tooltip && (
                <div className="jd-tip">
                  <div className="jd-tip-head">
                    <span className="jd-tip-title">Care appointments</span>
                    <button className="jd-tip-x" aria-label="Dismiss" onClick={onDismissTip}><Ic name="close" size={13} color="rgba(255,255,255,.85)" /></button>
                  </div>
                  <p className="jd-tip-body">Upcoming Care appointment actions show up in your side Journey menu, along with a calendar view to keep you on track.</p>
                </div>
              )}
            </React.Fragment>
          )}

          <button className="jd-path2" onClick={onClose}>
            <img className="jd-path2-bg" src="assets/find-a-new-path.png" alt="" />
            <span className="jd-path2-t">Find a new<br />path forward</span>
          </button>

          <button className="jd-hist" onClick={onClose}>
            <span className="jd-hist-l">
              <span className="jd-hist-ic"><Ic name="history" size={16} color="var(--hs-warm-grey-700)" /></span>
              <span className="jd-hist-t">Chat history</span>
            </span>
            <span className="jd-hist-av"><img src="assets/ebb-sparkle.png" alt="" /></span>
          </button>
        </div>

        <div className="drawer-foot">
          <div className="avatar2"><img src="assets/avatar-profile.svg" alt="" /></div>
          <div className="who">
            <div className="n">Blake Smith</div>
            <div className="s">Joined in June 2026</div>
          </div>
        </div>
      </div>
    </div>
  );
}
window.Drawer = Drawer;

function lenToSec(len) {
  const m = parseInt((len || '10').match(/\d+/)[0], 10);
  return m * 60;
}
function fmt(s) {
  s = Math.max(0, Math.round(s));
  const m = Math.floor(s / 60), ss = s % 60;
  return m + ':' + String(ss).padStart(2, '0');
}

function Player({ content, onClose }) {
  const D = window.HS_DATA;
  const [shown, setShown] = useStateO(content);
  const [playing, setPlaying] = useStateO(false);
  const [elapsed, setElapsed] = useStateO(247); // matches Figma 4:07 start
  const [fav, setFav] = useStateO(false);
  const open = !!content;

  useEffectO(() => {
    if (content) { setShown(content); setPlaying(true); setElapsed(247); }
  }, [content && content.id]);

  const total = shown ? lenToSec(shown.len) : 600;

  useEffectO(() => {
    if (!playing || !open) return;
    const t = window.setInterval(() => {
      setElapsed(e => (e >= total ? (window.clearInterval(t), total) : e + 1));
    }, 1000);
    return () => window.clearInterval(t);
  }, [playing, open, total]);

  const c = shown ? shown.colors : ['#86CBFF', '#3B8BF0', '#1A4FC4'];
  const pct = Math.min(100, (elapsed / total) * 100);

  const seek = (e) => {
    const r = e.currentTarget.getBoundingClientRect();
    const x = (e.clientX - r.left) / r.width;
    setElapsed(Math.round(Math.max(0, Math.min(1, x)) * total));
  };

  return (
    <div className={"player" + (open ? " open" : "")}
      style={{ background: D.playerGradient(c) }}>
      <div className="player-grain"></div>
      <StatusBar light />
      <div className="player-top">
        <button className="player-x" aria-label="Close" onClick={onClose}>
          <Icon name="close" size={20} color="#fff" />
        </button>
      </div>

      <div className="player-mid">
        <div className="player-title">
          <div className="cat">{shown ? shown.cat : ''}</div>
          <h2>{shown ? shown.title : ''}</h2>
        </div>
        <div className="player-pills">
          <span className="player-pill">{shown ? shown.teacher : ''}<Icon name="sort-down" size={15} color="#fff" style={{ opacity: .8 }} /></span>
          <span className="player-pill">{shown ? shown.len : ''}<Icon name="sort-down" size={15} color="#fff" style={{ opacity: .8 }} /></span>
        </div>
        <div className="player-controls">
          <button className="pc-skip" aria-label="Back 15s" onClick={() => setElapsed(e => Math.max(0, e - 15))}>
            <Icon name="skip-back" size={32} color="#fff" />
          </button>
          <button className="pc-play" aria-label={playing ? "Pause" : "Play"} onClick={() => setPlaying(p => !p)}
            style={{ color: c[2] }}>
            {playing
              ? <Icon name="pause" size={30} color={c[2]} />
              : <Icon name="play-video" size={34} color={c[2]} />}
          </button>
          <button className="pc-skip" aria-label="Ahead 15s" onClick={() => setElapsed(e => Math.min(total, e + 15))}>
            <Icon name="skip-ahead" size={32} color="#fff" />
          </button>
        </div>
      </div>

      <div className="player-bottom">
        <div className="scrubber">
          <div className="scrub-track" onClick={seek}>
            <div className="scrub-fill" style={{ width: pct + '%' }}></div>
            <div className="scrub-handle" style={{ left: pct + '%' }}></div>
          </div>
          <div className="scrub-time">
            <span>{fmt(elapsed)}</span>
            <span>{fmt(total)}</span>
          </div>
        </div>

        <div className="actionbar">
          <button className={fav ? "on" : ""} aria-label="Favorite" onClick={() => setFav(f => !f)}
            style={{ opacity: fav ? 1 : .8 }}>
            <Icon name="heart" size={22} color="#fff" />
          </button>
          <button aria-label="Share"><Icon name="share" size={22} color="#fff" /></button>
          <button aria-label="Info"><Icon name="info" size={22} color="#fff" /></button>
          <button aria-label="Airplay"><Icon name="airplay" size={22} color="#fff" /></button>
          <button aria-label="Settings"><Icon name="settings" size={22} color="#fff" /></button>
        </div>
      </div>

      <div className="home-bar light"></div>
    </div>
  );
}
window.Player = Player;

/* ============================================================
   Search overlay — expands the search icon into a discovery sheet
   ============================================================ */
function ResetTile({ kind }) {
  if (kind === 'breathe') {
    return (
      <span className="reset-tile" style={{ background: 'linear-gradient(150deg,#1F7A4D,#0F5E37)' }}>
        <svg width="40" height="40" viewBox="0 0 48 48" fill="none">
          <path d="M24 6c1.6 8 4 10.4 12 12-8 1.6-10.4 4-12 12-1.6-8-4-10.4-12-12 8-1.6 10.4-4 12-12Z" fill="#FFC400"/>
        </svg>
      </span>
    );
  }
  if (kind === 'meditate') {
    return (
      <span className="reset-tile" style={{ background: 'linear-gradient(150deg,#FFC400,#FF9A00)' }}>
        <span style={{ width: 26, height: 26, borderRadius: '50%', background: '#FF6A00', display: 'block' }}></span>
      </span>
    );
  }
  // sos — life ring
  return (
    <span className="reset-tile" style={{ background: 'linear-gradient(150deg,#3E9BFF,#1E63E0)' }}>
      <svg width="40" height="40" viewBox="0 0 48 48" fill="none">
        <circle cx="24" cy="24" r="15" fill="#fff"/>
        <circle cx="24" cy="24" r="7" fill="#2A6FDB"/>
        <path d="M24 9l3 6h-6l3-6Z" fill="#FF6F61"/>
        <path d="M24 39l-3-6h6l-3 6Z" fill="#FF6F61"/>
        <path d="M9 24l6-3v6l-6-3Z" fill="#FF6F61"/>
        <path d="M39 24l-6 3v-6l6 3Z" fill="#FF6F61"/>
      </svg>
    </span>
  );
}

function SearchOverlay({ open, onClose, onSearch, onOpenPlayer }) {
  const D = window.HS_DATA;
  const [q, setQ] = useStateO('');
  const inputRef = useRefO(null);

  useEffectO(() => {
    if (open) {
      setQ('');
      const t = window.setTimeout(() => { try { inputRef.current && inputRef.current.focus(); } catch (e) {} }, 360);
      return () => window.clearTimeout(t);
    }
  }, [open]);

  const submit = (text) => {
    const t = (text != null ? text : q).trim();
    if (!t) return;
    onSearch(t);
  };

  const prompts = [
    { label: 'Meditate', lead: 'dot', q: 'Guide me through a meditation' },
    { label: 'Sleep', lead: 'moon', q: 'Help me wind down for sleep' },
    { label: 'Letting go', trail: 'spark', q: "I'm trying to let go of something" },
    { label: 'Finding balance', trail: 'spark', q: 'Help me find a little balance' },
  ];

  const resets = [
    { kind: 'breathe', label: 'Breathe', content: D.C.grounded },
    { kind: 'meditate', label: 'Meditate', content: D.C.reframe },
    { kind: 'sos', label: 'SOS', content: D.C.compassion },
  ];

  const trending = [D.C.galloping, D.C.pauseEbb, D.C.deepbreaths];
  const metaIcon = { 'Course': 'audio', 'Reflect': 'ai', 'Mindful Activity': 'pencil' };

  return (
    <div className={"search-ov" + (open ? " open" : "")} aria-hidden={!open}>
      <div className="search-scrim" onClick={onClose}></div>
      <div className="search-sheet" role="dialog" aria-label="Search">
        <div className="search-head">
          <button className="search-x" aria-label="Close search" onClick={onClose}>
            <Icon name="close" size={18} color="var(--hs-warm-grey-800)" />
          </button>
        </div>

        <div className="search-bar">
          <span className="search-bar-ic"><Icon name="search-line" size={20} color="var(--hs-warm-grey-700)" /></span>
          <input
            ref={inputRef}
            value={q}
            placeholder="I need a moment for…"
            onChange={(e) => setQ(e.target.value)}
            onKeyDown={(e) => { if (e.key === 'Enter') submit(); }}
          />
        </div>

        <div className="search-prompts">
          {prompts.map((p, i) => (
            <button key={i} className="search-prompt" onClick={() => submit(p.q)}>
              {p.lead === 'dot' && <span className="prompt-dot"></span>}
              {p.lead === 'moon' && <span className="prompt-ic moon"><Icon name="moon" size={17} /></span>}
              <span>{p.label}</span>
              {p.trail === 'spark' && <span className="prompt-ic spark"><Icon name="ai" size={14} /></span>}
            </button>
          ))}
        </div>

        <h3 className="search-sec">1 minute resets</h3>
        <div className="reset-row">
          {resets.map((r) => (
            <button key={r.kind} className="reset-card" onClick={() => onOpenPlayer(r.content)}>
              <ResetTile kind={r.kind} />
              <span className="reset-label">{r.label}</span>
            </button>
          ))}
        </div>

        <h3 className="search-sec">What's helping others</h3>
        <div className="trend-list">
          {trending.map((c, i) => (
            <div key={c.id} className="trend-row" onClick={() => onOpenPlayer(c)}>
              <span className="trend-num">{i + 1}.</span>
              <div className="trend-card">
                <div className="trend-thumb"><img src={c.img} alt="" /></div>
                <div className="trend-info">
                  <div className="trend-title">{c.title}</div>
                  <div className="trend-meta">
                    <Icon name={metaIcon[c.cat] || 'audio'} size={15} color="var(--hs-warm-grey-600)" />
                    <span>{c.cat} · {c.len}</span>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
window.SearchOverlay = SearchOverlay;