// Global UI infra: confirm dialog, action-feedback hub, cross-portal nav.
// Exposes window.medlink = { confirm, toast, navigate, openDetail }

const ConfirmDialog = ({ open, title, message, confirmLabel = "Bestätigen", cancelLabel = "Abbrechen", danger = false, onConfirm, onCancel }) => {
  if (!open) return null;
  return (
    <div className="na-backdrop" onClick={onCancel}>
      <div className="modal" style={{ width: 420, maxWidth: "94vw", background: "var(--bg-raised)", border: "1px solid var(--border)", borderRadius: "var(--r-lg)", boxShadow: "0 24px 60px oklch(0% 0 0 / 0.25)" }} onClick={(e) => e.stopPropagation()}>
        <div style={{ padding: "18px 20px 10px" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ width: 36, height: 36, borderRadius: 10, background: danger ? "oklch(94% 0.04 25)" : "var(--accent-tint)", color: danger ? "var(--danger)" : "var(--accent)", display: "grid", placeItems: "center" }}>
              <Icon name={danger ? "warning" : "check"} size={16} />
            </span>
            <h3 style={{ margin: 0, fontSize: 16, fontWeight: 600 }}>{title}</h3>
          </div>
          <div style={{ marginTop: 12, fontSize: 13, lineHeight: 1.55, color: "var(--fg-muted)" }}>{message}</div>
        </div>
        <div style={{ padding: "12px 20px", borderTop: "1px solid var(--border)", display: "flex", justifyContent: "flex-end", gap: 8 }}>
          <button className="btn" onClick={onCancel}>{cancelLabel}</button>
          <button className={`btn ${danger ? "" : "primary"}`} style={danger ? { background: "var(--danger)", color: "white", borderColor: "var(--danger)" } : {}} onClick={onConfirm}>{confirmLabel}</button>
        </div>
      </div>
    </div>
  );
};

const DetailSheet = ({ open, onClose, title, subtitle, children, footer }) => {
  if (!open) return null;
  return (
    <div className="na-backdrop" onClick={onClose}>
      <div className="modal detail-sheet" style={{ width: 640, maxWidth: "96vw", maxHeight: "90vh", background: "var(--bg-raised)", border: "1px solid var(--border)", borderRadius: "var(--r-lg)", boxShadow: "0 24px 60px oklch(0% 0 0 / 0.25)", display: "flex", flexDirection: "column", overflow: "hidden" }} onClick={(e) => e.stopPropagation()}>
        <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--border)", display: "flex", alignItems: "center", gap: 12 }}>
          <div style={{ flex: 1, minWidth: 0 }}>
            <h3 style={{ margin: 0, fontSize: 16, fontWeight: 600, letterSpacing: "-0.01em" }}>{title}</h3>
            {subtitle && <div style={{ fontSize: 12, color: "var(--fg-subtle)", marginTop: 2 }}>{subtitle}</div>}
          </div>
          <button className="btn icon" onClick={onClose} aria-label="Schließen"><Icon name="x" size={14} /></button>
        </div>
        <div style={{ flex: 1, overflow: "auto", padding: "16px 20px" }}>{children}</div>
        {footer && <div style={{ padding: "12px 20px", borderTop: "1px solid var(--border)", display: "flex", justifyContent: "flex-end", gap: 8, background: "var(--bg-sunken)" }}>{footer}</div>}
      </div>
    </div>
  );
};

// Hook to wire buttons: useActions() returns helpers
const useActions = (toast) => {
  const [confirmCfg, setConfirmCfg] = React.useState(null);
  const [detailCfg, setDetailCfg] = React.useState(null);

  const api = React.useMemo(() => ({
    toast: (msg) => toast?.(msg),
    confirm: ({ title, message, confirmLabel, cancelLabel, danger, onConfirm }) => {
      setConfirmCfg({ open: true, title, message, confirmLabel, cancelLabel, danger,
        onConfirm: () => { setConfirmCfg(null); onConfirm?.(); },
        onCancel: () => setConfirmCfg(null) });
    },
    detail: ({ title, subtitle, body, footer }) => {
      setDetailCfg({ open: true, title, subtitle, body, footer: (close) => footer?.(close) });
    },
    closeDetail: () => setDetailCfg(null),
  }), [toast]);

  const ui = (
    <>
      <ConfirmDialog {...(confirmCfg || { open: false })} />
      {detailCfg && (
        <DetailSheet
          open
          onClose={() => setDetailCfg(null)}
          title={detailCfg.title}
          subtitle={detailCfg.subtitle}
          footer={detailCfg.footer?.(() => setDetailCfg(null))}
        >
          {detailCfg.body}
        </DetailSheet>
      )}
    </>
  );
  return [api, ui];
};

Object.assign(window, { ConfirmDialog, DetailSheet, useActions });