// view-line.jsx — ② LINE一次査定デモ
const { useState, useEffect, useRef } = React;

function fmtJP2(n) { return n.toLocaleString("ja-JP"); }

// scripted chat sequence
const SCRIPT = [
  { t: 0,     who: "bot",  kind: "text",
    text: "こんにちは！カードの画像を1枚お送りいただくと、AIが目安金額を査定してお返しします。" },
  { t: 0,     who: "bot",  kind: "text",
    text: "※ ご返信は買取目安額（参考値）です。最終査定は店頭で確定します。" },
  { t: 800,   who: "user", kind: "image" },
  { t: 1400,  who: "bot",  kind: "typing", dur: 1800 },
  { t: 3200,  who: "bot",  kind: "text",
    text: "画像を受け取りました。AIが識別中です。少々お待ちください…" },
  { t: 4400,  who: "bot",  kind: "typing", dur: 2000 },
  { t: 6400,  who: "bot",  kind: "quote" },
  { t: 7000,  who: "bot",  kind: "text",
    text: "店頭にお持ちいただくと、状態確認のうえ最終価格をご提示いたします。\n営業時間：11:00〜21:00 / 土日も営業中です。" },
  { t: 7600,  who: "bot",  kind: "buttons" },
];

// timeline log for the right panel
const TIMELINE = [
  { time: "STEP 1",  text: "ユーザーがカード画像を送信" },
  { time: "STEP 2",  text: "LINE Messaging API → webhook 受信" },
  { time: "STEP 3",  text: "コアAIエンジンに転送（ID: tcg-id-v0.3.2）" },
  { time: "STEP 4",  text: "型番特定 → 相場3社スクレイプ実行" },
  { time: "STEP 5",  text: <><span className="em">¥3,200 中央値</span> を生成・テンプレ整形</> },
  { time: "STEP 6",  text: "FlexMessage を return しユーザーに返信" },
];

function Chat({ frame }) {
  const ref = useRef(null);
  useEffect(() => {
    if (ref.current) ref.current.scrollTop = ref.current.scrollHeight;
  }, [frame]);

  // figure out what to show based on current frame index
  const visible = SCRIPT.slice(0, frame);

  return (
    <div className="chat" ref={ref}>
      <div className="chat-date">2026.05.13 月 · 14:32</div>
      {visible.map((m, i) => (
        <React.Fragment key={i}>
          {m.kind === "text" && (
            <div className={`msg ${m.who}`}>
              <span className="time">14:{32 + Math.floor(i/2)}</span>
              <div className="bub" style={{whiteSpace: "pre-line"}}>{m.text}</div>
            </div>
          )}
          {m.kind === "image" && (
            <div className="msg user">
              <span className="time">14:32</span>
              <div className="bub has-img">
                <div className="img-card">
                  <span className="img-tag">IMG_4821.jpg</span>
                </div>
              </div>
            </div>
          )}
          {m.kind === "typing" && i === visible.length - 1 && (
            <div className="msg bot">
              <div className="bub">
                <span className="typing">
                  <span></span><span></span><span></span>
                </span>
              </div>
            </div>
          )}
          {m.kind === "quote" && (
            <div className="msg bot">
              <span className="time">14:33</span>
              <div className="bub has-table">
                <div className="qt-title">🎴 AI査定結果（目安・参考）</div>
                <div className="qt-row">
                  <span>カード名</span>
                  <span style={{fontWeight: 600}}>蒼穹の終焉竜</span>
                </div>
                <div className="qt-row">
                  <span>型番 / レアリティ</span>
                  <span className="num">BLU-EWD-001 / SR</span>
                </div>
                <div className="qt-row">
                  <span>相場 中央値</span>
                  <span className="num">¥2,700</span>
                </div>
                <div className="qt-row">
                  <span>買取目安額</span>
                  <span className="qt-amt">¥1,800 〜 ¥2,200</span>
                </div>
                <div className="qt-note">
                  ※ こちらは <b>目安額（参考）</b> です。最終査定は店頭で実物を確認のうえ確定いたします。状態（傷・色褪せ等）により変動する場合があります。
                </div>
              </div>
            </div>
          )}
          {m.kind === "buttons" && (
            <div className="msg bot">
              <div className="bub" style={{padding: 0, background: "transparent", boxShadow: "none"}}>
                <div style={{display: "flex", flexDirection: "column", gap: 6}}>
                  <button className="btn btn-primary" style={{borderRadius: 16, padding: "8px 14px", fontSize: 12}}>📍 店舗の地図を見る</button>
                  <button className="btn" style={{borderRadius: 16, padding: "8px 14px", fontSize: 12, background: "#fff"}}>📅 来店予約をする</button>
                  <button className="btn" style={{borderRadius: 16, padding: "8px 14px", fontSize: 12, background: "#fff"}}>📸 別のカードを送る</button>
                </div>
              </div>
            </div>
          )}
        </React.Fragment>
      ))}
      {/* extra spacer */}
      <div style={{height: 12}} />
    </div>
  );
}

function LineView() {
  // play through the script frame by frame
  const [frame, setFrame] = useState(0);
  const [playing, setPlaying] = useState(false);

  useEffect(() => {
    if (!playing) return;
    if (frame >= SCRIPT.length) { setPlaying(false); return; }
    const next = SCRIPT[frame];
    const delay = frame === 0 ? 400 : (next.t - (SCRIPT[frame-1]?.t ?? 0)) || 400;
    const tid = setTimeout(() => setFrame(f => f + 1), Math.max(300, delay));
    return () => clearTimeout(tid);
  }, [playing, frame]);

  const play = () => {
    setFrame(0);
    setTimeout(() => setPlaying(true), 50);
  };
  const skip = () => { setPlaying(false); setFrame(SCRIPT.length); };

  return (
    <div className="view" data-screen-label="02 LINE">
      <div className="view-header">
        <div>
          <div className="crumb">② 周辺 / Figmaクリッカブル相当（実機接続可）</div>
          <h1>LINE一次査定 自動返信</h1>
          <div className="sub">
            画像送信 → AI識別 → 目安金額の返信 までを自動化。「目安額（参考）・最終査定は店頭で確定」の文言を必ず同梱し、誤期待を防ぐ。
          </div>
        </div>
        <div className="header-side">
          <button className="btn" onClick={skip}>⇥ 結果まで送る</button>
          <button className="btn btn-accent" onClick={play}>
            {playing ? "▶ 再生中…" : "▶ デモを再生"}
          </button>
        </div>
      </div>

      <div className="line-stage">
        {/* phone */}
        <div>
          <div className="phone">
            <div className="phone-screen">
              <div className="phone-notch" />
              <div className="line-header">
                <div className="avatar">店</div>
                <div>
                  <div className="acct-name">ひむかアスレチックス 宮崎本店</div>
                  <div className="acct-meta">LINE公式アカウント · 認証済</div>
                </div>
                <div className="h-icons">
                  <span>📞</span><span>≡</span>
                </div>
              </div>
              <Chat frame={frame} />
              <div className="line-input">
                <span style={{color: "var(--ink-4)", fontSize: 18}}>＋</span>
                <div className="li-pill">メッセージを入力</div>
                <span style={{color: "var(--ink-4)", fontSize: 18}}>🎤</span>
              </div>
            </div>
          </div>
          <div style={{textAlign: "center", marginTop: 10, fontSize: 11, color: "var(--ink-4)"}}>
            iPhone 14 / LINE 13.x · プレビュー
          </div>
        </div>

        {/* side */}
        <div className="line-side">
          <div className="card">
            <div className="card-head">
              <span className="h">処理タイムライン</span>
              <span className="chip success">自動</span>
            </div>
            <div className="card-pad">
              <ul className="timeline">
                {TIMELINE.map((t, i) => (
                  <li key={i} className="tl-row">
                    <span className="dot" />
                    <div className="tl-time">{t.time}</div>
                    <div className="tl-text">{t.text}</div>
                  </li>
                ))}
              </ul>
            </div>
          </div>

          <div className="card">
            <div className="card-head"><span className="h">デモ運用メモ</span></div>
            <div className="card-pad" style={{fontSize: 12, color: "var(--ink-2)", lineHeight: 1.65}}>
              <p style={{margin: "0 0 10px"}}>
                <b>本番方針：</b> AIエンジンは①コアと同一。LINE Webhook → 内部APIに転送し、店頭Web版と完全同一の結果を返す。
              </p>
              <p style={{margin: "0 0 10px"}}>
                <b>誤期待対策：</b> 必ず「目安額（参考）」「最終査定は店頭で確定」をテンプレ文末に固定。レアリティ判定不能時は範囲提示。
              </p>
              <div className="cross-event">
                <span>↻</span>
                <div><span className="ce-em">price.confirmed</span> イベント受信時、過去送付ユーザーへ「店頭価格更新のお知らせ」を任意配信</div>
              </div>
            </div>
          </div>

          <div className="card">
            <div className="card-head"><span className="h">受信メトリクス（直近7日 / モック）</span></div>
            <div className="card-pad">
              <dl className="kv-list">
                <dt>受信画像数</dt><dd>1,284 件</dd>
                <dt>識別成功率</dt><dd>92.1 %</dd>
                <dt>来店率（CV）</dt><dd>14.3 %</dd>
              </dl>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.LineView = LineView;