/* SER-OS — Modal overlay (Draft Quotation Created confirmation) */

function Modal({ open, onClose, title, children, primary, secondary, icon, wide }) {
  if (!open) return null;
  return (
    <div
      onClick={onClose}
      style={{
        position: "fixed", inset: 0, background: "rgba(15,23,42,0.45)",
        display: "flex", alignItems: "center", justifyContent: "center",
        zIndex: 100, padding: 24,
        animation: "fadeIn 200ms ease-out",
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          width: "100%", maxWidth: wide ? 680 : 480, background: "#FFFFFF",
          borderRadius: 12,
          maxHeight: "calc(100vh - 48px)",
          boxShadow: "0 20px 25px -5px rgba(0,0,0,0.10), 0 10px 10px -5px rgba(0,0,0,0.04)",
          display: "flex", flexDirection: "column",
        }}
      >
        <div style={{ padding: "24px 28px 0", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            {icon}
            <h2 style={{ font: "500 22px/30px Inter", letterSpacing: "-0.449px", color: "var(--fg-primary)", margin: 0 }}>
              {title}
            </h2>
          </div>
          <button onClick={onClose} style={{
            background: "transparent", border: "none", padding: 6, borderRadius: 6,
            cursor: "pointer", color: "var(--fg-secondary)",
          }}><SerIcons.Close size={24} /></button>
        </div>

        <div style={{
          padding: "20px 28px",
          overflowY: "auto",
          display: "flex", flexDirection: "column", gap: 18,
          flex: 1, minHeight: 0,
        }}>
          {children}
        </div>

        <div style={{ padding: "0 28px 24px", display: "flex", gap: 12, justifyContent: "flex-end" }}>
          {secondary && (
            <Button variant="secondary" size="md" onClick={secondary.onClick}>{secondary.label}</Button>
          )}
          {primary && (
            <Button
              variant="primary-navy" size="md"
              iconRight={primary.iconRight === false ? null : (primary.iconRight || <SerIcons.Arrow size={18} />)}
              icon={primary.icon}
              disabled={primary.disabled}
              onClick={primary.onClick}
            >{primary.label}</Button>
          )}
        </div>
      </div>
      <style>{`@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }`}</style>
    </div>
  );
}

function DetailGrid({ rows }) {
  return (
    <div style={{
      background: "#E2E8F0", borderRadius: 8, padding: 16,
      display: "flex", flexDirection: "column", gap: 10,
    }}>
      {rows.map((r, i) => (
        <div key={i} style={{ display: "flex", justifyContent: "space-between", fontSize: 14 }}>
          <span style={{ color: "var(--fg-secondary)" }}>{r.label}</span>
          <span style={{ color: "var(--fg-primary)", fontWeight: 500 }}>{r.value}</span>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { Modal, DetailGrid });