import { PopupBox } from 'tvu-react-pilot'

// PopupBox is the DS's OVERLAY MODAL SHELL (Vue <Teleport to="body"> + backdrop).
// Per the design rules, it is for LARGE CUSTOM-CONTENT modals (settings, forms,
// wizards) — NOT confirmations/alerts (those use Notification form="dialog").
// It renders in a single-viewport card via cfg.overrides.PopupBox.
export const StreamSettings = () => (
  <PopupBox
    theme="dark"
    visible
    title="Stream settings"
    width={520}
    closable
    showFooter
    cancelText="Cancel"
    confirmText="Save changes"
  >
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14, padding: '4px 0' }}>
      <label style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 13, color: 'var(--text-2)' }}>
        Stream name
        <input defaultValue="Studio A — Main" style={{ padding: '8px 10px', borderRadius: 6, border: '1px solid var(--line-border)', background: 'var(--bg-layer3)', color: 'var(--text-body)' }} />
      </label>
      <label style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 13, color: 'var(--text-2)' }}>
        Protocol
        <input defaultValue="SRT · 8.2 Mbps" style={{ padding: '8px 10px', borderRadius: 6, border: '1px solid var(--line-border)', background: 'var(--bg-layer3)', color: 'var(--text-body)' }} />
      </label>
    </div>
  </PopupBox>
)

export const AddSourceWizard = () => (
  <PopupBox
    theme="dark"
    visible
    title="Add source — step 1 of 3"
    width={560}
    closable
    showFooter
    cancelText="Back"
    confirmText="Next"
  >
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10, padding: '4px 0', color: 'var(--text-body)' }}>
      <p style={{ margin: 0 }}>Choose an input source to add to this channel's pool.</p>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        <div style={{ padding: 12, borderRadius: 8, border: '1px solid var(--brand)', background: 'var(--bg-layer3)' }}>SRT listener</div>
        <div style={{ padding: 12, borderRadius: 8, border: '1px solid var(--line-border)', background: 'var(--bg-layer3)' }}>RTMP push</div>
      </div>
    </div>
  </PopupBox>
)