// LINE chat mock component
const { useState, useEffect, useRef } = React;

function LineChatMock({ scenario, autoPlay = true }) {
  const messages = scenario.chat || [];
  const [visible, setVisible] = useState(autoPlay ? 0 : messages.length);

  useEffect(() => {
    if (!autoPlay) {
      setVisible(messages.length);
      return;
    }
    setVisible(0);
    let i = 0;
    let timer;
    const tick = () => {
      i += 1;
      setVisible(i);
      if (i < messages.length) {
        timer = setTimeout(tick, 900);
      }
    };
    timer = setTimeout(tick, 400);
    return () => clearTimeout(timer);
  }, [scenario.id, autoPlay, messages.length]);

  if (scenario.richmenu) {
    return <LineRichMenuMock shopName="田中モータース" />;
  }

  return (
    <div className="line-phone">
      <div className="line-phone__notch"></div>
      <div className="line-phone__header">
        <div className="line-phone__back">‹</div>
        <div className="line-phone__title">
          <div className="line-phone__shop">田中モータース</div>
          <div className="line-phone__status">オンライン</div>
        </div>
        <div className="line-phone__menu">≡</div>
      </div>
      <div className="line-phone__body">
        <div className="line-phone__date">今日</div>
        {messages.slice(0, visible).map((m, i) => (
          <ChatBubble key={i} msg={m} />
        ))}
        {visible < messages.length && (
          <div className="line-typing"><span></span><span></span><span></span></div>
        )}
      </div>
      <div className="line-phone__input">
        <div className="line-phone__inputbox">メッセージを入力</div>
        <div className="line-phone__send">↑</div>
      </div>
    </div>
  );
}

function ChatBubble({ msg }) {
  const isShop = msg.from === 'shop';
  const cls = isShop ? 'shop' : 'user';

  if (msg.type === 'calendar') {
    return (
      <div className={`bubble-row ${cls}`}>
        {isShop && <div className="bubble-avatar">田</div>}
        <div className="bubble bubble--card">
          <div className="bubble-cal-title">空いている日時</div>
          <div className="bubble-cal-grid">
            {['11/14 金', '11/15 土', '11/16 日', '11/17 月'].map((d, i) => (
              <div key={i} className={`bubble-cal-day ${i === 1 ? 'on' : ''}`}>
                <div className="bubble-cal-d">{d}</div>
                <div className="bubble-cal-times">
                  {['10:00', '13:00', '15:00'].map((t, ti) => (
                    <div key={ti} className={`bubble-cal-t ${i === 1 && ti === 0 ? 'sel' : ''}`}>{t}</div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  if (msg.type === 'card' && msg.card) {
    return (
      <div className={`bubble-row ${cls}`}>
        {isShop && <div className="bubble-avatar">田</div>}
        <div className="bubble bubble--card bubble--carcard">
          <div className="carcard-img">
            <svg viewBox="0 0 200 100" width="100%" height="100%" preserveAspectRatio="none">
              <defs>
                <pattern id="stripe" patternUnits="userSpaceOnUse" width="8" height="8" patternTransform="rotate(45)">
                  <line x1="0" y1="0" x2="0" y2="8" stroke="#d4cec4" strokeWidth="3" />
                </pattern>
              </defs>
              <rect width="200" height="100" fill="url(#stripe)" />
              <text x="100" y="55" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="11" fill="#7a6f60">[車両写真]</text>
            </svg>
          </div>
          <div className="carcard-body">
            <div className="carcard-tag">{msg.card.tag}</div>
            <div className="carcard-title">{msg.card.title}</div>
            <div className="carcard-sub">{msg.card.sub}</div>
            <div className="carcard-price">{msg.card.price}</div>
          </div>
        </div>
      </div>
    );
  }

  if (msg.type === 'image') {
    return (
      <div className={`bubble-row ${cls}`}>
        <div className="bubble bubble--img">
          <svg viewBox="0 0 160 110" width="100%" height="100%" preserveAspectRatio="none">
            <defs>
              <pattern id="stripe2" patternUnits="userSpaceOnUse" width="8" height="8" patternTransform="rotate(45)">
                <line x1="0" y1="0" x2="0" y2="8" stroke="#bcb4a7" strokeWidth="3" />
              </pattern>
            </defs>
            <rect width="160" height="110" fill="url(#stripe2)" />
            <text x="80" y="60" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="10" fill="#6b6051">[エンジン周りの写真]</text>
          </svg>
        </div>
      </div>
    );
  }

  return (
    <div className={`bubble-row ${cls}`}>
      {isShop && <div className="bubble-avatar">田</div>}
      <div className="bubble-stack">
        <div className={`bubble bubble--${cls}`}>
          {msg.text.split('\n').map((line, li) => (
            <div key={li}>{line}</div>
          ))}
          {msg.buttons && (
            <div className="bubble-btns">
              {msg.buttons.map((b, bi) => (
                <div key={bi} className={`bubble-btn ${bi === 0 ? 'primary' : ''}`}>{b}</div>
              ))}
            </div>
          )}
        </div>
        {msg.time && <div className="bubble-time">{msg.time}</div>}
      </div>
    </div>
  );
}

function LineRichMenuMock({ shopName }) {
  const menuItems = [
    { label: 'ご予約', icon: '📅' },
    { label: '料金表', icon: '💴' },
    { label: '相談する', icon: '💬' },
    { label: '在庫を見る', icon: '🔑' },
    { label: 'お店情報', icon: '🏪' },
    { label: 'クーポン', icon: '🎫' },
  ];
  return (
    <div className="line-phone">
      <div className="line-phone__notch"></div>
      <div className="line-phone__header">
        <div className="line-phone__back">‹</div>
        <div className="line-phone__title">
          <div className="line-phone__shop">{shopName}</div>
          <div className="line-phone__status">オンライン</div>
        </div>
        <div className="line-phone__menu">≡</div>
      </div>
      <div className="line-phone__body line-phone__body--rich">
        <div className="line-phone__date">今日</div>
        <div className="bubble-row shop">
          <div className="bubble-avatar">田</div>
          <div className="bubble-stack">
            <div className="bubble bubble--shop">
              <div>こんにちは、田中モータースです🏪</div>
              <div>下のメニューからお気軽にどうぞ！</div>
            </div>
          </div>
        </div>
      </div>
      <div className="line-richmenu">
        {menuItems.map((m, i) => (
          <div key={i} className="line-richmenu__item">
            <div className="line-richmenu__icon">{m.icon}</div>
            <div className="line-richmenu__label">{m.label}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.LineChatMock = LineChatMock;