// Transaction Detail Panel — slide-in side sheet with receipt preview.
function TransactionDetail({ txn, house, onClose }) {
  return (
    <>
      <div className="scrim" style={{ background: 'rgba(10,10,8,0.15)', backdropFilter: 'none' }} onClick={onClose}/>
      <div className="side-panel">
        <div className="modal-header">
          <h2>Transaction</h2>
          <button className="icon-btn" onClick={onClose} style={{ border: 0, background: 'transparent' }}>{Icon.x}</button>
        </div>

        <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 20, overflow: 'auto' }}>
          <div>
            <div className="muted small">{txn.type === 'income' ? 'Income' : 'Expense'} · {fmtDate(txn.date, { year: true })}</div>
            <div className="serif" style={{ fontSize: 34, letterSpacing: '-0.02em', marginTop: 4, color: txn.type === 'income' ? 'var(--income)' : 'var(--text)', fontVariantNumeric: 'tabular-nums' }}>
              {txn.type === 'income' ? '+' : '-'}{fmt$(txn.amount)}
            </div>
            <div style={{ marginTop: 8, fontSize: 15 }}>{txn.description}</div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '96px 1fr', rowGap: 12, alignItems: 'center', fontSize: 13 }}>
            <div className="muted">House</div>
            <div className="row"><span className="dot" style={{ background: house.accentColor }}/>{house.name}</div>
            <div className="muted">Category</div>
            <div><span className="chip">{txn.category}</span></div>
            <div className="muted">Source</div>
            <div><SourceTag source={txn.source || 'manual'} size="md"/></div>
            <div className="muted">Date</div>
            <div>{fmtDate(txn.date, { year: true })}</div>
          </div>

          {txn.receiptUrl && (
            <div>
              <div className="muted small" style={{ marginBottom: 8 }}>Receipt</div>
              <div style={{ borderRadius: 10, overflow: 'hidden', border: '1px solid var(--border)' }}>
                <div style={{
                  aspectRatio: '3/4',
                  background: 'linear-gradient(180deg, #fefcf7 0%, #f8f4ea 100%)',
                  position: 'relative',
                  padding: 32,
                }}>
                  <svg viewBox="0 0 300 400" width="100%" height="100%" style={{ display: 'block' }}>
                    <text x="30" y="50" fontFamily="monospace" fontSize="14" fill="#3a3a36" fontWeight="600">HARBOR SUPPLY CO.</text>
                    <text x="30" y="70" fontFamily="monospace" fontSize="10" fill="#7a7a76">142 Wharf St · Portland ME</text>
                    <line x1="30" x2="270" y1="90" y2="90" stroke="#c8c4b8" strokeDasharray="3 3"/>
                    <text x="30" y="120" fontFamily="monospace" fontSize="10" fill="#5a5a56">{fmtDate(txn.date, { year: true }).toUpperCase()}</text>
                    <text x="30" y="160" fontFamily="monospace" fontSize="11" fill="#3a3a36">{txn.description}</text>
                    <text x="260" y="160" fontFamily="monospace" fontSize="11" fill="#3a3a36" textAnchor="end">${txn.amount.toFixed(2)}</text>
                    <line x1="30" x2="270" y1="190" y2="190" stroke="#c8c4b8" strokeDasharray="3 3"/>
                    <text x="30" y="220" fontFamily="monospace" fontSize="11" fill="#3a3a36" fontWeight="600">TOTAL</text>
                    <text x="260" y="220" fontFamily="monospace" fontSize="14" fill="#3a3a36" fontWeight="600" textAnchor="end">${txn.amount.toFixed(2)}</text>
                    <text x="150" y="340" fontFamily="monospace" fontSize="9" fill="#9a9a96" textAnchor="middle">THANK YOU</text>
                  </svg>
                </div>
              </div>
            </div>
          )}
        </div>

        <div style={{ padding: '16px 24px', borderTop: '1px solid var(--border)', display: 'flex', justifyContent: 'space-between' }}>
          <button className="btn ghost" style={{ color: 'var(--expense)' }}>Delete</button>
          <div className="row">
            <button className="btn">Edit</button>
            <button className="btn primary">Done</button>
          </div>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { TransactionDetail });