/* OrchEcomm dashboard — utility overlays: NotificationPanel, ConfirmModal, Toasts. */

function NotificationPanel({ open, onClose }) {
  const I = window.OcIcons;
  const groups = window.OcData.notifications;
  const toneMap = { Errors: { c: "var(--color-error)", bg: "var(--color-error-bg)", ic: "X" }, Warnings: { c: "var(--color-warning)", bg: "var(--color-warning-bg)", ic: "Bell" }, Updates: { c: "var(--green-700)", bg: "var(--green-100)", ic: "Sparkles" } };
  return (
    <React.Fragment>
      <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(28,43,45,0.32)", opacity: open ? 1 : 0, pointerEvents: open ? "auto" : "none", transition: "opacity var(--transition-base)", zIndex: "var(--z-overlay)" }} />
      <div style={{ position: "fixed", top: 0, right: 0, bottom: 0, width: 380, maxWidth: "90vw", background: "var(--surface-card)", boxShadow: "var(--shadow-lg)", transform: open ? "translateX(0)" : "translateX(100%)", transition: "transform var(--transition-slow)", zIndex: "var(--z-modal)", display: "flex", flexDirection: "column" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "16px 20px", borderBottom: "1px solid var(--border-default)" }}>
          <h2 style={{ font: "var(--type-section)", color: "var(--text-primary)", flex: 1 }}>Notifications</h2>
          <a href="#" onClick={(e) => { e.preventDefault(); onClose(); }} style={{ font: "var(--type-body)", color: "var(--text-link)", fontWeight: 500 }}>Mark all read</a>
          <button onClick={onClose} style={{ width: 30, height: 30, display: "inline-flex", alignItems: "center", justifyContent: "center", border: "none", background: "transparent", color: "var(--text-secondary)", cursor: "pointer", borderRadius: "var(--radius-sm)" }}><I.X size={18} /></button>
        </div>
        <div style={{ flex: 1, overflowY: "auto", padding: "8px 16px 16px" }}>
          {Object.entries(groups).map(([label, items]) => {
            const t = toneMap[label];
            return <div key={label} style={{ marginTop: 12 }}>
              <div style={{ font: "var(--type-eyebrow)", textTransform: "uppercase", letterSpacing: "var(--tracking-caps)", color: "var(--text-secondary)", padding: "0 4px 6px" }}>{label}</div>
              {items.map((n, i) => (
                <div key={i} style={{ display: "flex", gap: 11, padding: "11px 8px", borderRadius: "var(--radius-sm)" }}>
                  <span style={{ width: 30, height: 30, borderRadius: "var(--radius-sm)", background: t.bg, color: t.c, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>{React.createElement(I[t.ic], { size: 15 })}</span>
                  <div style={{ minWidth: 0, flex: 1 }}>
                    <div style={{ font: "var(--type-card-title)", color: "var(--text-primary)" }}>{n.title}</div>
                    <div style={{ font: "var(--type-caption)", color: "var(--text-secondary)", marginTop: 2, lineHeight: "var(--leading-normal)" }}>{n.desc}</div>
                    <div style={{ font: "var(--type-caption)", color: "var(--text-muted)", marginTop: 3 }}>{n.time}</div>
                  </div>
                </div>
              ))}
            </div>;
          })}
        </div>
      </div>
    </React.Fragment>
  );
}

function ConfirmModal({ open, title, body, confirmLabel = "Confirm", onConfirm, onCancel }) {
  const I = window.OcIcons;
  const { Button } = window.OrchEcommDesignSystem_091be6;
  if (!open) return null;
  return (
    <div onClick={onCancel} style={{ position: "fixed", inset: 0, background: "rgba(28,43,45,0.42)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: "var(--z-modal)", padding: 24 }}>
      <div onClick={(e) => e.stopPropagation()} style={{ width: 420, maxWidth: "100%", background: "var(--surface-card)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-lg)", padding: 24 }}>
        <div style={{ display: "flex", gap: 14 }}>
          <span style={{ width: 40, height: 40, borderRadius: "var(--radius-md)", background: "var(--color-error-bg)", color: "var(--color-error)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><I.Logout size={20} /></span>
          <div>
            <h2 style={{ font: "var(--type-section)", color: "var(--text-primary)" }}>{title}</h2>
            <p style={{ font: "var(--type-body)", color: "var(--text-secondary)", marginTop: 6, lineHeight: "var(--leading-normal)" }}>{body}</p>
          </div>
        </div>
        <div style={{ display: "flex", justifyContent: "flex-end", gap: 10, marginTop: 22 }}>
          <Button variant="ghost" onClick={onCancel}>Cancel</Button>
          <Button variant="danger" onClick={onConfirm}>{confirmLabel}</Button>
        </div>
      </div>
    </div>
  );
}

function ToastStack({ toasts, onDismiss }) {
  const I = window.OcIcons;
  return (
    <div style={{ position: "fixed", bottom: 20, right: 20, display: "flex", flexDirection: "column", gap: 10, zIndex: "var(--z-toast)" }}>
      {toasts.map((t) => {
        const ok = t.type !== "error";
        return (
          <div key={t.id} style={{ display: "flex", alignItems: "center", gap: 11, minWidth: 280, maxWidth: 380, padding: "12px 14px", background: "var(--surface-card)", border: "1px solid var(--border-default)", borderLeft: `3px solid ${ok ? "var(--color-success)" : "var(--color-error)"}`, borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-lg)", animation: "ocd-toast-in 0.3s var(--ease-out)" }}>
            <span style={{ width: 24, height: 24, borderRadius: "50%", background: ok ? "var(--color-success-bg)" : "var(--color-error-bg)", color: ok ? "var(--color-success)" : "var(--color-error)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>{ok ? <I.Check size={15} /> : <I.X size={15} />}</span>
            <span style={{ flex: 1, font: "var(--type-body)", color: "var(--text-primary)", fontWeight: 500 }}>{t.msg}</span>
            <button onClick={() => onDismiss(t.id)} style={{ border: "none", background: "transparent", color: "var(--text-muted)", cursor: "pointer", display: "inline-flex" }}><I.X size={15} /></button>
          </div>
        );
      })}
      <style>{`@keyframes ocd-toast-in{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}`}</style>
    </div>
  );
}

window.NotificationPanel = NotificationPanel;
window.ConfirmModal = ConfirmModal;
window.ToastStack = ToastStack;