// Desktop Posteingang — list + reading pane + reply/convert/link.

function matchEquipmentId(hint, equipment) {
  if (!hint) return null;
  const h = hint.toLowerCase();
  let best = null;
  equipment.forEach((e) => { const hay = (e.name + ' ' + e.cat + ' ' + e.kind).toLowerCase(); if (hay.includes(h) || h.includes(e.name.toLowerCase().split(' ')[0])) best = e.id; });
  if (!best) { if (h.includes('lautsprecher') || h.includes('box') || h.includes('pa') || h.includes('musik')) best = (equipment.find((e) => e.kind === 'Tontechnik') || {}).id;
    else if (h.includes('anhänger') || h.includes('umzug')) best = (equipment.find((e) => e.kind === 'Anhänger') || {}).id;
    else if (h.includes('mikro') || h.includes('funk')) best = (equipment.find((e) => /mikro|funk/i.test(e.cat)) || {}).id; }
  return best;
}

// lightweight request parsing (mirrors the mobile parser intent)
const PARSED = {
  m1: { equipmentHint: 'JBL EON 712', startISO: '2026-06-13', endISO: '2026-06-14', purpose: 'Hochzeit', deliveryAddress: 'Seestr. 9, Herrsching', phone: '0170 2233445' },
  m2: { equipmentHint: 'Anhänger 750kg', startISO: '2026-05-24', endISO: '2026-05-24', purpose: 'Umzug', deliveryAddress: '', phone: '' },
  m3: { equipmentHint: 'Beschallungsanlage', startISO: '2026-07-18', endISO: '2026-07-19', purpose: 'Sommerfest', deliveryAddress: 'Sportplatz Germering', phone: '' },
  m6: { equipmentHint: 'Funkmikrofone', startISO: '2026-06-05', endISO: '2026-06-05', purpose: 'Konferenz', deliveryAddress: '', phone: '' },
};
const withParsed = (emails) => emails.map((m) => m.kind === 'request' ? { ...m, parsed: PARSED[m.id] || null } : m);

function ScreenInbox({ go, equipment, rentals, onConvert }) {
  const t = useTheme();
  const toast = useToast();
  const [emails, setEmails] = useState(() => withParsed(SEED_EMAILS));
  const [filter, setFilter] = useState('alle');
  const [selId, setSelId] = useState(null);
  const [reply, setReply] = useState(null);
  const [link, setLink] = useState(null);
  const [confirmDel, setConfirmDel] = useState(null);
  const [confirmBulk, setConfirmBulk] = useState(false);
  const [selectMode, setSelectMode] = useState(false);
  const [picked, setPicked] = useState(() => new Set());

  const visible = emails.filter((m) => !m.archived).filter((m) => {
    if (filter === 'anfragen') return m.kind === 'request' && !m.linkedRentalId;
    if (filter === 'verknuepft') return !!m.linkedRentalId;
    if (filter === 'markiert') return m.starred;
    return true;
  });
  const reqCount = emails.filter((m) => !m.archived && m.kind === 'request' && !m.linkedRentalId).length;
  const unreadCount = emails.filter((m) => !m.archived && m.unread).length;
  const selected = emails.find((m) => m.id === selId);

  const open = (m) => { setEmails((prev) => prev.map((x) => x.id === m.id ? { ...x, unread: false } : x)); setSelId(m.id); };
  const sendReply = (m, text) => { setEmails((prev) => prev.map((x) => x.id === m.id ? { ...x, replied: true } : x)); toast('Antwort gesendet'); };
  const doLink = (m, r) => { setEmails((prev) => prev.map((x) => x.id === m.id ? { ...x, linkedRentalId: r.id } : x)); toast(`Verknüpft mit ${r.tenantName}`); };
  const doUnlink = (m) => { setEmails((prev) => prev.map((x) => x.id === m.id ? { ...x, linkedRentalId: null } : x)); toast('Verknüpfung aufgehoben'); };
  const archive = (m) => { setEmails((prev) => prev.map((x) => x.id === m.id ? { ...x, archived: true } : x)); setSelId(null); toast('Archiviert'); };
  const toggleStar = (m) => setEmails((prev) => prev.map((x) => x.id === m.id ? { ...x, starred: !x.starred } : x));
  const del = (m) => { setEmails((prev) => prev.filter((x) => x.id !== m.id)); if (selId === m.id) setSelId(null); setConfirmDel(null); toast('E-Mail gelöscht'); };
  const togglePick = (id) => setPicked((prev) => { const n = new Set(prev); n.has(id) ? n.delete(id) : n.add(id); return n; });
  const delBulk = () => { const ids = picked; setEmails((prev) => prev.filter((x) => !ids.has(x.id))); if (selId && ids.has(selId)) setSelId(null); setPicked(new Set()); setSelectMode(false); setConfirmBulk(false); toast(`${ids.size} E-Mail${ids.size === 1 ? '' : 's'} gelöscht`); };

  return (
    <>
      <Toolbar title="Posteingang" subtitle={`${unreadCount} ungelesen · ${reqCount} Anfragen`}>
        {selectMode ? (
          <>
            <Button variant="soft" size="sm" onClick={() => { setSelectMode(false); setPicked(new Set()); }}>Abbrechen</Button>
            <Button variant="danger" size="sm" icon={icons.trash} disabled={picked.size === 0} onClick={() => setConfirmBulk(true)}>{picked.size} löschen</Button>
          </>
        ) : (
          <>
            <Button variant="soft" size="sm" icon={icons.check} onClick={() => setSelectMode(true)}>Auswählen</Button>
            <Button variant="soft" size="sm" icon={icons.refresh} onClick={() => toast('Postfach aktualisiert')}>Abrufen</Button>
          </>
        )}
      </Toolbar>
      <div style={{ flex: 1, display: 'flex', minHeight: 0 }}>
        {/* list */}
        <div style={{ width: 380, flexShrink: 0, borderRight: `0.5px solid ${t.sep}`, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
          <div style={{ padding: '12px 16px', borderBottom: `0.5px solid ${t.sep}` }}>
            <Segmented size="sm" value={filter} onChange={setFilter} style={{ display: 'flex', width: '100%' }}
              options={[['alle', 'Alle'], ['anfragen', 'Anfragen', reqCount], ['verknuepft', 'Verknüpft'], ['markiert', '★']]}/>
          </div>
          <div className="rf-scroll" style={{ flex: 1, overflow: 'auto' }}>
            {visible.length === 0 && <div style={{ padding: '40px 20px', textAlign: 'center', color: t.textSec, fontSize: 13 }}>Keine Nachrichten.</div>}
            {visible.map((m) => {
              const isReq = m.kind === 'request';
              const sel = m.id === selId;
              const linked = m.linkedRentalId && rentals.find((r) => r.id === m.linkedRentalId);
              const checked = picked.has(m.id);
              const rowClick = selectMode ? () => togglePick(m.id) : () => open(m);
              return (
                <div key={m.id} style={{ position: 'relative' }} className="rf-inbox-row">
                <Pressable onClick={rowClick} scale={0.997} hoverBg={sel ? undefined : t.cardAlt}>
                  <div style={{ display: 'flex', gap: 11, padding: '12px 16px', borderBottom: `0.5px solid ${t.sep}`, background: sel ? t.chip : (checked ? t.accentSoft : 'transparent'), borderLeft: sel ? `2.5px solid ${t.text}` : (checked ? `2.5px solid ${t.accent}` : '2.5px solid transparent') }}>
                    {selectMode && (
                      <div style={{ display: 'flex', alignItems: 'center', flexShrink: 0 }}>
                        <div style={{ width: 20, height: 20, borderRadius: 6, border: `1.5px solid ${checked ? t.accent : t.sep}`, background: checked ? t.accent : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                          {checked && <Icon d={icons.check} color="#fff" size={12} sw={3} />}
                        </div>
                      </div>
                    )}
                    <div style={{ position: 'relative', flexShrink: 0 }}>
                      <Avatar name={m.from} size={40}/>
                      {m.unread && <span style={{ position: 'absolute', top: -1, right: -1, width: 11, height: 11, borderRadius: 6, background: t.accent, boxShadow: `0 0 0 2px ${sel ? t.card : t.card}` }}/>}
                    </div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                        <div style={{ flex: 1, minWidth: 0, fontSize: 14, fontWeight: m.unread ? 700 : 600, color: t.text, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.from}</div>
                        <div style={{ fontSize: 11, color: t.textSec, flexShrink: 0 }}>{fromISO(m.dateISO).getDate()}. {DE_MONTHS_SHORT[fromISO(m.dateISO).getMonth()]}</div>
                      </div>
                      <div style={{ fontSize: 13, fontWeight: m.unread ? 600 : 500, color: m.unread ? t.text : t.textSec, marginTop: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.subject}</div>
                      <div style={{ fontSize: 12, color: t.textSec, marginTop: 2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.body.split('\n').filter(Boolean)[0]}</div>
                      <div style={{ display: 'flex', gap: 5, marginTop: 6, alignItems: 'center' }}>
                        {isReq && !m.linkedRentalId && <span style={{ fontSize: 9.5, fontWeight: 700, color: t.accent, background: t.accentSoft, padding: '2px 7px', borderRadius: 100, display: 'inline-flex', alignItems: 'center', gap: 3 }}><Icon d={icons.bolt} color={t.accent} size={10} sw={2.4}/>ANFRAGE</span>}
                        {linked && <span style={{ fontSize: 9.5, fontWeight: 700, color: t.green, background: t.greenSoft, padding: '2px 7px', borderRadius: 100 }}>✓ {linked.tenantName.split(' ')[0]}</span>}
                        {m.replied && <span style={{ fontSize: 9.5, fontWeight: 700, color: t.textSec, background: t.chip, padding: '2px 7px', borderRadius: 100 }}>Beantwortet</span>}
                        {m.starred && <Icon d={icons.star} color={t.orange} size={12} fill sw={1.5}/>}
                      </div>
                    </div>
                  </div>
                </Pressable>
                {!selectMode && (
                  <div
                    role="button"
                    title="Löschen"
                    onClick={(e) => { e.stopPropagation(); setConfirmDel(m); }}
                    className="rf-inbox-del"
                    style={{ position: 'absolute', bottom: 10, right: 10, width: 28, height: 28, borderRadius: 7, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', background: (t.red || '#FF3B30') + '15', opacity: 0, transition: 'opacity 120ms ease' }}
                    onMouseEnter={(e) => { e.currentTarget.style.background = (t.red || '#FF3B30') + '28'; }}
                    onMouseLeave={(e) => { e.currentTarget.style.background = (t.red || '#FF3B30') + '15'; }}
                  >
                    <Icon d={icons.trash} color={t.red || '#FF3B30'} size={13} sw={2} />
                  </div>
                )}
                </div>
              );
            })}
          </div>
        </div>

        {/* reading pane */}
        <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
          {selected ? (
            <InboxDetail email={selected} equipment={equipment} rentals={rentals}
              onConvert={onConvert} onReply={() => setReply(selected)} onLink={() => setLink(selected)}
              onArchive={() => archive(selected)} onToggleStar={() => toggleStar(selected)}
              onDelete={() => setConfirmDel(selected)} go={go}/>
          ) : (
            <Empty icon={icons.mail} title="Keine Nachricht gewählt" sub="Wähle links eine E-Mail. Anfragen kannst du direkt in einen Mietvorgang umwandeln."/>
          )}
        </div>
      </div>

      <ReplySheet open={!!reply} email={reply} onClose={() => setReply(null)} onSend={sendReply}/>
      <LinkSheet open={!!link} email={link} rentals={rentals} equipment={equipment} onClose={() => setLink(null)} onPick={doLink} onUnlink={doUnlink}/>
      <Confirm open={!!confirmDel} title="E-Mail löschen?"
        message={confirmDel ? `„${confirmDel.subject}“ von ${confirmDel.from} wird unwiderruflich entfernt.` : ''}
        onConfirm={() => del(confirmDel)} onClose={() => setConfirmDel(null)} />
      <Confirm open={confirmBulk} title={`${picked.size} E-Mail${picked.size === 1 ? '' : 's'} löschen?`}
        message="Die ausgewählten Nachrichten werden unwiderruflich entfernt."
        onConfirm={delBulk} onClose={() => setConfirmBulk(false)} />
      <style>{`.rf-inbox-row:hover .rf-inbox-del { opacity: 1 !important; }`}</style>
    </>
  );
}

function InboxDetail({ email, equipment, rentals, onConvert, onReply, onLink, onArchive, onToggleStar, onDelete, go }) {
  const t = useTheme();
  const m = email;
  const isReq = m.kind === 'request';
  const linked = m.linkedRentalId && rentals.find((r) => r.id === m.linkedRentalId);
  const eqGuess = isReq && m.parsed ? equipment.find((e) => e.id === matchEquipmentId(m.parsed.equipmentHint, equipment)) : null;

  return (
    <>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '12px 24px', borderBottom: `0.5px solid ${t.sep}`, flexShrink: 0 }}>
        <div style={{ flex: 1 }}/>
        <IconBtn icon={icons.star} color={m.starred ? t.orange : t.textSec} onClick={onToggleStar} title="Markieren"/>
        <IconBtn icon={icons.archive} onClick={onArchive} title="Archivieren"/>
        <IconBtn icon={icons.reply} onClick={onReply} title="Antworten"/>
        <IconBtn icon={icons.trash} color={t.red} onClick={onDelete} title="Löschen"/>
      </div>
      <Scroll padding={0}>
        <div style={{ padding: '24px 30px', maxWidth: 760 }}>
          <div style={{ fontSize: 24, fontWeight: 700, color: t.text, letterSpacing: -0.5, lineHeight: 1.25 }}>{m.subject}</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 13, marginTop: 16 }}>
            <Avatar name={m.from} size={46}/>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 15, fontWeight: 700, color: t.text }}>{m.from}</div>
              <div style={{ fontSize: 12.5, color: t.textSec }}>{m.fromEmail}</div>
            </div>
            <div style={{ fontSize: 12.5, color: t.textSec }}>{fmtDateDE(m.dateISO)} · {m.time}</div>
          </div>

          {linked && (
            <div style={{ marginTop: 16, padding: '12px 14px', background: t.greenSoft, borderRadius: 12, display: 'flex', alignItems: 'center', gap: 10 }}>
              <Icon d={icons.link} color={t.green} size={17} sw={2}/>
              <div style={{ flex: 1, fontSize: 13, color: t.text }}>Verknüpft mit <strong>{linked.tenantName}</strong> · {linked.equipmentName}</div>
              <Pressable onClick={() => go('rentals', { rentalId: linked.id })}><div style={{ fontSize: 12.5, fontWeight: 600, color: t.green }}>Öffnen ›</div></Pressable>
            </div>
          )}

          {isReq && m.parsed && (
            <div style={{ marginTop: 18, background: t.card, borderRadius: 14, overflow: 'hidden', border: `1px solid ${t.accent}26`, boxShadow: t.shadowCard }}>
              <div style={{ background: t.accentSoft, padding: '10px 16px', display: 'flex', alignItems: 'center', gap: 8 }}>
                <Icon d={icons.bolt} color={t.accent} size={14} sw={2.2}/>
                <span style={{ fontSize: 11.5, fontWeight: 700, color: t.accent, letterSpacing: 0.4 }}>ERKANNTE ANFRAGE</span>
              </div>
              <div style={{ padding: '4px 16px 8px' }}>
                <SumRow label="Equipment" value={eqGuess ? eqGuess.name : m.parsed.equipmentHint} hint={eqGuess ? null : 'kein genaues Match'}/>
                {m.parsed.startISO && <SumRow label="Zeitraum" value={fmtRange(m.parsed.startISO, m.parsed.endISO)} sub={`${daysBetween(m.parsed.startISO, m.parsed.endISO)} Tag(e)`}/>}
                {m.parsed.purpose && <SumRow label="Zweck" value={m.parsed.purpose}/>}
                {m.parsed.deliveryAddress && <SumRow label="Lieferung" value={m.parsed.deliveryAddress}/>}
                {m.parsed.phone && <SumRow label="Telefon" value={m.parsed.phone}/>}
              </div>
            </div>
          )}

          <div style={{ marginTop: 18, fontSize: 14.5, color: t.text, lineHeight: 1.65, whiteSpace: 'pre-wrap' }}>{m.body}</div>

          {m.replied && (
            <div style={{ marginTop: 18, padding: '12px 14px', background: t.cardAlt, borderRadius: 12, fontSize: 12.5, color: t.textSec, display: 'flex', alignItems: 'center', gap: 8 }}>
              <Icon d={icons.check} color={t.green} size={15} sw={2.4}/> Du hast auf diese E-Mail bereits geantwortet.
            </div>
          )}

          {/* actions */}
          <div style={{ display: 'flex', gap: 10, marginTop: 24, flexWrap: 'wrap' }}>
            {isReq && !m.linkedRentalId && <Button variant="accent" icon={icons.bolt} onClick={() => onConvert(m)}>In Mietvorgang umwandeln</Button>}
            <Button variant="primary" icon={icons.reply} onClick={onReply}>Antworten</Button>
            <Button variant="soft" icon={icons.link} onClick={onLink}>{linked ? 'Verknüpfung ändern' : 'Mit Mieter verknüpfen'}</Button>
          </div>
        </div>
      </Scroll>
    </>
  );
}

function SumRow({ label, value, sub, hint }) {
  const t = useTheme();
  return (
    <div style={{ padding: '9px 0', display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12, borderBottom: `0.5px solid ${t.sep}` }}>
      <div style={{ fontSize: 12.5, color: t.textSec, fontWeight: 500, minWidth: 90 }}>{label}</div>
      <div style={{ flex: 1, textAlign: 'right' }}>
        <div style={{ fontSize: 13.5, fontWeight: 600, color: t.text }}>{value}</div>
        {sub && <div style={{ fontSize: 11, color: t.textSec, marginTop: 1 }}>{sub}</div>}
        {hint && <div style={{ fontSize: 11, color: t.orange, marginTop: 1 }}>{hint}</div>}
      </div>
    </div>
  );
}

function ReplySheet({ open, email, onClose, onSend }) {
  const t = useTheme();
  const [text, setText] = useState('');
  useEffect(() => { if (open && email) { const first = email.from.split(' ')[0]; setText(`Hallo ${first},\n\nvielen Dank für Ihre Nachricht.\n\n\n\nViele Grüße\n${DEFAULT_COMPANY.owner}\n${DEFAULT_COMPANY.name}`); } }, [open, email && email.id]);
  if (!email) return null;
  const quick = ['Gerne — der Termin ist bei uns frei. ✅', 'Leider ist das Equipment in dem Zeitraum schon vergeben.', 'Anbei unser Angebot. Bei Fragen melden Sie sich gerne.'];
  return (
    <Sheet open={open} onClose={onClose} width={560}>
      <div style={{ padding: '4px 26px 24px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <div style={{ fontSize: 21, fontWeight: 700, color: t.text, letterSpacing: -0.4 }}>Antwort</div>
          <Pressable onClick={onClose}><div style={{ fontSize: 14, color: t.textSec, fontWeight: 500 }}>Abbrechen</div></Pressable>
        </div>
        <div style={{ marginTop: 14, background: t.cardAlt, borderRadius: 12, padding: '11px 14px' }}>
          <div style={{ fontSize: 12.5, color: t.textSec }}>An: <span style={{ color: t.text, fontWeight: 600 }}>{email.from} · {email.fromEmail}</span></div>
          <div style={{ fontSize: 12.5, color: t.textSec, marginTop: 4 }}>Betreff: <span style={{ color: t.text, fontWeight: 600 }}>{email.subject.startsWith('Re:') ? email.subject : 'Re: ' + email.subject}</span></div>
        </div>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 12 }}>
          {quick.map((q, i) => (
            <Pressable key={i} onClick={() => setText((prev) => { const sig = `\n\nViele Grüße\n${DEFAULT_COMPANY.owner}\n${DEFAULT_COMPANY.name}`; const base = prev.replace(sig, ''); return base.replace(/\n+$/, '') + '\n\n' + q + sig; })} scale={0.96}>
              <div style={{ padding: '7px 11px', borderRadius: 9, background: t.chip, color: t.text, fontSize: 11.5, fontWeight: 600 }}>{q.length > 32 ? q.slice(0, 30) + '…' : q}</div>
            </Pressable>
          ))}
        </div>
        <textarea value={text} onChange={(e) => setText(e.target.value)} rows={9} style={{ width: '100%', marginTop: 12, padding: 14, borderRadius: 12, border: `1px solid ${t.inputBorder}`, background: t.inputBg, fontSize: 14.5, color: t.text, outline: 'none', fontFamily: 'inherit', lineHeight: 1.55, resize: 'vertical', boxSizing: 'border-box' }}/>
        <Pressable onClick={() => { onSend(email, text); onClose(); }} scale={0.98} style={{ marginTop: 14 }}>
          <div style={{ padding: '14px 0', textAlign: 'center', borderRadius: 12, background: t.accent, color: '#fff', fontSize: 15, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}><Icon d={icons.send} color="#fff" size={16} sw={2}/> Senden</div>
        </Pressable>
      </div>
    </Sheet>
  );
}

function LinkSheet({ open, email, rentals, equipment, onClose, onPick, onUnlink }) {
  const t = useTheme();
  if (!email) return null;
  const suggested = rentals.filter((r) => r.email && email.fromEmail && r.email.toLowerCase() === email.fromEmail.toLowerCase());
  const ordered = [...suggested, ...rentals.filter((r) => !suggested.includes(r))];
  return (
    <Sheet open={open} onClose={onClose} width={500}>
      <div style={{ padding: '4px 26px 24px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <div><div style={{ fontSize: 21, fontWeight: 700, color: t.text, letterSpacing: -0.4 }}>Mit Mieter verknüpfen</div><div style={{ fontSize: 12.5, color: t.textSec, marginTop: 3 }}>E-Mail einem Mietvertrag zuordnen.</div></div>
          <Pressable onClick={onClose}><div style={{ fontSize: 14, color: t.textSec, fontWeight: 500 }}>Fertig</div></Pressable>
        </div>
        {email.linkedRentalId && <Pressable onClick={() => { onUnlink(email); onClose(); }} scale={0.98} style={{ marginTop: 14 }}><div style={{ padding: '11px 0', textAlign: 'center', borderRadius: 10, background: t.redSoft, color: t.red, fontSize: 13, fontWeight: 600 }}>Verknüpfung aufheben</div></Pressable>}
        <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
          {ordered.map((r) => {
            const eq = equipment.find((e) => e.id === r.equipmentId);
            const isSug = suggested.includes(r);
            const isCur = email.linkedRentalId === r.id;
            return (
              <Pressable key={r.id} onClick={() => { onPick(email, r); onClose(); }} scale={0.98}>
                <div style={{ background: t.card, borderRadius: 12, padding: '11px 13px', display: 'flex', alignItems: 'center', gap: 11, border: isCur ? `1.5px solid ${t.accent}` : (isSug ? `1px solid ${t.green}55` : `0.5px solid ${t.sep}`) }}>
                  <Avatar name={r.tenantName} size={36}/>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}><div style={{ fontSize: 14, fontWeight: 600, color: t.text }}>{r.tenantName}</div>{isSug && <span style={{ fontSize: 9, fontWeight: 700, color: t.green, background: t.greenSoft, padding: '1px 6px', borderRadius: 100 }}>passt</span>}</div>
                    <div style={{ fontSize: 11.5, color: t.textSec, marginTop: 1 }}>{eq ? eq.name : r.equipmentName} · {fmtRange(r.start, r.end)}</div>
                  </div>
                  <StatusPill status={r.status}/>
                </div>
              </Pressable>
            );
          })}
        </div>
      </div>
    </Sheet>
  );
}

Object.assign(window, { ScreenInbox, matchEquipmentId, withParsed });