// Chat mock — Tara coach conversation inside the iOS frame
const { useState, useEffect, useRef } = React;

const TARA_GREEN = '#3F4E3A';
const TARA_TERRA = '#C46A4D';
const TARA_CREAM = '#F6EFE4';
const TARA_INK = '#1F2520';

function TaraAvatar({ size = 28 }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: `radial-gradient(circle at 35% 30%, #6B7B5E, ${TARA_GREEN} 70%)`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0,
      boxShadow: 'inset 0 -2px 4px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.08)',
    }}>
      <span style={{
        fontFamily: '"Newsreader", "Source Serif Pro", Georgia, serif',
        fontSize: size * 0.5, fontWeight: 500, fontStyle: 'italic',
        color: TARA_CREAM, letterSpacing: -0.3,
        marginTop: -1,
      }}>t</span>
    </div>
  );
}

function ChatHeader() {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '60px 18px 14px',
      borderBottom: '0.5px solid rgba(0,0,0,0.08)',
      background: '#FBF7EF',
      position: 'relative', zIndex: 5,
    }}>
      <div style={{
        width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center',
        marginLeft: -4,
      }}>
        <svg width="11" height="18" viewBox="0 0 11 18" fill="none">
          <path d="M9.5 1L1.5 9l8 8" stroke="#888" strokeWidth="2" strokeLinecap="round"/>
        </svg>
      </div>
      <TaraAvatar size={32} />
      <div style={{ flex: 1, lineHeight: 1.15 }}>
        <div style={{
          fontFamily: '-apple-system, system-ui', fontSize: 15, fontWeight: 600,
          color: TARA_INK, letterSpacing: -0.2,
        }}>Tara</div>
        <div style={{
          fontFamily: '-apple-system, system-ui', fontSize: 11, fontWeight: 400,
          color: '#7A8275', display: 'flex', alignItems: 'center', gap: 4,
          marginTop: 1,
        }}>
          <span style={{
            width: 5, height: 5, borderRadius: '50%', background: '#7BA372',
            display: 'inline-block',
          }} />
          your coach · always here
        </div>
      </div>
      <div style={{
        width: 28, height: 28, borderRadius: '50%', display: 'flex',
        alignItems: 'center', justifyContent: 'center',
      }}>
        <svg width="18" height="4" viewBox="0 0 18 4">
          <circle cx="2" cy="2" r="2" fill="#888"/>
          <circle cx="9" cy="2" r="2" fill="#888"/>
          <circle cx="16" cy="2" r="2" fill="#888"/>
        </svg>
      </div>
    </div>
  );
}

function DayDivider({ label }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '8px 18px',
      fontFamily: '-apple-system, system-ui', fontSize: 11, fontWeight: 500,
      color: '#9AA194', letterSpacing: 0.4, textTransform: 'uppercase',
      justifyContent: 'center',
    }}>
      <span>{label}</span>
    </div>
  );
}

function TaraBubble({ children, withAvatar = true, first = false }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'flex-end', gap: 6,
      padding: `${first ? 6 : 2}px 18px 2px 12px`,
    }}>
      <div style={{ width: 26, flexShrink: 0 }}>
        {withAvatar && <TaraAvatar size={26} />}
      </div>
      <div style={{
        maxWidth: '78%',
        background: '#fff',
        borderRadius: '18px 18px 18px 4px',
        padding: '9px 13px',
        fontFamily: '-apple-system, system-ui', fontSize: 14.5,
        color: TARA_INK, lineHeight: 1.38, letterSpacing: -0.1,
        boxShadow: '0 1px 1px rgba(0,0,0,0.04), 0 0 0 0.5px rgba(0,0,0,0.05)',
      }}>
        {children}
      </div>
    </div>
  );
}

function MeBubble({ children }) {
  return (
    <div style={{
      display: 'flex', justifyContent: 'flex-end',
      padding: '2px 14px 2px 60px',
    }}>
      <div style={{
        maxWidth: '78%',
        background: TARA_GREEN,
        borderRadius: '18px 18px 4px 18px',
        padding: '9px 13px',
        fontFamily: '-apple-system, system-ui', fontSize: 14.5,
        color: '#F4EFE4', lineHeight: 1.38, letterSpacing: -0.1,
      }}>
        {children}
      </div>
    </div>
  );
}

function NauseaCard() {
  return (
    <div style={{
      margin: '4px 18px 4px 44px',
      background: '#fff',
      borderRadius: 18,
      padding: 14,
      boxShadow: '0 1px 1px rgba(0,0,0,0.04), 0 0 0 0.5px rgba(0,0,0,0.05)',
      fontFamily: '-apple-system, system-ui',
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8,
        fontSize: 11, fontWeight: 600, color: TARA_TERRA,
        letterSpacing: 0.6, textTransform: 'uppercase',
        marginBottom: 8,
      }}>
        <svg width="11" height="11" viewBox="0 0 12 12" fill="none">
          <circle cx="6" cy="6" r="5" stroke={TARA_TERRA} strokeWidth="1.4"/>
          <path d="M6 3.5v3M6 8.2v.3" stroke={TARA_TERRA} strokeWidth="1.4" strokeLinecap="round"/>
        </svg>
        for your nausea today
      </div>
      <div style={{ fontSize: 14, color: TARA_INK, lineHeight: 1.4, marginBottom: 10 }}>
        Try ginger tea, then a small protein snack in 20 minutes.
      </div>
      <div style={{ display: 'flex', gap: 6 }}>
        {['Ginger', 'Greek yogurt', 'Crackers'].map(t => (
          <div key={t} style={{
            padding: '5px 10px',
            background: TARA_CREAM,
            borderRadius: 99,
            fontSize: 11.5, color: TARA_GREEN, fontWeight: 500,
          }}>{t}</div>
        ))}
      </div>
    </div>
  );
}

function CheckinCard() {
  const stats = [
    { label: 'Protein', val: '68g', sub: 'of 110g goal', pct: 0.62, color: TARA_GREEN },
    { label: 'Steps', val: '4,210', sub: 'today', pct: 0.42, color: TARA_TERRA },
    { label: 'Water', val: '5 cups', sub: 'of 8', pct: 0.62, color: '#7BA372' },
  ];
  return (
    <div style={{
      margin: '6px 18px 4px 44px',
      background: '#fff',
      borderRadius: 18,
      padding: 14,
      boxShadow: '0 1px 1px rgba(0,0,0,0.04), 0 0 0 0.5px rgba(0,0,0,0.05)',
      fontFamily: '-apple-system, system-ui',
    }}>
      <div style={{
        fontSize: 11, fontWeight: 600, color: '#7A8275',
        letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 10,
      }}>Wednesday check-in</div>
      <div style={{ display: 'flex', gap: 8 }}>
        {stats.map(s => (
          <div key={s.label} style={{ flex: 1 }}>
            <div style={{ fontSize: 10.5, color: '#7A8275', marginBottom: 4 }}>{s.label}</div>
            <div style={{
              fontFamily: '"Newsreader", "Source Serif Pro", Georgia, serif',
              fontSize: 18, fontWeight: 500, color: TARA_INK,
              letterSpacing: -0.4, lineHeight: 1,
            }}>{s.val}</div>
            <div style={{ fontSize: 9.5, color: '#9AA194', marginTop: 2, marginBottom: 5 }}>{s.sub}</div>
            <div style={{ height: 3, background: '#EFEAE0', borderRadius: 2, overflow: 'hidden' }}>
              <div style={{ width: `${s.pct * 100}%`, height: '100%', background: s.color, borderRadius: 2 }} />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function ChatComposer() {
  return (
    <div style={{
      padding: '8px 12px 14px',
      background: '#FBF7EF',
      borderTop: '0.5px solid rgba(0,0,0,0.06)',
      display: 'flex', alignItems: 'center', gap: 8,
    }}>
      <div style={{
        width: 30, height: 30, borderRadius: '50%',
        background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 0 0 0.5px rgba(0,0,0,0.08)',
      }}>
        <svg width="14" height="14" viewBox="0 0 14 14"><path d="M7 1v12M1 7h12" stroke="#7A8275" strokeWidth="1.6" strokeLinecap="round"/></svg>
      </div>
      <div style={{
        flex: 1,
        background: '#fff',
        borderRadius: 99,
        padding: '8px 14px',
        fontFamily: '-apple-system, system-ui', fontSize: 13.5,
        color: '#9AA194',
        boxShadow: '0 0 0 0.5px rgba(0,0,0,0.08)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <span>Message Tara…</span>
        <svg width="16" height="16" viewBox="0 0 16 16"><path d="M11 6V4a3 3 0 00-6 0v2m-1 0h8v8H4V6z" stroke="#9AA194" strokeWidth="1.4" fill="none" strokeLinecap="round"/></svg>
      </div>
    </div>
  );
}

function ChatScreen() {
  return (
    <div style={{
      width: '100%', height: '100%',
      background: '#FBF7EF',
      display: 'flex', flexDirection: 'column',
      overflow: 'hidden',
    }}>
      <ChatHeader />
      <div style={{ flex: 1, overflow: 'hidden', paddingTop: 4 }}>
        <DayDivider label="today · 7:42 am" />
        <TaraBubble first>Morning. How's the nausea today, on a scale of 1–5?</TaraBubble>
        <MeBubble>maybe a 3. didn't sleep great either</MeBubble>
        <TaraBubble>That's real — week two on a higher dose is often the hardest. Let's go gentle today.</TaraBubble>
        <NauseaCard />
        <DayDivider label="3:15 pm" />
        <TaraBubble first>Quick check — you've been quiet today. Did the ginger help?</TaraBubble>
        <MeBubble>yeah actually. ate a real lunch 🥲</MeBubble>
        <TaraBubble>Proud of you. That's two days in a row.</TaraBubble>
        <CheckinCard />
      </div>
      <ChatComposer />
    </div>
  );
}

window.ChatScreen = ChatScreen;
window.TaraAvatar = TaraAvatar;
window.TARA_COLORS = { TARA_GREEN, TARA_TERRA, TARA_CREAM, TARA_INK };