// Tably phone mockup — recreates the in-app chat UI seen in the source screenshots
// All original art: cat mascot drawn from primitives, no copyrighted assets.

const TABLY_BG_LIGHT = '#FAF1E4';
const TABLY_BG_DARK = '#1F1A12';
const TABLY_ORANGE = '#F08C2C';
const TABLY_INK = '#1B1408';


function TablyHeader({ dark = false, time = '10:44' }) {
  const ink = dark ? '#FAF1E4' : '#1B1408';
  const sub = dark ? 'rgba(250,241,228,0.7)' : '#7A6A55';
  return (
    <div style={{ padding: '0 18px 8px' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{
            width: 44, height: 44, borderRadius: 12,
            background: dark ? 'rgba(255,255,255,0.06)' : '#FFF6E6',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            overflow: 'hidden',
          }}>
            <CatMascot size={36} />
          </div>
          <div>
            <div style={{ fontWeight: 700, fontSize: 17, color: ink, letterSpacing: -0.2 }}>Tably</div>
            <div style={{ fontSize: 12, color: sub, display: 'flex', alignItems: 'center', gap: 5 }}>
              <span style={{ width: 7, height: 7, borderRadius: 99, background: '#3FA84B', display: 'inline-block' }} />
              <span style={{ fontWeight: 600, color: '#3FA84B' }}>Online</span>
            </div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          {[
            <svg key="s" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6L12 3z" fill={ink}/></svg>,
            <svg key="h" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M3 11l9-8 9 8v9a2 2 0 01-2 2h-4v-7h-6v7H5a2 2 0 01-2-2v-9z" fill={ink}/></svg>,
          ].map((icon, i) => (
            <div key={i} style={{
              width: 36, height: 36, borderRadius: 99,
              background: dark ? 'rgba(255,255,255,0.06)' : '#fff',
              border: dark ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(0,0,0,0.05)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>{icon}</div>
          ))}
        </div>
      </div>
    </div>
  );
}

function UserBubble({ children, accent = TABLY_ORANGE }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'flex-end', padding: '0 18px', marginBottom: 12 }}>
      <div style={{
        background: accent, color: '#fff',
        padding: '12px 18px', borderRadius: 18,
        fontSize: 15, fontWeight: 700, letterSpacing: -0.1,
        maxWidth: '75%', lineHeight: 1.3,
      }}>{children}</div>
    </div>
  );
}

function BotCard({ children, dark = false }) {
  return (
    <div style={{
      background: dark ? 'rgba(255,255,255,0.04)' : '#fff',
      border: dark ? '1px solid rgba(255,255,255,0.06)' : '1px solid rgba(0,0,0,0.04)',
      borderRadius: 14, margin: '0 18px 8px',
      padding: '14px 16px',
    }}>{children}</div>
  );
}

function BotText({ children, dark = false }) {
  const ink = dark ? '#FAF1E4' : '#1B1408';
  return (
    <div style={{ padding: '4px 18px 4px', color: ink, fontSize: 14.5, lineHeight: 1.4 }}>
      {children}
    </div>
  );
}

function ActionRow({ dark = false }) {
  const c = dark ? 'rgba(255,255,255,0.5)' : 'rgba(27,20,8,0.45)';
  return (
    <div style={{ display: 'flex', gap: 16, padding: '4px 18px 14px' }}>
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><rect x="9" y="9" width="11" height="11" rx="2" stroke={c} strokeWidth="1.6"/><rect x="4" y="4" width="11" height="11" rx="2" stroke={c} strokeWidth="1.6"/></svg>
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M7 11v9H4v-9h3zm3 9V11l4-7 1 1v6h6l-2 9h-9z" stroke={c} strokeWidth="1.6" fill="none" strokeLinejoin="round"/></svg>
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" style={{ transform: 'rotate(180deg)' }}><path d="M7 11v9H4v-9h3zm3 9V11l4-7 1 1v6h6l-2 9h-9z" stroke={c} strokeWidth="1.6" fill="none" strokeLinejoin="round"/></svg>
    </div>
  );
}

function ChatComposer({ dark = false, placeholder = 'Type a message...' }) {
  const inkSub = dark ? 'rgba(250,241,228,0.5)' : '#A99B82';
  return (
    <div style={{ padding: '8px 16px 14px' }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        background: dark ? 'rgba(255,255,255,0.04)' : '#fff',
        border: dark ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(0,0,0,0.05)',
        borderRadius: 99, padding: '8px 8px 8px 14px',
      }}>
        <svg width="18" height="14" viewBox="0 0 24 18"><line x1="1" y1="3" x2="23" y2="3" stroke={inkSub} strokeWidth="2" strokeLinecap="round"/><line x1="1" y1="9" x2="23" y2="9" stroke={inkSub} strokeWidth="2" strokeLinecap="round"/><line x1="1" y1="15" x2="23" y2="15" stroke={inkSub} strokeWidth="2" strokeLinecap="round"/></svg>
        <div style={{ flex: 1, fontSize: 14, color: inkSub }}>{placeholder}</div>
        <div style={{
          width: 30, height: 30, borderRadius: 99,
          background: dark ? 'rgba(255,255,255,0.08)' : '#F4EAD6',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="14" height="14" viewBox="0 0 24 24"><rect x="9" y="3" width="6" height="12" rx="3" fill={inkSub}/><path d="M5 11a7 7 0 0014 0M12 18v3" stroke={inkSub} strokeWidth="1.8" fill="none" strokeLinecap="round"/></svg>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Whole-screen recipes — picked by `screen` prop
// ─────────────────────────────────────────────────────────────

function ScreenChatUber({ dark }) {
  const sub = dark ? 'rgba(250,241,228,0.65)' : '#7A6A55';
  const ink = dark ? '#FAF1E4' : '#1B1408';
  return (
    <>
      <TablyHeader dark={dark} time="10:44" />
      <div style={{ flex: 1 }} />
      <UserBubble>Uber 10</UserBubble>
      <BotCard dark={dark}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 38, height: 38, borderRadius: 99, background: '#FFF6E6', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20 }}>🚗</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 700, color: ink, fontSize: 15 }}>Uber</div>
            <div style={{ fontSize: 12, color: sub }}>6 May 2026</div>
          </div>
          <div style={{ fontWeight: 800, color: ink, fontSize: 16 }}>$10</div>
        </div>
      </BotCard>
      <BotText dark={dark}>Logged $10 Uber ride under transport! 🚗</BotText>
      <ActionRow dark={dark} />
      <UserBubble>Sorry, it was actually 10.99</UserBubble>
      <BotCard dark={dark}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 38, height: 38, borderRadius: 99, background: '#FFF6E6', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20 }}>🚗</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 700, color: ink, fontSize: 15 }}>Uber</div>
            <div style={{ fontSize: 12, color: sub }}>6 May 2026</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 12, color: sub, textDecoration: 'line-through' }}>$10</div>
            <div style={{ fontWeight: 800, color: ink, fontSize: 16 }}>$10.99</div>
          </div>
        </div>
      </BotCard>
      <BotText dark={dark}>Updated to $10.99! 🚗</BotText>
      <ActionRow dark={dark} />
      <ChatComposer dark={dark} />
    </>
  );
}

function ScreenChatCoffee({ dark }) {
  const sub = dark ? 'rgba(250,241,228,0.65)' : '#7A6A55';
  const ink = dark ? '#FAF1E4' : '#1B1408';
  return (
    <>
      <TablyHeader dark={dark} time="11:03" />
      <div style={{ flex: 1 }} />
      <UserBubble>How much did I spend on coffee last month?</UserBubble>
      <BotCard dark={dark}>
        <div style={{ fontSize: 12, color: sub }}>Coffee spending · April 2026</div>
        <div style={{ fontWeight: 800, color: ink, fontSize: 28, marginTop: 4 }}>$25.55</div>
      </BotCard>
      <BotText dark={dark}>You spent <b>$25.55</b> on coffee in April 2026.</BotText>
      <ActionRow dark={dark} />
      <ChatComposer dark={dark} />
    </>
  );
}

function ScreenChatTrend({ dark }) {
  const sub = dark ? 'rgba(250,241,228,0.65)' : '#7A6A55';
  const ink = dark ? '#FAF1E4' : '#1B1408';
  return (
    <>
      <TablyHeader dark={dark} time="11:01" />
      <div style={{ flex: 1 }} />
      <UserBubble>Show my electric bill trend for the past 12 months</UserBubble>
      <BotCard dark={dark}>
        <div style={{ fontSize: 12, color: sub }}>Electric Bill · Last 12 Months</div>
        <div style={{ fontWeight: 800, color: ink, fontSize: 28, marginTop: 4 }}>$85</div>
        <svg viewBox="0 0 280 90" style={{ width: '100%', marginTop: 14 }}>
          <defs>
            <linearGradient id="trendFill" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stopColor={TABLY_ORANGE} stopOpacity="0.35"/>
              <stop offset="100%" stopColor={TABLY_ORANGE} stopOpacity="0"/>
            </linearGradient>
          </defs>
          <path d="M0,70 C20,20 40,12 60,15 C80,18 100,75 120,80 C140,85 160,55 180,52 C200,49 220,75 240,78 C260,80 270,76 280,74 L280,90 L0,90 Z" fill="url(#trendFill)"/>
          <path d="M0,70 C20,20 40,12 60,15 C80,18 100,75 120,80 C140,85 160,55 180,52 C200,49 220,75 240,78 C260,80 270,76 280,74" stroke={TABLY_ORANGE} strokeWidth="2.5" fill="none" strokeLinecap="round"/>
        </svg>
      </BotCard>
      <BotText dark={dark}>Peaked in summer (Jun–Jul ~$168), lower since fall. Most recent: $85.</BotText>
      <ActionRow dark={dark} />
      <ChatComposer dark={dark} />
    </>
  );
}

function ScreenDashboard({ dark }) {
  const sub = dark ? 'rgba(250,241,228,0.65)' : '#7A6A55';
  const ink = dark ? '#FAF1E4' : '#1B1408';
  const sep = dark ? 'rgba(255,255,255,0.07)' : 'rgba(27,20,8,0.08)';

  const Section = ({ title, children }) => (
    <div style={{ padding: '0 22px 18px', borderBottom: `1px solid ${sep}`, marginBottom: 18 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
        <div style={{ fontWeight: 800, fontSize: 18, color: ink, letterSpacing: -0.3 }}>{title}</div>
        <svg width="14" height="14" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke={ink} strokeWidth="2" fill="none" strokeLinecap="round"/></svg>
      </div>
      {children}
    </div>
  );

  const Row = ({ icon, label, right, sublabel }) => (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{ fontSize: 18 }}>{icon}</span>
        <span style={{ color: ink, fontSize: 16 }}>{label}</span>
        {sublabel && <span style={{ background: dark ? 'rgba(63,168,75,0.18)' : '#E0F2D9', color: '#3FA84B', fontSize: 11, fontWeight: 700, padding: '2px 7px', borderRadius: 99 }}>{sublabel}</span>}
      </div>
      <div style={{ fontWeight: 800, color: ink, fontSize: 16 }}>{right}</div>
    </div>
  );

  return (
    <>
      <TablyHeader dark={dark} time="10:15" />
      <div style={{ padding: '0 22px 16px' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ fontWeight: 800, fontSize: 22, color: ink, letterSpacing: -0.4 }}>May 2026</div>
            <span style={{ fontSize: 14 }}>👁️</span>
          </div>
          <svg width="16" height="16" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke={ink} strokeWidth="2" fill="none" strokeLinecap="round"/></svg>
        </div>
        <Row icon="💰" label="Income" right="$4,500" sublabel="→ 0%" />
        <Row icon="💸" label="Spent" right="$1,618.19" sublabel="↓ 4%" />
      </div>
      <div style={{ height: 1, background: sep, margin: '0 22px 18px' }} />
      <Section title="Transactions">
        <Row icon="🎵" label="Spotify" right="$11.99" />
        <Row icon="☕" label="Coffee" right="$4.5" />
        <Row icon="🛒" label="Groceries" right="$87.5" />
        <div style={{ color: TABLY_ORANGE, fontWeight: 700, fontSize: 14, textDecoration: 'underline', textUnderlineOffset: 3 }}>See all →</div>
      </Section>
      <Section title="Spending">
        <Row icon="🏠" label="Housing" right="$1,500" />
        <Row icon="🛒" label="Groceries" right="$87.5" sublabel="18%" />
        <Row icon="🍽️" label="Dining out" right="$18.7" sublabel="5%" />
        <div style={{ color: TABLY_ORANGE, fontWeight: 700, fontSize: 14, textDecoration: 'underline', textUnderlineOffset: 3 }}>See all →</div>
      </Section>
      <div style={{ flex: 1 }} />
      <ChatComposer dark={dark} />
    </>
  );
}

function ScreenTransactions({ dark }) {
  const sub = dark ? 'rgba(250,241,228,0.65)' : '#7A6A55';
  const ink = dark ? '#FAF1E4' : '#1B1408';
  const sep = dark ? 'rgba(255,255,255,0.07)' : 'rgba(27,20,8,0.07)';
  const txs = [
    { icon: '🎵', name: 'Spotify', date: '6 May 2026', amt: '$11.99' },
    { icon: '☕', name: 'Coffee', date: '5 May 2026', amt: '$4.5' },
    { icon: '🛒', name: 'Groceries', date: '4 May 2026', amt: '$87.5' },
    { icon: '🥗', name: 'Lunch', date: '3 May 2026', amt: '$14.2' },
    { icon: '🏠', name: 'Rent', date: '2 May 2026', amt: '$1,500' },
    { icon: '💼', name: 'Salary', date: '2 May 2026', amt: '+$4,500', positive: true },
    { icon: '🚕', name: 'Uber', date: '1 May 2026', amt: '$12.5' },
    { icon: '☕', name: 'Coffee', date: '30 Apr 2026', amt: '$5.8' },
    { icon: '🍝', name: 'Dinner with friends', date: '29 Apr 2026', amt: '$38.5' },
  ];
  return (
    <>
      <div style={{ height: 56 }} />
      <div style={{ padding: '0 22px 22px', display: 'flex', alignItems: 'center', gap: 12 }}>
        <svg width="18" height="18" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke={ink} strokeWidth="2.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
        <div style={{ fontSize: 22, fontWeight: 800, color: ink, letterSpacing: -0.4 }}>Transactions</div>
      </div>
      <div style={{ flex: 1 }}>
        {txs.map((t, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 14,
            padding: '14px 22px', borderTop: i === 0 ? `1px solid ${sep}` : 'none',
            borderBottom: `1px solid ${sep}`,
          }}>
            <div style={{ width: 46, height: 46, borderRadius: 99, background: dark ? 'rgba(255,255,255,0.06)' : '#FFF6E6', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 22 }}>{t.icon}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 700, color: ink, fontSize: 16 }}>{t.name}</div>
              <div style={{ color: sub, fontSize: 12 }}>{t.date}</div>
            </div>
            <div style={{ fontWeight: 800, color: t.positive ? '#2F8A3D' : ink, fontSize: 17 }}>{t.amt}</div>
          </div>
        ))}
      </div>
    </>
  );
}

// ─────────────────────────────────────────────────────────────
// Public component
// ─────────────────────────────────────────────────────────────
function TablyPhone({ screen = 'chat-uber', dark = false, width = 320, height, scale = 1 }) {
  const baseW = 380;
  const baseH = height || 780;
  const bg = dark ? TABLY_BG_DARK : TABLY_BG_LIGHT;
  const screens = {
    'chat-uber': ScreenChatUber,
    'chat-coffee': ScreenChatCoffee,
    'chat-trend': ScreenChatTrend,
    'dashboard': ScreenDashboard,
    'transactions': ScreenTransactions,
  };
  const Screen = screens[screen] || ScreenChatUber;
  const s = width / baseW;
  return (
    <div style={{
      width, height: baseH * s,
      position: 'relative', flexShrink: 0,
    }}>
      <div style={{
        position: 'absolute', top: 0, left: 0,
        width: baseW, height: baseH,
        transform: `scale(${s})`, transformOrigin: 'top left',
      }}>
        <div style={{
          width: baseW, height: baseH,
          borderRadius: 52, overflow: 'hidden', position: 'relative',
          background: bg,
          boxShadow: '0 30px 80px rgba(70,40,10,0.18), 0 0 0 10px #1a1a1a, 0 0 0 11px rgba(255,255,255,0.04)',
          fontFamily: '-apple-system, system-ui, sans-serif',
        }}>
          {/* dynamic island */}
          <div style={{ position: 'absolute', top: 11, left: '50%', transform: 'translateX(-50%)', width: 110, height: 33, borderRadius: 99, background: '#000', zIndex: 50 }} />
          {/* status bar */}
          <div style={{
            position: 'absolute', top: 0, left: 0, right: 0, zIndex: 10,
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            padding: '17px 28px 0', fontSize: 15, fontWeight: 700,
            color: dark ? '#FAF1E4' : '#1B1408', fontFamily: '-apple-system,system-ui',
          }}>
            <span>{({'chat-uber':'10:44','chat-coffee':'11:03','chat-trend':'11:01','dashboard':'10:15','transactions':'11:07'})[screen]}</span>
            <span style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
              <svg width="16" height="11" viewBox="0 0 19 12"><rect x="0" y="7.5" width="3.2" height="4.5" rx="0.7" fill="currentColor"/><rect x="4.8" y="5" width="3.2" height="7" rx="0.7" fill="currentColor"/><rect x="9.6" y="2.5" width="3.2" height="9.5" rx="0.7" fill="currentColor"/><rect x="14.4" y="0" width="3.2" height="12" rx="0.7" fill="currentColor"/></svg>
              <svg width="22" height="11" viewBox="0 0 27 13"><rect x="0.5" y="0.5" width="23" height="12" rx="3.5" stroke="currentColor" strokeOpacity="0.5" fill="none"/><rect x="2" y="2" width="20" height="9" rx="2" fill="currentColor"/><path d="M25 4.5V8.5C25.8 8.2 26.5 7.2 26.5 6.5C26.5 5.8 25.8 4.8 25 4.5Z" fill="currentColor" fillOpacity="0.5"/></svg>
            </span>
          </div>
          <div style={{ paddingTop: 56, height: '100%', display: 'flex', flexDirection: 'column' }}>
            <Screen dark={dark} />
          </div>
          {/* home indicator */}
          <div style={{ position: 'absolute', bottom: 8, left: '50%', transform: 'translateX(-50%)', width: 130, height: 5, borderRadius: 99, background: dark ? 'rgba(250,241,228,0.4)' : 'rgba(27,20,8,0.25)' }} />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TablyPhone, TABLY_ORANGE, TABLY_BG_LIGHT, TABLY_INK });