// ─── Settld · Add expense (interactive prototype) ─────────────────────────────
// One ExpenseComposer mounted 5x with different initial states.

const { useState, useEffect, useRef, useMemo, useCallback, Fragment } = React;

// ─── Data ────────────────────────────────────────────────────────────────────
const COLORS = {
  you:    '#0E7C66', // teal
  aarav:  '#E76F51', // coral
  priya:  '#0A5F4F', // teal-deep
  rohan:  '#F4C94E', // butter
  kabir:  '#8B5CF6',
  maya:   '#D97757',
  vihaan: '#3B7A57',
  ishaan: '#C95C3F',
};

const PEOPLE = [
  { id: 'you',    name: 'You',    initial: 'Y', phone: 'self',           locked: true,  recent: true  },
  { id: 'aarav',  name: 'Aarav',  initial: 'A', phone: '+91 98••• 12 04', recent: true  },
  { id: 'priya',  name: 'Priya',  initial: 'P', phone: '+91 73••• 88 51', recent: true  },
  { id: 'rohan',  name: 'Rohan',  initial: 'R', phone: '+91 90••• 31 19', recent: true  },
  { id: 'kabir',  name: 'Kabir',  initial: 'K', phone: '+91 80••• 22 47', recent: false },
  { id: 'maya',   name: 'Maya',   initial: 'M', phone: '+91 99••• 90 12', recent: false },
  { id: 'vihaan', name: 'Vihaan', initial: 'V', phone: '+91 75••• 44 03', recent: false },
  { id: 'ishaan', name: 'Ishaan', initial: 'I', phone: '+91 98••• 67 28', recent: false },
];
const PERSON_BY_ID = Object.fromEntries(PEOPLE.map(p => [p.id, p]));

const GROUPS = [
  { id: 'goa',  emoji: '🌊', name: 'Goa Trip',     members: ['you','aarav','priya','rohan'] },
  { id: 'flat', emoji: '⌂',  name: 'Flat 2BHK',    members: ['you','aarav','priya'] },
  { id: 'bday', emoji: '🎂', name: 'Birthday Squad', members: ['you','priya','rohan','kabir'] },
];

const CATEGORIES = [
  { glyph: '🍜', kind: 'emoji',  match: /\b(food|cafe|farzi|dinner|lunch|breakfast|pizza|chai|swiggy|zomato|biryani|chinese|noodles?|burger|coffee|brunch|kitchen)\b/i },
  { glyph: '✈︎', kind: 'symbol', match: /\b(flight|train|uber|cab|ola|trip|airport|goa|hotel|airbnb|travel|tickets?)\b/i },
  { glyph: '⌂',  kind: 'symbol', match: /\b(rent|home|flat|gas|electricity|wifi|internet|bills?|maid|cook|laundry)\b/i },
  { glyph: '🛍', kind: 'emoji',  match: /\b(shopping|amazon|myntra|mall|clothes|shoes|gift|stuff)\b/i },
  { glyph: '♪',  kind: 'symbol', match: /\b(movie|concert|spotify|netflix|gig|show|tickets?|fun|game)\b/i },
  { glyph: '⋯',  kind: 'symbol', match: null },
];

function suggestGlyph(title) {
  for (const c of CATEGORIES) if (c.match && c.match.test(title)) return c.glyph;
  return null;
}

// ─── Helpers ─────────────────────────────────────────────────────────────────
function formatRupees(n) {
  if (n === 0 || n == null) return '0';
  // Indian formatting: last 3 digits, then groups of 2
  const s = String(Math.abs(Math.trunc(n)));
  if (s.length <= 3) return s;
  const last3 = s.slice(-3);
  const rest = s.slice(0, -3);
  return rest.replace(/\B(?=(\d{2})+(?!\d))/g, ',') + ',' + last3;
}

// ─── Avatar ──────────────────────────────────────────────────────────────────
function Avatar({ p, size = 20 }) {
  const color = COLORS[p.id] || 'var(--ink-mute)';
  return (
    <span className="av" style={{
      width: size, height: size,
      background: color,
      fontSize: Math.max(9, Math.round(size * 0.5)),
    }}>{p.initial}</span>
  );
}

// ─── InkText: each new char animates as ink landing on paper ─────────────────
function InkText({ value }) {
  // Persist per-char keys across renders. New chars get fresh keys (=> animation).
  const ref = useRef({ chars: [], counter: 0 });
  const { chars: prev, counter: prevCounter } = ref.current;
  let counter = prevCounter;

  let commonLen = 0;
  while (commonLen < prev.length && commonLen < value.length && prev[commonLen].char === value[commonLen]) {
    commonLen++;
  }
  const next = [];
  for (let i = 0; i < commonLen; i++) next.push(prev[i]);
  for (let i = commonLen; i < value.length; i++) {
    next.push({ key: `c${++counter}`, char: value[i] });
  }
  ref.current = { chars: next, counter };

  return (
    <span className="ink-text">
      {next.map(({ key, char }) => (
        <span key={key} className={"ink-char" + (char === ' ' ? ' space' : '')}>
          {char === ' ' ? '\u00A0' : char}
        </span>
      ))}
    </span>
  );
}

// ─── Odometer digit ──────────────────────────────────────────────────────────
function Digit({ d }) {
  return (
    <span className="digit-slot">
      <span className="digit-roll" style={{ transform: `translateY(-${d}em)` }}>
        {[0,1,2,3,4,5,6,7,8,9].map(n => <span key={n}>{n}</span>)}
      </span>
    </span>
  );
}
function AmountRoll({ value }) {
  // value is an int
  const formatted = formatRupees(value || 0);
  return (
    <span className="digits">
      {formatted.split('').map((ch, i) => (
        ch === ','
          ? <span key={i} className="digit-slot sep">,</span>
          : <Digit key={i} d={parseInt(ch, 10)} />
      ))}
    </span>
  );
}

// ─── Glyph palette (peel-open) ───────────────────────────────────────────────
function GlyphPalette({ current, onPick, onClose }) {
  // close on outside click
  const ref = useRef();
  useEffect(() => {
    const fn = (e) => { if (ref.current && !ref.current.contains(e.target)) onClose(); };
    const t = setTimeout(() => document.addEventListener('mousedown', fn), 0);
    return () => { clearTimeout(t); document.removeEventListener('mousedown', fn); };
  }, [onClose]);
  return (
    <div className="glyph-palette" ref={ref} onMouseDown={(e) => e.stopPropagation()}>
      {CATEGORIES.map((c, i) => (
        <button
          key={c.glyph}
          className={`gp-item${c.kind === 'symbol' ? ' symbol' : ''}${c.glyph === current ? ' active' : ''}`}
          style={{ animationDelay: `${i * 30}ms` }}
          onClick={() => onPick(c.glyph)}
        >{c.glyph}</button>
      ))}
    </div>
  );
}

// ─── Category row ────────────────────────────────────────────────────────────
function CategoryRow({ title, setTitle, glyph, glyphStampKey, paletteOpen, setPaletteOpen, pickGlyph, inputRef }) {
  const effectiveGlyph = glyph || '⋯';
  const isSymbol = effectiveGlyph !== '🍜' && effectiveGlyph !== '🛍';
  const focusInput = () => inputRef.current?.focus();

  return (
    <div className="row" onClick={focusInput}>
      <div className="row-icon glyph-host">
        <button
          aria-label="category"
          onClick={(e) => { e.stopPropagation(); setPaletteOpen(v => !v); }}
        >
          <span
            key={glyphStampKey /* re-animate on autosuggest */}
            className={`glyph${isSymbol ? ' symbol' : ''} glyph-stamp`}
          >{effectiveGlyph}</span>
        </button>
        {paletteOpen && (
          <GlyphPalette
            current={glyph}
            onPick={(g) => { pickGlyph(g); setPaletteOpen(false); }}
            onClose={() => setPaletteOpen(false)}
          />
        )}
      </div>

      <div className="row-body" onClick={focusInput}>
        <div className="row-label">what was this for?</div>
        <div className="ink-input" style={{ position: 'relative' }}>
          <input
            ref={inputRef}
            className="real-input"
            value={title}
            onChange={(e) => setTitle(e.target.value.slice(0, 38))}
            spellCheck={false}
            autoComplete="off"
            style={{
              fontFamily: 'var(--font-display)',
              fontWeight: 500,
              fontSize: 17,
              letterSpacing: '-0.015em',
              lineHeight: 1.2,
            }}
          />
          <div className="row-value" style={{ position: 'relative', zIndex: 1 }}>
            {title.length === 0
              ? <span className="ink-placeholder">untitled split</span>
              : <InkText value={title} />}
            <span className="ink-caret" aria-hidden />
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Amount row ──────────────────────────────────────────────────────────────
function AmountRow({ amount, setAmount }) {
  const [editing, setEditing] = useState(false);
  const inputRef = useRef();
  useEffect(() => { if (editing) inputRef.current?.focus(); }, [editing]);
  const zero = !amount || amount === 0;

  return (
    <div className="row" onClick={() => setEditing(true)}>
      <div className="row-icon">
        <span className="rupee">₹</span>
      </div>
      <div className="row-body">
        <div className="row-label">amount</div>
        <div className={`amount-display${zero ? ' zero' : ''}`} style={{ position: 'relative' }}>
          <span className="cur">₹</span>
          <AmountRoll value={amount} />
          <input
            ref={inputRef}
            className="amount-input-real"
            type="text"
            inputMode="numeric"
            value={amount || ''}
            onChange={(e) => {
              const v = e.target.value.replace(/\D/g, '').slice(0, 7);
              setAmount(v ? parseInt(v, 10) : 0);
            }}
            onBlur={() => setEditing(false)}
            tabIndex={-1}
          />
        </div>
      </div>
    </div>
  );
}

// ─── Paid-by row ─────────────────────────────────────────────────────────────
function PaidByRow({ paidBy, cyclePayer }) {
  const p = PERSON_BY_ID[paidBy];
  return (
    <div className="row" onClick={cyclePayer}>
      <div className="row-icon">
        <span className="glyph symbol" style={{ fontSize: 18 }}>↥</span>
      </div>
      <div className="row-body">
        <div className="row-label">paid by</div>
      </div>
      <div className="row-aside">
        <button className="pb-pill" onClick={(e) => { e.stopPropagation(); cyclePayer(); }}>
          <Avatar p={p} />
          {p.name}
          <span style={{ color: 'var(--ink-mute)', fontFamily: 'var(--font-mono)', fontSize: 11, marginLeft: 2 }}>›</span>
        </button>
      </div>
    </div>
  );
}

// ─── Split-with row (chips) ──────────────────────────────────────────────────
function SplitWithRow({ splitees, onOpenPicker, stampedIds }) {
  return (
    <div className="row" onClick={onOpenPicker} style={{ alignItems: 'flex-start' }}>
      <div className="row-icon" style={{ paddingTop: 14, alignSelf: 'flex-start' }}>
        <span className="glyph symbol" style={{ fontSize: 18 }}>⇌</span>
      </div>
      <div className="row-body" style={{ gridColumn: '2 / 4', paddingRight: 16 }}>
        <div className="row-label">split with</div>
        <div className="chip-row">
          <span className={`person-chip selected${stampedIds.has('you') ? ' stamp-in' : ''}`}>
            <Avatar p={PERSON_BY_ID.you} />
            you
          </span>
          {splitees.filter(id => id !== 'you').map(id => (
            <span key={id} className={`person-chip selected${stampedIds.has(id) ? ' stamp-in' : ''}`}>
              <Avatar p={PERSON_BY_ID[id]} />
              {PERSON_BY_ID[id].name.toLowerCase()}
            </span>
          ))}
          <button className="add-chip" onClick={(e) => { e.stopPropagation(); onOpenPicker(); }}>
            <span className="plus">+</span> add
          </button>
        </div>
      </div>
    </div>
  );
}

// ─── Split preview strip ─────────────────────────────────────────────────────
function SplitPreview({ open, amount, splitees }) {
  const count = splitees.length;
  const perPerson = count > 0 ? Math.floor(amount / count) : 0;
  // segments for the bar (1 per person, equal)
  const segColors = splitees.map(id => COLORS[id] || 'var(--ink)');
  return (
    <div className={`split-preview-wrap${open ? ' open' : ''}`}>
      <div className="inner">
        <div className="split-preview">
          <div className="row-icon" />
          <div className="sp-bar-col">
            <div className="sp-bar">
              {segColors.map((c, i) => (
                <span
                  key={i}
                  className="sp-seg"
                  style={{
                    background: c,
                    width: `${100 / count}%`,
                    animationDelay: `${i * 70}ms`,
                  }}
                />
              ))}
            </div>
          </div>
          <div className="sp-meta">
            <span className="ticker" key={perPerson}>₹{formatRupees(perPerson)}</span>
            <span className="sub">each · equal</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── + more ghost row + option sheet ─────────────────────────────────────────
function MoreGhost({ onOpen }) {
  return (
    <div className="more-ghost" onClick={onOpen}>
      <div className="mg-icon">+</div>
      <div className="mg-text">more</div>
    </div>
  );
}
function MoreSheet({ onPick, used, onClose }) {
  const ref = useRef();
  useEffect(() => {
    const fn = (e) => { if (ref.current && !ref.current.contains(e.target)) onClose(); };
    const t = setTimeout(() => document.addEventListener('mousedown', fn), 0);
    return () => { clearTimeout(t); document.removeEventListener('mousedown', fn); };
  }, [onClose]);
  return (
    <div className="mini-sheet" ref={ref} onMouseDown={(e) => e.stopPropagation()}>
      <button className="ms-opt" disabled={used.tag} onClick={() => onPick('tag')}>
        <span className="ms-glyph">#</span> add tag
        <span className="ms-hint">{used.tag ? 'added' : ''}</span>
      </button>
      <button className="ms-opt" disabled={used.receipt} onClick={() => onPick('receipt')}>
        <span className="ms-glyph">▭</span> attach receipt
        <span className="ms-hint">{used.receipt ? 'added' : ''}</span>
      </button>
      <button className="ms-opt" disabled={used.note} onClick={() => onPick('note')}>
        <span className="ms-glyph">¶</span> add note
        <span className="ms-hint">{used.note ? 'added' : ''}</span>
      </button>
    </div>
  );
}

// ─── Picker (bottom-sheet) ───────────────────────────────────────────────────
function PickerSheet({ open, splitees, onClose, onCommit }) {
  const [draft, setDraft] = useState(new Set(splitees));
  const [q, setQ] = useState('');
  useEffect(() => { if (open) setDraft(new Set(splitees)); /* eslint-disable-next-line */ }, [open]);

  const toggle = (id) => {
    if (id === 'you') return;
    setDraft(prev => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id); else next.add(id);
      return next;
    });
  };

  const matches = (p) => !q || p.name.toLowerCase().includes(q.toLowerCase());

  const recent  = PEOPLE.filter(p => p.recent && p.id !== 'you' && matches(p));
  const all     = PEOPLE.filter(p => !p.recent && matches(p));

  const PersonRow = ({ p, sub }) => (
    <div
      className={`sheet-row${draft.has(p.id) ? ' selected' : ''}${p.locked ? ' locked' : ''}`}
      onClick={() => toggle(p.id)}
    >
      <Avatar p={p} size={32} />
      <div className="text">
        <div className="nm">{p.name}</div>
        <div className="sub">{sub || p.phone}</div>
      </div>
      <div className="sheet-check">
        <svg viewBox="0 0 12 12" fill="none">
          <path d="M2 6.5L5 9.5L10 3" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </div>
    </div>
  );

  const matchedGroups = GROUPS.filter(g => !q || g.name.toLowerCase().includes(q.toLowerCase()));

  return (
    <div style={{display: 'contents'}}>
      <div className={`scrim${open ? ' on' : ''}`} onClick={onClose} />
      <div className={`sheet${open ? ' on' : ''}`}>
        <div className="sheet-handle" />
        <div className="sheet-header">
          <div className="sheet-title">split with</div>
          <button
            className="sheet-done"
            onClick={() => onCommit([...draft])}
            disabled={draft.size <= 1}
          >done</button>
        </div>
        <div className="sheet-search">
          <svg viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth="2"/>
            <path d="M20 20l-3-3" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
          </svg>
          <input
            placeholder="search people or groups"
            value={q}
            onChange={(e) => setQ(e.target.value)}
          />
        </div>
        <div className="sheet-scroll">
          {!q && (
            <div style={{display: 'contents'}}>
              <div className="sheet-section">recent</div>
              <PersonRow p={PERSON_BY_ID.you} sub="always included" />
              {recent.map(p => <PersonRow key={p.id} p={p} />)}
            </div>
          )}
          {q && (
            <div style={{display: 'contents'}}>
              <div className="sheet-section">people</div>
              {[...recent, ...all].map(p => <PersonRow key={p.id} p={p} />)}
            </div>
          )}

          <div className="sheet-section">groups</div>
          {matchedGroups.map(g => (
            <div
              key={g.id}
              className="sheet-row"
              onClick={() => {
                const next = new Set([...draft, ...g.members]);
                setDraft(next);
              }}
            >
              <span className="av" style={{
                width: 32, height: 32, background: 'var(--bg-warm)',
                color: 'var(--ink)', fontFamily: 'system-ui',
              }}>{g.emoji}</span>
              <div className="text">
                <div className="nm">{g.name}</div>
                <div className="sub">{g.members.length} members · add all</div>
              </div>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 14,
                color: 'var(--ink-mute)',
              }}>›</div>
            </div>
          ))}

          {!q && (
            <div style={{display: 'contents'}}>
              <div className="sheet-section">all contacts</div>
              {all.map(p => <PersonRow key={p.id} p={p} />)}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// ─── Optional rows (tag / receipt / note) ────────────────────────────────────
function TagRow({ value }) {
  return (
    <div className="row opt-row">
      <div className="row-icon"><span className="glyph symbol">#</span></div>
      <div className="row-body">
        <div className="row-label">tag</div>
        <div className="row-value"><span className="tag-pill">#{value}</span></div>
      </div>
    </div>
  );
}
function ReceiptRow() {
  return (
    <div className="row opt-row" style={{ alignItems: 'flex-start' }}>
      <div className="row-icon" style={{ paddingTop: 14, alignSelf: 'flex-start' }}>
        <span className="glyph symbol">▭</span>
      </div>
      <div className="row-body" style={{ paddingTop: 12, paddingBottom: 12 }}>
        <div className="row-label">receipt</div>
        <div className="receipt-thumb">
          <span className="receipt-img" />
          <span className="receipt-name">
            IMG_4218.jpg
            <span className="meta">tap to view · 184 kb</span>
          </span>
        </div>
      </div>
    </div>
  );
}
function NoteRow({ value }) {
  return (
    <div className="row opt-row">
      <div className="row-icon"><span className="glyph symbol">¶</span></div>
      <div className="row-body">
        <div className="row-label">note</div>
        <div className="note-value">"{value}"</div>
      </div>
    </div>
  );
}

// ─── Composer (the whole screen) ─────────────────────────────────────────────
function ExpenseComposer({ initial }) {
  const [title, setTitle] = useState(initial.title || '');
  const [glyphOverride, setGlyphOverride] = useState(initial.glyph || null);
  const [glyphStampKey, setGlyphStampKey] = useState(0);
  const [paletteOpen, setPaletteOpen] = useState(false);
  const [amount, setAmount] = useState(initial.amount || 0);
  const [paidBy, setPaidBy] = useState(initial.paidBy || 'you');
  const [splitees, setSplitees] = useState(initial.splitees || ['you']);
  const [pickerOpen, setPickerOpen] = useState(!!initial.pickerOpen);
  const [moreSheetOpen, setMoreSheetOpen] = useState(false);
  const [extras, setExtras] = useState(initial.extras || { tag: null, receipt: false, note: null });
  const [ctaBreathing, setCtaBreathing] = useState(false);
  const [stampedIds, setStampedIds] = useState(new Set()); // tracks fresh chips for stamp anim

  const titleInputRef = useRef();

  // category autosuggest — re-stamp glyph when autosuggest changes
  const autoGlyph = useMemo(() => suggestGlyph(title), [title]);
  const glyph = glyphOverride || autoGlyph;
  const prevGlyphRef = useRef(glyph);
  useEffect(() => {
    if (prevGlyphRef.current !== glyph && glyph) {
      setGlyphStampKey(k => k + 1);
    }
    prevGlyphRef.current = glyph;
  }, [glyph]);

  // CTA enable + breathe
  const canSubmit = amount > 0 && splitees.length >= 2;
  const prevCanRef = useRef(canSubmit);
  useEffect(() => {
    if (!prevCanRef.current && canSubmit) {
      setCtaBreathing(true);
      const t = setTimeout(() => setCtaBreathing(false), 720);
      return () => clearTimeout(t);
    }
    prevCanRef.current = canSubmit;
  }, [canSubmit]);

  // clear stamp class after animation
  useEffect(() => {
    if (stampedIds.size === 0) return;
    const t = setTimeout(() => setStampedIds(new Set()), 600);
    return () => clearTimeout(t);
  }, [stampedIds]);

  const pickGlyph = (g) => {
    setGlyphOverride(g);
    setGlyphStampKey(k => k + 1);
  };

  const commitSplitees = (ids) => {
    // figure out which are new
    const fresh = new Set(ids.filter(id => !splitees.includes(id)));
    setSplitees(ids);
    setStampedIds(fresh);
    setPickerOpen(false);
  };

  const cyclePayer = () => {
    const idx = splitees.indexOf(paidBy);
    if (splitees.length < 2) return;
    setPaidBy(splitees[(idx + 1) % splitees.length] || 'you');
  };

  const pickMore = (kind) => {
    setMoreSheetOpen(false);
    if (kind === 'tag')     setExtras(e => ({ ...e, tag: 'goa-trip' }));
    if (kind === 'receipt') setExtras(e => ({ ...e, receipt: true }));
    if (kind === 'note')    setExtras(e => ({ ...e, note: 'table for 3 by the window' }));
  };

  const allExtrasUsed = !!extras.tag && extras.receipt && !!extras.note;
  const showSplitPreview = splitees.length >= 2 && amount > 0;

  return (
    <window.IOSDevice width={390} height={844}>
      <div className="screen">
        <div className="page">
          {/* top bar */}
          <div className="topbar">
            <button className="tb-icon" aria-label="cancel">
              <svg viewBox="0 0 14 14" fill="none">
                <path d="M2 2l10 10M12 2L2 12" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
              </svg>
            </button>
            <div className="tb-title">add expense</div>
            <button className="tb-icon" aria-label="more">
              <span className="tb-dots"><span /><span /><span /></span>
            </button>
          </div>

          {/* form */}
          <div className="form-scroll">
            <div className="composer">
              <CategoryRow
                title={title}
                setTitle={setTitle}
                glyph={glyph}
                glyphStampKey={glyphStampKey}
                paletteOpen={paletteOpen}
                setPaletteOpen={setPaletteOpen}
                pickGlyph={pickGlyph}
                inputRef={titleInputRef}
              />
              <AmountRow amount={amount} setAmount={setAmount} />
              <PaidByRow paidBy={paidBy} cyclePayer={cyclePayer} />
              <SplitWithRow
                splitees={splitees}
                onOpenPicker={() => setPickerOpen(true)}
                stampedIds={stampedIds}
              />
              <SplitPreview open={showSplitPreview} amount={amount} splitees={splitees} />

              {extras.tag     && <TagRow value={extras.tag} />}
              {extras.receipt && <ReceiptRow />}
              {extras.note    && <NoteRow value={extras.note} />}

              {!allExtrasUsed && (
                <div className="mini-sheet-anchor">
                  <MoreGhost onOpen={() => setMoreSheetOpen(true)} />
                  {moreSheetOpen && (
                    <MoreSheet
                      onPick={pickMore}
                      used={{ tag: !!extras.tag, receipt: extras.receipt, note: !!extras.note }}
                      onClose={() => setMoreSheetOpen(false)}
                    />
                  )}
                </div>
              )}
            </div>
          </div>

          {/* sticky CTA */}
          <div className="sticky-cta">
            <button
              className={`cta-btn${ctaBreathing ? ' breathing' : ''}`}
              disabled={!canSubmit}
            >
              next: how to split?
              <span className="arr">→</span>
            </button>
          </div>

          {/* picker */}
          <PickerSheet
            open={pickerOpen}
            splitees={splitees}
            onClose={() => setPickerOpen(false)}
            onCommit={commitSplitees}
          />
        </div>
      </div>
    </window.IOSDevice>
  );
}

// ─── Canvas: 5 frames side by side ───────────────────────────────────────────
const FRAMES = [
  {
    num: '01', name: 'empty',
    desc: 'nothing yet. cta locked.',
    initial: {},
  },
  {
    num: '02', name: 'mid-entry',
    desc: 'title typed, ₹4,200 in. glyph autosuggested. no people yet — cta still locked.',
    initial: { title: 'farzi cafe', amount: 4200 },
  },
  {
    num: '03', name: 'populated',
    desc: 'you + aarav + priya. split preview live. cta ready.',
    initial: { title: 'farzi cafe', amount: 4200, splitees: ['you','aarav','priya'] },
  },
  {
    num: '04', name: 'optionals expanded',
    desc: 'tag · receipt · note all materialized. + more is gone.',
    initial: {
      title: 'farzi cafe', amount: 4200, splitees: ['you','aarav','priya'],
      extras: { tag: 'goa-trip', receipt: true, note: 'table for 3 by the window' },
    },
  },
  {
    num: '05', name: 'picker open',
    desc: 'bottom sheet over the populated form. you + aarav + priya selected. rohan unselected.',
    initial: {
      title: 'farzi cafe', amount: 4200, splitees: ['you','aarav','priya'],
      pickerOpen: true,
    },
  },
];

function App() {
  return (
    <div className="canvas">
      {FRAMES.map((f) => (
        <div className="frame-col" key={f.num}>
          <div className="frame-label">
            <span className="frame-num">{f.num}</span>
            <span className="frame-name">{f.name}</span>
          </div>
          <ExpenseComposer initial={f.initial} />
          <div className="frame-desc">{f.desc}</div>
        </div>
      ))}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);