/* Original UI mockups — chat threads, briefs, Q&A, alerts. Not branded. */

const { BrandMark } = window.Illus;

function CitationChip({ icon, label }) {
  return (
    <span className="chip">
      <svg width="11" height="11" viewBox="0 0 12 12" aria-hidden="true">
        {icon === 'data' && <g fill="none" stroke="#0F2A3F" strokeWidth="1.2"><ellipse cx="6" cy="3" rx="4" ry="1.5"/><path d="M2 3v6c0 .8 1.8 1.5 4 1.5s4-.7 4-1.5V3"/><path d="M2 6c0 .8 1.8 1.5 4 1.5s4-.7 4-1.5"/></g>}
        {icon === 'book' && <g fill="none" stroke="#0F2A3F" strokeWidth="1.2"><path d="M2 2v8h8V2H2z"/><path d="M2 2c1.5 0 3 .5 4 1.5C7 2.5 8.5 2 10 2"/><path d="M6 3.5V10"/></g>}
        {icon === 'clock' && <g fill="none" stroke="#0F2A3F" strokeWidth="1.2"><circle cx="6" cy="6" r="4.5"/><path d="M6 3.5V6l1.8 1.2"/></g>}
        {icon === 'tag' && <g fill="none" stroke="#0F2A3F" strokeWidth="1.2"><path d="M1.5 5.5l4-4H10v4.5l-4 4-4.5-4.5z"/><circle cx="7.5" cy="4" r=".8" fill="#0F2A3F"/></g>}
      </svg>
      {label}
    </span>
  );
}

/* Hero ops-alerts chat thread */
function HeroChat() {
  return (
    <div className="chat">
      <div className="chat-head">
        <div className="left">
          <span className="hash">#</span>
          <span>ops-alerts</span>
          <span style={{ color: 'var(--muted)', fontWeight: 400, fontSize: 12 }}>· 14 members</span>
        </div>
        <div className="right">
          <span>Tue 4:42pm</span>
        </div>
      </div>
      <div className="chat-body">
        <div className="chat-msg">
          <div className="chat-avatar">M</div>
          <div>
            <div className="chat-meta">
              <span className="chat-name">Mise</span>
              <span className="chat-app">APP</span>
              <span className="chat-time">4:42 PM</span>
            </div>
            <div className="chat-text">
              <div className="sev"><span className="pulse"></span> Compliance · Medium severity</div>
              <strong>Store #14</strong> missed <strong>3 of 8</strong> cooler temp checks today. Per <strong>Brand Standards §4.2.3</strong>, GM should complete root-cause analysis within 24 hours and escalate if temps exceeded 41°F. Last similar incident: <strong>8 weeks ago</strong>.
              <div className="chat-citations">
                <CitationChip icon="data" label="food_safety_log_entries" />
                <CitationChip icon="book" label="Brand Manual §4.2.3" />
              </div>
              <div className="chat-actions">
                <button className="chat-action primary">Acknowledge</button>
                <button className="chat-action">Assign GM</button>
                <button className="chat-action">View 8-week history</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* Daily Brief mockup */
function BriefMock() {
  return (
    <div className="mock">
      <div className="brief-head">
        <div>
          <div className="t">Mise — your morning brief</div>
          <div className="d" style={{ marginTop: 4 }}>Tuesday, April 28 · 7 stores need attention</div>
        </div>
        <div className="d">↓ digest</div>
      </div>
      <div className="brief-body">
        <div className="brief-item">
          <div className="brief-num">01</div>
          <div>
            <div className="brief-line">
              <span className="tag tag-red">URGENT</span>
              <strong>Store #07</strong> labor ran 4.2pts over forecast Sun–Mon. Top driver: 14 unplanned overtime hours on closing shifts.
            </div>
            <div className="brief-cites">
              <span className="mini-chip">📊 toast.shifts</span>
              <span className="mini-chip">📊 7shifts.timeclock</span>
              <span className="mini-chip">📘 Playbook §2.1</span>
            </div>
          </div>
        </div>
        <div className="brief-item">
          <div className="brief-num">02</div>
          <div>
            <div className="brief-line">
              <span className="tag tag-amber">REVIEW</span>
              <strong>Stores #14, #23</strong> missed temp logs before 9am open. Pattern across 3 weekdays this month.
            </div>
            <div className="brief-cites">
              <span className="mini-chip">📊 jolt.checklists</span>
              <span className="mini-chip">📘 §4.2.3</span>
            </div>
          </div>
        </div>
        <div className="brief-item">
          <div className="brief-num">03</div>
          <div>
            <div className="brief-line">
              <span className="tag tag-amber">REVIEW</span>
              <strong>Store #31</strong> voids up 2.3× vs trailing 30-day. Likely training gap on new POS flow.
            </div>
            <div className="brief-cites">
              <span className="mini-chip">📊 toast.voids</span>
            </div>
          </div>
        </div>
        <div className="brief-item">
          <div className="brief-num">04</div>
          <div>
            <div className="brief-line">
              <span className="tag tag-green">WIN</span>
              <strong>Store #19</strong> hit 100% checklist completion 14 days running — first time this fiscal year.
            </div>
            <div className="brief-cites">
              <span className="mini-chip">📊 jolt.checklists</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* Q&A chat with table */
function QAMock() {
  return (
    <div className="mock">
      <div className="qa-head">
        <div className="dots"><span/><span/><span/></div>
        <div className="url">mise.to / ask</div>
      </div>
      <div className="qa-body">
        <div className="qa-q">Which stores are underperforming on labor this week?</div>
        <div className="qa-a">
          <div className="av">M</div>
          <div>
            <div className="text">
              4 stores ran above labor target Mon–Wed. <strong>#07</strong> is the biggest outlier (+4.2 pts), driven by overtime on close. <strong>#14</strong> and <strong>#23</strong> are over by under-scheduling lunch and adding hours mid-shift.
            </div>
            <div className="qa-table">
              <div className="row head">
                <span>STORE</span><span>DRIVER</span><span>ACTUAL</span><span>Δ</span>
              </div>
              <div className="row">
                <span>#07</span>
                <span style={{ fontFamily: 'Inter', fontSize: 12, color: 'var(--ink)' }}>OT on close</span>
                <span><div className="qa-bar"><i style={{ width: '92%' }}/></div></span>
                <span style={{ color: 'var(--red)' }}>+4.2</span>
              </div>
              <div className="row">
                <span>#23</span>
                <span style={{ fontFamily: 'Inter', fontSize: 12, color: 'var(--ink)' }}>under-scheduled lunch</span>
                <span><div className="qa-bar"><i style={{ width: '68%' }}/></div></span>
                <span style={{ color: 'var(--amber)' }}>+2.1</span>
              </div>
              <div className="row">
                <span>#14</span>
                <span style={{ fontFamily: 'Inter', fontSize: 12, color: 'var(--ink)' }}>mid-shift adds</span>
                <span><div className="qa-bar"><i style={{ width: '54%' }}/></div></span>
                <span style={{ color: 'var(--amber)' }}>+1.6</span>
              </div>
              <div className="row">
                <span>#31</span>
                <span style={{ fontFamily: 'Inter', fontSize: 12, color: 'var(--ink)' }}>training overlap</span>
                <span><div className="qa-bar"><i style={{ width: '40%' }}/></div></span>
                <span style={{ color: 'var(--amber)' }}>+0.9</span>
              </div>
            </div>
            <div className="qa-cites">
              <CitationChip icon="data" label="toast.sales_by_hour" />
              <CitationChip icon="data" label="7shifts.timeclock" />
              <CitationChip icon="clock" label="last 7 days" />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* Brand Playbook citation mockup */
function CitationMock() {
  return (
    <div className="mock cite-card">
      <div className="cite-doc">
        <div className="pageno">BRAND MANUAL · p.42</div>
        <div style={{ fontFamily: "'Source Serif 4', serif", fontSize: 11, color: 'var(--ink)', marginBottom: 6, fontWeight: 500 }}>§4.2.3 Cooler Temperature Logging</div>
        <div className="ph1"/><div className="ph2"/>
        <div className="high">Walk-in cooler temperatures must be logged at 8 set intervals across operating hours…</div>
        <div className="ph1"/><div className="ph2"/>
        <div className="ph1"/>
      </div>
      <div className="cite-msg">
        <div className="severity">● Compliance alert · medium</div>
        <div className="title">Store #14 — cooler temp log incomplete</div>
        <div className="body">3 of 8 scheduled checks missed today. Per cited section, GM owns root-cause within 24h.</div>
        <div className="row">
          <CitationChip icon="book" label="§4.2.3 (jump to)" />
          <CitationChip icon="data" label="food_safety_log_entries" />
        </div>
      </div>
    </div>
  );
}

/* Sequential alerts mockup */
function AlertsMock() {
  return (
    <div className="mock">
      <div className="chat-head">
        <div className="left"><span className="hash">#</span><span>ops-alerts</span></div>
        <div className="right"><span>Thu evening</span></div>
      </div>
      <div className="alerts">
        <div className="alert-row green">
          <div className="alert-time">5:18 PM</div>
          <div>
            <div className="alert-title"><strong>Store #19</strong> — dinner rush staffed correctly. No action needed.</div>
            <div className="alert-meta"><CitationChip icon="data" label="7shifts.timeclock" /></div>
          </div>
        </div>
        <div className="alert-row amber">
          <div className="alert-time">7:42 PM</div>
          <div>
            <div className="alert-title"><strong>Store #07</strong> — sales pace 18% under forecast. Recommend cutting 1 line cook on close.</div>
            <div className="alert-meta">
              <CitationChip icon="data" label="toast.sales_by_hour" />
              <CitationChip icon="book" label="Playbook §2.1" />
            </div>
          </div>
        </div>
        <div className="alert-row red">
          <div className="alert-time">9:11 PM</div>
          <div>
            <div className="alert-title"><strong>Store #23</strong> — closing checklist 0% complete with 19 min until close. GM not on premises per timeclock.</div>
            <div className="alert-meta">
              <CitationChip icon="data" label="jolt.checklists" />
              <CitationChip icon="tag" label="auto-escalate to Regional" />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.Mocks = { HeroChat, BriefMock, QAMock, CitationMock, AlertsMock, CitationChip };