// ============================================================
// iPhone + LINE chat frame
// ============================================================

window.ChatFrame = function ChatFrame({ userPrompt, bubbles, botName = 'finfo AI 助手', onAction }) {
  // bubbles: array of {kind: 'flex'|'text', node, text}
  return (
    <div className="iphone">
      <div className="iphone__screen">
        <div className="iphone__notch" />
        <div className="line-status">
          <span>9:41</span>
          <div className="line-status__right">
            <Signal /><Wifi /><Battery />
          </div>
        </div>
        <div className="line-header">
          <div className="line-header__back">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
              <path d="M15 18l-6-6 6-6"/>
            </svg>
          </div>
          <div className="line-header__avatar">F</div>
          <div className="line-header__name">
            {botName}
            <div className="line-header__name-sub">Bot · 上次回應 剛剛</div>
          </div>
          <div className="line-header__actions">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M15.05 5A5 5 0 0 1 19 8.95M15.05 1A9 9 0 0 1 23 8.94m-1 7.98v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/>
            </svg>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
            </svg>
          </div>
        </div>
        <div className="line-thread">
          {userPrompt && (
            <div className="line-msg line-msg--user">
              <span className="line-time">9:41</span>
              <div className="line-bubble--user">{userPrompt}</div>
            </div>
          )}
          {bubbles.map((b, i) => (
            <BotMessage key={i} {...b} onAction={onAction} />
          ))}
        </div>
        <div className="line-input">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
          </svg>
          <div className="line-input__field">傳送訊息</div>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M23 12s-4-7-11-7S1 12 1 12s4 7 11 7 11-7 11-7z"/><circle cx="12" cy="12" r="3"/>
          </svg>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <circle cx="12" cy="12" r="10" /><path d="M9 9h.01M15 9h.01M8 15s1.5 2 4 2 4-2 4-2"/>
          </svg>
        </div>
      </div>
    </div>
  );
};

function BotMessage({ kind, text, node, label, onAction }) {
  const isCarousel = kind === 'flex' && node && node.type === 'carousel';
  return (
    <div className="line-msg line-msg--bot">
      <div className="line-msg__avatar">F</div>
      <div className="line-msg__col" style={isCarousel ? { width: '100%', minWidth: 0, maxWidth: 'unset' } : undefined}>
        <div className="line-msg__name">{label || 'finfo'}</div>
        {kind === 'text' && (
          <div style={{
            background: '#ffffff',
            borderRadius: '4px 18px 18px 18px',
            padding: '9px 13px',
            fontSize: 14,
            color: '#111',
            maxWidth: 280,
          }}>{text}</div>
        )}
        {kind === 'flex' && (
          <window.FlexBubble node={node} onAction={onAction} />
        )}
      </div>
      {!isCarousel && <span className="line-time">9:41</span>}
    </div>
  );
}

function Signal() {
  return (
    <svg width="18" height="12" viewBox="0 0 18 12" fill="currentColor">
      <rect x="0" y="8" width="3" height="4" rx="1"/>
      <rect x="5" y="5" width="3" height="7" rx="1"/>
      <rect x="10" y="2" width="3" height="10" rx="1"/>
      <rect x="15" y="0" width="3" height="12" rx="1"/>
    </svg>
  );
}
function Wifi() {
  return (
    <svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor">
      <path d="M8 11c.5 0 1-.4 1-1s-.5-1-1-1-1 .4-1 1 .5 1 1 1zm-3.5-3.5c.6-.6 2-.6 2.4-.5l.6-.6c-1.4-1-3.4-1-4 .5l1 .6zm7-.5l1-1c-.7-1.5-3.4-1.5-5 0l.6.6c.4-.1 1.8-.1 2.4.5.4-.1.6-.1 1-.1zM2 4.5l1 1c1.5-1.5 5-2 7 .5l1-1c-3-3-7.5-2.5-9-.5z"/>
    </svg>
  );
}
function Battery() {
  return (
    <svg width="26" height="12" viewBox="0 0 26 12" fill="none">
      <rect x="0.5" y="0.5" width="22" height="11" rx="2.5" stroke="currentColor"/>
      <rect x="2" y="2" width="19" height="8" rx="1" fill="currentColor"/>
      <rect x="23" y="4" width="2" height="4" rx="0.6" fill="currentColor"/>
    </svg>
  );
}

window.BareStage = function BareStage({ userPrompt, node, onAction }) {
  const isCarousel = node && node.type === 'carousel';
  return (
    <div className="bare-stage">
      {userPrompt && <div className="bare-stage__prompt">user · {userPrompt}</div>}
      <div className="bare-bubble-wrap" style={{ maxWidth: '100%', overflowX: isCarousel ? 'auto' : 'visible', padding: 4 }}>
        <window.FlexBubble node={node} onAction={onAction} />
      </div>
    </div>
  );
};