// relay-video-scenes.jsx — animatable Relay UI pieces for the demo video.
// Depends on window.T and shared chrome from relay-shared.jsx.

const RS = window;

// ── Email message with animatable states ─────────────────────────────────────
function VEmailMessage({ showNew = true, replied = false, labelChip = null, dim = false }) {
  const T = RS.T;
  const ActionBtn = ({ children, hot }) => (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 7, padding: '8px 14px',
      border: `1px solid ${hot ? 'rgba(255,255,255,0.5)' : 'rgba(255,255,255,0.22)'}`,
      borderRadius: 7, background: hot ? 'rgba(255,255,255,0.12)' : 'rgba(255,255,255,0.04)',
      color: T.panelHead, fontSize: 14, fontWeight: 600,
    }}>{children}</div>
  );
  return (
    <div style={{ display: 'flex', gap: 14, padding: '4px 28px', position: 'relative', opacity: dim ? 0.5 : 1 }}>
      {showNew && <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 4, background: T.relayBlue }} />}
      <RS.RelayIcon size={40} radius={9} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <span style={{ fontWeight: 800, fontSize: 15.5, color: T.panelHead }}>Relay</span>
          <span style={{ fontSize: 11, color: T.panelMute, fontWeight: 700, padding: '1px 5px', background: 'rgba(255,255,255,0.10)', borderRadius: 3 }}>APP</span>
          <span style={{ fontSize: 12.5, color: T.panelMute, whiteSpace: 'nowrap' }}>10:49 AM</span>
          {showNew && <span style={{ fontSize: 11, fontWeight: 700, color: '#fff', padding: '2px 8px', background: T.relayBlue, borderRadius: 999 }}>NEW</span>}
          {labelChip && (
            <span style={{ fontSize: 11.5, fontWeight: 700, color: '#b45309', padding: '2px 9px', background: '#fef3c7', borderRadius: 999, display: 'inline-flex', alignItems: 'center', gap: 5 }}>
              <span style={{ width: 7, height: 7, borderRadius: 2, background: '#f59e0b' }} /> {labelChip}
            </span>
          )}
        </div>
        <div style={{ marginTop: 6, fontSize: 14.5, color: T.panelText, lineHeight: 1.5 }}>
          <div><b style={{ color: T.panelHead }}>From:</b> Meridian Systems &lt;<span style={{ color: T.link }}>procurement@meridiansystems.com</span>&gt;</div>
          <div style={{ fontWeight: 800, color: T.panelHead, fontSize: 16, marginTop: 7 }}>Purchase Order #PO-4821 — Hardware &amp; Licenses</div>
          <div style={{ marginTop: 8 }}>Hi Northwind team,</div>
          <div style={{ marginTop: 10 }}>Please find our purchase order below. Kindly confirm availability and the expected ship date.</div>
          <div style={{ marginTop: 12, border: `1px solid ${T.divider}`, borderRadius: 8, overflow: 'hidden', maxWidth: 540 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 56px 96px', background: 'rgba(255,255,255,0.05)', padding: '7px 12px', fontSize: 12.5, fontWeight: 700, color: T.panelMute }}>
              <span>Item</span><span style={{ textAlign: 'center' }}>Qty</span><span style={{ textAlign: 'right' }}>Total</span>
            </div>
            {[['Dell PowerEdge R760 server', '4', '$38,400'], ['Cloud backup license (3 yr)', '25', '$11,250'], ['UniFi 48-port switch', '6', '$5,940']].map((r, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 56px 96px', padding: '8px 12px', fontSize: 13.5, color: T.panelText, borderTop: `1px solid ${T.divider}` }}>
                <span>{r[0]}</span><span style={{ textAlign: 'center' }}>{r[1]}</span><span style={{ textAlign: 'right', fontWeight: 600, color: T.panelHead }}>{r[2]}</span>
              </div>
            ))}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 96px', padding: '8px 12px', fontSize: 13.5, fontWeight: 800, color: T.panelHead, borderTop: `1px solid ${T.divider}`, background: 'rgba(255,255,255,0.03)' }}>
              <span>Total (ex. VAT)</span><span style={{ textAlign: 'right' }}>$55,590</span>
            </div>
          </div>
          <div style={{ marginTop: 12, color: T.panelMute }}>Best regards,<br />Procurement · Meridian Systems</div>
        </div>
        <div id="action-row" style={{ display: 'flex', gap: 9, marginTop: 16 }}>
          <ActionBtn hot><span style={{ color: '#e8b339' }}>⚡</span> Actions</ActionBtn>
          <ActionBtn><span style={{ fontSize: 11 }}>○</span> Mark as Read</ActionBtn>
          <ActionBtn>↗ Open</ActionBtn>
        </div>
      </div>
    </div>
  );
}

// ── A sent reply confirmation row (appears after replying) ───────────────────
function VReplySent() {
  const T = RS.T;
  return (
    <div style={{ display: 'flex', gap: 14, padding: '10px 28px 4px' }}>
      <div style={{ width: 40, height: 40, borderRadius: 9, background: 'rgba(1,122,90,0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#3fcf8e" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M9 11l3 3L22 4" /><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" /></svg>
      </div>
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <span style={{ fontWeight: 800, fontSize: 15.5, color: T.panelHead }}>Relay</span>
          <span style={{ fontSize: 11, color: T.panelMute, fontWeight: 700, padding: '1px 5px', background: 'rgba(255,255,255,0.10)', borderRadius: 3 }}>APP</span>
          <span style={{ fontSize: 12.5, color: T.panelMute }}>just now</span>
        </div>
        <div style={{ fontSize: 14.5, color: T.panelText, marginTop: 4 }}>Reply sent to <b style={{ color: T.panelHead }}>procurement@meridiansystems.com</b> using the <b style={{ color: T.panelHead }}>“Order received”</b> template.</div>
      </div>
    </div>
  );
}

// ── Actions popover menu ─────────────────────────────────────────────────────
function ActionsMenu({ hover = -1 }) {
  const T = RS.T;
  const items = [
    { ic: '↩', label: 'Reply' },
    { ic: '↩↩', label: 'Reply All' },
    { ic: '➡', label: 'Forward' },
    { ic: '🏷', label: 'Label / Move' },
    { ic: '○', label: 'Mark as Read' },
  ];
  return (
    <div style={{ width: 230, background: '#fff', borderRadius: 11, overflow: 'hidden', boxShadow: '0 24px 60px -14px rgba(0,0,0,0.5), 0 0 0 1px rgba(20,20,30,0.06)', fontFamily: T.inter, padding: '6px' }}>
      {items.map((it, i) => (
        <div key={it.label} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '10px 12px', borderRadius: 7, fontSize: 15, fontWeight: 600, color: T.ink, background: hover === i ? 'rgba(18,100,163,0.10)' : 'transparent' }}>
          <span style={{ width: 20, textAlign: 'center', fontSize: 14 }}>{it.ic}</span>{it.label}
        </div>
      ))}
    </div>
  );
}

// ── Email Actions modal (centered, with notification-style highlight) ───────
function ActionsModal({ highlight = null }) {
  const T = RS.T;
  const items = [
    { ic: '↩', label: 'Reply', key: 'reply' },
    { ic: '↩↩', label: 'Reply All', key: 'reply-all' },
    { ic: '➡', label: 'Forward', key: 'forward' },
    { ic: '🏷', label: 'Label / Move', key: 'label' },
    { ic: '○', label: 'Mark as Read', key: 'mark-read' },
  ];
  return (
    <div style={{ width: 360, background: '#fff', borderRadius: 14, overflow: 'hidden', boxShadow: '0 36px 80px -18px rgba(0,0,0,0.65), 0 0 0 1px rgba(20,20,30,0.06)', fontFamily: T.inter }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '20px 24px 16px', borderBottom: `1px solid ${T.rule}` }}>
        <RS.RelayIcon size={28} radius={7} />
        <div style={{ fontWeight: 800, fontSize: 17, color: T.ink, flex: 1 }}>Email Actions</div>
        <span style={{ color: T.inkMute, fontSize: 20, lineHeight: 1 }}>×</span>
      </div>
      <div style={{ padding: 8 }}>
        {items.map((it) => {
          const hot = highlight === it.key;
          return (
            <div key={it.label} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '13px 14px', borderRadius: 9, fontSize: 15.5, fontWeight: 600, color: T.ink, background: hot ? 'rgba(47,111,224,0.12)' : 'transparent', border: hot ? '1px solid rgba(47,111,224,0.35)' : '1px solid transparent' }}>
              <span style={{ width: 22, textAlign: 'center', fontSize: 14 }}>{it.ic}</span>{it.label}
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { VEmailMessage, VReplySent, ActionsMenu, ActionsModal });