// Generic messaging-app mockup component.
// Evokes the feel of chatting with the LINE秘書 service WITHOUT replicating
// LINE's branded UI verbatim: different bubble shape (softer rounded rect,
// not LINE's exact tail), our own header chrome, our own input bar, brand
// green tuned slightly different from LINE's exact #06C755.

const chatStyles = {
  frame: {
    width: '100%',
    maxWidth: 320,
    margin: '0 auto',
    background: '#eef0f4',
    borderRadius: 32,
    border: '8px solid #1a1f2c',
    boxShadow: '0 30px 60px rgba(15,21,32,.20), 0 6px 16px rgba(15,21,32,.08)',
    overflow: 'hidden',
    fontFamily: 'var(--font-jp)',
    position: 'relative',
  },
  notch: {
    position: 'absolute', top: 0, left: '50%',
    transform: 'translateX(-50%)',
    width: 88, height: 18,
    background: '#1a1f2c',
    borderBottomLeftRadius: 12, borderBottomRightRadius: 12,
    zIndex: 2,
  },
  header: {
    background: '#fff',
    padding: '22px 14px 10px',
    display: 'flex', alignItems: 'center', gap: 10,
    borderBottom: '1px solid var(--c-line-2)',
  },
  avatar: {
    width: 38, height: 38, borderRadius: 12,
    background: `url('${(typeof window !== 'undefined' && window.__resources && window.__resources.brandIcon) || 'assets/brand-icon.png'}') center/cover no-repeat`,
    color: 'transparent',
    fontSize: 0,
    flex: '0 0 auto',
  },
  hName: { fontWeight: 700, fontSize: 14, lineHeight: 1.2 },
  hStatus: { fontSize: 11, color: 'var(--c-ink-3)' },
  body: {
    background: 'linear-gradient(180deg, #d9e2ea 0%, #cfd8e1 100%)',
    padding: '14px 12px 16px',
    display: 'flex', flexDirection: 'column', gap: 10,
    minHeight: 380,
  },
  dateChip: {
    alignSelf: 'center',
    fontSize: 11,
    color: '#fff',
    background: 'rgba(35,42,58,.45)',
    padding: '3px 10px',
    borderRadius: 999,
  },
  // User (right) bubble — brand green
  bubbleR: {
    alignSelf: 'flex-end',
    maxWidth: '78%',
    background: 'var(--c-green)',
    color: '#fff',
    padding: '8px 12px',
    borderRadius: '16px 16px 4px 16px',
    fontSize: 13,
    lineHeight: 1.5,
    boxShadow: '0 1px 1px rgba(0,0,0,.04)',
  },
  // Bot (left) bubble — white
  bubbleL: {
    alignSelf: 'flex-start',
    maxWidth: '82%',
    background: '#fff',
    color: 'var(--c-ink)',
    padding: '10px 12px',
    borderRadius: '4px 16px 16px 16px',
    fontSize: 13,
    lineHeight: 1.55,
    boxShadow: '0 1px 1px rgba(0,0,0,.04)',
  },
  // Image / receipt thumb shown as a user message
  imgMsg: {
    alignSelf: 'flex-end',
    maxWidth: '60%',
    borderRadius: 14,
    overflow: 'hidden',
    background: '#fff',
    boxShadow: '0 1px 2px rgba(0,0,0,.08)',
    border: '1px solid rgba(0,0,0,.04)',
  },
  receiptThumb: {
    width: 140, height: 170, padding: 10,
    background: 'repeating-linear-gradient(180deg, #fffdf3 0 6px, #fff9e3 6px 12px)',
    fontSize: 9,
    color: '#5d5a3d',
    lineHeight: 1.4,
    fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
  },
  // Bot card (rich result) — for showing OCR / calendar replies
  botCard: {
    alignSelf: 'flex-start',
    width: '85%',
    background: '#fff',
    borderRadius: '4px 16px 16px 16px',
    overflow: 'hidden',
    boxShadow: '0 1px 1px rgba(0,0,0,.04)',
  },
  cardHd: {
    padding: '10px 12px',
    fontSize: 11,
    color: 'var(--c-ink-3)',
    borderBottom: '1px solid var(--c-line-2)',
    display: 'flex', alignItems: 'center', gap: 6,
  },
  cardKV: {
    display: 'grid',
    gridTemplateColumns: '64px 1fr',
    rowGap: 4, columnGap: 8,
    padding: '10px 12px',
    fontSize: 12,
  },
  kvK: { color: 'var(--c-ink-3)' },
  kvV: { color: 'var(--c-ink)', fontWeight: 600 },
  cardFooter: {
    padding: '8px 12px',
    background: 'var(--c-green-soft)',
    color: 'var(--c-green-ink)',
    fontSize: 11,
    fontWeight: 600,
    display: 'flex', alignItems: 'center', gap: 6,
  },
  // Input bar
  inputBar: {
    background: '#fff',
    padding: '10px 12px 14px',
    display: 'flex', alignItems: 'center', gap: 8,
    borderTop: '1px solid var(--c-line-2)',
  },
  inputField: {
    flex: 1,
    background: '#f3f4f7',
    borderRadius: 999,
    padding: '8px 14px',
    fontSize: 12,
    color: 'var(--c-ink-4)',
  },
  inputBtn: {
    width: 32, height: 32, borderRadius: '50%',
    background: 'var(--c-green)',
    color: '#fff',
    display: 'grid', placeItems: 'center',
    flex: '0 0 auto',
  },
};

// Reusable bits
const DateChip = ({ children }) => (
  <div style={chatStyles.dateChip}>{children}</div>
);
const BubbleR = ({ children }) => (
  <div style={chatStyles.bubbleR}>{children}</div>
);
const BubbleL = ({ children }) => (
  <div style={chatStyles.bubbleL}>{children}</div>
);

const ReceiptThumbMsg = () => (
  <div style={chatStyles.imgMsg}>
    <div style={chatStyles.receiptThumb}>
      <div style={{ fontWeight: 700, fontSize: 11, color: '#3a3724', marginBottom: 4 }}>
        領 収 書
      </div>
      <div>2026/05/22</div>
      <div>カフェ ハナミ 表参道店</div>
      <div style={{ borderTop: '1px dashed #c8c2a2', margin: '6px 0' }}></div>
      <div>コーヒー …………… ￥600</div>
      <div>サンドイッチ ……… ￥980</div>
      <div>ケーキセット ……… ￥1,200</div>
      <div style={{ borderTop: '1px dashed #c8c2a2', margin: '6px 0' }}></div>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontWeight: 700 }}>
        <span>合計</span><span>￥2,780</span>
      </div>
    </div>
  </div>
);

const BotCardReceipt = () => (
  <div style={chatStyles.botCard}>
    <div style={chatStyles.cardHd}>
      <IconReceipt size={14} color="var(--c-green-ink)" />
      <span>読み取り結果</span>
    </div>
    <div style={chatStyles.cardKV}>
      <div style={chatStyles.kvK}>日付</div>
      <div style={chatStyles.kvV}>2026/05/22</div>
      <div style={chatStyles.kvK}>店名</div>
      <div style={chatStyles.kvV}>カフェ ハナミ 表参道店</div>
      <div style={chatStyles.kvK}>金額</div>
      <div style={chatStyles.kvV}>¥2,780</div>
      <div style={chatStyles.kvK}>勘定科目</div>
      <div style={chatStyles.kvV}>会議費</div>
    </div>
    <div style={chatStyles.cardFooter}>
      <IconCheck size={14} />
      <span>Driveに保存 / スプレッドシートに記録しました</span>
    </div>
  </div>
);

const BotCardSchedule = () => (
    <div style={chatStyles.botCard}>
    <div style={chatStyles.cardHd}>
      <LogoCalendar size={16} />
      <span>今日の予定（5月23日 金）</span>
    </div>
    <div style={{ padding: '8px 12px 12px', display: 'flex', flexDirection: 'column', gap: 6 }}>
      {[
        { t: '10:00', l: '11:00', title: '営業MTG', col: 'var(--c-blue)' },
        { t: '13:30', l: '14:00', title: '田中さんと打合せ', col: 'var(--c-green)' },
        { t: '16:00', l: '17:30', title: '見積レビュー', col: 'var(--c-orange)' },
      ].map((e, i) => (
        <div key={i} style={{
          display: 'grid',
          gridTemplateColumns: '46px 4px 1fr',
          gap: 8, alignItems: 'center',
          fontSize: 12,
        }}>
          <div style={{ fontFamily: 'var(--font-num)', fontWeight: 700, color: 'var(--c-ink-2)' }}>
            {e.t}
          </div>
          <div style={{ width: 4, height: 28, background: e.col, borderRadius: 2 }}></div>
          <div>
            <div style={{ fontWeight: 600 }}>{e.title}</div>
            <div style={{ color: 'var(--c-ink-4)', fontSize: 11 }}>{e.t} – {e.l}</div>
          </div>
        </div>
      ))}
    </div>
  </div>
);

// Three variants for the mock — chosen by `variant` prop
function ChatMock({ variant = 'receipt' }) {
  return (
    <div style={chatStyles.frame}>
      <div style={chatStyles.notch} />
      <div style={chatStyles.header}>
        <div style={chatStyles.avatar}></div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={chatStyles.hName}>LINE秘書</div>
          <div style={chatStyles.hStatus}>
            <span style={{
              display: 'inline-block', width: 6, height: 6, borderRadius: '50%',
              background: 'var(--c-green)', marginRight: 5, verticalAlign: 'middle',
            }}></span>
            オンライン
          </div>
        </div>
      </div>

      <div style={chatStyles.body}>
        <DateChip>2026年5月23日</DateChip>

        {variant === 'receipt' && (
          <>
            <ReceiptThumbMsg />
            <BubbleR>これお願いします</BubbleR>
            <BubbleL>承知しました。読み取ります✍️</BubbleL>
            <BotCardReceipt />
            <BubbleL>このまま記録してよろしいですか？</BubbleL>
          </>
        )}

        {variant === 'schedule' && (
          <>
            <BubbleR>今日の予定おしえて</BubbleR>
            <BotCardSchedule />
            <BubbleL>16時の会議の30分前にリマインドしますね</BubbleL>
            <BubbleR>ありがとう</BubbleR>
          </>
        )}

        {variant === 'mix' && (
          <>
            <BubbleR>来週の月曜の予定は？</BubbleR>
            <BubbleL>10時から営業MTG、14時から契約レビューです</BubbleL>
            <BubbleR>ありがとう、領収書も送ります</BubbleR>
            <ReceiptThumbMsg />
            <BotCardReceipt />
          </>
        )}
      </div>

      <div style={chatStyles.inputBar}>
        <div style={{ width: 22, height: 22, color: 'var(--c-ink-4)' }}>
          <IconPlus size={22} />
        </div>
        <div style={chatStyles.inputField}>メッセージを入力</div>
        <div style={chatStyles.inputBtn}>
          <IconCamera size={16} />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ChatMock });