/* ============================================================
   Media SOP — Telegram notification mock (panel + toasts)
   ============================================================ */

function TelegramPanel({ notifications, onClose }) {
  return (
    <>
      <div className="modal-scrim" style={{ background: "oklch(0.2 0.03 288 / 0.25)", display: "block", zIndex: 89 }} onClick={onClose} />
      <div className="tg-panel">
        <div className="tg-h">
          <div className="tg-bot" style={{ width: 34, height: 34, borderRadius: 10 }}><Icon name="send" size={17} /></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 700, fontSize: 14.5 }}>Media SOP Bot</div>
            <div className="muted" style={{ fontSize: 12 }}>Group: Media Team · {notifications.length} thông báo</div>
          </div>
          <button className="icon-btn" onClick={onClose}><Icon name="x" size={18} /></button>
        </div>
        <div className="tg-body">
          {notifications.length === 0 && (
            <div style={{ textAlign: "center", padding: "40px 16px", color: "var(--ink-3)" }}>
              <div className="tg-bot" style={{ width: 44, height: 44, borderRadius: 13, margin: "0 auto 12px" }}><Icon name="send" size={22} /></div>
              <div style={{ fontSize: 13.5, fontWeight: 600 }}>Chưa có thông báo</div>
              <div style={{ fontSize: 12.5, marginTop: 4 }}>Tạo order hoặc cập nhật trạng thái để bot gửi thông báo.</div>
            </div>
          )}
          {notifications.map((n, i) => (
            <div key={n.id} className="tg-msg" style={{ animationDelay: (i * 0.03) + "s" }}>
              <div className="tg-from"><div className="tg-bot"><Icon name={n.icon || "send"} size={13} /></div>{n.from || "Media SOP Bot"}</div>
              <div className="tg-text" dangerouslySetInnerHTML={{ __html: n.text }} />
              <div className="tg-time">{n.time}</div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

function Toasts({ toasts }) {
  return (
    <div className="toast-wrap">
      {toasts.map(t => (
        <div key={t.id} className="toast">
          <div className="tg-bot"><Icon name={t.icon || "send"} size={15} /></div>
          <div className="tt" dangerouslySetInnerHTML={{ __html: t.text }} />
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { TelegramPanel, Toasts });