// ExportCard.jsx — modal "visual receipt" the user gets when they save/share a moment.
// A composed card, not a screenshot. Heavily editorial.

function ExportCard({ open, onClose, mode, trackName, bpm, keyEst, rmsDb }) {
  if (!open) return null;
  const truths = {
    mirror:  ['interpreted', 'Interpreted'],
    sand:    ['modeled',     'Modeled'],
    oil:     ['interpreted', 'Interpreted'],
    laser:   ['measured',    'Measured'],
    pyramid: ['modeled',     'Int / Mod'],
    signal:  ['measured',    'Measured'],
  };
  const [truthClass, truthLabel] = truths[mode];
  const titles = {
    mirror:  'The living body',
    sand:    'Cymatic field',
    oil:     'Liquid pressure',
    laser:   'Oscilloscope',
    pyramid: 'Architecture',
    signal:  'The proof layer',
  };
  const now = new Date();
  const stamp = now.toISOString().replace(/[:T]/g,'-').slice(0,16);

  return (
    <div className="mm-modal" onClick={onClose}>
      <div className="mm-modal__panel" onClick={e => e.stopPropagation()}>
        <header className="mm-modal__head">
          <span className="mm-label">Mirror relic</span>
          <button className="mm-btn mm-btn--alt" onClick={onClose}>Close</button>
        </header>
        <div className="mm-receipt">
          <div className="mm-receipt__art">
            <div className="mm-receipt__disc" />
          </div>
          <div className="mm-receipt__body">
            <div className="mm-label">{titles[mode]}</div>
            <div className="mm-receipt__title">{titles[mode]}</div>
            <div className="mm-receipt__track">{trackName || 'Untitled signal'}</div>
            <dl className="mm-receipt__meta">
              <div><dt>RMS</dt><dd>{rmsDb ? rmsDb.toFixed(1) + ' dBFS' : '—'}</dd></div>
              <div><dt>Pulse</dt><dd>{bpm ? Math.round(bpm) + ' BPM est.' : '—'}</dd></div>
              <div><dt>Key</dt><dd>{keyEst && keyEst !== '—' ? keyEst + ' est.' : '—'}</dd></div>
              <div><dt>Captured</dt><dd>{stamp}</dd></div>
            </dl>
            <div className={"mm-truth mm-truth--" + truthClass}>{truthLabel}</div>
            <p className="mm-receipt__quote">It was always there.</p>
          </div>
        </div>
        <footer className="mm-modal__foot">
          <span className="mm-label">MUSICMIRROR · v1</span>
          <span className="mm-btn-row">
            <button className="mm-btn mm-btn--alt" disabled title="Prototype-only in this build">PNG export soon</button>
            <button className="mm-btn mm-btn--active" disabled title="Prototype-only in this build">Share link soon</button>
          </span>
        </footer>
      </div>
    </div>
  );
}

Object.assign(window, { ExportCard });