// relay-video-modals.jsx — Reply / Forward / Label modals with animatable states.

const RM = window;

// ── Template dropdown options ────────────────────────────────────────────────
const TEMPLATES = ['Order received — confirm ship date', 'Request for quote', 'Invoice follow-up', 'Out of stock notice'];

function TemplateMenu({ hover = 0 }) {
  const T = RM.T;
  return (
    <div style={{ marginTop: 4, border: `1px solid ${T.rule}`, borderRadius: 10, overflow: 'hidden', boxShadow: '0 16px 40px -12px rgba(0,0,0,0.25)', background: '#fff' }}>
      {TEMPLATES.map((t, i) => (
        <div key={t} style={{ padding: '11px 14px', fontSize: 14.5, background: i === hover ? 'rgba(18,100,163,0.10)' : '#fff', color: T.ink, fontWeight: i === hover ? 700 : 500 }}>{t}</div>
      ))}
    </div>
  );
}

// ── Reply modal ──────────────────────────────────────────────────────────────
// phase: 'idle' | 'menuOpen' | 'filled'
function ReplyModal({ phase = 'idle', caret = false }) {
  const T = RM.T;
  const body = phase === 'filled'
    ? (<React.Fragment>Hi Procurement team,<br /><br />Thanks for PO #PO-4821 — we’ve received it and confirm all items are in stock. Expected ship date is <b>June 4</b>. We’ll share tracking once dispatched from our Berlin DC.<br /><br />Best regards,<br />Northwind Operations{caret && <span style={{ width: 1.5, height: 17, background: T.ink, marginLeft: 1, display: 'inline-block', verticalAlign: 'middle' }} />}</React.Fragment>)
    : (<span style={{ color: T.inkMute }}>Write a reply…</span>);
  return (
    <RM.ModalShell title="Reply" width={640}>
      <div style={{ padding: '0 24px' }}>
        <RM.Field label="To"><RM.Input value="procurement@meridiansystems.com" /></RM.Field>
        <RM.Field label="Subject"><RM.Input value="Re: Purchase Order #PO-4821 — Hardware & Licenses" /></RM.Field>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: phase === 'menuOpen' ? 4 : 16, position: 'relative' }}>
          <div style={{ fontSize: 15, fontWeight: 800, color: T.ink, whiteSpace: 'nowrap', flexShrink: 0 }}>Quick Templates</div>
          <div id="tpl-trigger" style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '9px 14px', border: `1.5px solid ${phase === 'menuOpen' ? T.blueFocus : T.rule}`, borderRadius: 9, fontSize: 14.5, color: phase === 'filled' ? T.ink : T.inkMute, width: 280, flexShrink: 0, justifyContent: 'space-between', boxShadow: phase === 'menuOpen' ? `0 0 0 3px rgba(29,111,184,0.18)` : 'none' }}>
            {phase === 'filled' ? 'Order received' : 'Insert template'} <span>▾</span>
          </div>
        </div>
        {phase === 'menuOpen' && (
          <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 14 }}>
            <div style={{ width: 300 }}><TemplateMenu hover={0} /></div>
          </div>
        )}
        <RM.Field label="Message">
          <div style={{ border: `1px solid ${T.rule}`, borderRadius: 9, padding: '14px', fontSize: 15.5, color: T.ink, lineHeight: 1.55, minHeight: 150 }}>{body}</div>
        </RM.Field>
      </div>
      <div style={{ height: 1, background: T.rule }} />
      <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 12, padding: '16px 24px 18px' }}>
        <div style={{ padding: '11px 22px', border: `1px solid ${T.rule}`, borderRadius: 9, fontSize: 15, fontWeight: 700, color: T.ink }}>Cancel</div>
        <div id="reply-send" style={{ padding: '11px 28px', background: T.green, color: '#fff', borderRadius: 9, fontSize: 15, fontWeight: 800, boxShadow: '0 4px 14px rgba(1,122,90,0.3)' }}>Send</div>
      </div>
    </RM.ModalShell>
  );
}

// ── Forward modal ────────────────────────────────────────────────────────────
// typed: number of chars of the "to" address shown; caret bool
function ForwardModalV({ typed = 999, caret = false }) {
  const T = RM.T;
  const full = 'daniel.brookes@northwind.com';
  const shown = full.slice(0, typed);
  return (
    <RM.ModalShell title="Forward" width={640}>
      <div style={{ padding: '0 24px' }}>
        <RM.Field label="To"><RM.Input value={shown} focus caret={caret} placeholder="Add recipient…" /></RM.Field>
        <RM.Field label="Subject"><RM.Input value="Fwd: Purchase Order #PO-4821 — Hardware & Licenses" /></RM.Field>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
          <div style={{ fontSize: 15, fontWeight: 800, color: T.ink, whiteSpace: 'nowrap', flexShrink: 0 }}>Quick Templates</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '9px 14px', border: `1px solid ${T.rule}`, borderRadius: 9, fontSize: 14.5, color: T.inkMute, width: 200, flexShrink: 0, justifyContent: 'space-between' }}>Insert template <span>▾</span></div>
        </div>
        <RM.Field label="Message">
          <div style={{ border: `1px solid ${T.rule}`, borderRadius: 9, padding: '14px', fontSize: 15.5, color: T.ink, lineHeight: 1.55, minHeight: 130 }}>
            Hi Daniel,<br /><br />New PO from Meridian Systems ($55,590, Net 30). Can you check stock on the R760s and confirm a ship date? Forwarding the full order.<br /><br />Thanks 🙌
          </div>
        </RM.Field>
      </div>
      <div style={{ height: 1, background: T.rule }} />
      <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 12, padding: '16px 24px 18px' }}>
        <div style={{ padding: '11px 22px', border: `1px solid ${T.rule}`, borderRadius: 9, fontSize: 15, fontWeight: 700, color: T.ink }}>Cancel</div>
        <div id="fwd-send" style={{ padding: '11px 28px', background: T.green, color: '#fff', borderRadius: 9, fontSize: 15, fontWeight: 800, boxShadow: '0 4px 14px rgba(1,122,90,0.3)' }}>Send</div>
      </div>
    </RM.ModalShell>
  );
}

// ── Label / Move modal ───────────────────────────────────────────────────────
// open: dropdown open?  picked: 'Important' selected into trigger?
function LabelModalV({ open = false, picked = false }) {
  const T = RM.T;
  const labels = ['Inbox', 'Starred', 'Important', 'Primary (Personal)', 'Promotions', 'Social', 'Updates', 'Forums'];
  return (
    <RM.ModalShell title="Label / Move" width={640}>
      <div style={{ padding: '0 24px 8px' }}>
        <div style={{ fontSize: 15, fontWeight: 800, color: T.ink, marginBottom: 9 }}>Select a label</div>
        <div id="label-trigger" style={{ border: `1.5px solid ${open || picked ? T.blueFocus : T.rule}`, borderRadius: 9, padding: '12px 14px', fontSize: 15.5, color: picked ? T.ink : T.inkMute, fontWeight: picked ? 700 : 400, display: 'flex', justifyContent: 'space-between', alignItems: 'center', boxShadow: open || picked ? `0 0 0 3px rgba(29,111,184,0.18)` : 'none' }}>
          {picked ? (<span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}><span style={{ width: 9, height: 9, borderRadius: 2, background: '#f59e0b' }} /> Important</span>) : 'Choose label…'} <span>▾</span>
        </div>
        {open && (
          <div style={{ marginTop: 4, border: `1px solid ${T.rule}`, borderRadius: 10, overflow: 'hidden', boxShadow: '0 16px 40px -12px rgba(0,0,0,0.25)' }}>
            {labels.map((l, i) => (
              <div key={l} style={{ padding: '11px 16px', fontSize: 16, background: i === 0 ? T.selBlue : l === 'Important' ? 'rgba(18,100,163,0.12)' : '#fff', color: i === 0 ? '#fff' : T.ink, fontWeight: l === 'Important' ? 700 : 500 }}>{l}</div>
            ))}
          </div>
        )}
      </div>
      <div style={{ height: 1, background: T.rule, marginTop: 8 }} />
      <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 12, padding: '16px 24px 18px' }}>
        <div style={{ padding: '11px 22px', border: `1px solid ${T.rule}`, borderRadius: 9, fontSize: 15, fontWeight: 700, color: T.ink }}>Cancel</div>
        <div id="label-apply" style={{ padding: '11px 28px', background: T.green, color: '#fff', borderRadius: 9, fontSize: 15, fontWeight: 800, boxShadow: '0 4px 14px rgba(1,122,90,0.3)' }}>Apply</div>
      </div>
    </RM.ModalShell>
  );
}

Object.assign(window, { ReplyModal, ForwardModalV, LabelModalV });