// WhatsAppView — replicates the look of a WhatsApp chat thread on iOS.
// Generic chat-app styling (green-tinted), not the WhatsApp wordmark.

function WAHeader({ c, dark }) {
  // WhatsApp-style header colors but kept generic
  const bg = dark ? '#1F2C34' : '#F7F7F7';
  const ink = dark ? '#E9EDEF' : '#000';
  const tint = '#075E54';
  return (
    <div style={{
      background: bg, padding: '6px 8px 10px',
      borderBottom: `0.5px solid ${dark ? '#2A3942' : '#D1D1D6'}`,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '4px 8px' }}>
        <span style={{ color: tint, fontFamily: '-apple-system', fontSize: 17, fontWeight: 400 }}>‹</span>
        <span style={{ color: tint, fontFamily: '-apple-system', fontSize: 14 }}>Chats</span>
        <div style={{
          width: 36, height: 36, borderRadius: '50%', background: '#FFE003',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          marginLeft: 4, overflow: 'hidden',
        }}>
          <img src="tomlee-logo.png" alt="" style={{ width: '90%', height: 'auto', display: 'block' }} />
        </div>
        <div style={{ flex: 1, marginLeft: 4 }}>
          <div style={{ fontFamily: '-apple-system', fontSize: 14, fontWeight: 600, color: ink }}>Tom Lee Academy</div>
          <div style={{ fontFamily: '-apple-system', fontSize: 11, color: dark ? '#8696A0' : '#8E8E93' }}>Business account · last seen today</div>
        </div>
        <span style={{ color: tint, marginRight: 12 }}><TLIcon name="video" size={20} color={tint} stroke={1.4} /></span>
        <span style={{ color: tint }}><TLIcon name="phone" size={18} color={tint} stroke={1.4} /></span>
      </div>
    </div>
  );
}

function WABubble({ from, time, children, c, dark, status }) {
  const me = from === 'me';
  const meBg = dark ? '#005C4B' : '#D9FDD3';
  const themBg = dark ? '#202C33' : '#FFFFFF';
  const meInk = dark ? '#E9EDEF' : '#111B21';
  const themInk = dark ? '#E9EDEF' : '#111B21';
  return (
    <div style={{
      display: 'flex', justifyContent: me ? 'flex-end' : 'flex-start',
      padding: '2px 10px',
    }}>
      <div style={{
        maxWidth: '82%',
        background: me ? meBg : themBg,
        color: me ? meInk : themInk,
        padding: '6px 8px 4px 10px',
        borderRadius: me ? '7px 7px 0 7px' : '0 7px 7px 7px',
        boxShadow: '0 1px 0.5px rgba(0,0,0,0.13)',
        fontFamily: '-apple-system, "Segoe UI"',
        fontSize: 14.5, lineHeight: 1.35,
        position: 'relative',
      }}>
        {children}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 4,
          justifyContent: 'flex-end', marginTop: 2, height: 12,
        }}>
          <span style={{ fontSize: 10.5, color: dark ? '#8696A0' : '#667781' }}>{time}</span>
          {me && status && (
            <svg width="14" height="11" viewBox="0 0 14 11">
              <path d="M11.07 0.65L4.96 6.93l-1.84-1.85L2 6.06l2.97 2.97 7.13-7.36z" fill={status === 'read' ? '#53BDEB' : (dark ? '#8696A0' : '#667781')}/>
              <path d="M8.07 0.65L1.96 6.93 0.5 5.5 -0.5 6.06l1.97 2.97 7.13-7.36z" fill={status === 'read' ? '#53BDEB' : (dark ? '#8696A0' : '#667781')} transform="translate(3.5 0)"/>
            </svg>
          )}
        </div>
      </div>
    </div>
  );
}

function WADateChip({ children, dark }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', padding: '12px 0 8px' }}>
      <span style={{
        fontFamily: '-apple-system', fontSize: 12,
        background: dark ? '#1D282F' : 'rgba(225,245,254,0.92)',
        color: dark ? '#8696A0' : '#54656F',
        padding: '4px 10px', borderRadius: 6,
        boxShadow: '0 1px 0.5px rgba(0,0,0,0.05)',
      }}>{children}</span>
    </div>
  );
}

function WALinkPreview({ c, dark, title, desc, label }) {
  const innerBg = dark ? '#111B21' : '#F0F2F5';
  const innerInk = dark ? '#E9EDEF' : '#111B21';
  return (
    <div style={{
      margin: '-6px -8px 6px -10px', borderRadius: '7px 7px 0 0',
      overflow: 'hidden', background: innerBg,
      borderLeft: `3px solid #075E54`,
    }}>
      <div style={{ padding: '8px 10px' }}>
        <div style={{ fontFamily: TL_FONTS.mono, fontSize: 9, letterSpacing: '0.1em', color: '#075E54', textTransform: 'uppercase', marginBottom: 4 }}>{label}</div>
        <div style={{ fontFamily: '-apple-system', fontSize: 13, fontWeight: 600, color: innerInk, lineHeight: 1.3, marginBottom: 2 }}>{title}</div>
        <div style={{ fontFamily: '-apple-system', fontSize: 12, color: dark ? '#8696A0' : '#667781', lineHeight: 1.35 }}>{desc}</div>
        <div style={{ fontFamily: '-apple-system', fontSize: 11, color: dark ? '#8696A0' : '#8696A0', marginTop: 6 }}>portal.tomleeacademy.hk</div>
      </div>
    </div>
  );
}

function WAComposer({ c, dark }) {
  const bg = dark ? '#1F2C34' : '#F7F7F7';
  const inputBg = dark ? '#2A3942' : '#FFFFFF';
  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0,
      background: bg, padding: '6px 8px 30px',
      display: 'flex', alignItems: 'flex-end', gap: 6,
      borderTop: `0.5px solid ${dark ? '#2A3942' : '#D1D1D6'}`,
    }}>
      <div style={{
        flex: 1, background: inputBg, borderRadius: 20,
        padding: '8px 12px', display: 'flex', alignItems: 'center', gap: 8,
        border: dark ? '0.5px solid #2A3942' : '0.5px solid #D1D1D6',
      }}>
        <TLIcon name="smile" size={20} color={dark ? '#8696A0' : '#54656F'} stroke={1.4} />
        <span style={{ flex: 1, fontFamily: '-apple-system', fontSize: 14, color: dark ? '#8696A0' : '#8E8E93' }}>Message</span>
        <TLIcon name="paperclip" size={18} color={dark ? '#8696A0' : '#54656F'} stroke={1.4} />
        <TLIcon name="camera" size={18} color={dark ? '#8696A0' : '#54656F'} stroke={1.4} />
      </div>
      <div style={{
        width: 36, height: 36, borderRadius: '50%', background: '#25D366',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <TLIcon name="mic" size={18} color="white" stroke={1.6} />
      </div>
    </div>
  );
}

function WhatsAppView({ dark }) {
  // Use WhatsApp's actual chat bg, regardless of token theme
  const chatBg = dark ? '#0B141A' : '#EFE7DD';
  const c = TL_TOKENS[dark ? 'dark' : 'light'];

  return (
    <div style={{ height: '100%', position: 'relative', background: chatBg, overflow: 'hidden' }}>
      <WAHeader c={c} dark={dark} />
      {/* doodle texture */}
      <div style={{
        position: 'absolute', top: 60, left: 0, right: 0, bottom: 0,
        backgroundImage: `radial-gradient(${dark ? 'rgba(255,255,255,0.02)' : 'rgba(0,0,0,0.025)'} 1px, transparent 1px)`,
        backgroundSize: '14px 14px',
        pointerEvents: 'none',
      }} />

      <div style={{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: 90, position: 'relative' }}>
        <WADateChip dark={dark}>YESTERDAY</WADateChip>

        {/* 24h reminder */}
        <WABubble from="them" time="15:00" c={c} dark={dark}>
          <div style={{ fontWeight: 600, marginBottom: 4 }}>🎵 Lesson reminder</div>
          <div>Hi Mrs. Lam, just a friendly reminder — Sophie has piano with Ms. Chen <strong>tomorrow at 15:00</strong> in Studio 4.</div>
          <div style={{ marginTop: 6 }}>Practice this week: Hanon No.3 + Bach Minuet bars 1–16. See you soon! 🎹</div>
        </WABubble>

        <WABubble from="me" time="15:42" c={c} dark={dark} status="read">
          Thanks! Sophie has been practicing every day this week 😊
        </WABubble>
        <WABubble from="them" time="15:48" c={c} dark={dark}>
          Wonderful — Ms. Chen will be delighted to hear that.
        </WABubble>

        <WADateChip dark={dark}>TODAY</WADateChip>

        {/* Lesson complete */}
        <WABubble from="them" time="15:47" c={c} dark={dark}>
          <div>Hi Mrs. Lam — Sophie's lesson handbook is ready 📖</div>
          <div style={{ marginTop: 6 }}><em>"Sophie's tone in the Arabesque is really starting to sing. Tackle the LH staccato in bars 9–12 slowly with a metronome."</em></div>
          {/* Rich link card → opens handbook web page */}
          <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>
            <div style={{
              marginTop: 10, marginLeft: -10, marginRight: -8, marginBottom: -4,
              background: dark ? '#111B21' : '#F0F2F5',
              borderLeft: `3px solid #075E54`,
              padding: '10px 12px',
            }}>
              <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                <div style={{
                  width: 44, height: 44, background: '#FFE003',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                }}>
                  <img src="tomlee-logo.png" alt="" style={{ width: '85%', display: 'block' }} />
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontFamily: TL_FONTS.mono, fontSize: 9, letterSpacing: '0.1em', color: '#075E54', textTransform: 'uppercase', marginBottom: 3 }}>
                    Lesson handbook · Tue, Apr 28
                  </div>
                  <div style={{ fontFamily: '-apple-system', fontSize: 13.5, fontWeight: 600, color: dark ? '#E9EDEF' : '#111B21', lineHeight: 1.3 }}>
                    Sophie's piano lesson — full handbook
                  </div>
                  <div style={{ fontFamily: '-apple-system', fontSize: 11.5, color: dark ? '#8696A0' : '#667781', marginTop: 3, lineHeight: 1.3 }}>
                    2 pieces · 4 skill ratings · audio note · homework
                  </div>
                </div>
              </div>
              <div style={{
                marginTop: 8, padding: '7px 10px',
                background: dark ? 'rgba(255,255,255,0.04)' : 'rgba(7,94,84,0.08)',
                fontFamily: TL_FONTS.mono, fontSize: 11, color: '#075E54',
                display: 'flex', alignItems: 'center', gap: 6,
              }}>
                <TLIcon name="arrowR" size={12} color="#075E54" stroke={1.6} />
                <span style={{ fontWeight: 600 }}>portal.tomleeacademy.hk/h/s1-h1</span>
              </div>
            </div>
          </a>
        </WABubble>

        <WABubble from="them" time="15:47" c={c} dark={dark}>
          <div style={{ fontWeight: 600, marginBottom: 6 }}>This week's practice goals</div>
          <div>· Hanon No.3 at ♩=96</div>
          <div>· Memorise bars 1–16 of the Bach Minuet</div>
          <div>· LH staccato, Arabesque bars 9–12</div>
          <div style={{ marginTop: 8, fontSize: 12.5, color: dark ? '#8696A0' : '#667781' }}>Next lesson: Tue, May 5 · 15:00</div>
        </WABubble>

        <WABubble from="me" time="16:02" c={c} dark={dark} status="delivered">
          Thank you Ms. Chen 🙏 Will read it to her tonight!
        </WABubble>

        <div style={{ padding: '12px 0' }} />
      </div>

      <WAComposer c={c} dark={dark} />
    </div>
  );
}

Object.assign(window, { WhatsAppView });