/* ============================================================
   flows.jsx — presentational pieces for the 3 narrative flows:
     · FlowSelector          — floating left-rail flow picker
     · LockScreen            — iOS lock screen + tappable notification
     · NotificationDialog    — iOS "…would like to send notifications"
     · PersonalizingInterstitial — loading card over a blurred home
   ============================================================ */
const { useEffect: useEffectF } = React;

/* ---- Floating flow picker, pinned outside the phone on the left ---- */
function FlowSelector({ flow, onSelect }) {
  const items = [
    { n: 1, label: 'Onboarding', sub: 'opt-in → personalize' },
    { n: 2, label: 'Care escalation', sub: 'notification → Ebb → Care' },
    { n: 3, label: 'Sleep', sub: 'notification → player' },
  ];
  return (
    <nav className="flow-select" aria-label="Choose a flow">
      <div className="flow-select-h">Flows</div>
      {items.map((f) => (
        <button key={f.n} className={"flow-link" + (flow === f.n ? " on" : "")} onClick={() => onSelect(f.n)}>
          <span className="flow-num">{f.n}</span>
          <span className="flow-txt">
            <span className="flow-lab">{f.label}</span>
            <span className="flow-sub">{f.sub}</span>
          </span>
        </button>
      ))}
    </nav>
  );
}
window.FlowSelector = FlowSelector;

/* ---- Lock screen — the entry point for flows 2 & 3 (matches Figma "Notifications") ---- */
function LockScreen({ variant, onTap }) {
  const cfg = variant === 'sleep'
    ? { date: 'Monday, June 6', title: 'Blake, let\u2019s wind down', body: 'It\u2019s time for tonight\u2019s personalized sleepcast.' }
    : { date: 'Monday, June 6', title: 'Feeling more stressed than usual?', body: 'According to your heart rate data, there might be something on your mind. Up for a quick chat? It can help you feel calmer.' };
  return (
    <div className={"lock " + variant}>
      <div className="lock-wall" aria-hidden="true"><img src="assets/lock-wall.png" alt="" /></div>
      <StatusBar light />
      <div className="lock-clock">
        <div className="lock-date">{cfg.date}</div>
        <div className="lock-time">9:41</div>
      </div>
      <div className="lock-notifs">
        <button className="lock-notif" onClick={onTap}>
          <span className="lock-app-icon" aria-hidden="true"><img src="assets/lock-app-icon.png" alt="" /></span>
          <span className="lock-notif-main">
            <span className="lock-notif-title">{cfg.title}</span>
            <span className="lock-notif-text">{cfg.body}</span>
          </span>
          <span className="lock-notif-time">9:41 AM</span>
        </button>
      </div>
      <div className="home-bar light"></div>
    </div>
  );
}
window.LockScreen = LockScreen;

/* ---- iOS-style notification opt-in dialog (Flow 1) ---- */
function NotificationDialog({ onAllow, onDeny }) {
  return (
    <div className="notif-layer" role="dialog" aria-modal="true" aria-label="Notifications permission">
      <div className="notif-scrim"></div>
      <div className="notif-dialog">
        <div className="nd-title">Headspace would like to send you notifications</div>
        <div className="nd-body">Notifications may include alerts, sounds, and icon badges. These can be configured in Settings.</div>
        <div className="nd-btns">
          <button className="nd-btn allow" onClick={onAllow}>Allow</button>
          <button className="nd-btn deny" onClick={onDeny}>Don't allow</button>
        </div>
      </div>
    </div>
  );
}
window.NotificationDialog = NotificationDialog;

/* ---- Personalizing interstitial — spinner card over the blurred home ---- */
function PersonalizingInterstitial({ flow, onDone, label, duration, light }) {
  const text = label || (flow === 3
    ? 'Adjusting your plan based on your responses…'
    : 'Personalizing your Today feed…');
  useEffectF(() => {
    const t = window.setTimeout(() => onDone && onDone(), duration || 2600);
    return () => window.clearTimeout(t);
  }, []);
  return (
    <div className="pz-layer" aria-live="polite">
      <div className="pz-scrim"></div>
      <div className={"pz-card" + (light ? " light" : "")}>
        <span className="pz-spinner" aria-hidden="true"></span>
        <span className="pz-label">{text}</span>
      </div>
    </div>
  );
}
window.PersonalizingInterstitial = PersonalizingInterstitial;