/* procura/slack.jsx — the interactive "Slackで完結" thread (the centrepiece).
   Reveals rows progressively based on `step` (1..5). Approve button is live. */

const SlackIcons = {
  check: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></svg>,
  doc: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M9 13h6M9 17h4"/></svg>,
  send: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7z"/></svg>,
};

function Row({ show, children }) {
  return <div className={"reveal" + (show ? " in" : "")}>{children}</div>;
}

function BotHead({ time }) {
  return (
    <div className="who">
      <span className="name">Procura</span>
      <span className="app">App</span>
      <span className="time">{time}</span>
    </div>
  );
}

function SlackFlow({ step, approved, onApprove }) {
  // step: 1 request, 2 spec, 3 compare, 4 approve, 5 sent
  const vendors = [
    { name: "テックサプライ", price: "¥1,140,000", lead: "3営業日", stock: "○", sw: "var(--accent)", best: true },
    { name: "グローバル機材", price: "¥1,188,000", lead: "5営業日", stock: "○", sw: "#86C2D6", best: false },
    { name: "オフィスD", price: "¥1,205,000", lead: "即日", stock: "△", sw: "#B3B3B3", best: false },
  ];
  return (
    <div className="slackcard" role="group" aria-label="Slack上のProcuraの動作デモ">
      <div className="slack-titlebar">
        <span className="slack-dot" style={{ background: "#ff5f57" }}></span>
        <span className="slack-dot" style={{ background: "#febc2e" }}></span>
        <span className="slack-dot" style={{ background: "#28c840" }}></span>
        <span className="t">調達 — Slack</span>
      </div>
      <div className="slack-chan">
        <span className="hash">#</span>調達リクエスト
        <span className="members">12</span>
      </div>
      <div className="slack-body">
        {/* 1. request */}
        <Row show={step >= 1}>
          <div className="msg">
            <div className="ava user">田</div>
            <div>
              <div className="who"><span className="name">田中 総務</span><span className="time">10:02</span></div>
              <div className="text">
                <span className="mention">@Procura</span> ノートPCを<b>10台</b>、来週中に。予算は1台<b>12万円以内</b>でお願いします。
              </div>
            </div>
          </div>
        </Row>

        {/* 2. spec confirmed */}
        <Row show={step >= 2}>
          <div className="msg">
            <div className="ava bot">P</div>
            <div style={{ flex: 1 }}>
              <BotHead time="10:02" />
              <div className="text" style={{ marginBottom: 6 }}>
                承知しました。要件を確定します。
              </div>
              <div className="bot-status">
                <span className="check">{SlackIcons.check}</span>
                <span><b>仕様確定</b> ・ ノートPC / 16GB / SSD 512GB / 10台 ・ 納期 7日以内</span>
              </div>
            </div>
          </div>
        </Row>

        {/* 3. comparison */}
        <Row show={step >= 3}>
          <div className="msg">
            <div className="ava bot">P</div>
            <div style={{ flex: 1 }}>
              <BotHead time="10:03" />
              <div className="bot-status" style={{ marginBottom: 6 }}>
                {step === 3
                  ? <><span className="spinner"></span><span>3社の見積を比較しています…</span></>
                  : <><span className="check">{SlackIcons.check}</span><span><b>3社を自動比較</b>しました</span></>}
              </div>
              <div className="cmp">
                <div className="cmp-head">
                  <div>仕入先</div><div>見積</div><div>納期</div><div>在庫</div>
                </div>
                {vendors.map((v) => (
                  <div className={"cmp-row" + (v.best ? " best" : "")} key={v.name}>
                    <div className="co"><span className="swatch" style={{ background: v.sw }}></span>{v.name}</div>
                    <div className="price">{v.price}</div>
                    <div>{v.lead}</div>
                    <div>{v.best ? <span className="cmp-badge">推奨</span> : v.stock}</div>
                  </div>
                ))}
                <div className="cmp-foot">最安かつ在庫確保。<b style={{ color: "var(--accent-ink)" }}>テックサプライ</b>を推奨します。— 総額 ¥1,140,000</div>
              </div>
            </div>
          </div>
        </Row>

        {/* 4. approve */}
        <Row show={step >= 4}>
          <div className="msg">
            <div className="ava bot">P</div>
            <div style={{ flex: 1 }}>
              <BotHead time="10:03" />
              <div className="approve">
                <span className="q">テックサプライへ発注しますか？</span>
                <span className="btns">
                  {approved
                    ? <button className="sbtn approved" disabled>承認済み ✓</button>
                    : <>
                        <button className="sbtn" type="button">保留</button>
                        <button className="sbtn primary" type="button" onClick={onApprove}>承認する</button>
                      </>}
                </span>
              </div>
            </div>
          </div>
        </Row>

        {/* 5. sent */}
        <Row show={step >= 5}>
          <div className="msg">
            <div className="ava bot">P</div>
            <div style={{ flex: 1 }}>
              <BotHead time="10:04" />
              <div className="text" style={{ marginBottom: 6 }}>承認を確認しました。発注書を送付します。</div>
              <div className="docatt">
                <span className="ic">{SlackIcons.doc}</span>
                <span className="meta">
                  <span className="nm">発注書_テックサプライ_0611.pdf</span>
                  <span className="sz">PDF ・ 142 KB ・ 先方へ自動送付</span>
                </span>
                <span className="sent">{SlackIcons.send}送信済み</span>
              </div>
              <div className="bot-status" style={{ marginTop: 8 }}>
                <span className="check">{SlackIcons.check}</span>
                <span><b>発注完結</b> ・ 事務作業はゼロ ・ 課金 ¥100</span>
              </div>
            </div>
          </div>
        </Row>
      </div>
    </div>
  );
}

window.SlackFlow = SlackFlow;