/* ========================================================================
   director.jsx, right-rail Demo Director
   Defines the SCENES list and renders the rail.
   The state machine for "which scene am I on" lives in app.jsx.
   ======================================================================== */

const SCENES = [
  {
    id: "intro",
    title: "Setup the moment",
    desc: "Frames the disruption + how Wonderful AI shows up across channels.",
    what: [],
  },
  {
    id: "email",
    title: "Lukas gets the bad news",
    desc: "EK202 to JFK is cancelled. Lukas opens his inbox over coffee, wedding speech tomorrow morning.",
    what: [
      { who: "sys", text: "Mass-issued cancellation email, auto-rebook on EK211 lands AFTER the ceremony" },
    ],
  },
  {
    id: "webchat",
    title: "Hala opens the chat",
    desc: "Lukas opens Manage Booking with questions. Hala greets him, hears the constraint (wedding tomorrow), presents ranked options, answers the policy questions.",
    what: [
      { who: "ai",  text: "Opens proactively: knows PNR, tier, meal pref, route history" },
      { who: "usr", text: "Vents: 7-yr Silver, second cancellation this month, speech tomorrow at 11" },
      { who: "ai",  text: "Recommends EK203 ranked against the wedding · offers phone or callback" },
    ],
  },
  {
    id: "tap-call",
    title: "Emirates calls Lukas",
    desc: "He chose voice. No dialling, no IVR. Hala places the outbound call and the chat context rides with it.",
    what: [
      { who: "sys", text: "Outbound call · verified business caller · chat session attached" },
    ],
  },
  {
    id: "voice",
    title: "Hala on voice, pressure stays on",
    desc: "Same agent, same context, now spoken. Lukas is still wound up; Hala holds the line through the cost + backup questions until he exhales.",
    what: [
      { who: "usr", text: "Pushes: am I really booked? what if EK203 cancels too?" },
      { who: "ai",  text: "Grounded answers: on-time 28/30, free same-cabin rebook, duty of care" },
      { who: "ai",  text: "Holds seat 23A · queues case for specialist sign-off" },
    ],
  },
  {
    id: "assistant",
    title: "Marcus commits the rebook",
    desc: "Senior consultant reviews Hala's case in the approvals queue. Hala held the seat and queued the work, Marcus owns the booking write.",
    what: [
      { who: "sys", text: "Hala's summary, policy quotes, held seat" },
      { who: "ai",  text: "Pre-flight checks: identity, eligibility, fare delta" },
      { who: "usr", text: "One click commits rebook + confirms across email/SMS/WhatsApp" },
    ],
  },
  {
    id: "confirmation",
    title: "Confirmation lands",
    desc: "The booking is committed. Confirmation arrives on Lukas's phone: email with the new flight, seat, meal.",
    what: [
      { who: "sys", text: "Email · push · WhatsApp all sent the moment Marcus commits" },
    ],
  },
  {
    id: "closing",
    title: "Outcome",
    desc: "What changed for Lukas, Marcus, and the operation.",
    what: [],
  },
];

window.SCENES = SCENES;

function Director({ sceneIdx, setSceneIdx, playing, setPlaying, collapsed, setCollapsed, autoplayHint }) {
  const total = SCENES.length;
  const pct = Math.round(((sceneIdx + 1) / total) * 100);

  return (
    <aside className={`director ${collapsed ? "collapsed" : ""}`}>
      <div className="director-head">
        <div className="director-logo">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
            <path d="M12 2L4 7v10l8 5 8-5V7l-8-5z" stroke="white" strokeWidth="1.5" strokeLinejoin="round"/>
            <circle cx="12" cy="12" r="2.5" fill="white"/>
          </svg>
        </div>
        {!collapsed && (
          <div className="director-title">
            <div className="name">Demo Director</div>
            <div className="sub">Wonderful · Emirates</div>
          </div>
        )}
        {!collapsed && (
          <button className="director-toggle" onClick={() => setCollapsed(true)} title="Collapse">
            <svg width="12" height="12" viewBox="0 0 16 16" fill="none">
              <path d="M6 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
        )}
      </div>

      {collapsed && (
        <button
          className="t-btn"
          style={{margin: "8px 8px 0", padding: "6px"}}
          onClick={() => setCollapsed(false)}
          title="Expand"
        >
          <svg width="12" height="12" viewBox="0 0 16 16" fill="none">
            <path d="M10 4l-4 4 4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
      )}

      {!collapsed && (
        <div className="director-progress">
          <div className="lbl">
            <span>Scene {sceneIdx + 1} of {total}</span>
            <span>{pct}%</span>
          </div>
          <div className="bar"><div className="bar-fill" style={{width: pct + "%"}}/></div>
        </div>
      )}

      {!collapsed && (
        <div className="scenes">
          {SCENES.map((s, i) => {
            const status = i < sceneIdx ? "done" : i === sceneIdx ? "active" : "";
            return (
              <div
                key={s.id}
                className={`scene ${status}`}
                onClick={() => setSceneIdx(i)}
              >
                <div className="gutter">
                  <div className="num">
                    {status === "done" ? (
                      <svg width="11" height="11" viewBox="0 0 16 16" fill="none">
                        <path d="M3 8.5l3 3 7-7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                      </svg>
                    ) : i + 1}
                  </div>
                  <div className="stem"/>
                </div>
                <div className="body">
                  <div className="ttl">{s.title}</div>
                  <div className="desc">{s.desc}</div>
                  {status === "active" && s.what.length > 0 && (
                    <div className="what">
                      {s.what.map((w, j) => (
                        <div key={j} className="what-row">
                          <span className={`what-pill ${w.who}`}>{w.who.toUpperCase()}</span>
                          <span>{w.text}</span>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      )}

      {collapsed && (
        <div className="director-strip">
          {SCENES.map((s, i) => {
            const cls = i < sceneIdx ? "done" : i === sceneIdx ? "active" : "";
            return <div key={s.id} className={`step-dot ${cls}`} title={s.title}/>;
          })}
        </div>
      )}

      <div className="director-foot">
        <div className="transport">
          <button className="t-btn" onClick={() => setSceneIdx(Math.max(0, sceneIdx - 1))} disabled={sceneIdx === 0}>
            <svg width="11" height="11" viewBox="0 0 16 16" fill="none">
              <path d="M10 4l-4 4 4 4" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            {!collapsed && <span className="label">Back</span>}
          </button>
          <button className="t-btn t-btn--primary" onClick={() => setPlaying(!playing)}>
            {playing ? (
              <svg width="11" height="11" viewBox="0 0 16 16" fill="currentColor">
                <rect x="4" y="3" width="3" height="10" rx="0.5"/>
                <rect x="9" y="3" width="3" height="10" rx="0.5"/>
              </svg>
            ) : (
              <svg width="11" height="11" viewBox="0 0 16 16" fill="currentColor">
                <path d="M4 3l9 5-9 5V3z"/>
              </svg>
            )}
            {!collapsed && <span className="label">{playing ? "Pause" : "Play"}</span>}
          </button>
          <button className="t-btn" onClick={() => setSceneIdx(Math.min(total - 1, sceneIdx + 1))} disabled={sceneIdx === total - 1}>
            {!collapsed && <span className="label">Next</span>}
            <svg width="11" height="11" viewBox="0 0 16 16" fill="none">
              <path d="M6 4l4 4-4 4" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
        </div>

        {!collapsed && (
          <div className="t-secondary">
            <button className="t-mini" onClick={() => setSceneIdx(0)}>Restart</button>
            <button className="t-mini" onClick={() => window.dispatchEvent(new CustomEvent('demo:skip'))}>Skip animation</button>
          </div>
        )}

        {!collapsed && (
          <div className="kbd-hint">
            <kbd>←</kbd><kbd>→</kbd> scenes · <kbd>Space</kbd> play · <kbd>S</kbd> skip
          </div>
        )}
      </div>
    </aside>
  );
}

window.Director = Director;