// Direction E — "AI Front Door"
// You don't navigate. You ask. The AI routes, drafts, and shows the work.
// Inspector panel reveals which modules were touched — every artifact is real.

const E_ACCENT = '#f4a4b3'; // coral
const E_INK = window.sketchInk;

// Chat bubble primitives
function Bubble({ from = 'user', children, style }) {
  const isAI = from === 'ai';
  return (
    <div style={{
      display: 'flex', gap: 6,
      flexDirection: isAI ? 'row' : 'row-reverse',
      alignItems: 'flex-start',
      ...style,
    }}>
      <div style={{
        width: 24, height: 24,
        border: `1.4px solid ${E_INK}`,
        background: isAI ? E_ACCENT : '#fff',
        borderRadius: '50%',
        display: 'grid', placeItems: 'center',
        flex: 'none',
        fontWeight: 700, fontSize: 13,
      }}>{isAI ? '✦' : 'P'}</div>
      <div style={{
        maxWidth: '78%',
        padding: '6px 9px',
        border: `1.3px solid ${E_INK}`,
        borderRadius: window.hand(isAI ? 1 : 2),
        background: isAI ? '#fffaf2' : '#fff',
        fontSize: 11.5, lineHeight: 1.35,
      }}>{children}</div>
    </div>
  );
}

function AskBar({ value = 'Ask Method 8…', style }) {
  return (
    <div style={{
      display: 'flex', gap: 6, alignItems: 'center',
      padding: '6px 8px',
      border: `1.5px solid ${E_INK}`,
      borderRadius: window.hand(7),
      background: '#fff',
      boxShadow: `2px 2px 0 ${E_INK}`,
      ...style,
    }}>
      <SkAvatar initial="✦" size={20} accent={E_ACCENT}/>
      <div style={{ flex: 1, fontSize: 12, color: window.sketchInkSoft, fontFamily: '"Architects Daughter", cursive' }}>{value}</div>
      <SkBtn>↑ files</SkBtn>
      <SkBtn primary accent={E_INK}>ask</SkBtn>
    </div>
  );
}

// ---- E1: Sign in → empty conversation ----
function E1_Signin() {
  return (
    <SkFrame title="Sign in" subtitle="say what you want" accent={E_ACCENT}>
      <div style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 12, height: '100%', alignItems: 'center', justifyContent: 'center', textAlign: 'center' }}>
        <div style={{ fontFamily: '"Caveat", cursive', fontSize: 30, fontWeight: 700, lineHeight: 1 }}>
          What do you want to achieve<br/>at Subicare today?
        </div>
        <div style={{ fontSize: 12, color: window.sketchInkSoft, maxWidth: 380 }}>
          Method 8 is a team of specialist agents — strategy, governance, assurance, ops.
          Tell us what you need. We'll do the work, you approve it.
        </div>
        <AskBar style={{ width: '85%' }} value='e.g. "Design our incident response governance"'/>
        <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap', justifyContent: 'center', maxWidth: 460 }}>
          {[
            'Where are we drifting?',
            'Prep us for our ISO audit',
            'Why is Ops ↔ Clinical broken?',
            'Design our governance',
            'Run a health diagnostic',
            'Find the top 5 things to fix',
          ].map(t => (
            <div key={t} style={{
              padding: '3px 9px',
              border: `1.3px solid ${E_INK}`,
              borderRadius: 99,
              background: '#fff',
              fontSize: 11, fontWeight: 600,
              cursor: 'pointer',
            }}>{t}</div>
          ))}
        </div>
        <SkAnnot style={{ color: '#a53e51' }}>
          ↑ no nav. no menus. you describe the outcome.
        </SkAnnot>
      </div>
    </SkFrame>
  );
}

// ---- E2: Conversation home + recents ----
function E2_Home() {
  return (
    <SkFrame title="Home" subtitle="conversations" accent={E_ACCENT}>
      <div style={{ display: 'flex', height: '100%' }}>
        {/* left rail: threads */}
        <div style={{
          width: 150,
          borderRight: `1.5px solid ${E_INK}`,
          background: '#fff',
          padding: 8,
          display: 'flex', flexDirection: 'column', gap: 4,
        }}>
          <div style={{ fontFamily: '"Caveat", cursive', fontSize: 18, fontWeight: 700, marginBottom: 4 }}>Method 8</div>
          <SkBtn primary accent={E_INK} style={{ width: '100%' }}>＋ new</SkBtn>
          <div style={{ fontSize: 10, color: window.sketchInkSoft, fontWeight: 700, marginTop: 6, textTransform: 'uppercase', letterSpacing: 1 }}>recent</div>
          {[
            ['ISO audit prep','today','#dcfae6'],
            ['Ops ↔ Clinical fix','today','#fee4e2'],
            ['Q1 health scan','yesterday','#fef0c7'],
            ['Risk Committee charter','2d','#d1e9ff'],
            ['Care plan SLA','3d','#fee4e2'],
          ].map(([t, d, c], i) => (
            <div key={i} style={{
              padding: '4px 6px',
              border: `1.3px solid ${i === 0 ? E_INK : 'transparent'}`,
              background: i === 0 ? '#fff5f7' : 'transparent',
              borderRadius: window.hand(i+1),
              display: 'flex', flexDirection: 'column', gap: 2,
              fontSize: 10.5,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                <span style={{ width: 7, height: 7, borderRadius: '50%', background: c, border: `1px solid ${E_INK}` }}/>
                <span style={{ fontWeight: 700, lineHeight: 1.1, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t}</span>
              </div>
              <span style={{ fontSize: 9, color: window.sketchInkSoft }}>{d}</span>
            </div>
          ))}
        </div>
        {/* main thread */}
        <div style={{ flex: 1, padding: 10, display: 'flex', flexDirection: 'column', gap: 6 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <div style={{ fontFamily: '"Caveat", cursive', fontSize: 18, fontWeight: 700 }}>ISO audit prep</div>
            <SkPill accent="#dcfae6">3 agents · 12 actions</SkPill>
            <div style={{ flex: 1 }}/>
            <SkBtn>open inspector</SkBtn>
          </div>
          <Bubble from="user">We have an ISO 9001 surveillance audit in 9 days. Get us ready.</Bubble>
          <Bubble from="ai">
            Routing to <b>Assurance agent</b> and <b>Operating Model agent</b>. I'll pull our current QMS, find the 4 evidence gaps, and draft a prep plan.
          </Bubble>
          <Bubble from="ai">
            <b>Found 4 gaps:</b> management review minutes (last 90d), CAPA closure log, supplier eval records (FY23), audit log. Drafting evidence pack now.
          </Bubble>
          <AskBar style={{ marginTop: 'auto' }} value='Reply…'/>
        </div>
      </div>
    </SkFrame>
  );
}

// ---- E3: AI orchestrates · agents fan out ----
function E3_Agents() {
  return (
    <SkFrame title="Agents at work" subtitle="orchestration" accent={E_ACCENT}>
      <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 8, height: '100%' }}>
        <div style={{ fontFamily: '"Caveat", cursive', fontSize: 18, fontWeight: 700 }}>
          "Design our incident-response governance" — 4 agents collaborating
        </div>
        {/* root */}
        <div style={{
          alignSelf: 'center',
          padding: '5px 10px',
          background: E_ACCENT,
          border: `1.5px solid ${E_INK}`,
          borderRadius: window.hand(1),
          fontWeight: 700, fontSize: 12,
        }}>orchestrator</div>
        <div style={{ height: 12, position: 'relative' }}>
          <svg viewBox="0 0 600 24" preserveAspectRatio="none" style={{ width: '100%', height: 24 }}>
            {[75, 225, 375, 525].map((x, i) => (
              <line key={i} x1={300} y1={0} x2={x} y2={20} stroke={E_INK} strokeWidth="1.2" strokeDasharray="3 2"/>
            ))}
          </svg>
        </div>
        {/* agents */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 5 }}>
          {[
            { name: 'Governance', icon: '⚖', sub: 'drafting RACI · 12 roles', state: 'working' },
            { name: 'Standards', icon: '✓', sub: 'mapped to ISO 27035', state: 'done' },
            { name: 'Process', icon: '⇄', sub: 'building escalation flow', state: 'working' },
            { name: 'People', icon: '☺', sub: 'identifying on-call rota', state: 'waiting' },
          ].map((a, i) => (
            <SkBox key={i} seed={i+1} style={{ padding: 6, fontSize: 10.5 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                <span style={{ fontSize: 14 }}>{a.icon}</span>
                <span style={{ fontWeight: 700 }}>{a.name}</span>
                <span style={{ marginLeft: 'auto', width: 7, height: 7, borderRadius: '50%', background: a.state === 'done' ? '#079455' : a.state === 'working' ? '#dc6803' : '#98a2b3' }}/>
              </div>
              <div style={{ fontSize: 9.5, color: window.sketchInkSoft, marginTop: 2 }}>{a.sub}</div>
            </SkBox>
          ))}
        </div>
        <SkBox seed={6} style={{ padding: 8, background: '#fff5f7', fontSize: 11.5, lineHeight: 1.3 }}>
          <b>artifacts emerging.</b><br/>
          <span style={{ color: window.sketchInkSoft }}>
            · Decision rights matrix (governance) — draft 1<br/>
            · Severity taxonomy — draft 2<br/>
            · Escalation playbook — in progress<br/>
            · Standards crosswalk — done
          </span>
        </SkBox>
        <SkAnnot style={{ color: '#a53e51' }}>
          ↑ this <i>was</i> the consulting engagement. it's now an hour of agent time.
        </SkAnnot>
      </div>
    </SkFrame>
  );
}

// ---- E4: Result panel · approve / edit ----
function E4_Artifact() {
  return (
    <SkFrame title="Artifact" subtitle="approve · edit · push" accent={E_ACCENT}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', height: '100%' }}>
        {/* conversation continues */}
        <div style={{ padding: 8, display: 'flex', flexDirection: 'column', gap: 6, borderRight: `1.5px solid ${E_INK}` }}>
          <Bubble from="ai">
            Decision rights drafted. <b>12 decisions</b> mapped to roles you already have in your org chart. Open the artifact to review.
          </Bubble>
          <Bubble from="user">Anything controversial?</Bubble>
          <Bubble from="ai">
            Two: <b>(1)</b> CRO approves vendor selection, not CFO — your current pattern. <b>(2)</b> BU heads have <i>C</i> on standards adoption — many orgs put them on <i>I</i>. I left as-is, flagged.
          </Bubble>
          <AskBar style={{ marginTop: 'auto' }} value='Ask a follow-up…'/>
        </div>
        {/* artifact viewer */}
        <div style={{ padding: 10, display: 'flex', flexDirection: 'column', gap: 6, background: '#fffaf5' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <SkPill accent={E_ACCENT}>artifact</SkPill>
            <div style={{ fontSize: 12, fontWeight: 700 }}>Decision rights · incident response</div>
          </div>
          <SkBox seed={1} style={{ padding: 6, fontSize: 9.5, background: '#fff' }}>
            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
              <thead>
                <tr style={{ color: window.sketchInkSoft }}>
                  <th style={{ textAlign: 'left' }}>decision</th>
                  <th>COO</th><th>CRO</th><th>CFO</th><th>CCO</th><th>BU</th>
                </tr>
              </thead>
              <tbody>
                {[
                  ['Declare incident','R','A','I','C','I'],
                  ['Notify regulator','C','A','I','R','I'],
                  ['Engage external','C','A','R','I','I'],
                  ['Vendor selection','C','R','A','I','C'],
                  ['Standards adoption','I','A','I','R','C'],
                ].map((row, i) => (
                  <tr key={i} style={{ borderTop: `1px dashed ${E_INK}40` }}>
                    {row.map((c, j) => (
                      <td key={j} style={{
                        padding: '2px 0', textAlign: j === 0 ? 'left' : 'center',
                        fontWeight: 700,
                        background: c === 'A' ? '#fee4e2' : c === 'R' ? '#dcfae6' : 'transparent',
                      }}>{c}</td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </SkBox>
          <div style={{ display: 'flex', gap: 5 }}>
            <SkBtn>edit cell</SkBtn>
            <SkBtn>add row</SkBtn>
            <div style={{ flex: 1 }}/>
            <SkBtn>reject</SkBtn>
            <SkBtn primary accent={E_INK}>approve · publish</SkBtn>
          </div>
          <div style={{ fontSize: 10, color: window.sketchInkSoft }}>publishing writes to: Operating Model · Governance · Assurance evidence pack</div>
        </div>
      </div>
    </SkFrame>
  );
}

// ---- E5: Drift question → diagnostic ----
function E5_Drift() {
  return (
    <SkFrame title="Diagnostic" subtitle='"where are we drifting?"' accent={E_ACCENT}>
      <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 7, height: '100%' }}>
        <Bubble from="user">Where are we drifting?</Bubble>
        <Bubble from="ai">
          Scanning 14 days. Touching <b>Org Health</b>, <b>Interfaces</b>, <b>Improvements</b>. 3 patterns:
        </Bubble>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          {[
            ['🔴','SLA drift', 'Care plan handoff · Ops ↔ Clinical · 6.2d avg wait', 'severity ↑3'],
            ['🟠','Standards drift', 'NDIS practice · 4 evidence items lapsed', 'severity ↑1'],
            ['🟡','People signal', 'Clinical turnover ↑18%, predicting next-mo capacity drop', 'watching'],
          ].map(([d, t, body, sev], i) => (
            <SkBox key={i} seed={i+1} style={{ padding: 7, fontSize: 11 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ fontSize: 14 }}>{d}</span>
                <span style={{ fontWeight: 700 }}>{t}</span>
                <span style={{ marginLeft: 'auto', fontSize: 9.5, padding: '1px 6px', background: '#fff5d6', border: `1.2px solid ${E_INK}`, borderRadius: 99 }}>{sev}</span>
              </div>
              <div style={{ fontSize: 10.5, color: window.sketchInkSoft, marginTop: 2 }}>{body}</div>
            </SkBox>
          ))}
        </div>
        <Bubble from="ai">
          I drafted 3 improvements for these — one per pattern. Open them?
        </Bubble>
        <div style={{ display: 'flex', gap: 5 }}>
          <SkBtn>show improvements</SkBtn>
          <SkBtn>book a workshop</SkBtn>
          <div style={{ flex: 1 }}/>
          <SkBtn primary accent={E_INK}>investigate #1</SkBtn>
        </div>
      </div>
    </SkFrame>
  );
}

// ---- E6: Inspector — see what AI actually did ----
function E6_Inspector() {
  return (
    <SkFrame title="Inspector" subtitle="trust through transparency" accent={E_ACCENT}>
      <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 7, height: '100%' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <div style={{ fontFamily: '"Caveat", cursive', fontSize: 18, fontWeight: 700 }}>what the AI did · incident gov.</div>
          <SkPill accent="#dcfae6">approved</SkPill>
          <div style={{ flex: 1 }}/>
          <SkBtn>export trail</SkBtn>
        </div>
        {/* timeline */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
          {[
            ['10:02','user','asked: "Design incident response governance"', 'P'],
            ['10:02','orchestrator','dispatched 4 specialist agents','✦'],
            ['10:03','standards','pulled ISO 27035 controls (12)','✓'],
            ['10:04','model','read Subicare model v3.2 (47 capabilities)','◇'],
            ['10:05','governance','drafted decision rights · 12 decisions','⚖'],
            ['10:07','people','found 9 candidate on-call roles','☺'],
            ['10:08','user','approved with 2 edits','P'],
            ['10:08','orchestrator','published to Op. Model + Improvements','✦'],
          ].map(([t, who, what, av], i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 6, padding: '3px 0', borderTop: i ? `1px dashed ${E_INK}30` : 'none' }}>
              <div style={{ width: 36, fontSize: 9.5, fontWeight: 700, color: window.sketchInkSoft }}>{t}</div>
              <div style={{
                width: 18, height: 18, border: `1.2px solid ${E_INK}`, borderRadius: '50%',
                display: 'grid', placeItems: 'center', flex: 'none',
                background: who === 'user' ? '#fff' : E_ACCENT, fontSize: 10,
              }}>{av}</div>
              <div style={{ flex: 1, fontSize: 10.5 }}>
                <b>{who}</b> — {what}
              </div>
            </div>
          ))}
        </div>
        <SkAnnot style={{ color: '#a53e51' }}>
          ↑ every artifact carries a trail. consultants used to be the audit log — now the platform is.
        </SkAnnot>
      </div>
    </SkFrame>
  );
}

// ---- E7: How modules sit underneath ----
function E7_Fit() {
  return (
    <SkFrame title="How it fits" subtitle="conversation over modules" accent={E_ACCENT}>
      <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 8, height: '100%' }}>
        <div style={{ fontFamily: '"Caveat", cursive', fontSize: 18, fontWeight: 700 }}>you talk to one thing · it commands six</div>
        {/* top: chat */}
        <div style={{
          padding: 8,
          border: `1.6px solid ${E_INK}`,
          background: E_ACCENT,
          borderRadius: window.hand(3),
          display: 'flex', alignItems: 'center', gap: 6,
          boxShadow: `2px 2px 0 ${E_INK}`,
        }}>
          <SkAvatar initial="✦" size={22} accent="#fff"/>
          <div style={{ fontWeight: 700, fontSize: 13 }}>Method 8 — single conversation surface</div>
        </div>
        {/* fan-out lines */}
        <div style={{ height: 18, position: 'relative' }}>
          <svg viewBox="0 0 600 18" preserveAspectRatio="none" style={{ width: '100%', height: '100%' }}>
            {[50, 150, 250, 350, 450, 550].map((x, i) => (
              <line key={i} x1={300} y1={0} x2={x} y2={18} stroke={E_INK} strokeWidth="1.2" strokeDasharray="3 2"/>
            ))}
          </svg>
        </div>
        {/* modules */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 4 }}>
          {[
            ['Op. Model','◇','#dbe9ff'],
            ['Health','♡','#fde6cc'],
            ['Assurance','✓','#dcfae6'],
            ['Interfaces','⇄','#fde2ea'],
            ['Improve','↻','#fef0c7'],
            ['Intel','✦','#e8def8'],
          ].map(([n, ic, c], i) => (
            <SkModuleTile key={i} label={n} icon={ic} accent={c} style={{ minWidth: 0 }}/>
          ))}
        </div>
        <div style={{ flex: 1 }}/>
        <SkBox seed={4} style={{ padding: 8, fontSize: 11, lineHeight: 1.3, background: '#fff' }}>
          <b>where this replaces consulting:</b><br/>
          <span style={{ color: window.sketchInkSoft }}>
            · diagnostic interviews → agent reads org · asks 8 questions<br/>
            · slide deck → live artifact with provenance<br/>
            · workshop → multi-agent draft you approve in 30 min<br/>
            · monthly check-in → continuous, on-demand
          </span>
        </SkBox>
        <SkAnnot style={{ color: '#a53e51' }}>
          ↑ the consultant becomes the editor-in-chief, not the author.
        </SkAnnot>
      </div>
    </SkFrame>
  );
}

window.DirectionE = {
  header: {
    letter: 'E',
    title: 'AI front door',
    accent: E_ACCENT,
    summary: 'You don\'t navigate Method 8 — you ask it. A conversation surface dispatches specialist agents that work across the six modules and produce reviewable artifacts. The inspector shows every step. The platform is the consultant.',
    principle: '"Describe the outcome. The platform does the work."',
  },
  frames: [
    { id: 'e1', label: '1 · Sign in', w: 540, h: 360, render: () => <E1_Signin/> },
    { id: 'e2', label: '2 · Conversation home', w: 540, h: 360, render: () => <E2_Home/> },
    { id: 'e3', label: '3 · Agents fan out', w: 540, h: 360, render: () => <E3_Agents/> },
    { id: 'e4', label: '4 · Approve artifact', w: 540, h: 360, render: () => <E4_Artifact/> },
    { id: 'e5', label: '5 · Drift diagnostic', w: 540, h: 360, render: () => <E5_Drift/> },
    { id: 'e6', label: '6 · Inspector', w: 540, h: 360, render: () => <E6_Inspector/> },
    { id: 'e7', label: '7 · How it fits', w: 540, h: 360, render: () => <E7_Fit/> },
  ],
};