/* Drift Detection: animated chat exchange where the Companion flags drift.
 * User clicks "Play scene" to step through messages; can choose how to respond.
 */
const { useState: useStateD, useEffect: useEffectD } = React;

const DRIFT_SCRIPT = [
  { who: 'you', text: 'I need layout ideas for my project page. Each project has a hero image, a description, and process shots.' },
  { who: 'ai', text: "Here's a clean approach: a 12-column grid with the hero spanning full-bleed, then a two-column band for description + first process shot, then a 3-up gallery." },
  { who: 'you', text: 'Yeah let\'s try that. Show me a few variations.' },
  { who: 'ai', text: "Variations: (1) staggered grid with rhythmic spacing; (2) magazine-style asymmetric grid; (3) stacked editorial layout with generous whitespace." },
  { who: 'you', text: 'I like 1. Refine the spacing and let\'s lock the pattern.' },
];

const DRIFT_FLAG = {
  position: "The site should feel handcrafted. AI will not choose my typography or color palette.",
  observation: "Your Position Statement says the site should feel handcrafted. The layout we've been developing is a standard 12-column grid system, closer to a template than to handcraft. Is that intentional, or did we drift?",
};

const DRIFT_OPTIONS = [
  { key: 'A', label: 'Correct the drift, rethink the grid', detail: "Captured. Pausing layout work. Want to brainstorm what 'handcrafted' looks like as structure?" },
  { key: 'B', label: 'Update my Position Statement, clean grid IS my aesthetic', detail: "Got it. I'll save your current statement as v1 and we'll write v2 together. The pivot will be documented." },
  { key: 'C', label: "Continue deliberately, I'm adding hand-drawn elements next", detail: "Logged as a deliberate continuation. I'll re-check after the next pass." },
];

function DriftDemo() {
  const [step, setStep] = useStateD(0);
  const [choice, setChoice] = useStateD(null);
  const visible = DRIFT_SCRIPT.slice(0, Math.min(step, DRIFT_SCRIPT.length));
  const showFlag = step >= DRIFT_SCRIPT.length;
  const showResponse = choice != null;

  function next() {
    if (step < DRIFT_SCRIPT.length) setStep(step + 1);
    else if (!choice) setChoice('A');
  }
  function reset() { setStep(0); setChoice(null); }

  return (
    <div className="demo">
      <div className="demo__bar">
        <div className="demo__title"><span className="mark">C</span>Companion · Phase 4 · Make</div>
        <span className="pill pill--agent"><span className="dot"/>monitoring drift</span>
      </div>
      <div className="demo__body" style={{paddingBottom: 14}}>
        <div className="chat">
          {visible.map((m, i) => (
            <div key={i} className={"msg msg--" + m.who}>
              <div className="msg__avatar">{m.who === 'ai' ? 'AI' : 'YOU'}</div>
              <div>
                <div className="msg__bubble">{m.text}</div>
                <div className="msg__meta">{m.who === 'ai' ? 'companion · ' : 'you · '}{String(9 + Math.floor(i/2)).padStart(2,'0')}:{(14 + i*3).toString().padStart(2,'0')}</div>
              </div>
            </div>
          ))}
          {showFlag && (
            <div className="msg msg--drift">
              <div className="msg__avatar" style={{background: 'color-mix(in oklch, var(--agent), white 82%)', borderColor: 'var(--agent-line)', color: 'var(--agent)'}}>!</div>
              <div>
                <div className="msg__bubble">
                  <div className="drift-card__head" style={{marginBottom: 6}}>
                    <Icon.sparkles style={{width: 12, height: 12}}/> drift detected · phase 4
                  </div>
                  <div className="drift-card__quote">"{DRIFT_FLAG.position}"</div>
                  <div style={{marginBottom: 12}}>{DRIFT_FLAG.observation}</div>
                  <div className="drift-card__opts">
                    {DRIFT_OPTIONS.map(opt => (
                      <button key={opt.key} className={"drift-opt" + (choice === opt.key ? " drift-opt--selected" : "")} onClick={() => setChoice(opt.key)}>
                        <span><span className="drift-opt__key">{opt.key}</span> &nbsp;{opt.label}</span>
                        {choice === opt.key && <Icon.check style={{width: 14, height: 14, color: 'var(--ok)'}}/>}
                      </button>
                    ))}
                  </div>
                </div>
                <div className="msg__meta">companion · 09:41</div>
              </div>
            </div>
          )}
          {showResponse && (
            <div className="msg msg--ai">
              <div className="msg__avatar">AI</div>
              <div>
                <div className="msg__bubble">{DRIFT_OPTIONS.find(o => o.key === choice).detail}</div>
                <div className="msg__meta">companion · 09:42</div>
              </div>
            </div>
          )}
        </div>
        <div className="row" style={{marginTop: 22, paddingTop: 14, borderTop: '1px solid var(--line)'}}>
          {step < DRIFT_SCRIPT.length ? (
            <button className="btn" onClick={next}>Step through scene <Icon.arrow style={{width: 13, height: 13}}/></button>
          ) : !showResponse ? (
            <span className="muted" style={{fontSize: 12.5}}>Pick how you want to respond. All three are valid. The point is you decide consciously.</span>
          ) : (
            <span className="pill pill--ok"><Icon.check style={{width: 11, height: 11}}/> decision recorded</span>
          )}
          <button className="btn btn--ghost" onClick={reset} style={{marginLeft: 'auto'}}>Reset scene</button>
        </div>
      </div>
    </div>
  );
}

window.DriftDemo = DriftDemo;